From 0ad31dfa082ae8f222d7858013a9451716f1c5fc Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 30 Apr 2024 16:43:12 -0400
Subject: [PATCH 1/9] vectorized rung builder

---
 src/components/chart/LimitBuilder.vue |  2 +-
 src/components/chart/RungBuilder.vue  | 71 ++++++++++++++++++---------
 src/vector.js                         | 58 ++++++++++++++++++++++
 3 files changed, 107 insertions(+), 24 deletions(-)
 create mode 100644 src/vector.js

diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index 8a8820b..c32bc6d 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -55,7 +55,6 @@ import {HLine} from "@/charts/shape.js";
 const s = useStore()
 const os = useOrderStore()
 const co = useChartOrderStore()
-const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
 const emit = defineEmits(['update:builder'])
 
@@ -251,6 +250,7 @@ function setModelValue(model, value) {
 
 <style scoped lang="scss">
 td.weight {
+  width: 11em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   text-align: right;
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index cd871b1..e9616b7 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -41,6 +41,7 @@ import {linspace, sideColor} from "@/misc.js";
 import {computed, watchEffect} from "vue";
 import Color from "color";
 import {cancelDrawing} from "@/charts/chart.js";
+import {devectorize, vectorAdd, vectorDiv, vectorMul, vectorSub, vectorIsNull, vectorize} from "@/vector.js";
 
 const os = useOrderStore()
 const co = useChartOrderStore()
@@ -55,11 +56,11 @@ const props = defineProps({
   mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
   flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
   orientation: { type: Number, default: 1 },  // 0 = horizontal slider, 1 = vertical
+  // values may be scalars or vector arrays
   getModelValue: Function,  // getModelValue(model) -> value
   setModelValue: Function,  // setModelValue(model,value) -> void
-  getPointsValue: Function,  // getValueFromPoints(points) -> value
   setValues: Function,  // setValues(values:Array) -> void
-  setWeights: Function,  // setValues(values:Array) -> void
+  setWeights: Function,  // setWeights(values:Array) -> void
 })
 
 const flippedSign = computed(()=>props.flip?-1:1)
@@ -88,37 +89,38 @@ const rungs = computed({
       return
     }
     let [a,b] = endpoints.value
-    const prevR = props.builder.rungs
     r = Number(r)
+    const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
-    // console.log('set rungs', r, ...endpoints.value)
-    if ( r > 0 && b === null ) {
+    console.log('set rungs', prevR, r, a, b)
+    if ( r > 0 && vectorIsNull(b) ) {
+      console.log('convert to range')
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
         const mid = a
-        a = mid - width/2
-        b = mid + width/2
+        a = vectorAdd(mid, -width/2)
+        b = vectorAdd(mid, +width/2)
         endpoints.value = [a,b]
       }
       else if (props.mode===1 ) {
-        endpoints.value = [a, a+props.stdWidth]
+        endpoints.value = [a, vectorAdd(a,props.stdWidth)]
       }
       else
         throw Error(`Unknown rung mode ${props.mode}`)
     }
-    else if ( r === 1 && b !== null ) {
+    else if ( r === 1 && !vectorIsNull(b) ) {
       // convert from a range to a single shape
       if (props.mode===0)
-        a = (a + b) / 2
+        a = vectorDiv(vectorAdd(a,b), 2)
       b = null
       endpoints.value = [a, b]
     }
     else {
       // from multi to multi
       if (props.mode===1) {
-        const width = (b - a) / (prevR-1)
-        b = a + width * (r-1)
+        const width = vectorDiv(vectorSub(b, a), (prevR-1))
+        b = vectorMul(vectorAdd(a, width), (r-1))
         endpoints.value = [a, b]
       }
     }
@@ -128,14 +130,27 @@ const rungs = computed({
 
 const values = computed(()=>{
   const [a, b] = endpoints.value
+  console.log('values', a, b)
   const r = props.builder.rungs
   let result
-  if ( a===null || !r )
+  if ( !r || vectorIsNull(a) )
     result = []  // no data
   else if (r===1)
     result = [a]  // single shape
-  else
-    result = linspace(a, b, r)  // linear spacing
+  else {
+    const columns = []
+    for (let i=0; i<a.length; i++)
+      columns.push(linspace(a[i], b[i], r))  // linear spacing for each dimension
+    // transpose
+    result = []
+    for (let i=0; i<r; i++) {
+      const vector = []
+      for (let j=0; j<a.length; j++)
+        vector.push(columns[j][i])
+      result.push(devectorize(vector))
+    }
+  }
+  console.log('vectorized values', result)
   props.setValues(result)
   return result;
 })
@@ -180,11 +195,21 @@ const colorStyle = computed(() => {
 // we keep two special control shapes as the edges of the range, with deletable shapes in-between
 
 function createShape(value, model, onModel, onDelete) {
-  props.setModelValue(model, value)
+  setModelValue(model, value)
   return new props.shape(model, onModel, onDelete)  // props.shape is the constructor function
 }
 
 
+function getModelValue(model) {
+  return vectorize(props.getModelValue(model));
+}
+
+
+function setModelValue(model, value) {
+  props.setModelValue(model, devectorize(value))
+}
+
+
 function translateOnModel(shape) {
   const oldOnModel = shape.onModel
   shape.onModel = function (model, oldModel) {
@@ -192,15 +217,15 @@ function translateOnModel(shape) {
     // console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
     if (!this.beingDragged())
       return
-    const prev = props.getModelValue(oldModel)
-    const cur = props.getModelValue(this.model)
+    const prev = getModelValue(oldModel)
+    const cur = getModelValue(this.model)
     const delta = cur - prev
     // console.log('delta', shape.id, prev, cur, delta)
     let [a, b] = endpoints.value
     if (delta !== 0) {
-      a += delta
+      a = vectorAdd(a, delta)
       if (rungs.value > 1)
-        b += delta
+        b = vectorAdd(b, delta)
       endpoints.value = [a, b]
     }
   }
@@ -213,7 +238,7 @@ function setModelColor(model) {
 
 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
-      const value = props.getModelValue(model);
+      const value = getModelValue(model);
       if (value !== endpoints.value[0])
         endpoints.value = [value, endpoints.value[1]]
       setModelColor(model)
@@ -225,7 +250,7 @@ if (props.mode===1)
 
 const shapeB = createShape(endpoints.value[1], {color:defaultColor},
     function (model) {
-      const value = props.getModelValue(model);
+      const value = getModelValue(model);
       if (value !== endpoints.value[1])
         endpoints.value = [endpoints.value[0], value]
       setModelColor(model)
@@ -261,7 +286,7 @@ function makeModel(index) {
     amount: props.order.amount * alloc,
     amountSymbol: amountSymbol.value,
   }
-  props.setModelValue(result, values.value[index])
+  setModelValue(result, values.value[index])
   return result
 }
 
diff --git a/src/vector.js b/src/vector.js
new file mode 100644
index 0000000..6205689
--- /dev/null
+++ b/src/vector.js
@@ -0,0 +1,58 @@
+export function vectorize(value) {
+    if (value === undefined) {
+        console.warn('vectorizing undefined as null')
+        return null
+    }
+    if (value === null)
+        return null
+    if (value.length === undefined)
+        value = [value]
+    return value;
+}
+
+export function devectorize(value) {
+  return value === null || value.length === 0 ? null : value.length === 1 ? value[0] : value
+}
+
+
+export function vectorIsNull(value) {
+    console.log('vectorIsNull', value, value === null || value.length === 1 && value[0] === null)
+  return value === null || value.length === 1 && value[0] === null
+}
+
+
+export function vectorAdd(a, b) {
+  const result = []
+  const scalarB = b.length === undefined
+  for( let i=0; i<a.length; i++ )
+    result.push(a[i]+(scalarB ? b : b[i]))
+  console.log('vectorAdd', a, b, result)
+  return result
+}
+
+export function vectorSub(a, b) {
+  const result = []
+  const scalarB = b.length === undefined
+  for( let i=0; i<a.length; i++ )
+    result.push(a[i]-(scalarB ? b : b[i]))
+  console.log('vectorSub', a, b, result)
+  return result
+}
+
+export function vectorMul(a, b) {
+  const result = []
+  const scalarB = b.length === undefined
+  for( let i=0; i<a.length; i++ )
+    result.push(a[i]*(scalarB ? b : b[i]))
+  console.log('vectorMul', a, b, result)
+  return result
+}
+
+export function vectorDiv(a, b) {
+  const result = []
+  const scalarB = b.length === undefined
+  for( let i=0; i<a.length; i++ )
+    result.push(a[i]/(scalarB ? b : b[i]))
+  console.log('vectorDiv', a, b, result)
+  return result
+}

From 44fbbb7695c2745f400045d527dc99f11ab8edbf Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 30 Apr 2024 17:09:48 -0400
Subject: [PATCH 2/9] vectorized rung builder

---
 src/components/AbsoluteTimeEntry.vue |  2 +-
 src/components/chart/DCABuilder.vue  |  9 --------
 src/components/chart/RungBuilder.vue | 34 +++++++++++++++++-----------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/AbsoluteTimeEntry.vue b/src/components/AbsoluteTimeEntry.vue
index adcc6d9..5bc8b52 100644
--- a/src/components/AbsoluteTimeEntry.vue
+++ b/src/components/AbsoluteTimeEntry.vue
@@ -23,7 +23,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const hideDetails = true
 
-const now = computed(()=>DateTime.fromSeconds(props.modelValue).setZone(s.timeZone))
+const now = computed(()=>{console.log('ate now',props.modelValue); return DateTime.fromSeconds(props.modelValue).setZone(s.timeZone)})
 
 const year = computed({
   get() { return now.value.year },
diff --git a/src/components/chart/DCABuilder.vue b/src/components/chart/DCABuilder.vue
index 7729064..adfbd11 100644
--- a/src/components/chart/DCABuilder.vue
+++ b/src/components/chart/DCABuilder.vue
@@ -233,16 +233,7 @@ function setModelValue(model, value) {
 }
 
 function setValues(values) {
-  // console.log('setValues', values)
   times.value = values.map((t)=>Math.round(t))
-/*
-  if (!props.builder.relative)
-    rawTimes.value = values
-  else {
-    const now = s.clock
-    rawTimes.value = values.map((v)=>v-now)
-  }
-*/
 }
 
 function setWeights(ws) { weights.value = ws }
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index e9616b7..69b0dc4 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -79,6 +79,11 @@ watchEffect(()=>{
 })
 
 
+function setEndpoints(a, b) {
+  endpoints.value = [devectorize(a), devectorize(b)]
+}
+
+
 const rungs = computed({
   get() {
     return props.builder.rungs
@@ -89,6 +94,8 @@ const rungs = computed({
       return
     }
     let [a,b] = endpoints.value
+    a = vectorize(a)
+    b = vectorize(b)
     r = Number(r)
     const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
@@ -98,13 +105,13 @@ const rungs = computed({
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
-        const mid = a
+        const mid = vectorize(a)
         a = vectorAdd(mid, -width/2)
         b = vectorAdd(mid, +width/2)
-        endpoints.value = [a,b]
+        setEndpoints(a,b)
       }
       else if (props.mode===1 ) {
-        endpoints.value = [a, vectorAdd(a,props.stdWidth)]
+        setEndpoints(a, vectorAdd(a,props.stdWidth))
       }
       else
         throw Error(`Unknown rung mode ${props.mode}`)
@@ -114,14 +121,15 @@ const rungs = computed({
       if (props.mode===0)
         a = vectorDiv(vectorAdd(a,b), 2)
       b = null
-      endpoints.value = [a, b]
+      setEndpoints(a,b)
     }
     else {
       // from multi to multi
       if (props.mode===1) {
+        console.log('multi-multi mode 1')
         const width = vectorDiv(vectorSub(b, a), (prevR-1))
-        b = vectorMul(vectorAdd(a, width), (r-1))
-        endpoints.value = [a, b]
+        b = vectorAdd(a, vectorMul(width, (r-1)))
+        setEndpoints(a,b)
       }
     }
   }
@@ -129,14 +137,15 @@ const rungs = computed({
 
 
 const values = computed(()=>{
-  const [a, b] = endpoints.value
-  console.log('values', a, b)
+  let [a, b] = endpoints.value
+  a = vectorize(a)
+  b = vectorize(b)
   const r = props.builder.rungs
   let result
   if ( !r || vectorIsNull(a) )
     result = []  // no data
   else if (r===1)
-    result = [a]  // single shape
+    result = [devectorize(a)]  // single shape
   else {
     const columns = []
     for (let i=0; i<a.length; i++)
@@ -150,7 +159,6 @@ const values = computed(()=>{
       result.push(devectorize(vector))
     }
   }
-  console.log('vectorized values', result)
   props.setValues(result)
   return result;
 })
@@ -226,7 +234,7 @@ function translateOnModel(shape) {
       a = vectorAdd(a, delta)
       if (rungs.value > 1)
         b = vectorAdd(b, delta)
-      endpoints.value = [a, b]
+      setEndpoints(a,b)
     }
   }
 }
@@ -240,7 +248,7 @@ const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = getModelValue(model);
       if (value !== endpoints.value[0])
-        endpoints.value = [value, endpoints.value[1]]
+        setEndpoints(value, endpoints.value[1])
       setModelColor(model)
     },
     deleteSelf)
@@ -252,7 +260,7 @@ const shapeB = createShape(endpoints.value[1], {color:defaultColor},
     function (model) {
       const value = getModelValue(model);
       if (value !== endpoints.value[1])
-        endpoints.value = [endpoints.value[0], value]
+        setEndpoints(endpoints.value[0], value)
       setModelColor(model)
     },
     deleteSelf)

From 7459d560c4276dc31f8fea1f4b45b1e705b3dfb5 Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 30 Apr 2024 21:30:16 -0400
Subject: [PATCH 3/9] initial diagonal work (unfinished)

---
 src/charts/chart.js                      |  19 +++
 src/charts/shape.js                      | 123 ++++++++-------
 src/components/AbsoluteTimeEntry.vue     |   2 +-
 src/components/chart/DCABuilder.vue      |   1 -
 src/components/chart/DiagonalBuilder.vue | 181 +++++++++++++++++++++++
 src/components/chart/LimitBuilder.vue    |  44 +-----
 src/components/chart/RungBuilder.vue     |  25 ++--
 src/layouts/chart/MainView.vue           |   2 +-
 src/misc.js                              |  18 +++
 src/orderbuild.js                        |  42 +-----
 src/vector.js                            |  65 ++++----
 11 files changed, 357 insertions(+), 165 deletions(-)
 create mode 100644 src/components/chart/DiagonalBuilder.vue

diff --git a/src/charts/chart.js b/src/charts/chart.js
index a60088a..713441c 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -27,6 +27,7 @@ function changeSymbol(symbol) {
     lastSymbolChangedArgs = info
     symbolChangedCbs.forEach((cb)=>cb(info))
     co.selectedSymbol = info
+    co.meanRange = chartMeanRange()
 }
 
 
@@ -364,3 +365,21 @@ export function deleteShapeId(id) {
     // console.log('removing entity', id)
     chart.removeEntity(id)
 }
+
+function chartMeanRange() {
+    let range = 0
+    const series = chart.getSeries()
+    const bars = series.data().bars();
+    const final = Math.max(bars.size() - 50, 0)
+    let count = 0
+    for (let barIndex = bars.size() - 1; barIndex >= final; barIndex--) {
+        count++
+        const [_time, _open, high, low, _close, _volume, _ms] = bars.valueAt(barIndex)
+        range += (high - low)
+    }
+    if (count > 0)
+        range /= count
+    else
+        range = 1
+    return range
+}
diff --git a/src/charts/shape.js b/src/charts/shape.js
index 3bdc693..4545337 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -1,9 +1,9 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback, mixin} from "@/common.js";
-import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
-import {unique} from "@/misc.js";
-import {allocationText, useChartOrderStore} from "@/orderbuild.js";
+import {chart, createShape, deleteShapeId, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
+import {pointsToOhlcStart, unique} from "@/misc.js";
+import {allocationText} from "@/orderbuild.js";
 import Color from "color";
 
 
@@ -203,11 +203,11 @@ export class Shape {
         // createShape(this.type, this.points, {overrides:this.props}, new ShapeTVCallbacks(this))
         options = {...options}
         options['overrides'] = props
-        this.tvPoints = [...points]
+        this.tvPoints = pointsToOhlcStart(points)
         this.tvCallbacks = new ShapeTVCallbacks(this);
-        const id = createShape(this.type, points, options, this.tvCallbacks)
+        const id = createShape(this.type, this.tvPoints, options, this.tvCallbacks)
         // todo set id?
-        if (this.debug) console.log('created', this.type.name, points, id)
+        if (this.debug) console.log('created', this.type.name, this.tvPoints, id)
     }
 
     onCreate(points, props) {
@@ -241,23 +241,25 @@ export class Shape {
         // setting points to null will delete the shape from the chart. setting points to a valid value will cause the
         // shape to be drawn.
         if (this.debug) console.log('setPoints', this.id, this.ourPoints, points)
-        const oldPoints = this.ourPoints
         this.ourPoints = points
         if (points === null || !points.length)
             this.delete()
         else {
             if (this.id === null)
                 this.create()
-            else if (dirtyPoints(this.tvPoints, points)) {
-                const s = this.tvShape();
-                const lbe = s._model._lineBeingEdited
-                const lpbc = s._model._linePointBeingChanged
-                const lpbe = s._model._linePointBeingEdited
-                if (lpbc!==null)
-                    s._model.endChangingLinetool(lbe, lpbc)
-                s.setPoints(points)
-                if (lpbc!==null)
-                    s._model.startChangingLinetool(lbe, lpbc, lpbe)
+            else {
+                points = pointsToOhlcStart(points)
+                if (dirtyPoints(this.tvPoints, points)) {
+                    const s = this.tvShape();
+                    const lbe = s._model._lineBeingEdited
+                    const lpbc = s._model._linePointBeingChanged
+                    const lpbe = s._model._linePointBeingEdited
+                    if (lpbc!==null)
+                        s._model.endChangingLinetool(lbe, lpbc)
+                    s.setPoints(points)
+                    if (lpbc!==null)
+                        s._model.startChangingLinetool(lbe, lpbc, lpbe)
+                }
             }
         }
     }
@@ -376,15 +378,15 @@ class ShapeTVCallbacks {
     onPoints(shapeId, _tvShape, points) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.log('tvcb onPoints', points)
-        this.shape.tvPoints = points
         this.shape.onPoints(points)
+        this.shape.tvPoints = points
     }
 
     onProps(shapeId, _tvShape, props) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.log('tvOnProps', props)
-        this.shape.tvProps = props
         this.shape.onProps(props)
+        this.shape.tvProps = props
     }
 
     onDraw() {
@@ -492,12 +494,6 @@ export class HLine extends Line {
 }
 
 
-function nearestOhlcStart(time) {
-    const period = useChartOrderStore().intervalSecs
-    return Math.round(time/period) * period
-}
-
-
 export class VLine extends Line {
     constructor(model, onModel=null, onDelete=null, props=null) {
         super(ShapeType.VLine, onModel, onDelete, props)
@@ -505,23 +501,12 @@ export class VLine extends Line {
         // Model
         this.model.time = null
 
-        // since VLines must be on the start of an OHLC boundry, we track that value separately
-        this.shapeTime = null
-
         this.setModel(model) // call setModel at the end
     }
 
 
-    doCreate(points, props, options = {}) {
-        this.shapeTime = nearestOhlcStart(points[0].time);
-        points = [{time: this.shapeTime, price:0}]
-        if (this.debug) console.log('VLine.doCreate', this.shapeTime, points)
-        super.doCreate(points, props, options);
-    }
-
     delete() {
         this.model.time = null
-        this.shapeTime = null
         super.delete()
     }
 
@@ -537,26 +522,9 @@ export class VLine extends Line {
         }
     }
 
-    setPoints(points) {
-        // if (this.debug) console.error('VLine setPoints...', points)
-        if (points !== null && points.length) {
-            // adjust shape to ohlc boundry
-            const time = nearestOhlcStart(points[0].time);
-            if (time !== this.shapeTime) {
-                this.shapeTime = time
-                super.setPoints([{time, price:0}]);
-            }
-        }
-        else {
-            this.shapeTime = null
-            super.setPoints(points);
-        }
-        // if (this.debug) console.error('VLine setPoints', points)
-    }
-
     onPoints(points) {
         const time = points[0].time;
-        if ( time !== this.shapeTime ) {
+        if ( time !== this.tvPoints[0].time ) {
             super.onPoints(points);
             this.updateModel({time: time})
         }
@@ -564,3 +532,50 @@ export class VLine extends Line {
 
 }
 
+
+export class DLine extends Line {
+    constructor(model, onModel=null, onDelete=null, props=null) {
+        super(ShapeType.Line, onModel, onDelete, props)
+
+        this.debug = true // todo debug
+
+        // Model
+        this.model.pointA = null  // {time:..., price:...}
+        this.model.pointB = null
+
+        // since VLines must be on the start of an OHLC boundry, we track those value separately
+        this.shapeTimes = null
+
+        this.setModel(model) // call setModel at the end
+    }
+
+
+    delete() {
+        this.model.pointA = null
+        this.model.pointB = null
+        super.delete();
+    }
+
+    setModel(model) {
+        super.setModel(model)
+        if (model.pointA === null || model.pointB === null)
+            this.delete()
+        else if (dirtyPoints(this.model.pointA, model.pointA) || dirtyPoints(this.model.pointB, model.pointB)) {
+            this.model.pointA = model.pointA
+            this.model.pointB = model.pointB
+            this.setPoints([model.pointA, model.pointB])
+        }
+    }
+
+    onPoints(points) {
+        let dirty = this.tvPoints === null
+        for (let i=0; !dirty && i<points.length; i++) {
+            if( points[i].time !== this.tvPoints[i].time)
+                dirty = true
+        }
+        if (dirty) {
+            super.onPoints(points);
+            this.updateModel({pointA: points[0], pointB: points[0]})
+        }
+    }
+}
diff --git a/src/components/AbsoluteTimeEntry.vue b/src/components/AbsoluteTimeEntry.vue
index 5bc8b52..adcc6d9 100644
--- a/src/components/AbsoluteTimeEntry.vue
+++ b/src/components/AbsoluteTimeEntry.vue
@@ -23,7 +23,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const hideDetails = true
 
-const now = computed(()=>{console.log('ate now',props.modelValue); return DateTime.fromSeconds(props.modelValue).setZone(s.timeZone)})
+const now = computed(()=>DateTime.fromSeconds(props.modelValue).setZone(s.timeZone))
 
 const year = computed({
   get() { return now.value.year },
diff --git a/src/components/chart/DCABuilder.vue b/src/components/chart/DCABuilder.vue
index adfbd11..6fecc1b 100644
--- a/src/components/chart/DCABuilder.vue
+++ b/src/components/chart/DCABuilder.vue
@@ -129,7 +129,6 @@ watchEffect(()=>{
 const absTimeA = computed({
   get() { return _timeEndpoints.value[0] },
   set(v) {
-    console.log('set A', v)
     if (v!==null)
       v = Number(v)
     updateA(v)
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
new file mode 100644
index 0000000..c0a0a09
--- /dev/null
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -0,0 +1,181 @@
+<template>
+  <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">
+    <table>
+      <tbody>
+      <template v-if="prices.length>1">
+        <tr>
+          <td>
+            <v-text-field type="number" v-model="higherPrice" 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">{{ allocationText(weights[higherIndex]) }}</td>
+        </tr>
+        <tr v-for="i in innerIndexes" class="ml-5">
+          <td class="pl-5">{{ prices[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>
+      </tbody>
+    </table>
+  </rung-builder>
+</template>
+
+<script setup>
+import {allocationText, applyLine, applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {interpolate, 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";
+
+const s = useStore()
+const os = useOrderStore()
+const co = useChartOrderStore()
+const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
+
+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, {
+  lineA: [null, null], // [{time, price}, {time, price}]
+  lineB: [null, null],
+  rungs: 1,
+  skew: 0,
+  color: defaultColor,
+})
+
+
+function buildTranches() {
+  throw Error('unimplemented') // todo
+  const order = props.order
+  const builder = props.builder
+  const tranches = []
+
+  console.log('buildTranches', builder, order, tranches)
+  const la = buildLine(_endpoints[0])
+  const lb = buildLine(_endpoints[1])
+  const ws = weights.value
+  for (let i = 0; i < ws.length; i++) {
+    const w = ws[i]
+    const line = vectorInterpolate(la, lb, i/(ws.length-1))
+    const t = newTranche({fraction: w * MAX_FRACTION})
+    const symbol = co.selectedSymbol
+    console.log('symbol', symbol)
+    applyLinePoints(t, order.buy, ...line, symbol.decimals, symbol.inverted)
+    tranches.push(t)
+  }
+  return tranches
+}
+
+
+function flattenLine(l) {
+  return l === null ? [null, null, 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]}]
+}
+
+const _endpoints = ref([flattenLine(props.builder.lineA), flattenLine(props.builder.lineB)])
+const endpoints = computed({
+  get() {
+    return _endpoints.value
+  },
+  set(v) {
+    const [a, b] = 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
+  emit('update:builder', newBuilder)
+}
+
+
+const innerIndexes = computed(() => {
+  const n = flatLines.value.length
+  const result = []
+  for (let i = 1; i < n - 1; i++)
+    result.push(n - 1 - i)
+  return result
+})
+
+
+const flatLines = ref([])
+const weights = ref([])
+
+function setLines(ls) {
+  flatLines.value = ls
+}
+
+function setWeights(ws) {
+  weights.value = ws
+}
+
+
+const color = computed(() => props.builder.color ? props.builder.color : defaultColor)
+
+const stdWidth = [2 * co.meanRange, 2 * co.meanRange]
+
+
+function getModelValue(model) {
+  if (!model)
+    return null
+  return [flattenLine(model.lineA), flattenLine(model.lineB)]
+}
+
+function getPointsValue(points) {
+  return points[0].price
+}
+
+function setModelValue(model, value) {
+  // console.log('setModelValue->', model.price, value)
+  if (model.price !== value)
+    model.price = value
+}
+
+
+</script>
+
+<style scoped lang="scss">
+td.weight {
+  width: 11em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  text-align: right;
+}
+</style>
+
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index c32bc6d..cb5029f 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -1,7 +1,7 @@
 <template>
   <rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
                 v-model="priceEndpoints" :mode="0" :flip="flipped"
-                 :shape="HLine"
+                :shape="HLine"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :get-points-value="getPointsValue"
                 :set-values="setPrices" :set-weights="setWeights"
@@ -42,14 +42,13 @@
 </template>
 
 <script setup>
-import {applyLine2, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {allocationText, applyLine, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
 import {sideColor} from "@/misc.js";
-import {useTheme} from "vuetify";
 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, watchEffect} from "vue";
-import {chart} from "@/charts/chart.js";
+import {computed, ref} from "vue";
+import {chartMeanRange} from "@/charts/chart.js";
 import {HLine} from "@/charts/shape.js";
 
 const s = useStore()
@@ -93,7 +92,7 @@ function buildTranches() {
     })
     const symbol = co.selectedSymbol
     console.log('symbol', symbol)
-    applyLine2(t, !order.buy, p, 0, symbol.decimals, symbol.inverted)
+    applyLine(t, , p, 0, symbol.decimals, symbol.inverted)
     tranches.push(t)
   }
   return tranches
@@ -195,39 +194,8 @@ function setWeights(ws) { weights.value = ws }
 
 const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
 
-function computeRange() {
-  let range = 0
-  const series = chart.getSeries()
-  const bars = series.data().bars();
-  const final = Math.max(bars.size() - 50, 0)
-  let count = 0
-  for (let barIndex = bars.size() - 1; barIndex >= final; barIndex--) {
-    count++
-    const [_time, _open, high, low, _close, _volume, _ms] = bars.valueAt(barIndex)
-    range += (high - low)
-  }
-  if (count > 0)
-    range /= count
-  else
-    range = 1
-  return range
-}
+const stdWidth = 2*co.meanRange
 
-const stdWidth = 2*computeRange() // todo make reactive
-
-
-const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
-
-
-// todo move into misc and use in shape as well
-function allocationText(weight) {
-  const alloc = props.builder.allocation
-  if (alloc===null) return ''
-  const w = weight * alloc
-  // console.log('weight', weight, alloc, props.amount)
-  const a = props.order.amount * w
-  return `${(w*100).toFixed(1)}% = ${a.toLocaleString('fullwide')} ${amountSymbol.value}`
-}
 
 function getModelValue(model) {
   if(!model)
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index 69b0dc4..9d3fe7d 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -41,7 +41,16 @@ import {linspace, sideColor} from "@/misc.js";
 import {computed, watchEffect} from "vue";
 import Color from "color";
 import {cancelDrawing} from "@/charts/chart.js";
-import {devectorize, vectorAdd, vectorDiv, vectorMul, vectorSub, vectorIsNull, vectorize} from "@/vector.js";
+import {
+  devectorize,
+  vectorAdd,
+  vectorDiv,
+  vectorMul,
+  vectorSub,
+  vectorIsNull,
+  vectorize,
+  vectorIsZero
+} from "@/vector.js";
 
 const os = useOrderStore()
 const co = useChartOrderStore()
@@ -99,9 +108,8 @@ const rungs = computed({
     r = Number(r)
     const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
-    console.log('set rungs', prevR, r, a, b)
+    // console.log('set rungs', prevR, r, a, b)
     if ( r > 0 && vectorIsNull(b) ) {
-      console.log('convert to range')
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
@@ -126,7 +134,6 @@ const rungs = computed({
     else {
       // from multi to multi
       if (props.mode===1) {
-        console.log('multi-multi mode 1')
         const width = vectorDiv(vectorSub(b, a), (prevR-1))
         b = vectorAdd(a, vectorMul(width, (r-1)))
         setEndpoints(a,b)
@@ -222,18 +229,18 @@ function translateOnModel(shape) {
   const oldOnModel = shape.onModel
   shape.onModel = function (model, oldModel) {
     oldOnModel.call(this, ...arguments)
-    // console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
     if (!this.beingDragged())
       return
     const prev = getModelValue(oldModel)
-    const cur = getModelValue(this.model)
-    const delta = cur - prev
+    const cur = vectorize(getModelValue(this.model))
+    const delta = vectorSub(cur, prev)
     // console.log('delta', shape.id, prev, cur, delta)
     let [a, b] = endpoints.value
-    if (delta !== 0) {
+    a = vectorize(a)
+    if (!vectorIsZero(delta)) {
       a = vectorAdd(a, delta)
       if (rungs.value > 1)
-        b = vectorAdd(b, delta)
+        b = vectorAdd(vectorize(b), delta)
       setEndpoints(a,b)
     }
   }
diff --git a/src/layouts/chart/MainView.vue b/src/layouts/chart/MainView.vue
index 3cf6f24..a523904 100644
--- a/src/layouts/chart/MainView.vue
+++ b/src/layouts/chart/MainView.vue
@@ -1,6 +1,6 @@
 <template>
   <v-main>
-    <v-alert text="WARNING! TESTNET! FAKE COINS!&nbsp;&nbsp;&nbsp;&nbsp;• UNI • ARB • WETH • WBTC • LINK • USDC •"
+    <v-alert text="TESTNET FAKE COINS&nbsp;&nbsp;&nbsp;&nbsp;• UNI • ARB • WETH • WBTC • LINK • USDC •"
              color="red" :closable="false" rounded="0" height="0"/>
     <Alerts/>
     <chart-view/>
diff --git a/src/misc.js b/src/misc.js
index 1cc70c2..33a7ca9 100644
--- a/src/misc.js
+++ b/src/misc.js
@@ -4,6 +4,7 @@ import {token} from "@/blockchain/token.js";
 import Color from "color";
 import {DateTime} from "luxon";
 import router from "@/router/index.js";
+import {useChartOrderStore} from "@/orderbuild.js";
 
 export function nav(name) {
     // noinspection JSIgnoredPromiseFromCall
@@ -250,3 +251,20 @@ export function intervalToSeconds(interval) {
          :                                         60  // if no unit char, then it's minutes
 }
 
+function nearestOhlcStart(time) {
+    // todo subtract OHLC root time
+    const period = useChartOrderStore().intervalSecs
+    return Math.round(time / period) * period
+}
+
+
+export function pointsToOhlcStart(points) {
+    return points === null ? null : points.map((p)=>{return{time:nearestOhlcStart(p.time), price:p.price}})
+}
+
+
+export function interpolate(a, b, zeroToOne) {
+    const d = (b-a)
+    return a + d * zeroToOne
+}
+
diff --git a/src/orderbuild.js b/src/orderbuild.js
index 3fd545d..d80c666 100644
--- a/src/orderbuild.js
+++ b/src/orderbuild.js
@@ -1,10 +1,11 @@
-import {routeInverted, timestamp, uuid} from "@/misc.js";
+import {timestamp, uuid} from "@/misc.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {encodeIEE754} from "@/common.js";
 import {defineStore} from "pinia";
 import {computed, ref} from "vue";
 import Color from "color";
+import {chartMeanRange} from "@/charts/chart.js";
 
 
 export const MIN_EXECUTION_TIME = 60  // give at least one full minute for each tranche to trigger
@@ -64,6 +65,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
         return result
     })
 
+    const meanRange = ref(1)
 
     const drawing = ref(false)
 
@@ -95,7 +97,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
 
     return {
         chartReady, selectedSymbol, selectedPool, intervalSecs, baseToken, quoteToken, price,
-        orders, drawing, newOrder, removeOrder, resetOrders,
+        orders, drawing, newOrder, removeOrder, resetOrders, meanRange,
     }
 })
 
@@ -138,40 +140,13 @@ export function linePointsValue(time0, price0, time1, price1, unixTime = null) {
 }
 
 
-export function applyLinePoints(tranche, time0, price0, time1, price1, isMinimum = null) {
+export function applyLinePoints(tranche, buy, time0, price0, time1, price1, poolDecimals, inverted) {
     const [intercept, slope] = computeInterceptSlope(time0, price0, time1, price1);
-    applyLine(tranche, intercept, slope, isMinimum)
+    applyLine(tranche, buy, intercept, slope, poolDecimals, inverted)
 }
 
 
-export function applyLine(tranche, intercept, slope, isMinimum = null) {
-    console.log('intercept, slope', intercept, slope)
-    // intercept and slope are still in "human" units of decimal-adjusted prices
-    const os = useOrderStore()
-    const route = os.route
-    const inverted = routeInverted(route)
-    const scale = 10 ** (os.tokenA.d - os.tokenB.d)
-    let m = inverted ? -scale / slope : slope / scale
-    let b = inverted ? scale / intercept : intercept / scale
-    const cur = b + timestamp() * m
-    console.log('inverted b, m, cur', inverted, b, m, cur)
-    m = encodeIEE754(m)
-    b = encodeIEE754(b)
-    if (isMinimum === null)
-        isMinimum = os.limitIsMinimum
-    console.log('limit is minimum', isMinimum)
-    if (isMinimum) {
-        tranche.minIntercept = b;
-        tranche.minSlope = m;
-    } else {
-        tranche.maxIntercept = b;
-        tranche.maxSlope = m;
-    }
-    tranche.marketOrder = false;
-}
-
-
-export function applyLine2(tranche, isMinimum, intercept, slope, poolDecimals, inverted) {
+export function applyLine(tranche, buy, intercept, slope, poolDecimals, inverted) {
     console.log('intercept, slope', intercept, slope)
     // intercept and slope are still in "human" units of decimal-adjusted prices
     const scale = 10 ** -poolDecimals
@@ -181,8 +156,7 @@ export function applyLine2(tranche, isMinimum, intercept, slope, poolDecimals, i
     console.log('inverted b, m, cur', inverted, b, m, cur)
     m = encodeIEE754(m)
     b = encodeIEE754(b)
-    if (inverted)
-        isMinimum = !isMinimum
+    let isMinimum = !(buy ^ inverted)
     if (isMinimum) {
         tranche.minIntercept = b;
         tranche.minSlope = m;
diff --git a/src/vector.js b/src/vector.js
index 6205689..2bdd1ff 100644
--- a/src/vector.js
+++ b/src/vector.js
@@ -11,48 +11,59 @@ export function vectorize(value) {
 }
 
 export function devectorize(value) {
-  return value === null || value.length === 0 ? null : value.length === 1 ? value[0] : value
+    return value === null || value.length === 0 ? null : value.length === 1 ? value[0] : value
 }
 
 
 export function vectorIsNull(value) {
-    console.log('vectorIsNull', value, value === null || value.length === 1 && value[0] === null)
-  return value === null || value.length === 1 && value[0] === null
+    return value === null || value.length === 1 && value[0] === null
+}
+
+
+export function vectorIsZero(value) {
+    for (let i = 0; i < value.length; i++)
+        if (value[i] !== 0)
+            return false
+    return true
 }
 
 
 export function vectorAdd(a, b) {
-  const result = []
-  const scalarB = b.length === undefined
-  for( let i=0; i<a.length; i++ )
-    result.push(a[i]+(scalarB ? b : b[i]))
-  console.log('vectorAdd', a, b, result)
-  return result
+    const result = []
+    const scalarB = b.length === undefined
+    for (let i = 0; i < a.length; i++)
+        result.push(a[i] + (scalarB ? b : b[i]))
+    return result
 }
 
 export function vectorSub(a, b) {
-  const result = []
-  const scalarB = b.length === undefined
-  for( let i=0; i<a.length; i++ )
-    result.push(a[i]-(scalarB ? b : b[i]))
-  console.log('vectorSub', a, b, result)
-  return result
+    const result = []
+    const scalarB = b.length === undefined
+    for (let i = 0; i < a.length; i++)
+        result.push(a[i] - (scalarB ? b : b[i]))
+    return result
 }
 
 export function vectorMul(a, b) {
-  const result = []
-  const scalarB = b.length === undefined
-  for( let i=0; i<a.length; i++ )
-    result.push(a[i]*(scalarB ? b : b[i]))
-  console.log('vectorMul', a, b, result)
-  return result
+    const result = []
+    const scalarB = b.length === undefined
+    for (let i = 0; i < a.length; i++)
+        result.push(a[i] * (scalarB ? b : b[i]))
+    return result
 }
 
 export function vectorDiv(a, b) {
-  const result = []
-  const scalarB = b.length === undefined
-  for( let i=0; i<a.length; i++ )
-    result.push(a[i]/(scalarB ? b : b[i]))
-  console.log('vectorDiv', a, b, result)
-  return result
+    const result = []
+    const scalarB = b.length === undefined
+    for (let i = 0; i < a.length; i++)
+        result.push(a[i] / (scalarB ? b : b[i]))
+    return result
 }
+
+
+export function vectorInterpolate(a, b, zeroToOne) {
+    const d = vectorSub(b, a)
+    const offset = vectorMul(d, zeroToOne)
+    return vectorAdd(a, offset)
+}
+

From 2083ce1cc96990f3fc5cdf71c0572b6f15200499 Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Fri, 3 May 2024 13:42:37 -0400
Subject: [PATCH 4/9] applyLine() refactor/fix

---
 src/charts/chart.js                   | 9 ++++++++-
 src/components/chart/LimitBuilder.vue | 3 +--
 src/orderbuild.js                     | 9 ++++-----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/charts/chart.js b/src/charts/chart.js
index 713441c..2808ce4 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -27,7 +27,6 @@ function changeSymbol(symbol) {
     lastSymbolChangedArgs = info
     symbolChangedCbs.forEach((cb)=>cb(info))
     co.selectedSymbol = info
-    co.meanRange = chartMeanRange()
 }
 
 
@@ -36,6 +35,13 @@ function changeInterval(interval, _timeframe) {
 }
 
 
+function dataLoaded() {
+    const range = chartMeanRange()
+    console.log('new mean range', range)
+    co.meanRange = range
+}
+
+
 /*  TradingView event keystrings
 const subscribeEvents = [
     'toggle_sidebar', 'indicators_dialog', 'toggle_header', 'edit_object_dialog', 'chart_load_requested',
@@ -83,6 +89,7 @@ function initChart() {
     chart.crossHairMoved().subscribe(null, (point)=>setTimeout(()=>handleCrosshairMovement(point),0) )
     chart.onSymbolChanged().subscribe(null, changeSymbol)
     chart.onIntervalChanged().subscribe(null, changeInterval)
+    chart.onDataLoaded().subscribe(null, dataLoaded)
     const tzapi = chart.getTimezoneApi();
     tzapi.onTimezoneChanged().subscribe(null, (tz)=>{if (tz==='exchange') tz='Etc/UTC'; s.timeZone=tz})
     s.timeZone = tzapi.getTimezone().id
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index cb5029f..d4c05d0 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -48,7 +48,6 @@ 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 {chartMeanRange} from "@/charts/chart.js";
 import {HLine} from "@/charts/shape.js";
 
 const s = useStore()
@@ -92,7 +91,7 @@ function buildTranches() {
     })
     const symbol = co.selectedSymbol
     console.log('symbol', symbol)
-    applyLine(t, , p, 0, symbol.decimals, symbol.inverted)
+    applyLine(t, order.buy, p, 0, symbol.decimals, symbol.inverted)
     tranches.push(t)
   }
   return tranches
diff --git a/src/orderbuild.js b/src/orderbuild.js
index d80c666..79fb74b 100644
--- a/src/orderbuild.js
+++ b/src/orderbuild.js
@@ -5,7 +5,6 @@ import {encodeIEE754} from "@/common.js";
 import {defineStore} from "pinia";
 import {computed, ref} from "vue";
 import Color from "color";
-import {chartMeanRange} from "@/charts/chart.js";
 
 
 export const MIN_EXECUTION_TIME = 60  // give at least one full minute for each tranche to trigger
@@ -147,16 +146,16 @@ export function applyLinePoints(tranche, buy, time0, price0, time1, price1, pool
 
 
 export function applyLine(tranche, buy, intercept, slope, poolDecimals, inverted) {
-    console.log('intercept, slope', intercept, slope)
     // intercept and slope are still in "human" units of decimal-adjusted prices
     const scale = 10 ** -poolDecimals
     let m = slope === 0 ? 0 : inverted ? -scale / slope : scale * slope
     let b = inverted ? scale / intercept : scale * intercept
-    const cur = b + timestamp() * m
-    console.log('inverted b, m, cur', inverted, b, m, cur)
+    // const cur = b + timestamp() * m
+    // console.log('inverted b, m, cur', inverted, b, m, cur)
     m = encodeIEE754(m)
     b = encodeIEE754(b)
-    let isMinimum = !(buy ^ inverted)
+    const isMinimum = !(buy ^ inverted)
+    console.log('applyLine', buy, intercept, slope, poolDecimals, inverted, isMinimum)
     if (isMinimum) {
         tranche.minIntercept = b;
         tranche.minSlope = m;

From abe367624b8313c9f4978d595e31415d384d8d8d Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Sat, 4 May 2024 21:05:12 -0400
Subject: [PATCH 5/9] more diagonal work (unfinished)

---
 src/charts/shape.js                      | 24 +++++----
 src/components/Vault.vue                 |  6 +--
 src/components/chart/BuilderFactory.vue  |  3 ++
 src/components/chart/ChartOrder.vue      |  5 +-
 src/components/chart/DiagonalBuilder.vue | 66 ++++++++++++++++--------
 src/components/chart/LimitBuilder.vue    |  6 +--
 src/components/chart/RungBuilder.vue     | 20 +++----
 src/vector.js                            | 13 +++++
 8 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/src/charts/shape.js b/src/charts/shape.js
index 4545337..3962a56 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -31,10 +31,10 @@ export const ShapeType = {
     */
     Segment: {name: 'Trend Line', code: 'trend_line'},
     Ray: {name: 'Ray', code: 'ray'},
-    Line: {name: 'Extended Line', code: 'extended'},
+    Line: {name: 'Extended Line', code: 'extended', drawingProp: 'linetoolextended'},
     HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
     HLine: {name: 'Horizontal Line', code: 'horizontal_line', drawingProp: 'linetoolhorzline'},
-    VLine: {name: 'Vertical Line', code: 'vertical_line'},
+    VLine: {name: 'Vertical Line', code: 'vertical_line', drawingProp: 'linetoolvertline'},
     PriceRange: {name: 'Price Range', code: 'price_range'},
 }
 
@@ -95,7 +95,7 @@ export class Shape {
     //
 
     setModel(model) {
-        // console.log('shape setModel', model)
+        console.log('shape setModel', model)
 
         if (model.color)
             this.model.color = model.color
@@ -327,9 +327,9 @@ export class Shape {
 let lineChangeInfo = null
 
 function dirtyPoints(pointsA, pointsB) {
-    if (pointsB===null)
-        return pointsA !== null
-    if (pointsA===null)
+    if (pointsB===null || pointsB===undefined)
+        return pointsA !== null && pointsA !== undefined
+    if (pointsA===null || pointsA===undefined)
         return pointsB.length > 0
     if (pointsA.length!==pointsB.length)
         return true
@@ -543,10 +543,8 @@ export class DLine extends Line {
         this.model.pointA = null  // {time:..., price:...}
         this.model.pointB = null
 
-        // since VLines must be on the start of an OHLC boundry, we track those value separately
-        this.shapeTimes = null
-
         this.setModel(model) // call setModel at the end
+        console.log('initial shape model', {...model})
     }
 
 
@@ -557,10 +555,14 @@ export class DLine extends Line {
     }
 
     setModel(model) {
+        console.log('DLine setModel', {...this.model}, {...model})
         super.setModel(model)
         if (model.pointA === null || model.pointB === null)
             this.delete()
-        else if (dirtyPoints(this.model.pointA, model.pointA) || dirtyPoints(this.model.pointB, model.pointB)) {
+        else if (
+            dirtyPoints(this.model.pointA, model.pointA) ||
+            dirtyPoints(this.model.pointB, model.pointB)
+        ) {
             this.model.pointA = model.pointA
             this.model.pointB = model.pointB
             this.setPoints([model.pointA, model.pointB])
@@ -575,7 +577,7 @@ export class DLine extends Line {
         }
         if (dirty) {
             super.onPoints(points);
-            this.updateModel({pointA: points[0], pointB: points[0]})
+            this.updateModel({pointA: points[0], pointB: points[1]})
         }
     }
 }
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index 88a9284..44ad2e8 100644
--- a/src/components/Vault.vue
+++ b/src/components/Vault.vue
@@ -23,7 +23,7 @@
     </PhoneCard>
   -->
   <div>
-    <div v-if="s.vaults.length<=num">
+    <div v-if="!hasVault">
       <v-card-title>
         Creating Your Dexorder Vault
         <v-icon icon="mdi-safe-square" size="small" color="grey-darken-1" style="vertical-align: baseline"/>
@@ -48,7 +48,7 @@
         Please wait while your vault is being created. This should only take a few seconds...
       </v-card-text>
     </div>
-    <div v-if="s.vaults.length>num" :class="empty?'maxw':''">
+    <div v-if="hasVault" :class="empty?'maxw':''">
 <!--      <v-card-title>-->
 <!--        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}-->
 <!--      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;-->
@@ -116,7 +116,7 @@ const balances = computed(()=>{
   return bs || {}
 })
 const empty = computed(()=>Object.values(balances.value).length===0)
-const exists = computed(()=>s.vaults.length>0)
+const hasVault = computed(()=>s.vault!==null)
 
 const withdrawToken = ref(null)
 const withdrawShow = ref(false)
diff --git a/src/components/chart/BuilderFactory.vue b/src/components/chart/BuilderFactory.vue
index e417074..fd84d9d 100644
--- a/src/components/chart/BuilderFactory.vue
+++ b/src/components/chart/BuilderFactory.vue
@@ -7,6 +7,7 @@ import {computed} from "vue";
 import DCABuilder from "@/components/chart/DCABuilder.vue";
 import LimitBuilder from "@/components/chart/LimitBuilder.vue";
 import MarketBuilder from "@/components/chart/MarketBuilder.vue";
+import DiagonalBuilder from "@/components/chart/DiagonalBuilder.vue";
 
 const props = defineProps(['order', 'builder'])
 
@@ -18,6 +19,8 @@ const component = computed(()=>{
       return DCABuilder
     case 'LimitBuilder':
       return LimitBuilder
+    case 'DiagonalBuilder':
+      return DiagonalBuilder
     default:
       console.error('Unknown builder component '+props.builder.component)
       return null
diff --git a/src/components/chart/ChartOrder.vue b/src/components/chart/ChartOrder.vue
index 811fe5e..d4169e4 100644
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -32,13 +32,16 @@
           <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>
+<!--
           <v-tooltip text="Coming Soon!" location="top">
             <template v-slot:activator="{ props }">
               <span v-bind="props">
-                <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" disabled>Diagonal</v-btn>
+                <v-btn :color="color" variant="text" prepend-icon="mdi-information-outline">New Thing!</v-btn>
               </span>
             </template>
           </v-tooltip>
+-->
           <!-- mdi-ray-start-end mdi-vector-polyline -->
         </div>
       </div>
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index c0a0a09..c242d57 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/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>
-
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index d4c05d0..b8cfa6b 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -3,7 +3,6 @@
                 v-model="priceEndpoints" :mode="0" :flip="flipped"
                 :shape="HLine"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
-                :get-points-value="getPointsValue"
                 :set-values="setPrices" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
     <table>
@@ -193,7 +192,7 @@ function setWeights(ws) { weights.value = ws }
 
 const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
 
-const stdWidth = 2*co.meanRange
+const stdWidth = computed(()=>2*co.meanRange)
 
 
 function getModelValue(model) {
@@ -202,9 +201,6 @@ function getModelValue(model) {
   return model.price
 }
 
-function getPointsValue(points) {
-  return points[0].price
-}
 
 function setModelValue(model, value) {
   // console.log('setModelValue->', model.price, value)
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index 9d3fe7d..d0e0aef 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -35,7 +35,6 @@
 
 <script setup>
 import BuilderPanel from "@/components/chart/BuilderPanel.vue";
-import {useOrderStore} from "@/store/store.js";
 import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
 import {linspace, sideColor} from "@/misc.js";
 import {computed, watchEffect} from "vue";
@@ -44,15 +43,14 @@ import {cancelDrawing} from "@/charts/chart.js";
 import {
   devectorize,
   vectorAdd,
-  vectorDiv,
-  vectorMul,
-  vectorSub,
+  vectorDiv, vectorEquals,
   vectorIsNull,
+  vectorIsZero,
   vectorize,
-  vectorIsZero
+  vectorMul,
+  vectorSub
 } from "@/vector.js";
 
-const os = useOrderStore()
 const co = useChartOrderStore()
 const endpoints = defineModel('modelValue')  // 2-item list of points/values
 const props = defineProps({
@@ -60,7 +58,7 @@ const props = defineProps({
   order: Object,
   builder: Object,
   buildTranches: Function,
-  stdWidth: Number,
+  stdWidth: [Number, Array],
   shape: Function,  // shape() -> Shape
   mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
   flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
@@ -89,6 +87,7 @@ watchEffect(()=>{
 
 
 function setEndpoints(a, b) {
+  console.log('rb setting endpoints', devectorize(a), devectorize(b))
   endpoints.value = [devectorize(a), devectorize(b)]
 }
 
@@ -234,7 +233,7 @@ function translateOnModel(shape) {
     const prev = getModelValue(oldModel)
     const cur = vectorize(getModelValue(this.model))
     const delta = vectorSub(cur, prev)
-    // console.log('delta', shape.id, prev, cur, delta)
+    console.log('delta', shape.id, prev, cur, delta)
     let [a, b] = endpoints.value
     a = vectorize(a)
     if (!vectorIsZero(delta)) {
@@ -254,7 +253,8 @@ function setModelColor(model) {
 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
     function (model) {
       const value = getModelValue(model);
-      if (value !== endpoints.value[0])
+      console.log('gotModelValue', model, value)
+      if ( !vectorEquals(value, endpoints.value[0]) )
         setEndpoints(value, endpoints.value[1])
       setModelColor(model)
     },
@@ -266,7 +266,7 @@ if (props.mode===1)
 const shapeB = createShape(endpoints.value[1], {color:defaultColor},
     function (model) {
       const value = getModelValue(model);
-      if (value !== endpoints.value[1])
+      if ( !vectorEquals(value, endpoints.value[1]) )
         setEndpoints(endpoints.value[0], value)
       setModelColor(model)
     },
diff --git a/src/vector.js b/src/vector.js
index 2bdd1ff..104b92f 100644
--- a/src/vector.js
+++ b/src/vector.js
@@ -28,6 +28,19 @@ export function vectorIsZero(value) {
 }
 
 
+export function vectorEquals(a, b) {
+    if (a === b) return true
+    if (a === null && b !== null || a !== null && b === null) return false
+    // noinspection JSObjectNullOrUndefined
+    if (a.length !== b.length )
+        return false
+    for (let i = 0; i < a.length; i++)
+        if (a[i] !== b[i])
+            return false
+    return true
+}
+
+
 export function vectorAdd(a, b) {
     const result = []
     const scalarB = b.length === undefined

From feba449a38c0c9b3bf485d3767743b0383cb5e5a Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Sat, 4 May 2024 23:08:59 -0400
Subject: [PATCH 6/9] diagonal rungs are drawing. just need tranches.

---
 src/blockchain/wallet.js                 |  2 +-
 src/charts/chart.js                      |  2 +-
 src/charts/shape.js                      | 54 ++++++++++++++++--------
 src/components/chart/DiagonalBuilder.vue |  7 +--
 src/components/chart/RungBuilder.vue     | 19 ++++++---
 src/vector.js                            |  5 +++
 6 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js
index bda3969..37f4be7 100644
--- a/src/blockchain/wallet.js
+++ b/src/blockchain/wallet.js
@@ -2,8 +2,8 @@ import {BrowserProvider, ethers} from "ethers";
 import {useStore} from "@/store/store";
 import {socket} from "@/socket.js";
 import {contractOrNull, vaultAddress} from "@/blockchain/contract.js";
-import {vaultAbi} from "@/blockchain/abi.js";
 import {SingletonCoroutine, uuid} from "@/misc.js";
+import {vaultAbi} from "@/blockchain/abi.js";
 import {defineStore} from "pinia";
 import {ref} from "vue";
 import {metadataMap} from "@/version.js";
diff --git a/src/charts/chart.js b/src/charts/chart.js
index 2808ce4..9312cd3 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -157,7 +157,7 @@ export function drawShape(shapeType, ...callbacks) {
 
 export function createShape(shapeType, points, options={}, ...callbacks) {
     drawingCallbacks = null
-    co.drawing = false
+    cancelDrawing()
     options.shape = shapeType.code
     // programatically adds a shape to the chart
     let shapeId
diff --git a/src/charts/shape.js b/src/charts/shape.js
index 3962a56..161f019 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -212,8 +212,8 @@ export class Shape {
 
     onCreate(points, props) {
         // the user has finished creating all the control points.  drawing mode is exited and the initial shape is created.
-        this.tvPoints = points
-        this.tvProps = props
+        this.setPoints(points)
+        this.setProps(props)
     }
 
 
@@ -327,18 +327,35 @@ export class Shape {
 let lineChangeInfo = null
 
 function dirtyPoints(pointsA, pointsB) {
-    if (pointsB===null || pointsB===undefined)
-        return pointsA !== null && pointsA !== undefined
-    if (pointsA===null || pointsA===undefined)
+    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]
-        if ( a.time !== b.time || a.price !== b.price )
+        if ( a === null && b !== null || a !== null && b === null ||
+            a.time !== b.time || a.price !== b.price )
             return true
     }
+    console.log('dp3')
     return false
 }
 
@@ -537,8 +554,6 @@ export class DLine extends Line {
     constructor(model, onModel=null, onDelete=null, props=null) {
         super(ShapeType.Line, onModel, onDelete, props)
 
-        this.debug = true // todo debug
-
         // Model
         this.model.pointA = null  // {time:..., price:...}
         this.model.pointB = null
@@ -555,27 +570,30 @@ export class DLine extends Line {
     }
 
     setModel(model) {
-        console.log('DLine setModel', {...this.model}, {...model})
+        console.log("DLine setModel", {...this.model}, {...model})
         super.setModel(model)
-        if (model.pointA === null || model.pointB === null)
+        if (model.pointA === null && model.pointB === null)
             this.delete()
-        else if (
-            dirtyPoints(this.model.pointA, model.pointA) ||
-            dirtyPoints(this.model.pointB, model.pointB)
-        ) {
-            this.model.pointA = model.pointA
-            this.model.pointB = model.pointB
-            this.setPoints([model.pointA, model.pointB])
+        else if ('pointA' in model && 'pointB' in model) {
+            const newPoints = [model.pointA, model.pointB];
+            const oldPoints = [this.model.pointA, this.model.pointB];
+            if (dirtyPoints(oldPoints, newPoints)) {
+                this.model.pointA = newPoints[0]
+                this.model.pointB = newPoints[1]
+                this.setPoints(newPoints)
+            }
         }
     }
 
     onPoints(points) {
         let dirty = this.tvPoints === null
         for (let i=0; !dirty && i<points.length; i++) {
-            if( points[i].time !== this.tvPoints[i].time)
+            if( points[i].time !== this.tvPoints[i].time || points[i].price !== this.tvPoints[i].price )
                 dirty = true
         }
+        console.log('DLine onPoints', dirty, this.tvPoints, points)
         if (dirty) {
+            console.log('DLine points were dirty', this.tvPoints, points)
             super.onPoints(points);
             this.updateModel({pointA: points[0], pointB: points[1]})
         }
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index c242d57..a6e5dfe 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -4,7 +4,7 @@
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :set-values="setLines" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
-    <span>(Diagonals)</span>
+    <span>{{ endpoints }}</span>
 <!--
     <table>
       <tbody>
@@ -186,10 +186,11 @@ function setModelValue(model, value) {
 
 
 function dirtyLine(a, b) {
-  console.log('dirtyLine', a, b)
-  return a === b ? false :
+  const result = 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
+  console.log('dirtyLine', result, a, b)
+  return result
 }
 
 
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index d0e0aef..b47338a 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -1,14 +1,13 @@
 <template>
   <builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
                  :adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
-    <div style="min-width: 3em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}
-    </div>
+    <div style="min-width: 4em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}</div>
     <div>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
                     :color="color" :base-color="color" min="1"
-                    :disabled="endpoints[0]===null"
+                    :disabled="rungsDisabled"
                     style="width: 4.5em;"
       />
     </div>
@@ -47,7 +46,7 @@ import {
   vectorIsNull,
   vectorIsZero,
   vectorize,
-  vectorMul,
+  vectorMul, vectorNeg,
   vectorSub
 } from "@/vector.js";
 
@@ -107,14 +106,16 @@ const rungs = computed({
     r = Number(r)
     const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
-    // console.log('set rungs', prevR, r, a, b)
+    console.log('set rungs', prevR, r, a, b)
     if ( r > 0 && vectorIsNull(b) ) {
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
         const mid = vectorize(a)
-        a = vectorAdd(mid, -width/2)
-        b = vectorAdd(mid, +width/2)
+        // console.log('stdWidth', width)
+        const halfWidth = vectorDiv(width,2);
+        a = vectorAdd(mid, vectorNeg(halfWidth) )
+        b = vectorAdd(mid, halfWidth)
         setEndpoints(a,b)
       }
       else if (props.mode===1 ) {
@@ -141,6 +142,7 @@ const rungs = computed({
   }
 })
 
+const rungsDisabled = computed(()=>{console.log('rd',endpoints.value); return endpoints.value[0]===null})
 
 const values = computed(()=>{
   let [a, b] = endpoints.value
@@ -166,6 +168,7 @@ const values = computed(()=>{
     }
   }
   props.setValues(result)
+  console.log('values', result)
   return result;
 })
 
@@ -191,6 +194,7 @@ const defaultColor = computeDefaultColor()
 const color = computed({
   get() {return props.builder.color},
   set(v) {
+    console.error('set color', v)
     const maxLightness = 60
     // noinspection JSUnresolvedReference
     const c = new Color(v).hsl()
@@ -246,6 +250,7 @@ function translateOnModel(shape) {
 }
 
 function setModelColor(model) {
+  console.log('setmc', color.value, model.color)
   if (model.color && model.color !== color.value)
     color.value = model.color
 }
diff --git a/src/vector.js b/src/vector.js
index 104b92f..ca62c88 100644
--- a/src/vector.js
+++ b/src/vector.js
@@ -41,6 +41,11 @@ export function vectorEquals(a, b) {
 }
 
 
+export function vectorNeg(a) {
+    return a.map((v)=>-v)
+}
+
+
 export function vectorAdd(a, b) {
     const result = []
     const scalarB = b.length === undefined

From 5d1526a1112cc374e08ca3678771422695db2adb Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Mon, 6 May 2024 14:32:02 -0400
Subject: [PATCH 7/9] 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)

From c651fcee9db5f1ff06c7fb6e1551a16d798f104a Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Mon, 6 May 2024 15:24:47 -0400
Subject: [PATCH 8/9] allocation text fix; props&points suppressed during drag

---
 src/charts/shape.js                      | 15 ++++++-------
 src/components/chart/DCABuilder.vue      |  9 +++++---
 src/components/chart/DiagonalBuilder.vue | 28 ++++++++++++++----------
 src/components/chart/LimitBuilder.vue    |  8 ++++---
 src/orderbuild.js                        |  4 +++-
 5 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/charts/shape.js b/src/charts/shape.js
index ddc7cd5..85084db 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -1,7 +1,7 @@
 // noinspection JSPotentiallyInvalidUsageOfThis
 
 import {invokeCallback, mixin} from "@/common.js";
-import {chart, createShape, deleteShapeId, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
+import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
 import {pointsToOhlcStart, unique} from "@/misc.js";
 import {allocationText} from "@/orderbuild.js";
 import Color from "color";
@@ -57,7 +57,7 @@ export class Shape {
         //   lineColor, textColor, color, // lineColor and textColor default to color
         // }
 
-        this.debug = true
+        this.debug = false
         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
@@ -95,8 +95,6 @@ export class Shape {
     //
 
     setModel(model) {
-        console.log('shape setModel', model)
-
         if (model.color)
             this.model.color = model.color
         if (model.allocation !== null && model.allocation !== undefined)
@@ -376,19 +374,22 @@ class ShapeTVCallbacks {
         if (!this.enabled) return // possible when shape is deleted and re-created
         this.shape.id = shapeId
         invokeCallback(this.shape, 'onCreate', points, props)
+        invokeCallback(this.shape, 'onPoints', points)
     }
 
     onPoints(shapeId, _tvShape, points) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.log('tvcb onPoints', points)
-        this.shape.onPoints(points)
+        if (!dragging || this.shape.beingDragged())
+            this.shape.onPoints(points)
         this.shape.tvPoints = points
     }
 
     onProps(shapeId, _tvShape, props) {
         if (!this.enabled) return // possible when shape is deleted and re-created
         if (this.shape.debug) console.error('tvOnProps', props)
-        this.shape.onProps(props)
+        if (!dragging) // do not listen to props during redraw
+            this.shape.onProps(props)
         this.shape.tvProps = props
     }
 
@@ -563,7 +564,6 @@ export class DLine extends Line {
     }
 
     setModel(model) {
-        console.log("DLine setModel", {...this.model}, {...model})
         super.setModel(model)
         if (model.pointA === null && model.pointB === null)
             this.delete()
@@ -584,7 +584,6 @@ export class DLine extends Line {
             if( points[i].time !== this.tvPoints[i].time || points[i].price !== this.tvPoints[i].price )
                 dirty = true
         }
-        console.log('DLine onPoints', dirty, this.tvPoints, points)
         if (dirty) {
             console.log('DLine points were dirty', this.tvPoints, points)
             super.onPoints(points);
diff --git a/src/components/chart/DCABuilder.vue b/src/components/chart/DCABuilder.vue
index 6fecc1b..d3f9916 100644
--- a/src/components/chart/DCABuilder.vue
+++ b/src/components/chart/DCABuilder.vue
@@ -19,17 +19,17 @@
         <td>
           <absolute-time-entry v-model="absTimeA"/>
         </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[0]) : '' }}</td>
+        <td class="weight">{{ weights.length ? allocationTexts[0] : '' }}</td>
       </tr>
       <tr v-if="weights.length>2" v-for="i in weights.length-2" class="ml-5"> <!-- vue uses 1-based loops -->
         <td class="d-flex justify-end pr-3">{{ dateStrings[i] }}</td>
-        <td class="weight">{{ allocationText(weights[i]) }}</td>
+        <td class="weight">{{ allocationTexts[i] }}</td>
       </tr>
       <tr v-if="weights.length>1">
         <td>
           <absolute-time-entry v-model="absTimeB"/>
         </td>
-        <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        <td class="weight">{{ allocationTexts[weights.length-1] }}</td>
       </tr>
       </tbody>
     </table>
@@ -82,6 +82,9 @@ builderDefaults(props.builder, {
 const times = ref([])
 const weights = ref([])
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
+
 const endTimes = computed(()=>{
   if (props.builder.rungs === 1)
     return DISTANT_FUTURE
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index 3b84c9f..1ad4e7c 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -19,7 +19,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+          <td rowspan="2" class="weight">{{ allocationTexts[weights.length-1] }}</td>
         </tr>
         <tr>
           <td>
@@ -37,7 +37,7 @@
         <tr v-for="i in innerIndexes" class="ml-5">
           <td class="text-right">&nbsp;</td>
           <td colspan="2" class="text-center"><i>Diagonal</i></td>
-          <td class="weight">{{ allocationText(weights[i]) }}</td>
+          <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
         <tr v-if="weights.length>1">
           <td rowspan="2" class="label">Line B</td>
@@ -52,7 +52,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+          <td rowspan="2" class="weight">{{ allocationTexts[0] }}</td>
         </tr>
         <tr v-if="weights.length>1">
           <td>
@@ -150,8 +150,6 @@ const endpoints = computed({
     let [a, b] = v
     a = buildLine(a)
     b = buildLine(b)
-    // noinspection JSValidateTypes
-    _endpoints.value = v
     update(a, b)
   }
 })
@@ -172,7 +170,7 @@ const price1A = computed({
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
-        [{time:flatline0[0], price: v}, {time:flatline0[2], price: flatline0[3]}],
+        [{time:flatline0[0], price: Number(v)}, {time:flatline0[2], price: flatline0[3]}],
         _endpoints.value[1]
     )
   }
@@ -194,7 +192,7 @@ const price1B = computed({
   set(v) {
     const flatline0 = _endpoints.value[0];
     update(
-        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: v}],
+        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: Number(v)}],
         _endpoints.value[1]
     )
   }
@@ -217,7 +215,7 @@ const price2A = computed({
     const flatline = _endpoints.value[1];
     update(
         _endpoints.value[0],
-        [{time:flatline[0], price: v}, {time:flatline[2], price: flatline[3]}],
+        [{time:flatline[0], price: Number(v)}, {time:flatline[2], price: flatline[3]}],
     )
   }
 })
@@ -239,18 +237,23 @@ const price2B = computed({
     const flatline = _endpoints.value[1];
     update(
         _endpoints.value[0],
-        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: v}],
+        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: Number(v)}],
     )
   }
 })
 
 function update(a, b) { // a and b are lines of two points
+  console.log('update', a, b)
   if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
+    console.log('update was dirty')
+    _endpoints.value = [flattenLine(a), flattenLine(b)]
     const newBuilder = {...props.builder}
     newBuilder.lineA = a
     newBuilder.lineB = b
     emit('update:builder', newBuilder)
   }
+  else
+    console.log('update was not dirty')
 }
 
 
@@ -275,6 +278,9 @@ function setWeights(ws) {
   weights.value = ws
 }
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
 
 const stdWidth = computed(()=>[0, 2 * co.meanRange, 0, 2 * co.meanRange])
 
@@ -321,8 +327,8 @@ function dirtyLine(a, b) {
 
 <style scoped lang="scss">
 td.weight {
-  width: 5em;
-  max-width: 8em;
+  min-width: 5em;
+  max-width: 20em;
   padding-left: 0.5em;
   padding-right: 0.5em;
   text-align: right;
diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue
index b8cfa6b..acb0ed3 100644
--- a/src/components/chart/LimitBuilder.vue
+++ b/src/components/chart/LimitBuilder.vue
@@ -17,11 +17,11 @@
                           style="flex: 6em"
             />
           </td>
-          <td class="weight">{{ allocationText(weights[higherIndex]) }}</td>
+          <td class="weight">{{ allocationTexts[higherIndex] }}</td>
         </tr>
         <tr v-for="i in innerIndexes" class="ml-5">
           <td class="pl-5">{{ prices[i] }}</td>
-          <td class="weight">{{ allocationText(weights[i]) }}</td>
+          <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
       </template>
       <tr>
@@ -33,7 +33,7 @@
                         style="flex: 6em"
           />
         </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[lowerIndex]) : '' }}</td>
+        <td class="weight">{{ weights.length ? allocationTexts[lowerIndex] : '' }}</td>
       </tr>
       </tbody>
     </table>
@@ -189,6 +189,8 @@ const weights = ref([])
 function setPrices(ps) {prices.value = ps}
 function setWeights(ws) { weights.value = ws }
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
 
 const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
 
diff --git a/src/orderbuild.js b/src/orderbuild.js
index 79fb74b..440f02f 100644
--- a/src/orderbuild.js
+++ b/src/orderbuild.js
@@ -240,6 +240,8 @@ export function weightColors(weights, color) {
 }
 
 export function allocationText(weight, amount, symbol) {
+    amount = Number(amount)
+    weight = Number(weight)
     let text = ''
     const hasWeight = weight!==null && weight!==undefined
     if (hasWeight)
@@ -249,7 +251,7 @@ export function allocationText(weight, amount, symbol) {
     if (hasAmount && hasSymbol) {
         if (hasWeight)
             text += ' = '
-        text += `${amount.toLocaleString('fullwide')} ${symbol}`
+        text += `${amount.toPrecision(3).toLocaleString('fullwide')} ${symbol}`
     }
     return text
 }

From 0f669c300a698d8d1b9fc32369126814208a72ce Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 7 May 2024 15:02:54 -0400
Subject: [PATCH 9/9] diagonals working except for start/end times

---
 src/blockchain/wallet.js                 |  4 ++--
 src/charts/shape.js                      | 11 ++++-----
 src/components/chart/DiagonalBuilder.vue | 29 ++++++++++--------------
 src/components/chart/RungBuilder.vue     | 20 +++++++++-------
 src/orderbuild.js                        | 22 +++++++++---------
 5 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js
index 37f4be7..199d24e 100644
--- a/src/blockchain/wallet.js
+++ b/src/blockchain/wallet.js
@@ -378,8 +378,8 @@ function pendOrderAsTransaction(pend) {
         return null
       }
     }
-    console.log('placing order', pend.id)
-    const tx = await contract.placeDexorder(pend.order) // todo update status
+    console.log('placing order', pend.id, pend.order)
+    const tx = await contract.placeDexorder(pend.order)
     pend.tx = tx
     pend.state = PendingOrderState.Sent
     console.log(`order ${pend.id} sent transaction`, tx)
diff --git a/src/charts/shape.js b/src/charts/shape.js
index 85084db..6cd0d7f 100644
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -30,8 +30,8 @@ export const ShapeType = {
     text anchored_text note anchored_note signpost double_curve arc icon emoji sticker arrow_up arrow_down arrow_left arrow_right price_label price_note arrow_marker flag vertical_line horizontal_line cross_line horizontal_ray trend_line info_line trend_angle arrow ray extended parallel_channel disjoint_angle flat_bottom anchored_vwap pitchfork schiff_pitchfork_modified schiff_pitchfork balloon comment inside_pitchfork pitchfan gannbox gannbox_square gannbox_fixed gannbox_fan fib_retracement fib_trend_ext fib_speed_resist_fan fib_timezone fib_trend_time fib_circles fib_spiral fib_speed_resist_arcs fib_channel xabcd_pattern cypher_pattern abcd_pattern callout triangle_pattern 3divers_pattern head_and_shoulders fib_wedge elliott_impulse_wave elliott_triangle_wave elliott_triple_combo elliott_correction elliott_double_combo cyclic_lines time_cycles sine_line long_position short_position forecast date_range price_range date_and_price_range bars_pattern ghost_feed projection rectangle rotated_rectangle circle ellipse triangle polyline path curve cursor dot arrow_cursor eraser measure zoom brush highlighter regression_trend fixed_range_volume_profile
     */
     Segment: {name: 'Trend Line', code: 'trend_line'},
-    Ray: {name: 'Ray', code: 'ray'},
-    Line: {name: 'Extended Line', code: 'extended', drawingProp: 'linetoolextended'},
+    Ray: {name: 'Ray', code: 'ray', drawingProp: 'linetoolray'},
+    Line: {name: 'Extended Line', code: 'extended', drawingProp: 'linetoolray'},
     HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
     HLine: {name: 'Horizontal Line', code: 'horizontal_line', drawingProp: 'linetoolhorzline'},
     VLine: {name: 'Vertical Line', code: 'vertical_line', drawingProp: 'linetoolvertline'},
@@ -539,20 +539,20 @@ export class VLine extends Line {
 
 export class DLine extends Line {
     constructor(model, onModel=null, onDelete=null, props=null) {
-        super(ShapeType.Line, onModel, onDelete, props)
+        super(ShapeType.Ray, onModel, onDelete, props)
 
         // Model
         this.model.pointA = null  // {time:..., price:...}
         this.model.pointB = null
 
         this.setModel(model) // call setModel at the end
-        console.log('initial shape model', {...model})
     }
 
 
     drawingOverrides() {
         const result = super.drawingOverrides();
-        result.linetoolextended = {extendLeft: false, extendRight: false}
+        result.extendLeft = false
+        result.extendRight = false
         return result
     }
 
@@ -585,7 +585,6 @@ export class DLine extends Line {
                 dirty = true
         }
         if (dirty) {
-            console.log('DLine points were dirty', this.tvPoints, points)
             super.onPoints(points);
             this.updateModel({pointA: points[0], pointB: points[1]})
         }
diff --git a/src/components/chart/DiagonalBuilder.vue b/src/components/chart/DiagonalBuilder.vue
index 1ad4e7c..c5e99ce 100644
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -19,7 +19,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationTexts[weights.length-1] }}</td>
+          <td rowspan="2" class="weight" style="vertical-align: bottom">{{ allocationTexts[weights.length-1] }}</td>
         </tr>
         <tr>
           <td>
@@ -36,7 +36,7 @@
         </tr>
         <tr v-for="i in innerIndexes" class="ml-5">
           <td class="text-right">&nbsp;</td>
-          <td colspan="2" class="text-center"><i>Diagonal</i></td>
+          <td colspan="2" class="text-center">&mdash; Interior Line &mdash;</td>
           <td class="weight">{{ allocationTexts[i] }}</td>
         </tr>
         <tr v-if="weights.length>1">
@@ -52,7 +52,7 @@
                           label="Price"
             />
           </td>
-          <td rowspan="2" class="weight">{{ allocationTexts[0] }}</td>
+          <td rowspan="2" class="weight" style="vertical-align: top">{{ allocationTexts[0] }}</td>
         </tr>
         <tr v-if="weights.length>1">
           <td>
@@ -109,18 +109,17 @@ builderDefaults(props.builder, {
 
 
 function buildTranches() {
-  throw Error('unimplemented') // todo
   const order = props.order
   const builder = props.builder
   const tranches = []
 
-  console.log('buildTranches', builder, order, tranches)
-  const la = buildLine(_endpoints[0])
-  const lb = buildLine(_endpoints[1])
+  console.log('buildTranches', builder, order, _endpoints.value)
+  const la = _endpoints.value[0] // use the flatline format which is a vector of length 4, useful for vectorInterpolate()
+  const lb = _endpoints.value[1]
   const ws = weights.value
   for (let i = 0; i < ws.length; i++) {
     const w = ws[i]
-    const line = vectorInterpolate(la, lb, i/(ws.length-1))
+    const line = ws.length === 1 ? la : vectorInterpolate(la, lb, i/(ws.length-1))
     const t = newTranche({fraction: w * MAX_FRACTION})
     const symbol = co.selectedSymbol
     console.log('symbol', symbol)
@@ -137,7 +136,7 @@ function flattenLine(l) {
 
 
 function buildLine(f) {
-  console.log('buildLine', f)
+  // console.log('buildLine', f)
   return f === null ? null : [{time: f[0], price: f[1]}, {time: f[2], price: f[3]}]
 }
 
@@ -243,17 +242,13 @@ const price2B = computed({
 })
 
 function update(a, b) { // a and b are lines of two points
-  console.log('update', a, b)
   if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
-    console.log('update was dirty')
     _endpoints.value = [flattenLine(a), flattenLine(b)]
     const newBuilder = {...props.builder}
     newBuilder.lineA = a
     newBuilder.lineB = b
     emit('update:builder', newBuilder)
   }
-  else
-    console.log('update was not dirty')
 }
 
 
@@ -290,14 +285,14 @@ function getModelValue(model) {
   if (!model.pointA || !model.pointB)
     return null
   const result = flattenLine([model.pointA, model.pointB]);
-  console.log('getModelValue', {...model}, result)
+  // console.log('getModelValue', {...model}, result)
   return result // this is the vector the RungBuilder will interpolate
 }
 
 
 function setModelValue(model, value) {
   const oldModel = {...model};
-  console.log('setModelValue', oldModel, value)
+  // console.log('setModelValue', oldModel, value)
   const oldLine = !model.pointA || !model.pointB ? null : [model.pointA, model.pointB]
   const line = buildLine(value)
   if (dirtyLine(oldLine, line)) {
@@ -310,7 +305,7 @@ function setModelValue(model, value) {
       model.pointB = line[1]
     }
   }
-  console.log('setModelValue end', oldModel, value, model)
+  // console.log('setModelValue end', oldModel, value, model)
 }
 
 
@@ -318,7 +313,7 @@ function dirtyLine(a, b) {
   const result = 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
-  console.log('dirtyLine', result, a, b)
+  // console.log('dirtyLine', result, a, b)
   return result
 }
 
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index c94c9f1..536d1ec 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -87,7 +87,7 @@ watchEffect(()=>{
 
 
 function setEndpoints(a, b) {
-  console.log('rb setting endpoints', devectorize(a), devectorize(b))
+  // console.log('rb setting endpoints', devectorize(a), devectorize(b))
   endpoints.value = [devectorize(a), devectorize(b)]
 }
 
@@ -107,13 +107,13 @@ const rungs = computed({
     r = Number(r)
     const prevR = Number(props.builder.rungs)
     props.builder.rungs = r
-    console.log('set rungs', prevR, r, a, b)
+    // console.log('set rungs', prevR, r, a, b)
     if ( r > 0 && vectorIsNull(b) ) {
       // convert single shape to a range
       if (props.mode===0) {
         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)
@@ -149,7 +149,6 @@ 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) )
@@ -170,14 +169,20 @@ const values = computed(()=>{
     }
   }
   props.setValues(result)
-  console.log('values', result)
+  // console.log('values', result)
   return result;
 })
 
 
 const weights = computed(() => {
   // const skew = props.flip ? -props.builder.skew : props.builder.skew
-  const ws = linearWeights(props.builder.rungs, -props.builder.skew)
+  const most = 0.998
+  let skew = -props.builder.skew
+  if (skew <= -1)
+    skew = -most
+  else if (skew >= 1)
+    skew = most
+  const ws = linearWeights(props.builder.rungs, skew)
   if (props.setWeights)
     props.setWeights(ws)
   return ws
@@ -239,7 +244,7 @@ function translateOnModel(shape) {
     const prev = getModelValue(oldModel)
     const cur = vectorize(getModelValue(this.model))
     const delta = vectorSub(cur, prev)
-    console.log('delta', shape.id, prev, cur, delta)
+    // console.log('delta', shape.id, prev, cur, delta)
     let [a, b] = endpoints.value
     a = vectorize(a)
     if (!vectorIsZero(delta)) {
@@ -252,7 +257,6 @@ function translateOnModel(shape) {
 }
 
 function setModelColor(model) {
-  console.log('setmc', color.value, model.color)
   if (model.color !== undefined && model.color !== color.value)
     color.value = model.color
 }
diff --git a/src/orderbuild.js b/src/orderbuild.js
index 440f02f..49ae082 100644
--- a/src/orderbuild.js
+++ b/src/orderbuild.js
@@ -208,24 +208,24 @@ export function builderDefaults(builder, defaults) {
             builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
 }
 
-export function linearWeights(n, s) {
-    if (n === 1) return [1]
+export function linearWeights(num, skew) {
+    if (num === 1) return [1]
     const result = []
-    if (s === 0) {
+    if (skew === 0) {
         // equal weighted
-        for (let i = 0; i < n; i++)
-            result.push(1 / n)
-    } else if (s === 1) {
+        for (let i = 0; i < num; i++)
+            result.push(1 / num)
+    } else if (skew === 1) {
         result.push(1)
-        for (let i = 1; i < n; i++)
+        for (let i = 1; i < num; i++)
             result.push(0)
-    } else if (s === -1) {
-        for (let i = 1; i < n; i++)
+    } else if (skew === -1) {
+        for (let i = 1; i < num; i++)
             result.push(0)
         result.push(1)
     } else {
-        for (let i = 0; i < n; i++)
-            result.push((1 - s * (2 * i / (n - 1) - 1)) / n)
+        for (let i = 0; i < num; i++)
+            result.push((1 - skew * (2 * i / (num - 1) - 1)) / num)
     }
     // console.log('weights', result)
     return result