diagonal rungs are drawing. just need tranches.

src/blockchain/wallet.js

@@ -2,8 +2,8 @@ import {BrowserProvider, ethers} from "ethers";
 import {useStore} from "@/store/store";
 import {socket} from "@/socket.js";
 import {contractOrNull, vaultAddress} from "@/blockchain/contract.js";
-import {vaultAbi} from "@/blockchain/abi.js";
 import {SingletonCoroutine, uuid} from "@/misc.js";
+import {vaultAbi} from "@/blockchain/abi.js";
 import {defineStore} from "pinia";
 import {ref} from "vue";
 import {metadataMap} from "@/version.js";

src/charts/chart.js

@@ -157,7 +157,7 @@ export function drawShape(shapeType, ...callbacks) {
 
 export function createShape(shapeType, points, options={}, ...callbacks) {
     drawingCallbacks = null
-    co.drawing = false
+    cancelDrawing()
     options.shape = shapeType.code
     // programatically adds a shape to the chart
     let shapeId

src/charts/shape.js

@@ -212,8 +212,8 @@ export class Shape {
 
     onCreate(points, props) {
         // the user has finished creating all the control points.  drawing mode is exited and the initial shape is created.
-        this.tvPoints = points
-        this.tvProps = props
+        this.setPoints(points)
+        this.setProps(props)
     }
 
 
@@ -327,18 +327,35 @@ export class Shape {
 let lineChangeInfo = null
 
 function dirtyPoints(pointsA, pointsB) {
-    if (pointsB===null || pointsB===undefined)
-        return pointsA !== null && pointsA !== undefined
-    if (pointsA===null || pointsA===undefined)
+    const result = dirtyPoints2(pointsA,pointsB)
+    console.error('dirtyPoints', result, pointsA, pointsB)
+    return result
+}
+function dirtyPoints2(pointsA, pointsB) {
+    console.log('dp2', pointsA, pointsB)
+    if (pointsA === undefined)
+        return true
+    console.log('dp2b')
+    if (pointsB === undefined)
+        return false
+    console.log('dp2c')
+    if (pointsB===null)
+        return pointsA !== null
+    console.log('dp2d')
+    if (pointsA===null)
         return pointsB.length > 0
+    console.log('dp2e')
     if (pointsA.length!==pointsB.length)
         return true
+    console.log('dp2f')
     for (const i in pointsA) {
         const a = pointsA[i]
         const b = pointsB[i]
-        if ( a.time !== b.time || a.price !== b.price )
+        if ( a === null && b !== null || a !== null && b === null ||
+            a.time !== b.time || a.price !== b.price )
             return true
     }
+    console.log('dp3')
     return false
 }
 
@@ -537,8 +554,6 @@ export class DLine extends Line {
     constructor(model, onModel=null, onDelete=null, props=null) {
         super(ShapeType.Line, onModel, onDelete, props)
 
-        this.debug = true // todo debug
-
         // Model
         this.model.pointA = null  // {time:..., price:...}
         this.model.pointB = null
@@ -555,27 +570,30 @@ export class DLine extends Line {
     }
 
     setModel(model) {
-        console.log('DLine setModel', {...this.model}, {...model})
+        console.log("DLine setModel", {...this.model}, {...model})
         super.setModel(model)
-        if (model.pointA === null || model.pointB === null)
+        if (model.pointA === null && model.pointB === null)
             this.delete()
-        else if (
-            dirtyPoints(this.model.pointA, model.pointA) ||
-            dirtyPoints(this.model.pointB, model.pointB)
-        ) {
-            this.model.pointA = model.pointA
-            this.model.pointB = model.pointB
-            this.setPoints([model.pointA, model.pointB])
+        else if ('pointA' in model && 'pointB' in model) {
+            const newPoints = [model.pointA, model.pointB];
+            const oldPoints = [this.model.pointA, this.model.pointB];
+            if (dirtyPoints(oldPoints, newPoints)) {
+                this.model.pointA = newPoints[0]
+                this.model.pointB = newPoints[1]
+                this.setPoints(newPoints)
+            }
         }
     }
 
     onPoints(points) {
         let dirty = this.tvPoints === null
         for (let i=0; !dirty && i<points.length; i++) {
-            if( points[i].time !== this.tvPoints[i].time)
+            if( points[i].time !== this.tvPoints[i].time || points[i].price !== this.tvPoints[i].price )
                 dirty = true
         }
+        console.log('DLine onPoints', dirty, this.tvPoints, points)
         if (dirty) {
+            console.log('DLine points were dirty', this.tvPoints, points)
             super.onPoints(points);
             this.updateModel({pointA: points[0], pointB: points[1]})
         }

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
 }

src/vector.js

@@ -41,6 +41,11 @@ export function vectorEquals(a, b) {
 }
 
 
+export function vectorNeg(a) {
+    return a.map((v)=>-v)
+}
+
+
 export function vectorAdd(a, b) {
     const result = []
     const scalarB = b.length === undefined