bugfixes

src/charts/chart.js

@@ -137,7 +137,7 @@ export function drawShape(shapeType, ...callbacks) {
 }
 
 
-export function createShape(shapeType, points, options, ...callbacks) {
+export function createShape(shapeType, points, options={}, ...callbacks) {
     const co = useChartOrderStore()
     co.drawingCallbacks = null
     co.drawing = false
@@ -205,7 +205,11 @@ function onSelectedLineToolChanged() {
 }
 
 function handleDrawingEvent(id, event) {
-    // console.log('drawing event', id, event)
+    setTimeout(()=>doHandleDrawingEvent(id,event), 0)
+}
+
+function doHandleDrawingEvent(id, event) {
+    console.log('drawing event', arguments)
     const shape = event === 'remove' ? null : chart.getShapeById(id);
     if (event === 'create') {
         const co = useChartOrderStore();

src/charts/shape.js

@@ -47,6 +47,7 @@ class Shape {
         if (onDelete !== null )
             this.onDelete = onDelete
         this.lock = 0  // used to prevent callbacks when we are the ones forcing the chart change
+        this.pointsLock = 0
         this.propsLock = 0
         this.create()
     }
@@ -89,6 +90,7 @@ class Shape {
 
 
     setModel(model) {
+        console.log('setModel', model, this.id)
         for( const [k,v] of Object.entries(model))
             this.model[k] = v
         this.setPoints(this.pointsFromModel());
@@ -97,19 +99,23 @@ class Shape {
 
 
     setPoints(points) {
-        invokeCallback(this, 'onPoints', points)
+        // invokeCallback(this, 'onPoints', points)
-        if (points !== null && points.length)
+        if (points !== null && points.length) {
             if (this.id === null)
                 this.doCreate(points)
-            else
+            else {
-                updatePoints(this, points)
+                this.pointsLock++
+                chart.getShapeById(this.id).setPoints(points)
+            }
+        }
     }
 
 
     setProps(props) {
-        invokeCallback(this, 'onProps', props)
+        // invokeCallback(this, 'onProps', props)
         if(this.id) {
-            updateProps(this, props)
+            this.propsLock++
+            chart.getShapeById(this.id).setProperties(props)
         }
     }
 
@@ -167,23 +173,6 @@ class Shape {
 }
 
 
-function updatePoints(shape, points) {
-    shape.lock++
-    try {
-        chart.getShapeById(shape.id).setPoints(points)
-    }
-    finally {
-        shape.lock--
-    }
-}
-
-
-function updateProps(shape, props) {
-    chart.getShapeById(shape.id).setProperties(props)
-    shape.propsLock++
-}
-
-
 // B is modifying A
 function dirtyProps(propsA, propsB) {
     if (propsB===null)
@@ -212,11 +201,17 @@ class ShapeTVCallbacks {
     }
 
     onPoints(shapeId, points) {
+        console.log(`shapetvcb ${shapeId} onPoints`, points, this.shape.lock)
         this.shape.points = points
-        if( this.shape.lock ) return
+        if( this.shape.pointsLock ) {
+            this.shape.pointsLock--
+            return
+        }
+        setTimeout(()=>{
             this.shape.onPoints(points)
             this.shape.pointsToModel()
             this.shape.onModel(this.shape.model)
+        }, 0)
     }
 
     onProps(shapeId, props) {
@@ -225,9 +220,11 @@ class ShapeTVCallbacks {
             this.shape.propsLock--
             return
         }
+        setTimeout(()=>{
             this.shape.onProps(props)
             this.shape.propsToModel()
             this.shape.onModel(this.shape.model)
+        }, 0)
     }
 
     onDraw() {
@@ -285,12 +282,13 @@ export class HLine extends Shape {
 
     pointsFromModel() {
         if (this.model.price === null) return null
-        if (this.points !== null && this.points.length > 0)
+        const time = this.points !== null && this.points.length > 0 ? this.points[0].time : 0
-            return [{time:this.points[0].time, price:this.model.price}]
+        console.log(`pointsFromModel ${this.id}`, this.model.price)
-        return [{time:0, price:this.model.price}]
+        return [{time:time, price:this.model.price}]
     }
 
     pointsToModel() {
+        console.log(`pointsToModel ${this.id}`, this.points[0].price)
         this.model.price = this.points[0].price
     }
 

src/components/chart/LimitBuilder.vue

@@ -122,12 +122,16 @@ let interiorLines = []
 
 function createInteriorLine(price) {
   const line = new HLine({price: price, color: props.builder.color},
-      function (line) {props.builder.color = line.color},
+      function (line) {
+        console.log('interior onModel', line.price)
+        props.builder.color = line.color  // todo adjust for saturation
+      },
       deleteBuilder)
   line.onPoints = function (points) {
+    console.log('interior onPoints', points)
     const delta = points[0].price - this.model.price
-    // console.log('moving delta', delta)
+    console.log('moving delta', delta)
-    if (delta != 0) {
+    if (delta !== 0) {
       props.builder.priceA += delta
       props.builder.priceB += delta
       adjustShapes()

src/components/chart/Test.vue

@@ -9,7 +9,11 @@
 </template>
 
 <script setup>
+import {createShape} from "@/charts/chart.js";
+import {ShapeType} from "@/charts/shape.js";
+
 const props = defineProps(['builder'])
+createShape(ShapeType.HLine, [{time:0, price:165}])
 </script>
 
 <style scoped lang="scss">