diagonal debug

src/components/chart/RungBuilder.vue

@@ -1,8 +1,9 @@
 <template>
   <builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
                  :adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
-    <div style="min-width: 4em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}</div>
-    <div>
+    <div style="min-width: 4em; font-size: larger" :style="colorStyle"
+         class="d-flex flex-column align-self-start ml-2">
+      <span class="w-100 text-center">{{ name }}</span>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
@@ -110,9 +111,9 @@ const rungs = computed({
     if ( r > 0 && vectorIsNull(b) ) {
       // convert single shape to a range
       if (props.mode===0) {
-        const width = props.stdWidth
+        const width = vectorize(props.stdWidth)
         const mid = vectorize(a)
-        // console.log('stdWidth', width)
+        console.log('stdWidth', width)
         const halfWidth = vectorDiv(width,2);
         a = vectorAdd(mid, vectorNeg(halfWidth) )
         b = vectorAdd(mid, halfWidth)
@@ -142,12 +143,13 @@ const rungs = computed({
   }
 })
 
-const rungsDisabled = computed(()=>{console.log('rd',endpoints.value); return endpoints.value[0]===null})
+const rungsDisabled = computed(()=>endpoints.value[0]===null)
 
 const values = computed(()=>{
   let [a, b] = endpoints.value
   a = vectorize(a)
   b = vectorize(b)
+  console.log('computing values', a, b)
   const r = props.builder.rungs
   let result
   if ( !r || vectorIsNull(a) )
@@ -251,14 +253,13 @@ function translateOnModel(shape) {
 
 function setModelColor(model) {
   console.log('setmc', color.value, model.color)
-  if (model.color && model.color !== color.value)
+  if (model.color !== undefined && model.color !== color.value)
     color.value = model.color
 }
 
 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = getModelValue(model);
-      console.log('gotModelValue', model, value)
       if ( !vectorEquals(value, endpoints.value[0]) )
         setEndpoints(value, endpoints.value[1])
       setModelColor(model)