shape refactor bugfixes

src/charts/shape.js

@@ -1,8 +1,8 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
-import {invokeCallback, mixin} from "@/common.js";
+import {invokeCallback} from "@/common.js";
 import {chart, createShape, deleteShape, drawShape} from "@/charts/chart.js";
-import {ref, watch} from "vue";
+import {watch} from "vue";
 
 
 //
@@ -41,12 +41,10 @@ class Shape {
         this.id = null // TradingView shapeId, or null if no TV shape created yet (drawing mode)
         this.type = type  // ShapeType
         this.model = model  // subclass-specific
-        this.points = this.pointsFromModel()  // same format as TradingView points for the given shape
-        this.props = this.propsFromModel()  // TradingView shape properties
-        console.log('points/props', this.points, this.props)
-        watch(this.model, this.onModelChanged)
-        if( this.points && this.points.length )
-            this.create()
+        this.points = null  // TradingView points for the given shape
+        this.props = null
+        watch(this.model, this.onModelChanged.bind(this))
+        this.create()
     }
 
     //
@@ -63,42 +61,43 @@ class Shape {
 
     create() {
         // programatically create the shape using the current this.points
-        console.log(`create ${this.type.name}`)
-        if(this.id) {
-            console.log('warning: re-creating a shape')
-            this.delete()
+        const points = this.pointsFromModel()
+        if( points && points.length ) {
+            console.log(`create ${this.type.name}`)
+            this.doCreate(points)
         }
-        if(this.points.length === 0)
-            throw Error('Cannot create a shape with no points')
-        createShape(this.type, this.points, new ShapeTVCallbacks(this))
+    }
+
+    doCreate(points) {
+        createShape(this.type, points, new ShapeTVCallbacks(this))
     }
 
     createOrDraw() {
         if(this.id) return
-        if(this.points && this.points.length)
-            this.create()
+        const points = this.pointsFromModel()
+        if(points && points.length)
+            this.doCreate(points)
         else
             this.draw()
     }
 
     setPoints(points) {
-        this.points = points
         invokeCallback(this, 'onPoints', points)
-        this.pointsToModel()
-        if (points && points.length) {
-            if (this.id)
-                chart.getEntity(this.id).setPoints(points)
-            else
-                this.create()
+        if (points !== null && points.length) {
+            if (this.id) {
+                const tvShape = chart.getShapeById(this.id);
+                setTimeout(()=>tvShape.setPoints(points),0)
+            } else
+                this.doCreate(points)
         }
     }
 
     setProps(props) {
-        this.props = props
         invokeCallback(this, 'onProps', props)
-        this.propsToModel()
-        if (props && this.id)
-            chart.getEntity(this.id).setProperties(props)
+        if(this.id) {
+            console.log(`setting ${this.id} props`, this.props)
+            setTimeout(()=>chart.getShapeById(this.id).setProperties(props),0)
+        }
     }
 
     delete() {
@@ -107,7 +106,7 @@ class Shape {
             this.id = null
         }
         else
-            invokeCallback(this.callbacks, 'onDelete')
+            invokeCallback(this, 'onDelete')
     }
 
 
@@ -117,10 +116,10 @@ class Shape {
 
     onModelChanged() {
         const points = this.pointsFromModel()
-        if( points && points !== this.points )
+        if( points !== null )
             this.setPoints(points)
         const props = this.propsFromModel()
-        if( props && props !== this.props )
+        if( props !== null )
             this.setProps(props)
     }
 
@@ -152,22 +151,43 @@ class Shape {
 
 class ShapeTVCallbacks {
     constructor(shape) {
-        console.log('shapetvcb', shape)
         this.shape = shape
     }
+
     onCreate(shapeId, points, props) {
         if( this.id )
             throw Error(`Created a shape ${shapeId}where one already existed ${this.id}`)
-        this.id=shapeId
+        this.shape.id=shapeId
         invokeCallback(this.shape, 'onCreate', points, props)
     }
+
     onPoints(shapeId, points) {
-        if( points === this.shape.points ) return // prevent reactive feedback loops
-        this.shape.setPoints(points)
+        let dirty = this.shape.points === null || points.length !== this.shape.points.length
+        for( let i=0; !dirty && i<points.length; i++ ) {
+            const a = points[i];
+            const b = this.shape.points[i];
+            if( a.time !== b.time || a.price !== b.price ) {
+                dirty = true
+                break
+            }
+        }
+        if( dirty ) {
+            this.shape.points = points
+            this.shape.pointsToModel()
+        }
     }
+
     onProps(shapeId, props) {
-        if( props === this.shape.props ) return // prevent reactive feedback loops
-        this.shape.setProps(props)
+        let dirty = this.shape.props === null
+        const entries = Object.entries(props)
+        for( let i=0; !dirty && i<entries.length; i++ ) {
+            const [k,v] = entries[i]
+            dirty = !(k in this.shape.props) || this.shape.props[k] !== v
+        }
+        if( dirty ) {
+            this.shape.props = props
+            this.shape.propsToModel()
+        }
     }
 
     onDraw() {invokeCallback(this.shape, 'onDraw')}
@@ -183,20 +203,31 @@ class ShapeTVCallbacks {
 
 
 export class HLine extends Shape {
-    constructor(model) {
-        mixin(model, {price:null,color:null})
+    constructor(model, priceAttr='price', colorAttr='color') {
         super(ShapeType.HLine, model);
+        this.priceAttr = priceAttr
+        this.colorAttr = colorAttr
     }
 
     pointsToModel() {
-        console.log('pointsToModel', this.points, this.model)
-        this.model.price = this.points[0].price
+        // console.log('pointsToModel', this.points, this.model)
+        this.model[this.priceAttr] = this.points[0].price
     }
     pointsFromModel() {
-        console.log('pointsFromModel', this.model.price)
-        return this.model.price === null ? null : [{time:0,price:this.model.price}]
+        const price = this.model[this.priceAttr];
+        // console.log('pointsFromModel', price)
+        return price === null || price === undefined ? null : [{time:price?.time || 0, price:price}]
+    }
+    propsToModel() {
+        console.log('propsToModel', this.props.linecolor)
+        this.model[this.colorAttr]=this.props.linecolor
+        console.log('set model from props', this.model)
+    }
+    propsFromModel() {
+        console.log('propsFromModel', this.model[this.colorAttr])
+        const result = this.model[this.colorAttr] ? {linecolor: this.model[this.colorAttr]} : null
+        console.log('get props from model', this.model[this.colorAttr], result)
+        return result
     }
-    propsToModel() {this.model.color=this.props.linecolor}
-    propsFromModel() {return this.model.color ? {linecolor: this.model.color} : null}
 }