massive Shape rework: keep both tvPoints/Props and ourPoints/Props; delegate model updates to subclasses; DCA/VLine working but Ladder/HLine not done.

src/components/chart/DCABuilder.vue

@@ -1,33 +1,158 @@
 <template>
-  <builder-panel :builder="builder">
-    <template v-slot:title>
-      <span>DCA</span>
-      <span v-if="!builder.points">Draw your timeframe on the chart!</span>
-    </template>
-    <template v-slot:text>
-      <input type="number" min="1" max="2">
-    </template>
-  </builder-panel>
+  <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"
+                :std-width="stdWidth" :build-tranches="buildTranches">
+    <v-list style="background-color: inherit">
+      <v-list-item v-for="t in absoluteTimes">{{t}}</v-list-item>
+    </v-list>
+  </rung-builder>
 </template>
 
 <script setup>
-import BuilderPanel from "@/components/chart/BuilderPanel.vue";
-import {drawShape, ShapeCallback, VerboseCallback} from "@/charts/chart.js";
-import {prototype} from "@/common.js";
-import {ShapeType} from "@/charts/shape.js";
+import {builderDefaults, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js";
+import {VLine} from "@/charts/shape.js";
+import {sideColor} from "@/misc.js";
+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";
 
-const props = defineProps(['builder'])
+const s = useStore()
+const os = useOrderStore()
+const co = useChartOrderStore()
+const theme = useTheme().current
+const props = defineProps(['order', 'builder'])
 
-const DCAArtist = prototype(VerboseCallback, {
-  onDraw(widget, chart) { console.log('dca start draw') },
-  onCreate(widget, chart) { console.log('dca start draw') },
+const stdWidth = computed(()=>10 * co.intervalSecs)
+
+function computeDefaultColor() {
+  const index = props.order.builders.indexOf(props.builder)
+  return sideColor(props.order.buy, index)
+}
+
+const defaultColor = computeDefaultColor()
+
+// Fields must be defined in order to be reactive
+builderDefaults(props.builder, {
+  timeA: s.clock, // todo 0
+  timeB: null,
+  // relative: true,
+  relative: false, // todo
+  rungs: 1,
+  skew: 0,
+  color: defaultColor,
 })
 
-drawShape(ShapeType.VLine, prototype(DCAArtist, {}))
+const rawTimes = ref([])
+const times = computed(()=>rawTimes.value.map((t)=>Math.round(t)))
+const endTimes = computed(()=>{
+  if (props.builder.rungs === 1)
+    return DISTANT_FUTURE
+  const ts = times.value
+  const window = Math.max(MIN_EXECUTION_TIME, Math.floor((ts[ts.length-1]-ts[0])/props.builder.rungs))
+  return ts.map((t)=>t+window)
+})
+const absoluteTimes = computed(()=>{
+  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)
+})
 
+const absTimeA = computed({
+  get() {
+    let result = props.builder.timeA
+    if (props.builder.relative)
+      result += s.clock
+    console.log('absTimeA', result)
+    return result
+  },
+  set(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)
+  }
+})
+const absTimeB = computed({
+  get() {
+    let result = props.builder.timeB
+    if (props.builder.relative)
+      result += s.clock
+    console.log('absTimeB', result)
+    return result
+  },
+  set(v) {
+    console.log('set absTimeB', props.builder.timeB, v)
+    if ( v !== null && props.builder.relative )
+      v -= s.clock
+    props.builder.timeB = v
+    console.log('absTimeB=',props.builder.timeB)
+  }
+})
+
+function buildTranches() {
+  const order = props.order
+  const builder = props.builder
+  const tranches = []
+
+  console.log('buildTranches', builder, order, tranches)
+  const ts = times.value
+  const ets = endTimes.value
+  const ws = weights.value
+  for(let i=0; i<ts.length; i++) {
+    const t = newTranche({
+      fraction: ws[i] * MAX_FRACTION,
+      startTime: ts[i],
+      endTime: ets[i],
+    })
+    tranches.push(t)
+  }
+  return tranches
+}
+
+
+function getModelValue(model) {
+  if(!model) {
+    console.log('getModelValue', model)
+    return null
+  }
+  return model.time
+}
+
+function setModelValue(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)
+    model.time = v
+  }
+}
+
+function setValues(values) {
+  if (!props.builder.relative)
+    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
+  }
+}
+
+function valueFromPoints(points) {
+  const result = points[0].time;
+  console.log('valueFromPoints', points, result);
+  return result
+}
 
 </script>
 
 <style scoped lang="scss">
+</style>
 
-</style>