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.points = null  // TradingView points for the given shape
-        this.props = this.propsFromModel()  // TradingView shape properties
+        this.props = null
-        console.log('points/props', this.points, this.props)
+        watch(this.model, this.onModelChanged.bind(this))
-        watch(this.model, this.onModelChanged)
+        this.create()
-        if( this.points && this.points.length )
-            this.create()
     }
 
     //
@@ -63,42 +61,43 @@ class Shape {
 
     create() {
         // programatically create the shape using the current this.points
-        console.log(`create ${this.type.name}`)
+        const points = this.pointsFromModel()
-        if(this.id) {
+        if( points && points.length ) {
-            console.log('warning: re-creating a shape')
+            console.log(`create ${this.type.name}`)
-            this.delete()
+            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)
+        const points = this.pointsFromModel()
-            this.create()
+        if(points && points.length)
+            this.doCreate(points)
         else
             this.draw()
     }
 
     setPoints(points) {
-        this.points = points
         invokeCallback(this, 'onPoints', points)
-        this.pointsToModel()
+        if (points !== null && points.length) {
-        if (points && points.length) {
+            if (this.id) {
-            if (this.id)
+                const tvShape = chart.getShapeById(this.id);
-                chart.getEntity(this.id).setPoints(points)
+                setTimeout(()=>tvShape.setPoints(points),0)
-            else
+            } else
-                this.create()
+                this.doCreate(points)
         }
     }
 
     setProps(props) {
-        this.props = props
         invokeCallback(this, 'onProps', props)
-        this.propsToModel()
+        if(this.id) {
-        if (props && this.id)
+            console.log(`setting ${this.id} props`, this.props)
-            chart.getEntity(this.id).setProperties(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
+        let dirty = this.shape.points === null || points.length !== this.shape.points.length
-        this.shape.setPoints(points)
+        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
+        let dirty = this.shape.props === null
-        this.shape.setProps(props)
+        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) {
+    constructor(model, priceAttr='price', colorAttr='color') {
-        mixin(model, {price:null,color:null})
         super(ShapeType.HLine, model);
+        this.priceAttr = priceAttr
+        this.colorAttr = colorAttr
     }
 
     pointsToModel() {
-        console.log('pointsToModel', this.points, this.model)
+        // console.log('pointsToModel', this.points, this.model)
-        this.model.price = this.points[0].price
+        this.model[this.priceAttr] = this.points[0].price
     }
     pointsFromModel() {
-        console.log('pointsFromModel', this.model.price)
+        const price = this.model[this.priceAttr];
-        return this.model.price === null ? null : [{time:0,price:this.model.price}]
+        // 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}
 }
 

src/components/chart/LimitBuilder.vue

@@ -4,15 +4,14 @@
     <v-toolbar dense :color="faintColor" elevation="3">
       <span :style="colorStyle" style="width:1em;height:100%">&nbsp;</span>
       <v-toolbar-title>{{ rungs === 1 ? 'Limit' : 'Ladder' }}</v-toolbar-title>
-<!--      <v-text-field type="number" v-model="lower"-->
+      <v-text-field type="number" v-model="lower"
-<!--                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
+                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"
-<!--                    :color="color" :base-color="color" min="0"-->
+                    :color="color" :base-color="color" min="0"
-<!--      />-->
+      />
-<!--      <v-text-field type="number" v-model="rungs"-->
+      <v-text-field type="number" v-model="rungs"
-<!--                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
+                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"
-<!--                    :color="color" :base-color="color" min="1"-->
+                    :color="color" :base-color="color" min="1"
-<!--      />-->
+      />
-      {{JSON.stringify(builder)}}
       <v-menu>
         <template v-slot:activator="{ props }">
           <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
@@ -43,7 +42,7 @@ const co = useChartOrderStore()
 const props = defineProps(['builder'])
 
 
-const shape = new HLine(props.builder)
+const shape = new HLine(props.builder, 'lower', 'color')
 shape.createOrDraw()
 
 
@@ -61,6 +60,7 @@ builderDefaults(props.builder, {
   lower: null,
   upper: null,
   rungs: 1,
+  color: null,
 })
 
 
@@ -206,7 +206,8 @@ const limitLineCallbacks = {
     console.log('limit onMove')
   },
   onProps(shapeId, properties) {
-    props.builder.color = properties.linecolor
+    console.log('limit onProps', properties, properties.linecolor)
+    // props.builder.color = properties.linecolor
   },
   onDelete(shapeId) {
     deleteBuilder()