DCA redraw hacks

src/components/chart/DCABuilder.vue

@@ -1,7 +1,10 @@
 <template>
   <rung-builder name='DCA' :order="order" :builder="builder"
-                v-model:value-a="absTimeA" v-model:value-b="absTimeB" :mode="1" :shape="VLine"
-                :get-model-value="getModelValue" :set-model-value="setModelValue" :set-values="setValues"
+                v-model:value-a="absTimeA" v-model:value-b="absTimeB" :mode="1" :flip="flipped"
+                :shape="VLine"
+                :get-model-value="getModelValue" :set-model-value="setModelValue"
+                :get-points-value="getPointsValue"
+                :set-values="setValues" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
     <v-list style="background-color: inherit">
       <v-list-item v-for="t in absoluteTimes">{{t}}</v-list-item>
@@ -17,7 +20,8 @@ import {useTheme} from "vuetify";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {DISTANT_FUTURE, MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
-import {computed, ref} from "vue";
+import {computed, ref, watchEffect} from "vue";
+import {chart, dragging} from "@/charts/chart.js";
 
 const s = useStore()
 const os = useOrderStore()
@@ -25,7 +29,8 @@ const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
 
-const stdWidth = computed(()=>10 * co.intervalSecs)
+const minWidth = computed(()=>co.intervalSecs)
+const stdWidth = computed(()=>10 * minWidth.value)
 
 function computeDefaultColor() {
   const index = props.order.builders.indexOf(props.builder)
@@ -46,6 +51,8 @@ builderDefaults(props.builder, {
 })
 
 const rawTimes = ref([])
+const weights = ref([])
+
 const times = computed(()=>rawTimes.value.map((t)=>Math.round(t)))
 const endTimes = computed(()=>{
   if (props.builder.rungs === 1)
@@ -55,27 +62,49 @@ const endTimes = computed(()=>{
   return ts.map((t)=>t+window)
 })
 const absoluteTimes = computed(()=>{
-  console.log('absoluteTimes', props.builder.relative, times.value)
+  // console.log('absoluteTimes', props.builder.relative, times.value)
   if (!props.builder.relative)
     return times.value
   const now = s.clock
   return times.value.map((t)=>now+t)
 })
 
+
+watchEffect(()=>{
+  // auto scroll
+  if (!dragging && absoluteTimes.value.length) {
+    const endTime = absoluteTimes.value[absoluteTimes.value.length-1]
+    const range = chart.getVisibleRange()
+    const width = range.to - range.from
+    const now = s.clock
+    const extra = (Math.max(0,endTime - now) + minWidth.value) / width
+    // console.log('visrange', range, width, absV)
+    if (range.to < endTime) {
+      // console.log('scrolling')
+      chart.setVisibleRange({from: now - width, to: now}, {
+        percentRightMargin: Math.round(100 * extra),
+        applyDefaultRightMargin: false
+      })
+    }
+  }
+})
+
+
 const absTimeA = computed({
   get() {
     let result = props.builder.timeA
     if (props.builder.relative)
       result += s.clock
-    console.log('absTimeA', result)
+    // console.log('absTimeA', result)
     return result
   },
   set(v) {
-    console.log('set absTimeA', props.builder.timeA, v)
+    // console.log('set absTimeA', props.builder.timeA, v)
     if (props.builder.relative)
       v -= s.clock
     props.builder.timeA = v
-    console.log('absTimeA=',props.builder.timeA)
+    // console.log('absTimeA=',props.builder.timeA)
+    scroll()
   }
 })
 const absTimeB = computed({
@@ -83,15 +112,57 @@ const absTimeB = computed({
     let result = props.builder.timeB
     if (props.builder.relative)
       result += s.clock
-    console.log('absTimeB', result)
+    // console.log('absTimeB', result)
     return result
   },
   set(v) {
-    console.log('set absTimeB', props.builder.timeB, v)
+    // console.log('set absTimeB', props.builder.timeB, v)
+    const absV = v
     if ( v !== null && props.builder.relative )
       v -= s.clock
     props.builder.timeB = v
-    console.log('absTimeB=',props.builder.timeB)
+    const maxA = v - minWidth.value;
+    if (props.builder.timeA > maxA)
+      props.builder.timeA = maxA
+    // console.log('absTimeB=',props.builder.timeB)
+    scroll()
+  }
+})
+
+const flipped = computed(()=>{
+  const a = props.builder.timeA
+  const b = props.builder.timeB
+  return a !== null && b !== null && a > b
+})
+
+const higherIndex = computed(()=>flipped.value ? 0 : weights.value.length-1)
+const lowerIndex = computed(()=>!flipped.value ? 0 : weights.value.length-1)
+const innerIndexes = computed(()=>{
+  const n = times.value.length
+  const f = flipped.value
+  const result = []
+  for (let i=1; i<n-1; i++)
+    result.push(f?i:n-1-i)
+  return result
+})
+
+const earlierTime = computed({
+  get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
+  set(v) {
+    if (!flipped.value)
+      props.builder.timeA = v
+    else
+      props.builder.timeB = v
+  }
+})
+
+const laterTime = computed({
+  get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
+  set(v) {
+    if (!flipped.value)
+      props.builder.timeA = v
+    else
+      props.builder.timeB = v
   }
 })
 
@@ -124,11 +195,15 @@ function getModelValue(model) {
   return model.time
 }
 
+function getPointsValue(points) {
+  return points[0].price
+}
+
 function setModelValue(model, value) {
-  console.log('DCA set model value', model, value)
+  // console.log('DCA set model value', model, value)
   const v = value === null ? null : props.builder.relative ? s.clock + Math.round(value) : Math.round(value)
   if (model.time !== v) {
-    console.log('DCA do set time', v)
+    // console.log('DCA do set time', v)
     model.time = v
   }
 }
@@ -138,18 +213,11 @@ function setValues(values) {
     rawTimes.value = values
   else {
     const now = s.clock
-    const vs = []
-    for (let i = 0; i < values.length; i++)
-      vs.push(values[i] - now)
-    rawTimes.value = vs
+    rawTimes.value = values.map((v)=>v-now)
   }
 }
 
-function valueFromPoints(points) {
-  const result = points[0].time;
-  console.log('valueFromPoints', points, result);
-  return result
-}
+function setWeights(ws) { weights.value = ws }
 
 </script>