ladders!

src/charts/shape.js

@@ -1,7 +1,7 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback} from "@/common.js";
-import {chart, createShape, deleteShape, drawShape} from "@/charts/chart.js";
+import {chart, createShape, deleteShapeId, drawShape} from "@/charts/chart.js";
 
 
 //
@@ -48,7 +48,7 @@ function updatePoints(shape, points) {
 function updateProps(shape, props) {
     shape.lock++
     try {
-        chart.getShapeById(shape.id).setProps(props)
+        chart.getShapeById(shape.id).setProperties(props)
     }
     finally {
         shape.lock--
@@ -56,18 +56,6 @@ function updateProps(shape, props) {
 }
 
 
-function delShape(shape) {
-    shape.lock++
-    try {
-        deleteShape(shape.id)
-    } finally {
-        shape.lock--
-    }
-    shape.lock = true
-    shape.lock = false
-}
-
-
 class Shape {
     constructor(type, model={}, onModel=null, onDelete=null) {
         // the Shape object manages synchronizing internal data with a corresponding TradingView shape
@@ -97,6 +85,7 @@ class Shape {
     }
 
     create() {
+        if (this.id !== null) return
         // programatically create the shape using the current this.points
         const points = this.pointsFromModel()
         if( points && points.length ) {
@@ -106,7 +95,8 @@ class Shape {
     }
 
     doCreate(points) {
-        createShape(this.type, points, new ShapeTVCallbacks(this))
+        const props = this.propsFromModel()
+        createShape(this.type, points, {overrides:props}, new ShapeTVCallbacks(this))
     }
 
     createOrDraw() {
@@ -122,25 +112,18 @@ class Shape {
     setModel(model) {
         for( const [k,v] of Object.entries(model))
             this.model[k] = v
-        this.setPointsIfDirty(this.pointsFromModel());
+        this.setPoints(this.pointsFromModel());
         this.setPropsIfDirty(this.propsFromModel())
     }
 
 
     setPoints(points) {
         invokeCallback(this, 'onPoints', points)
-        if (points !== null && points.length) {
-            if (this.id) {
-                updatePoints(this, points)
-            } else
+        if (points !== null && points.length)
+            if (this.id === null)
                 this.doCreate(points)
-        }
-    }
-
-
-    setPointsIfDirty(points) {
-        if (dirtyPoints(this.points, points))
-            this.setPoints(points)
+            else
+                updatePoints(this, points)
     }
 
 
@@ -159,9 +142,16 @@ class Shape {
 
 
     delete() {
-        if (this.id!==null) {
-            delShape(this)
+        console.log('shape.delete', this.id)
+        if (this.id === null) return
+        this.lock++
+        try {
+            deleteShapeId(this.id)
             this.id = null
+        } catch (e) {
+            throw e
+        } finally {
+            this.lock--
         }
     }
 
@@ -198,23 +188,6 @@ class Shape {
 }
 
 
-function dirtyPoints(pointsA, pointsB) {
-    if (pointsA === null)
-        return pointsB !== null
-    if (pointsB === null)
-        return true
-    if (pointsA.length !== pointsB.length)
-        return true
-    for (let i = 0; i < pointsA.length; i++) {
-        const a = pointsA[i];
-        const b = pointsB[i];
-        if (a.time !== b.time || a.price !== b.price)
-            return true
-    }
-    return false
-}
-
-
 // B is modifying A
 function dirtyProps(propsA, propsB) {
     if (propsB===null)
@@ -235,29 +208,28 @@ class ShapeTVCallbacks {
     }
 
     onCreate(shapeId, points, props) {
+        if( this.shape.id )
+            throw Error(`Created a shape ${shapeId}where one already existed ${this.shape.id}`)
+        this.shape.id = shapeId
+        console.log('set shape id', this.shape)
         if( this.shape.lock ) return
-        if( this.id )
-            throw Error(`Created a shape ${shapeId}where one already existed ${this.id}`)
-        this.shape.id=shapeId
         invokeCallback(this.shape, 'onCreate', points, props)
     }
 
     onPoints(shapeId, points) {
+        this.shape.points = points
         if( this.shape.lock ) return
-        if( dirtyPoints(this.shape.points, points) ) {
-            this.shape.points = points
-            this.shape.pointsToModel()
-            this.shape.onModel(this.shape.model)
-        }
+        this.shape.onPoints(points)
+        this.shape.pointsToModel()
+        this.shape.onModel(this.shape.model)
     }
 
     onProps(shapeId, props) {
+        this.shape.props = props
         if( this.shape.lock ) return
-        if( dirtyProps(this.shape.props, props) ) {
-            this.shape.props = props
-            this.shape.propsToModel()
-            this.shape.onModel(this.shape.model)
-        }
+        this.shape.onProps(props)
+        this.shape.propsToModel()
+        this.shape.onModel(this.shape.model)
     }
 
     onDraw() {
@@ -301,6 +273,7 @@ class ShapeTVCallbacks {
     }
 
     onDelete(_shapeId, props) {
+        this.shape.id = null
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onDelete',props)
     }
@@ -314,7 +287,7 @@ export class HLine extends Shape {
 
     pointsFromModel() {
         if (this.model.price === null) return null
-        if (this.points.length > 0)
+        if (this.points !== null && this.points.length > 0)
             return [{time:this.points[0].time, price:this.model.price}]
         return [{time:0, price:this.model.price}]
     }