allocation text fix; props&points suppressed during drag

src/charts/shape.js

@@ -1,7 +1,7 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback, mixin} from "@/common.js";
-import {chart, createShape, deleteShapeId, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
+import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
 import {pointsToOhlcStart, unique} from "@/misc.js";
 import {allocationText} from "@/orderbuild.js";
 import Color from "color";
@@ -57,7 +57,7 @@ export class Shape {
         //   lineColor, textColor, color, // lineColor and textColor default to color
         // }
 
-        this.debug = true
+        this.debug = false
         this.id = null // TradingView shapeId, or null if no TV shape created yet (drawing mode)
         this.type = type  // ShapeType
         this.model = {}  // set to nothing at first
@@ -95,8 +95,6 @@ export class Shape {
     //
 
     setModel(model) {
-        console.log('shape setModel', model)
-
         if (model.color)
             this.model.color = model.color
         if (model.allocation !== null && model.allocation !== undefined)
@@ -376,19 +374,22 @@ class ShapeTVCallbacks {
         if (!this.enabled) return // possible when shape is deleted and re-created
         this.shape.id = shapeId
         invokeCallback(this.shape, 'onCreate', points, props)
+        invokeCallback(this.shape, 'onPoints', points)
     }
 
     onPoints(shapeId, _tvShape, points) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.log('tvcb onPoints', points)
-        this.shape.onPoints(points)
+        if (!dragging || this.shape.beingDragged())
+            this.shape.onPoints(points)
         this.shape.tvPoints = points
     }
 
     onProps(shapeId, _tvShape, props) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.error('tvOnProps', props)
-        this.shape.onProps(props)
+        if (!dragging) // do not listen to props during redraw
+            this.shape.onProps(props)
         this.shape.tvProps = props
     }
 
@@ -563,7 +564,6 @@ export class DLine extends Line {
     }
 
     setModel(model) {
-        console.log("DLine setModel", {...this.model}, {...model})
         super.setModel(model)
         if (model.pointA === null && model.pointB === null)
             this.delete()
@@ -584,7 +584,6 @@ export class DLine extends Line {
             if( points[i].time !== this.tvPoints[i].time || points[i].price !== this.tvPoints[i].price )
                 dirty = true
         }
-        console.log('DLine onPoints', dirty, this.tvPoints, points)
         if (dirty) {
             console.log('DLine points were dirty', this.tvPoints, points)
             super.onPoints(points);

src/components/chart/DCABuilder.vue

@@ -19,17 +19,17 @@
         <td>
           <absolute-time-entry v-model="absTimeA"/>
         </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[0]) : '' }}</td>
+        <td class="weight">{{ weights.length ? allocationTexts[0] : '' }}</td>
       </tr>
       <tr v-if="weights.length>2" v-for="i in weights.length-2" class="ml-5"> <!-- vue uses 1-based loops -->
         <td class="d-flex justify-end pr-3">{{ dateStrings[i] }}</td>
-        <td class="weight">{{ allocationText(weights[i]) }}</td>
+        <td class="weight">{{ allocationTexts[i] }}</td>
       </tr>
       <tr v-if="weights.length>1">
         <td>
           <absolute-time-entry v-model="absTimeB"/>
         </td>
-        <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        <td class="weight">{{ allocationTexts[weights.length-1] }}</td>
       </tr>
       </tbody>
     </table>
@@ -82,6 +82,9 @@ builderDefaults(props.builder, {
 const times = ref([])
 const weights = ref([])
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
+
 const endTimes = computed(()=>{
   if (props.builder.rungs === 1)
     return DISTANT_FUTURE

src/components/chart/DiagonalBuilder.vue

@@ -19,7 +19,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+          <td rowspan="2" class="weight">{{ allocationTexts[weights.length-1] }}</td>
         </tr>
         <tr>
           <td>
@@ -37,7 +37,7 @@
         <tr v-for="i in innerIndexes" class="ml-5">
           <td class="text-right">&nbsp;</td>
           <td colspan="2" class="text-center"><i>Diagonal</i></td>
-          <td class="weight">{{ allocationText(weights[i]) }}</td>
+          <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
         <tr v-if="weights.length>1">
           <td rowspan="2" class="label">Line B</td>
@@ -52,7 +52,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+          <td rowspan="2" class="weight">{{ allocationTexts[0] }}</td>
         </tr>
         <tr v-if="weights.length>1">
           <td>
@@ -150,8 +150,6 @@ const endpoints = computed({
     let [a, b] = v
     a = buildLine(a)
     b = buildLine(b)
-    // noinspection JSValidateTypes
-    _endpoints.value = v
     update(a, b)
   }
 })
@@ -172,7 +170,7 @@ const price1A = computed({
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
-        [{time:flatline0[0], price: v}, {time:flatline0[2], price: flatline0[3]}],
+        [{time:flatline0[0], price: Number(v)}, {time:flatline0[2], price: flatline0[3]}],
         _endpoints.value[1]
     )
   }
@@ -194,7 +192,7 @@ const price1B = computed({
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
-        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: v}],
+        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: Number(v)}],
         _endpoints.value[1]
     )
   }
