smooth ladder dragging!

src/charts/shape.js

@@ -1,7 +1,7 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback} from "@/common.js";
-import {chart, createShape, deleteShapeId, drawShape} from "@/charts/chart.js";
+import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape} from "@/charts/chart.js";
 
 
 //
@@ -69,7 +69,6 @@ class Shape {
         // programatically create the shape using the current this.points
         const points = this.pointsFromModel()
         if( points && points.length ) {
-            console.log(`create ${this.type.name}`)
             this.doCreate(points)
         }
     }
@@ -89,8 +88,12 @@ class Shape {
     }
 
 
+    tvShape() {
+        return this.id === null ? null : chart.getShapeById(this.id);
+    }
+
+
     setModel(model) {
-        console.log('setModel', model, this.id)
         for( const [k,v] of Object.entries(model))
             this.model[k] = v
         this.setPoints(this.pointsFromModel());
@@ -99,23 +102,32 @@ class Shape {
 
 
     setPoints(points) {
-        // invokeCallback(this, 'onPoints', points)
         if (points !== null && points.length) {
             if (this.id === null)
                 this.doCreate(points)
             else {
-                this.pointsLock++
-                chart.getShapeById(this.id).setPoints(points)
+                const s = this.tvShape();
+                if (!dragging) {
+                    this.pointsLock++
+                    s.setPoints(points)
+                }
+                else {
+                    // quiet setPoints doesn't disturb tool editing mode
+                    const i = s._pointsConverter.apiPointsToDataSource(points)
+                    // s._model.startChangingLinetool(this._source)
+                    s._model.changeLinePoints(s._source, i)
+                    // s._model.endChangingLinetool(!0)
+                    s._source.createServerPoints()
+                }
             }
         }
     }
 
 
     setProps(props) {
-        // invokeCallback(this, 'onProps', props)
         if(this.id) {
             this.propsLock++
-            chart.getShapeById(this.id).setProperties(props)
+            this.tvShape().setProperties(props)
         }
     }
 
@@ -126,6 +138,11 @@ class Shape {
     }
 
 
+    beingDragged() {
+        return draggingShapeIds.indexOf(this.id) !== -1
+    }
+
+
     delete() {
         // console.log('shape.delete', this.id)
         if (this.id === null) return
@@ -165,6 +182,7 @@ class Shape {
     onPoints(points) {} // the control points of an existing shape were changed
     onProps(props) {}  // the display properties of an existing shape were changed
     onMove(points) {} // the shape was moved by dragging a drawing element not the control point
+    onDrag(points) {}
     onHide(props) {}
     onShow(props) {}
     onClick() {}  // the shape was selected
@@ -201,17 +219,14 @@ class ShapeTVCallbacks {
     }
 
     onPoints(shapeId, points) {
-        console.log(`shapetvcb ${shapeId} onPoints`, points, this.shape.lock)
         this.shape.points = points
         if( this.shape.pointsLock ) {
             this.shape.pointsLock--
             return
         }
-        setTimeout(()=>{
-            this.shape.onPoints(points)
-            this.shape.pointsToModel()
-            this.shape.onModel(this.shape.model)
-        }, 0)
+        this.shape.onPoints(points)
+        this.shape.pointsToModel()
+        this.shape.onModel(this.shape.model)
     }
 
     onProps(shapeId, props) {
@@ -220,11 +235,9 @@ class ShapeTVCallbacks {
             this.shape.propsLock--
             return
         }
-        setTimeout(()=>{
-            this.shape.onProps(props)
-            this.shape.propsToModel()
-            this.shape.onModel(this.shape.model)
-        }, 0)
+        this.shape.onProps(props)
+        this.shape.propsToModel()
+        this.shape.onModel(this.shape.model)
     }
 
     onDraw() {
@@ -252,6 +265,11 @@ class ShapeTVCallbacks {
         invokeCallback(this.shape, 'onMove',points)
     }
 
+    onDrag(_shapeId, points) {
+        if( this.shape.lock ) return
+        invokeCallback(this.shape, 'onDrag', points)
+    }
+
     onHide(_shapeId, props) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onHide',props)
@@ -283,12 +301,10 @@ export class HLine extends Shape {
     pointsFromModel() {
         if (this.model.price === null) return null
         const time = this.points !== null && this.points.length > 0 ? this.points[0].time : 0
-        console.log(`pointsFromModel ${this.id}`, 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
     }
 
@@ -298,5 +314,15 @@ export class HLine extends Shape {
 
     propsToModel() {this.model.color=this.props.linecolor}
 
+
+    onDrag(points) {
+        const s = this.tvShape();
+        console.log('shape', s)
+        console.log('currentMovingPoint', s._source.currentMovingPoint())
+        console.log('startMovingPoint', s._source.startMovingPoint())
+        console.log('isBeingEdited', s._source.isBeingEdited())
+        console.log('state',  s._source.state())
+    }
+
 }