From e86b9738d835dff784adb63318bb5e5c338b7eb6 Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Mon, 22 Apr 2024 21:12:43 -0400
Subject: [PATCH] SMOOTH RENDERING!

---
 src/charts/chart.js                   | 57 +---------------
 src/charts/shape.js                   |  1 -
 src/components/AbsoluteTimeEntry.vue  |  4 +-
 src/components/chart/DCABuilder.vue   | 62 +++++++++--------
 src/components/chart/LimitBuilder.vue | 36 ++++++++--
 src/components/chart/RungBuilder.vue  | 98 +++++++++------------------
 6 files changed, 99 insertions(+), 159 deletions(-)

diff --git a/src/charts/chart.js b/src/charts/chart.js
index 34abab5..b546a48 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -141,7 +141,6 @@ export function drawShape(shapeType, ...callbacks) {
 
 
 export function createShape(shapeType, points, options={}, ...callbacks) {
-    console.log('tvShape creating')
     const co = useChartOrderStore()
     drawingCallbacks = null
     co.drawing = false
@@ -164,45 +163,14 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks
     const shape = chart.getShapeById(shapeId)
-    console.log('tvShape created', shape) // todo debug
+    console.log('tvShape created', shapeId)
     shape.bringToFront()
     const props = shape.getProperties()
     invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
-
-    stub(shape)
-
     return shapeId
 }
 
 
-let stubbed = true
-// todo debug
-function stub(shape) {
-    if(stubbed||shape===null) return
-    function stubFunc(funcName) {
-        const obj = shape._model
-        console.log('stubbing', funcName, obj)
-        const func = obj[funcName]
-        obj[funcName] = function () {
-            console.error(shapeId, funcName+'()', [...arguments])
-            func(...arguments)
-        }
-    }
-
-    stubFunc('start')
-    stubFunc('stop')
-    stubFunc('startChanging')
-    stubFunc('endChanging')
-    stubFunc('startMoving')
-    stubFunc('endMoving')
-    stubFunc('startMovingPoint')
-    stubFunc('move')
-    stubFunc('restart')
-    stubFunc('restorePoints')
-    stubbed = true
-}
-
-
 export let allShapeIds = []
 
 export function cancelDrawing() {
@@ -228,14 +196,12 @@ function onSelectedLineToolChanged() {
 
 export let dragging = false
 function mouseDown() {
-    console.log('mouseDown')
-    dump()
+    // console.log('mouseDown')
     dragging = true
 }
 
 function mouseUp() {
-    console.log('mouseUp')
-    dump()
+    // console.log('mouseUp')
     dragging = false
     draggingShapeIds = []
 }
@@ -243,21 +209,6 @@ function mouseUp() {
 
 export let draggingShapeIds = []
 
-function dump() {
-    return
-    console.log('all', allShapeIds)
-    for (const shapeId of allShapeIds) {
-        const shape = chart.getShapeById(shapeId)
-        console.log('shape', shape)
-        console.log('_linePointBeingChanged', shape._model._linePointBeingChanged)
-        // console.log('_lineBeingEdited', shape._model._lineBeingEdited)
-        // console.log('_lineBeingCreated', shape._model._lineBeingCreated)
-        // console.log('_linePointBeingEdited', shape._model._linePointBeingEdited)
-        // console.log('_lastHoveredHittestData', shape._model._lastHoveredHittestData)
-        // console.log('_lastSelectedHittestData', shape._model._lastSelectedHittestData)
-    }
-
-}
 
 function handleCrosshairMovement(point) {
     crosshairHandler.invoke(point) // delayed invocation to await selection to register later in the tv loop
@@ -352,8 +303,6 @@ function doHandleDrawingEvent(id, event) {
         }
     }
     if (event === 'create') {
-        console.log('created tvShape', id, shape) // todo remove debug
-        stub(shape) // todo debug
         allShapeIds.push(id)
 
         const co = useChartOrderStore();
diff --git a/src/charts/shape.js b/src/charts/shape.js
index 445c918..3bdc693 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -502,7 +502,6 @@ export class VLine extends Line {
     constructor(model, onModel=null, onDelete=null, props=null) {
         super(ShapeType.VLine, onModel, onDelete, props)
 
-        this.debug = true // todo debug
         // Model
         this.model.time = null
 
diff --git a/src/components/AbsoluteTimeEntry.vue b/src/components/AbsoluteTimeEntry.vue
index 1b81cbc..9eeed3d 100644
--- a/src/components/AbsoluteTimeEntry.vue
+++ b/src/components/AbsoluteTimeEntry.vue
@@ -266,9 +266,9 @@ let newValue = null
 }
 
 .day {
-  width: 2em;
+  width: 4em;
   max-width: 4em;
-  min-width: 2em;
+  min-width: 4em;
 }
 
 .picker {
diff --git a/src/components/chart/DCABuilder.vue b/src/components/chart/DCABuilder.vue
index d15b974..bd7b1c1 100644
--- a/src/components/chart/DCABuilder.vue
+++ b/src/components/chart/DCABuilder.vue
@@ -1,6 +1,5 @@
 <template>
-  <rung-builder name='DCA' :order="order" :builder="builder"
-                v-model:value-a="absTimeA" v-model:value-b="absTimeB"
+  <rung-builder name='DCA' :order="order" :builder="builder" v-model="timeEndpoints"
                 :shape="VLine"
                 :mode="1" :flip="flipped" :orientation="0"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
@@ -28,14 +27,7 @@
       </tr>
       <tr v-if="weights.length>1">
         <td>
-<!--
-          <v-text-field type="number" v-model="lowerPrice" min="0"
-                        density="compact" hide-details class="mx-1 my-2" variant="outlined"
-                        label="Price"
-                        :color="color" :base-color="color"
-                        style="flex: 6em"
-          />
--->
+          <absolute-time-entry v-model="absTimeB"/>
         </td>
         <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
       </tr>
@@ -63,6 +55,7 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 const minWidth = computed(()=>co.intervalSecs)
 const stdWidth = computed(()=>10 * minWidth.value)
@@ -125,34 +118,43 @@ watchEffect(()=>{
 
 
 const absTimeA = computed({
-  get() {
-    let result = props.builder.timeA
-    // if (props.builder.relative)
-    //   result += s.clock
-    console.log('get absTimeA', result)
-    return result
-  },
+  get() { return _timeEndpoints.value[0] },
   set(v) {
-    console.error('set absTimeA', props.builder.timeA, v)
-    props.builder.timeA = v
-    console.log('absTimeA=',props.builder.timeA)
+    console.log('set A', v)
+    if (v!==null)
+      v = Number(v)
+    update(v, _timeEndpoints.value[1])
   }
 })
 const absTimeB = computed({
-  get() {return props.builder.timeB},
+  get() { return _timeEndpoints.value[1] },
   set(v) {
-    console.error('set absTimeB', props.builder.timeB, v)
-    props.builder.timeB = v
-    if (v !== null) {
-      const maxA = v - minWidth.value;
-      if (props.builder.timeA > maxA) {
-        console.log('scootching A to', maxA)
-        props.builder.timeA = maxA
-      }
-    }
+    console.log('set B', v)
+    if (v!==null)
+      v = Number(v)
+    update(_timeEndpoints.value[0], v)
   }
 })
 
+
+const _timeEndpoints = ref([props.builder.timeA, props.builder.timeB])
+const timeEndpoints = computed({
+  get() { return _timeEndpoints.value},
+  set(v) {
+    const [a, b] = v
+    update(a,b)
+  }
+})
+
+
+function update(a, b) {
+    _timeEndpoints.value = [a, b]
+    const newBuilder = {...props.builder}
+    newBuilder.timeA = a
+    newBuilder.timeB = b
+    emit('update:builder', newBuilder)
+}
+
 const flipped = computed(()=>{
   const a = props.builder.timeA
   const b = props.builder.timeB
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index 4a7e756..8a8820b 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -1,6 +1,6 @@
 <template>
   <rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
-                v-model:value-a="priceA" v-model:value-b="priceB" :mode="0" :flip="flipped"
+                v-model="priceEndpoints" :mode="0" :flip="flipped"
                  :shape="HLine"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :get-points-value="getPointsValue"
@@ -57,6 +57,7 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 function computeDefaultColor() {
   const index = props.order.builders.indexOf(props.builder)
@@ -101,19 +102,42 @@ function buildTranches() {
 
 
 const priceA = computed({
-  get() { return props.builder.priceA },
+  get() { return priceEndpoints.value[0] },
   set(v) {
-    props.builder.priceA = v===null ? v : Number(v)
+    if (v!==null)
+      v = Number(v)
+    update(v, priceEndpoints.value[1])
   }
 })
 
 const priceB = computed({
-  get() { return props.builder.priceB },
+  get() { return priceEndpoints.value[1] },
   set(v) {
-    props.builder.priceB = v===null ? v : Number(v)
+    if (v!==null)
+      v = Number(v)
+    update(priceEndpoints.value[0], v)
   }
 })
 
+
+const _priceEndpoints = ref([props.builder.priceA, props.builder.priceB])
+const priceEndpoints = computed({
+  get() { return _priceEndpoints.value},
+  set(v) {
+    const [a, b] = v
+    update(a,b)
+  }
+})
+
+
+function update(a, b) {
+    _priceEndpoints.value = [a, b]
+    const newBuilder = {...props.builder}
+    newBuilder.priceA = a
+    newBuilder.priceB = b
+    emit('update:builder', newBuilder)
+}
+
 const flipped = computed(()=>{
   const a = props.builder.priceA
   const b = props.builder.priceB
@@ -217,7 +241,7 @@ function getPointsValue(points) {
 }
 
 function setModelValue(model, value) {
-  // console.log('setModelValue->', {...model}, value)
+  // console.log('setModelValue->', model.price, value)
   if (model.price !== value)
     model.price = value
 }
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index 4be845c..89466f0 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -8,7 +8,7 @@
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
                     :color="color" :base-color="color" min="1"
-                    :disabled="valueA===null"
+                    :disabled="endpoints[0]===null"
                     style="width: 4.5em;"
       />
     </div>
@@ -37,17 +37,14 @@
 import BuilderPanel from "@/components/chart/BuilderPanel.vue";
 import {useOrderStore} from "@/store/store.js";
 import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
-import {useTheme} from "vuetify";
 import {linspace, sideColor} from "@/misc.js";
-import {computed, onUnmounted, watchEffect} from "vue";
+import {computed, watchEffect} from "vue";
 import Color from "color";
 import {cancelDrawing} from "@/charts/chart.js";
 
 const os = useOrderStore()
 const co = useChartOrderStore()
-const theme = useTheme().current
-const valueA = defineModel('valueA')
-const valueB = defineModel('valueB')
+const endpoints = defineModel('modelValue')  // 2-item list of points/values
 const props = defineProps({
   name: String,
   order: Object,
@@ -76,7 +73,7 @@ const skew100 = computed( {
 watchEffect(()=>{
   const rungs = props.builder.rungs
   // const prev = props.builder.valid
-  props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
+  props.builder.valid = rungs >= 1 && endpoints.value[0] && (rungs < 2 || endpoints.value[1])
   // console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
 })
 
@@ -90,21 +87,22 @@ const rungs = computed({
       props.builder.rungs = 1
       return
     }
+    let [a,b] = endpoints.value
     const prevR = props.builder.rungs
     r = Number(r)
     props.builder.rungs = r
-    const b = valueB.value
-    // console.log('set rungs', r, valueA.value, b)
+    // console.log('set rungs', r, ...endpoints.value)
     if ( r > 0 && b === null ) {
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
-        const mid = valueA.value
-        valueA.value = mid - width/2
-        valueB.value = mid + width/2
+        const mid = a
+        a = mid - width/2
+        b = mid + width/2
+        endpoints.value = [a,b]
       }
       else if (props.mode===1 ) {
-        valueB.value = valueA.value + props.stdWidth
+        endpoints.value = [a, a+props.stdWidth]
       }
       else
         throw Error(`Unknown rung mode ${props.mode}`)
@@ -112,14 +110,16 @@ const rungs = computed({
     else if ( r === 1 && b !== null ) {
       // convert from a range to a single shape
       if (props.mode===0)
-        valueA.value = (valueA.value + b) / 2
-      valueB.value = null
+        a = (a + b) / 2
+      b = null
+      endpoints.value = [a, b]
     }
     else {
       // from multi to multi
       if (props.mode===1) {
-        const width = (valueB.value - valueA.value) / (prevR-1)
-        valueB.value = valueA.value + width * (r-1)
+        const width = (b - a) / (prevR-1)
+        b = a + width * (r-1)
+        endpoints.value = [a, b]
       }
     }
   }
@@ -127,8 +127,7 @@ const rungs = computed({
 
 
 const values = computed(()=>{
-  let a = valueA.value
-  let b = valueB.value
+  const [a, b] = endpoints.value
   const r = props.builder.rungs
   let result
   if ( a===null || !r )
@@ -191,18 +190,18 @@ function translateOnModel(shape) {
   shape.onModel = function (model, oldModel) {
     oldOnModel.call(this, ...arguments)
     // console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
-    if (!this.beingDragged()) {
-      oldOnModel.call(this, ...arguments)
+    if (!this.beingDragged())
       return
-    }
     const prev = props.getModelValue(oldModel)
     const cur = props.getModelValue(this.model)
     const delta = cur - prev
     // console.log('delta', shape.id, prev, cur, delta)
+    let [a, b] = endpoints.value
     if (delta !== 0) {
-      valueA.value += delta
+      a += delta
       if (rungs.value > 1)
-        valueB.value += delta
+        b += delta
+      endpoints.value = [a, b]
     }
   }
 }
@@ -212,11 +211,11 @@ function setModelColor(model) {
     color.value = model.color
 }
 
-const shapeA = createShape(valueA.value, {color: defaultColor},
+const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = props.getModelValue(model);
-      if (value !== valueA.value)
-        valueA.value = value;
+      if (value !== endpoints.value[0])
+        endpoints.value = [value, endpoints.value[1]]
       setModelColor(model)
     },
     deleteSelf)
@@ -224,11 +223,11 @@ const shapeA = createShape(valueA.value, {color: defaultColor},
 if (props.mode===1)
   translateOnModel(shapeA)
 
-const shapeB = createShape(valueB.value, {color:defaultColor},
+const shapeB = createShape(endpoints.value[1], {color:defaultColor},
     function (model) {
       const value = props.getModelValue(model);
-      if (value !== valueB.value)
-        valueB.value = value;
+      if (value !== endpoints.value[1])
+        endpoints.value = [endpoints.value[0], value]
       setModelColor(model)
     },
     deleteSelf)
@@ -268,41 +267,10 @@ function makeModel(index) {
 }
 
 
-let group = null
 function adjustShapes() {
   // this is where all the shapes are created or adjusted
-  // console.log('adjustShapes()', valueA.value, valueB.value)
+  // console.error('adjustShapes()', ...endpoints.value)
   const vs = values.value
-  //
-  //
-  // const selection = []
-  // if (shapeA.id !== null)
-  //   selection.push(shapeA.id)
-  // if (shapeB.id !== null)
-  //   selection.push(shapeB.id)
-  // for( const s of interiorShapes ) {
-  //   if (s.id !== null)
-  //     selection.push(s.id)
-  // }
-  // if (group===null) {
-  //   if (selection.length) {
-  //     const gc = chart.shapesGroupController();
-  //     group = gc.createGroupFromSelection(selection)
-  //   }
-  // }
-  // else {
-  //   const gc = chart.shapesGroupController();
-  //   const shapes = gc.shapesInGroup(group)
-  //
-  //   console.log('shapes', group, shapes)
-  //   for (const s of selection)
-  //     if (!shapes.includes(s)) {
-  //       console.log('add shape to group', group, s)
-  //       gc.addShapeToGroup(group, s)
-  //     }
-  // }
-  //
-  //
   if (vs.length)
       cancelDrawing()
   // shape properties
@@ -343,11 +311,10 @@ function adjustShapes() {
         interiorShapes[i-1].setModel(makeModel(i))
     }
   }
-  return ''
 }
 
 function deleteSelf() {
-  if (valueA.value===null)
+  if (endpoints.value[0]===null)
     cancelDrawing()
   deleteBuilder(props.order, props.builder);
 }
@@ -361,9 +328,8 @@ function deleteShapes() {
   interiorShapes = []
 }
 
-onUnmounted(deleteShapes)
 
-if (!valueA.value)
+if (!endpoints.value[0])
   shapeA.createOrDraw(); // initiate drawing mode
 
 </script>