ladders!

src/components/chart/LimitBuilder.vue

@@ -36,52 +36,12 @@ import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
 import {HLine, ShapeType} from "@/charts/shape.js";
+import {builderDefaults} from "@/misc.js";
 
 const co = useChartOrderStore()
 const props = defineProps(['builder'])
 
 
-// we keep two special control lines as the edge of the ranges and then deletable lines in-between
-
-const lineAPrice = computed({
-  get() { return props.builder.priceA },
-  set(v) { props.builder.priceA = v===null ? v : Number(v)
-  adjustShapes()
-}})
-
-const lineA = new HLine(
-    {price:null,color:null},
-    (line)=>{props.builder.priceA = line.price; props.builder.color = line.color},
-    deleteBuilder
-)
-
-const lineBPrice = computed({
-  get() { return props.builder.priceB },
-  set(v) { props.builder.priceB = v===null ? v : Number(v)
-  adjustShapes()
-}})
-const lineB = new HLine(
-    {price:null,color:null},
-    (line)=>{props.builder.priceB = line.price;props.builder.color = line.color},
-    deleteBuilder
-)
-
-let interiorLines = []
-
-function createInteriorLine(price) {
-  const line = new HLine({price:price})  // todo
-  interiorLines.push(line)
-  line.create()
-}
-
-
-function builderDefaults( builder, defaults ) {
-  for ( const k in defaults )
-    if (builder[k] === undefined)
-      builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
-}
-
-
 // Fields must be defined in order to be reactive
 builderDefaults(props.builder, {
   start: null, // todo
@@ -92,6 +52,65 @@ builderDefaults(props.builder, {
   color: null,
 })
 
+// we keep two special control lines as the edge of the ranges and then deletable lines in-between
+
+const lineAPrice = computed({
+  get() { return props.builder.priceA },
+  set(v) {
+    props.builder.priceA = v===null ? v : Number(v)
+    adjustShapes()
+  }
+})
+
+const lineA = new HLine(
+    {price:null,color:null},
+    (line)=>{props.builder.priceA = line.price; props.builder.color = line.color; adjustShapes()},
+    deleteBuilder
+)
+lineA.onMove = (points)=>console.log('move', points)
+
+const lineBPrice = computed({
+  get() { return props.builder.priceB },
+  set(v) {
+    props.builder.priceB = v===null ? v : Number(v)
+    adjustShapes()
+  }
+})
+
+const lineB = new HLine(
+    {price:null,color:null},
+    (line)=>{props.builder.priceB = line.price; props.builder.color = line.color; adjustShapes()},
+    deleteBuilder
+)
+
+
+let interiorLines = []
+
+function createInteriorLine(price) {
+  const line = new HLine({price: price, color: props.builder.color},
+      function (line) {props.builder.color = line.color},
+      deleteBuilder)
+  line.onPoints = function (points) {
+    const delta = points[0].price - this.model.price
+    console.log('moving delta', delta)
+    if (delta != 0) {
+      props.builder.priceA += delta
+      props.builder.priceB += delta
+      adjustShapes()
+    }
+  }
+  interiorLines.push(line)
+  line.create()
+}
+
+
+function removeInteriorLine() {
+  if (interiorLines.length) {
+    const line = interiorLines.pop()
+    line.delete()
+  }
+}
+
 
 const color = computed(() => {
   // todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
@@ -138,6 +157,18 @@ const rungs = computed({
   set(r) {
     r = Number(r)
     props.builder.rungs = r
+    if ( r > 0 && props.builder.priceB === null ) {
+      // convert single line to a range
+      const range = computeRange()
+      const mid = props.builder.priceA
+      props.builder.priceA = mid - range/2
+      props.builder.priceB = mid + range/2
+    }
+    else if ( r === 1 && props.builder.priceB !== null ) {
+      // convert from a range to a single line
+      props.builder.priceA = (props.builder.priceA + props.builder.priceB) / 2
+      props.builder.priceB = null
+    }
     adjustShapes()
   }
 })
@@ -147,24 +178,27 @@ const prices = computed(()=>{
   let a = props.builder.priceA
   let b = props.builder.priceB
   const r = props.builder.rungs
+  console.log('prices for', a, b, r)
   if ( a===null || !r ) return []  // no data
   if (r===1) return [a]  // single line
   const spacing = (b-a)/(r-1)
+  console.log('spacing', a, b)
   const result = []
   for( let i=0; i<r; i++ )
     result.push(a+i*spacing)
-  console.log('prices', result)
   return result
 })
 
 
-let lineShapeIds = []
 let priceRangeId = null
 
 
 function adjustShapes() {
+  console.log('limit adjust shapes')
   const limits = prices.value
+  console.log('limits', limits)
   if( limits.length === 0 ) {
+    console.log('no lines')
     lineA.delete()
     lineB.delete()
     for( const line of interiorLines )
@@ -175,22 +209,25 @@ function adjustShapes() {
     //
     // SINGLE LINE
     //
-    lineA.setModel({price:limits[0]})
+    console.log('single line')
+    lineA.setModel({price:limits[0], color: props.builder.color})
     lineB.delete()
     for( const line of interiorLines )
       line.delete()
     interiorLines = []
   }
   else {
+    console.log('price range')
     //
     // PRICE RANGE
     //
-    // first set the price range shaded background
-    const rangePoints = [
-      {time: start.value, price: lineAPrice.value},
-      {time: end.value, price: lineBPrice.value},
-    ];
     // todo price range shape
+    // first set the price range shaded background
+    // const rangePoints = [
+    //   {time: start.value, price: lineAPrice.value},
+    //   {time: end.value, price: lineBPrice.value},
+    // ];
+    //
     // if (priceRangeId !== null)
     //   setPoints(priceRangeId, rangePoints)
     // else {
@@ -204,26 +241,22 @@ function adjustShapes() {
     //     },
     //   })
     // }
-    while( interiorLines.length > Math.max(0,limits.length-2) )
-      interiorLines.pop()
-    // now adjust the interior lines
-    for( let i=0; i<limits.length; i++ ) {
-      const limit = limits[i]
-      if (lineShapeIds.length === i) {
-        // push a new line
-        const lineId = createShape(ShapeType.HLine, {time:0, price:limit}, {
-          disableSave: true, disableUndo: true,
-          overrides: {
-            lineccolor: props.builder.color,
-          },
-          limitLineCallbacks
-        })
-        lineShapeIds.push(lineId)
-      }
-      else {
-        // adjust existing line
-        setPoints(lineShapeIds[i], {time: start.value, price: limit})
-      }
+
+    lineA.setModel({price:limits[0], color: props.builder.color})
+    lineB.setModel({price:limits[limits.length-1], color: props.builder.color})
+
+    const numInterior = Math.max(0,limits.length-2);
+    // trim excess interior lines
+    while( interiorLines.length > numInterior )
+      removeInteriorLine()
+
+    // adjust the interior line prices and/or add lines
+    for( let i=0; i<limits.length-2; i++ ) {
+      const limit = limits[1+i]
+      if (i === interiorLines.length)
+        createInteriorLine(limit)
+      else
+        interiorLines[i].setModel({price:limit, color: props.builder.color})
     }
   }
 }
@@ -231,9 +264,9 @@ function adjustShapes() {
 
 function deleteShapes() {
   // if (priceRangeId !== null)
-  //   deleteShape(priceRangeId)
+  //   deleteShapeId(priceRangeId)
   // for (const id of lineShapeIds)
-  //   deleteShape(id)
+  //   deleteShapeId(id)
   lineA.delete()
   lineB.delete()
   for (const line of interiorLines)