more UI updates

src/charts/shape.js

@@ -1,7 +1,7 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback, mixin} from "@/common.js";
-import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape} from "@/charts/chart.js";
+import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
 
 
 //
@@ -30,7 +30,7 @@ export const ShapeType = {
     Ray: {name: 'Ray', code: 'ray'},
     Line: {name: 'Extended Line', code: 'extended'},
     HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
-    HLine: {name: 'Horizontal Line', code: 'horizontal_line'},
+    HLine: {name: 'Horizontal Line', code: 'horizontal_line', drawingProp: 'linetoolhorzline'},
     VLine: {name: 'Vertical Line', code: 'vertical_line'},
     PriceRange: {name: 'Price Range', code: 'price_range'},
 }
@@ -44,7 +44,7 @@ class Shape {
         this.model = model  // subclass-specific
         this.points = null
         this.points = this.pointsFromModel()
-        console.log('construct points', this.points)
+        // console.log('construct points', this.points)
         this.props = props === null ? this.propsFromModel() : mixin(props, this.propsFromModel())
         if (onModel !== null)
             this.onModel = onModel
@@ -59,12 +59,26 @@ class Shape {
 
     draw() {
         // have the user draw this shape
-        console.log(`draw ${this.type.name}`)
+        console.log(`draw ${this.type.name}`, this.model)
         if (this.id)
             throw Error(`Shape already exists ${this.id}`)
+        const or = this.drawingOverrides();
+        // console.log('drawing overrides', or)
+        widget.applyOverrides(or)
         drawShape(this.type, new ShapeTVCallbacks(this))
     }
 
+    // return an object with property defaults, e.g. { "linetoolhorzline.linecolor": "#7f11e0" }
+    // https://www.tradingview.com/charting-library-docs/latest/api/modules/Charting_Library#drawingoverrides
+    drawingOverrides() {
+        if (this.model.color===null) return null
+        const o = {}
+        const p = this.type.drawingProp
+        o[p+".linecolor"] = this.model.color
+        o[p+".textcolor"] = this.model.color
+        return o
+    }
+
     create() {
         if (this.id !== null) return
         // programatically create the shape using the current this.points
@@ -257,6 +271,7 @@ class ShapeTVCallbacks {
 
     constructor(shape) {
         this.shape = shape
+        this.creating = false
     }
 
     onCreate(shapeId, _tvShape, points, props) {
@@ -264,6 +279,7 @@ class ShapeTVCallbacks {
             throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
         this.shape.id = shapeId
         if( this.shape.lock ) return
+        this.creating = true
         invokeCallback(this.shape, 'onCreate', points, props)
     }
 
@@ -274,6 +290,11 @@ class ShapeTVCallbacks {
     }
 
     onProps(shapeId, _tvShape, props) {
+        // console.log('onProps', props)
+        if (this.creating) {
+            this.creating = false
+            return
+        }
         this.shape.props = props
         this.shape.onProps(props)
         this.shape.onDirtyModel(this.shape.propsToModel)
@@ -353,7 +374,6 @@ export class HLine extends Shape {
 
     propsToModel() {this.model.color=this.props.linecolor}
 
-
     onDrag(points) {
         const s = this.tvShape();
         console.log('shape', s)