diagonal rungs are drawing. just need tranches.

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]})
         }