From 613cb7d7f5493ed3ebd77b781bdc08e8dc3f815b Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Mon, 6 May 2024 14:32:02 -0400
Subject: [PATCH] diagonal debug

---
 src/charts/shape.js                      |  25 ++-
 src/components/chart/ChartOrder.vue      |   1 -
 src/components/chart/DiagonalBuilder.vue | 196 +++++++++++++++++++----
 src/components/chart/RungBuilder.vue     |  15 +-
 4 files changed, 184 insertions(+), 53 deletions(-)

diff --git a/src/charts/shape.js b/src/charts/shape.js
index 161f019..ddc7cd5 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -57,7 +57,7 @@ export class Shape {
         //   lineColor, textColor, color, // lineColor and textColor default to color
         // }
 
-        this.debug = false
+        this.debug = true
         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
@@ -324,30 +324,17 @@ export class Shape {
 }
 
 
-let lineChangeInfo = null
-
 function dirtyPoints(pointsA, pointsB) {
-    const result = dirtyPoints2(pointsA,pointsB)
-    console.error('dirtyPoints', result, pointsA, pointsB)
-    return result
-}
-function dirtyPoints2(pointsA, pointsB) {
-    console.log('dp2', pointsA, pointsB)
     if (pointsA === undefined)
         return true
-    console.log('dp2b')
     if (pointsB === undefined)
         return false
-    console.log('dp2c')
     if (pointsB===null)
         return pointsA !== null
-    console.log('dp2d')
     if (pointsA===null)
         return pointsB.length > 0
-    console.log('dp2e')
     if (pointsA.length!==pointsB.length)
         return true
-    console.log('dp2f')
     for (const i in pointsA) {
         const a = pointsA[i]
         const b = pointsB[i]
@@ -355,7 +342,6 @@ function dirtyPoints2(pointsA, pointsB) {
             a.time !== b.time || a.price !== b.price )
             return true
     }
-    console.log('dp3')
     return false
 }
 
@@ -401,7 +387,7 @@ class ShapeTVCallbacks {
 
     onProps(shapeId, _tvShape, props) {
         if (!this.enabled) return // possible when shape is deleted and re-created
-        if (this.shape.debug) console.log('tvOnProps', props)
+        if (this.shape.debug) console.error('tvOnProps', props)
         this.shape.onProps(props)
         this.shape.tvProps = props
     }
@@ -563,6 +549,13 @@ export class DLine extends Line {
     }
 
 
+    drawingOverrides() {
+        const result = super.drawingOverrides();
+        result.linetoolextended = {extendLeft: false, extendRight: false}
+        return result
+    }
+
+
     delete() {
         this.model.pointA = null
         this.model.pointB = null
diff --git a/src/components/chart/ChartOrder.vue b/src/components/chart/ChartOrder.vue
index d4169e4..a20a4ad 100644
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -29,7 +29,6 @@
       </template>
       <div class="my-3">
         <div v-if="order.builders.length===0">  <!--todo remove gralpha limitation of one builder-->
-          <span :style="colorStyle" class="ma-3">Add condition:</span>
           <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
           <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
           <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" @click="build(order,'DiagonalBuilder')">Diagonal</v-btn>
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index a6e5dfe..3b84c9f 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -4,53 +4,84 @@
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :set-values="setLines" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
-    <span>{{ endpoints }}</span>
-<!--
     <table>
       <tbody>
-      <template v-if="prices.length>1">
         <tr>
+          <td rowspan="2" class="label">Line A</td>
           <td>
-            <v-text-field type="number" v-model="higherPrice" min="0"
-                          density="compact" hide-details class="mx-1 my-2" variant="outlined"
-                          label="Price"
+            <absolute-time-entry v-model="time1A"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price1A" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
                           :color="color" :base-color="color"
-                          style="flex: 6em"
+                          label="Price"
+            />
+          </td>
+          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        </tr>
+        <tr>
+          <td>
+            <absolute-time-entry v-model="time1B"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price1B" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
             />
           </td>
-          <td class="weight">{{ allocationText(weights[higherIndex]) }}</td>
         </tr>
         <tr v-for="i in innerIndexes" class="ml-5">
-          <td class="pl-5">{{ prices[i] }}</td>
+          <td class="text-right">&nbsp;</td>
+          <td colspan="2" class="text-center"><i>Diagonal</i></td>
           <td class="weight">{{ allocationText(weights[i]) }}</td>
         </tr>
-      </template>
-      <tr>
-        <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"
-          />
-        </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[lowerIndex]) : '' }}</td>
-      </tr>
+        <tr v-if="weights.length>1">
+          <td rowspan="2" class="label">Line B</td>
+          <td>
+            <absolute-time-entry v-model="time2A"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price2A" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
+            />
+          </td>
+          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        </tr>
+        <tr v-if="weights.length>1">
+          <td>
+            <absolute-time-entry v-model="time2B"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price2B" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
+            />
+          </td>
+        </tr>
       </tbody>
     </table>
