more diagonal work (unfinished)

src/components/chart/DiagonalBuilder.vue

@@ -2,9 +2,10 @@
   <rung-builder name="Diagonal" :order="order" :builder="builder" v-model="endpoints"
                 :shape="DLine" :mode="0"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
-                :get-points-value="getPointsValue"
                 :set-values="setLines" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
+    <span>(Diagonals)</span>
+<!--
     <table>
       <tbody>
       <template v-if="prices.length>1">
@@ -37,12 +38,13 @@
       </tr>
       </tbody>
     </table>
+-->
   </rung-builder>
 </template>
 
 <script setup>
-import {allocationText, applyLine, applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
-import {interpolate, sideColor} from "@/misc.js";
+import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {sideColor} from "@/misc.js";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
@@ -65,8 +67,8 @@ const defaultColor = computeDefaultColor()
 
 // Fields must be defined in order to be reactive
 builderDefaults(props.builder, {
-  lineA: [null, null], // [{time, price}, {time, price}]
-  lineB: [null, null],
+  lineA: null, // [{time, price}, {time, price}]
+  lineB: null,
   rungs: 1,
   skew: 0,
   color: defaultColor,
@@ -97,12 +99,13 @@ function buildTranches() {
 
 
 function flattenLine(l) {
-  return l === null ? [null, null, null, null] : [l[0].time, l[0].price, l[1].time, l[1].price]
+  return l === null ? null : [l[0].time, l[0].price, l[1].time, l[1].price]
 }
 
 
 function buildLine(f) {
-  return f[0] === null ? null : [{time: f[0], price: f[1]}, {time: f[2], price: f[3]}]
+  console.log('buildLine', f)
+  return f === null ? null : [{time: f[0], price: f[1]}, {time: f[2], price: f[3]}]
 }
 
 const _endpoints = ref([flattenLine(props.builder.lineA), flattenLine(props.builder.lineB)])
@@ -111,13 +114,16 @@ const endpoints = computed({
     return _endpoints.value
   },
   set(v) {
-    const [a, b] = v
+    let [a, b] = v
+    a = buildLine(a)
+    b = buildLine(b)
+    // noinspection JSValidateTypes
+    _endpoints.value = v
     update(a, b)
   }
 })
 
 function update(a, b) { // a and b are lines of two points
-  _endpoints.value = [flattenLine(a), flattenLine(b)]
   const newBuilder = {...props.builder}
   newBuilder.lineA = a
   newBuilder.lineB = b
@@ -134,6 +140,7 @@ const innerIndexes = computed(() => {
 })
 
 
+// these are set by the RungBuilder
 const flatLines = ref([])
 const weights = ref([])
 
@@ -146,25 +153,43 @@ function setWeights(ws) {
 }
 
 
-const color = computed(() => props.builder.color ? props.builder.color : defaultColor)
-
-const stdWidth = [2 * co.meanRange, 2 * co.meanRange]
+const stdWidth = computed(()=>[0, 2 * co.meanRange, 0, 2 * co.meanRange])
 
 
 function getModelValue(model) {
-  if (!model)
+  // model is the DLine shape's model object
+  if (!model.pointA || !model.pointB)
     return null
-  return [flattenLine(model.lineA), flattenLine(model.lineB)]
+  const result = flattenLine([model.pointA, model.pointB]);
+  console.log('getModelValue', {...model}, result)
+  return result // this is the vector the RungBuilder will interpolate
 }
 
-function getPointsValue(points) {
-  return points[0].price
-}
 
 function setModelValue(model, value) {
-  // console.log('setModelValue->', model.price, value)
-  if (model.price !== value)
-    model.price = value
+  const oldModel = {...model};
+  console.log('setModelValue', oldModel, value)
+  const oldLine = !model.pointA || !model.pointB ? null : [model.pointA, model.pointB]
+  const line = buildLine(value)
+  if (dirtyLine(oldLine, line)) {
+    if (line===null) {
+      model.pointA = null
+      model.pointB = null
+    }
+    else {
+      model.pointA = line[0]
+      model.pointB = line[1]
+    }
+  }
+  console.log('setModelValue end', oldModel, value, model)
+}
+
+
+function dirtyLine(a, b) {
+  console.log('dirtyLine', a, b)
+  return a === b ? false :
+      a === null && b !== null || a !== null && b === null ||
+      a[0].time !== b[0].time || a[0].price !== b[0].price || a[1].time !== b[1].time || a[1].price !== b[1].price
 }
 
 
@@ -178,4 +203,3 @@ td.weight {
   text-align: right;
 }
 </style>
-