@@ -217,7 +215,7 @@ const price2A = computed({
     const flatline = _endpoints.value[1];
     update(
         _endpoints.value[0],
-        [{time:flatline[0], price: v}, {time:flatline[2], price: flatline[3]}],
+        [{time:flatline[0], price: Number(v)}, {time:flatline[2], price: flatline[3]}],
     )
   }
 })
@@ -239,18 +237,23 @@ const price2B = computed({
     const flatline = _endpoints.value[1];
     update(
         _endpoints.value[0],
-        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: v}],
+        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: Number(v)}],
     )
   }
 })
 
 function update(a, b) { // a and b are lines of two points
+  console.log('update', a, b)
   if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
+    console.log('update was dirty')
+    _endpoints.value = [flattenLine(a), flattenLine(b)]
     const newBuilder = {...props.builder}
     newBuilder.lineA = a
     newBuilder.lineB = b
     emit('update:builder', newBuilder)
   }
+  else
+    console.log('update was not dirty')
 }
 
 
@@ -275,6 +278,9 @@ function setWeights(ws) {
   weights.value = ws
 }
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
 
 const stdWidth = computed(()=>[0, 2 * co.meanRange, 0, 2 * co.meanRange])
 
@@ -321,8 +327,8 @@ function dirtyLine(a, b) {
 
 <style scoped lang="scss">
 td.weight {
-  width: 5em;
+  min-width: 5em;
-  max-width: 8em;
+  max-width: 20em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   text-align: right;

src/components/chart/LimitBuilder.vue

@@ -17,11 +17,11 @@
                           style="flex: 6em"
             />
           </td>
-          <td class="weight">{{ allocationText(weights[higherIndex]) }}</td>
+          <td class="weight">{{ allocationTexts[higherIndex] }}</td>
         </tr>
         <tr v-for="i in innerIndexes" class="ml-5">
           <td class="pl-5">{{ prices[i] }}</td>
-          <td class="weight">{{ allocationText(weights[i]) }}</td>
+          <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
       </template>
       <tr>
@@ -33,7 +33,7 @@
                         style="flex: 6em"
           />
         </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[lowerIndex]) : '' }}</td>
+        <td class="weight">{{ weights.length ? allocationTexts[lowerIndex] : '' }}</td>
       </tr>
       </tbody>
     </table>
@@ -189,6 +189,8 @@ const weights = ref([])
 function setPrices(ps) {prices.value = ps}
 function setWeights(ws) { weights.value = ws }
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
 
 const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
 

src/orderbuild.js

@@ -240,6 +240,8 @@ export function weightColors(weights, color) {
 }
 
 export function allocationText(weight, amount, symbol) {
+    amount = Number(amount)
+    weight = Number(weight)
     let text = ''
     const hasWeight = weight!==null && weight!==undefined
     if (hasWeight)
@@ -249,7 +251,7 @@ export function allocationText(weight, amount, symbol) {
     if (hasAmount && hasSymbol) {
         if (hasWeight)
             text += ' = '
-        text += `${amount.toLocaleString('fullwide')} ${symbol}`
+        text += `${amount.toPrecision(3).toLocaleString('fullwide')} ${symbol}`
     }
     return text
 }