--->
   </rung-builder>
 </template>
 
 <script setup>
-import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {allocationText, 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";
 import {computed, ref} from "vue";
 import {DLine} from "@/charts/shape.js";
-import {vectorInterpolate} from "@/vector.js";
+import {vectorEquals, vectorInterpolate} from "@/vector.js";
+import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue";
 
 const s = useStore()
 const os = useOrderStore()
@@ -65,6 +96,8 @@ function computeDefaultColor() {
 
 const defaultColor = computeDefaultColor()
 
+const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
+
 // Fields must be defined in order to be reactive
 builderDefaults(props.builder, {
   lineA: null, // [{time, price}, {time, price}]
@@ -123,11 +156,101 @@ const endpoints = computed({
   }
 })
 
+const time1A = computed({
+  get() { return _endpoints.value[0] === null ? 0 : _endpoints.value[0][0] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:v, price: flatline0[1]}, {time:flatline0[2], price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const price1A = computed({
+  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][1] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: v}, {time:flatline0[2], price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const time1B = computed({
+  get() { return _endpoints.value[0] === null ? 0 : _endpoints.value[0][2] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: flatline0[1]}, {time:v, price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const price1B = computed({
+  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][3] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: v}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const time2A = computed({
+  get() { return _endpoints.value[1] === null ? 0 : _endpoints.value[1][0] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:v, price: flatline[1]}, {time:flatline[2], price: flatline[3]}],
+    )
+  }
+})
+
+const price2A = computed({
+  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][1] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: v}, {time:flatline[2], price: flatline[3]}],
+    )
+  }
+})
+
+const time2B = computed({
+  get() { return _endpoints.value[1] === null ? 0 : _endpoints.value[1][2] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: flatline[1]}, {time:v, price: flatline[3]}],
+    )
+  }
+})
+
+const price2B = computed({
+  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][3] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: v}],
+    )
+  }
+})
+
 function update(a, b) { // a and b are lines of two points
-  const newBuilder = {...props.builder}
-  newBuilder.lineA = a
-  newBuilder.lineB = b
-  emit('update:builder', newBuilder)
+  if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
+    const newBuilder = {...props.builder}
+    newBuilder.lineA = a
+    newBuilder.lineB = b
+    emit('update:builder', newBuilder)
+  }
 }
 
 
@@ -198,9 +321,24 @@ function dirtyLine(a, b) {
 
 <style scoped lang="scss">
 td.weight {
-  width: 11em;
+  width: 5em;
+  max-width: 8em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   text-align: right;
 }
+td.label {
+  $w: 4em;
+  width: $w;
+  min-width: $w;
+  max-width: $w;
+  text-align: right;
+  padding-right: .5em;
+}
+.price {
+  $w: 6em;
+  //width: $w;
+  min-width: $w;
+  max-width: 10em;
+}
 </style>
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index b47338a..c94c9f1 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -1,8 +1,9 @@
 <template>
   <builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
                  :adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
-    <div style="min-width: 4em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}</div>
-    <div>
+    <div style="min-width: 4em; font-size: larger" :style="colorStyle"
+         class="d-flex flex-column align-self-start ml-2">
+      <span class="w-100 text-center">{{ name }}</span>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
@@ -110,9 +111,9 @@ const rungs = computed({
     if ( r > 0 && vectorIsNull(b) ) {
       // convert single shape to a range
       if (props.mode===0) {
-        const width = props.stdWidth
+        const width = vectorize(props.stdWidth)
         const mid = vectorize(a)
-        // console.log('stdWidth', width)
+        console.log('stdWidth', width)
         const halfWidth = vectorDiv(width,2);
         a = vectorAdd(mid, vectorNeg(halfWidth) )
         b = vectorAdd(mid, halfWidth)
@@ -142,12 +143,13 @@ const rungs = computed({
   }
 })
 
-const rungsDisabled = computed(()=>{console.log('rd',endpoints.value); return endpoints.value[0]===null})
+const rungsDisabled = computed(()=>endpoints.value[0]===null)
 
 const values = computed(()=>{
   let [a, b] = endpoints.value
   a = vectorize(a)
   b = vectorize(b)
+  console.log('computing values', a, b)
   const r = props.builder.rungs
   let result
   if ( !r || vectorIsNull(a) )
@@ -251,14 +253,13 @@ function translateOnModel(shape) {
 
 function setModelColor(model) {
   console.log('setmc', color.value, model.color)
-  if (model.color && model.color !== color.value)
+  if (model.color !== undefined && model.color !== color.value)
     color.value = model.color
 }
 
 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = getModelValue(model);
-      console.log('gotModelValue', model, value)
       if ( !vectorEquals(value, endpoints.value[0]) )
         setEndpoints(value, endpoints.value[1])
       setModelColor(model)