diagonal rungs are drawing. just need tranches.

src/components/chart/DiagonalBuilder.vue

@@ -4,7 +4,7 @@
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :set-values="setLines" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
-    <span>(Diagonals)</span>
+    <span>{{ endpoints }}</span>
 <!--
     <table>
       <tbody>
@@ -186,10 +186,11 @@ function setModelValue(model, value) {
 
 
 function dirtyLine(a, b) {
-  console.log('dirtyLine', a, b)
-  return a === b ? false :
+  const result = a === b ? false :
       a === null && b !== null || a !== null && b === null ||
       a[0].time !== b[0].time || a[0].price !== b[0].price || a[1].time !== b[1].time || a[1].price !== b[1].price
+  console.log('dirtyLine', result, a, b)
+  return result
 }
 
 

src/components/chart/RungBuilder.vue

@@ -1,14 +1,13 @@
 <template>
   <builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
                  :adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
-    <div style="min-width: 3em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}
-    </div>
+    <div style="min-width: 4em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}</div>
     <div>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
                     :color="color" :base-color="color" min="1"
-                    :disabled="endpoints[0]===null"
+                    :disabled="rungsDisabled"
                     style="width: 4.5em;"
       />
     </div>
@@ -47,7 +46,7 @@ import {
   vectorIsNull,
   vectorIsZero,
   vectorize,
-  vectorMul,
+  vectorMul, vectorNeg,
   vectorSub
 } from "@/vector.js";
 
@@ -107,14 +106,16 @@ const rungs = computed({
     r = Number(r)
     const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
-    // console.log('set rungs', prevR, r, a, b)
+    console.log('set rungs', prevR, r, a, b)
     if ( r > 0 && vectorIsNull(b) ) {
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
         const mid = vectorize(a)
-        a = vectorAdd(mid, -width/2)
-        b = vectorAdd(mid, +width/2)
+        // console.log('stdWidth', width)
+        const halfWidth = vectorDiv(width,2);
+        a = vectorAdd(mid, vectorNeg(halfWidth) )
+        b = vectorAdd(mid, halfWidth)
         setEndpoints(a,b)
       }
       else if (props.mode===1 ) {
@@ -141,6 +142,7 @@ const rungs = computed({
   }
 })
 
+const rungsDisabled = computed(()=>{console.log('rd',endpoints.value); return endpoints.value[0]===null})
 
 const values = computed(()=>{
   let [a, b] = endpoints.value
@@ -166,6 +168,7 @@ const values = computed(()=>{
     }
   }
   props.setValues(result)
+  console.log('values', result)
   return result;
 })
 
@@ -191,6 +194,7 @@ const defaultColor = computeDefaultColor()
 const color = computed({
   get() {return props.builder.color},
   set(v) {
+    console.error('set color', v)
     const maxLightness = 60
     // noinspection JSUnresolvedReference
     const c = new Color(v).hsl()
@@ -246,6 +250,7 @@ function translateOnModel(shape) {
 }
 
 function setModelColor(model) {
+  console.log('setmc', color.value, model.color)
   if (model.color && model.color !== color.value)
     color.value = model.color
 }