ladders!

src/charts/chart.js

@@ -34,6 +34,7 @@ function initChart() {
         const co = useChartOrderStore()
         invokeCallbacks(co.drawingCallbacks, 'onRedraw')
     })
+    useChartOrderStore().chartReady = true
 }
 
 
@@ -114,6 +115,9 @@ export function drawShape(shapeType, ...callbacks) {
 
 
 export function createShape(shapeType, points, options, ...callbacks) {
+    const co = useChartOrderStore()
+    co.drawingCallbacks = null
+    co.drawing = false
     options.shape = shapeType.code
     // programatically adds a shape to the chart
     let shapeId
@@ -126,6 +130,8 @@ export function createShape(shapeType, points, options, ...callbacks) {
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks
     console.log('created shape', shapeId)
+    const props = chart.getShapeById(shapeId).getProperties()
+    invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
     return shapeId
 }
 
@@ -194,14 +200,14 @@ function handleDrawingEvent(id, event) {
     } else if (event === 'points_changed') {
         if (id in shapeCallbacks) {
             const points = shape.getPoints()
-            console.log('points', points)
+            // console.log('points', points)
             invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
         }
     } else if (event === 'properties_changed') {
         console.log('id in shapes', id in shapeCallbacks, id, shapeCallbacks)
         if (id in shapeCallbacks) {
             const props = shape.getProperties()
-            console.log('props', props)
+            // console.log('props', props)
             invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
         }
     } else if (event === 'move') {
@@ -228,7 +234,7 @@ function handleDrawingEvent(id, event) {
         console.log('unknown drawing event', event)
 }
 
-export function deleteShape(id) {
+export function deleteShapeId(id) {
     if( id in shapeCallbacks )
         delete shapeCallbacks[id]
     console.log('removing entity', id)

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