more line manipulation cleanup

src/components/chart/LimitBuilder.vue

@@ -4,7 +4,7 @@
     <v-toolbar dense :color="faintColor" elevation="3">
       <span :style="colorStyle" style="width:1em;height:100%">&nbsp;</span>
       <v-toolbar-title>{{ rungs === 1 ? 'Limit' : 'Ladder' }}</v-toolbar-title>
-      <v-text-field type="number" v-model="lower"
+      <v-text-field type="number" v-model="lineAPrice"
                     density="compact" hide-details single-line class="justify-self-start" variant="outlined"
                     :color="color" :base-color="color" min="0"
       />
@@ -17,7 +17,7 @@
           <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
         </template>
         <v-list>
-          <v-list-subheader :title="'Limit '+ (lower?lower.toPrecision(5):'')"/>
+          <v-list-subheader :title="'Limit '+ (lineAPrice?lineAPrice.toPrecision(5):'')"/>
           <v-list-item title="Delete" key="withdraw" value="withdraw" prepend-icon="mdi-delete" color="red"
                        @click="deleteBuilder"/>
         </v-list>
@@ -32,19 +32,47 @@
 
 <script setup>
 import {computed} from "vue";
-import {builderShape, chart, createShape, deleteShape, setPoints} from "@/charts/chart.js";
+import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
-import {prototype} from "@/common.js";
 import {HLine, ShapeType} from "@/charts/shape.js";
 
 const co = useChartOrderStore()
 const props = defineProps(['builder'])
 
 
-const shape = new HLine(props.builder, 'lower', 'color')
-shape.onDelete = deleteBuilder
-shape.createOrDraw()
+// 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 ) {
@@ -58,8 +86,8 @@ function builderDefaults( builder, defaults ) {
 builderDefaults(props.builder, {
   start: null, // todo
   end: null, // todo
-  lower: null,
-  upper: null,
+  priceA: null,
+  priceB: null,
   rungs: 1,
   color: null,
 })
@@ -75,11 +103,6 @@ const colorStyle = computed(() => {
 })
 
 
-//
-// Builder parameters: lower, upper, rungs
-// lower/upper is the price range and rungs >= 1 is the number of lines split into that range
-//
-
 const start = computed({
   get() {return props.builder.start || 0},
   set(v) {props.builder.start=v; adjustShapes()},
@@ -90,47 +113,6 @@ const end = computed({
   set(v) {props.builder.end=v; adjustShapes()},
 })
 
-const lower = computed({
-  get() {
-    return props.builder.lower
-  },
-  set(p) {
-    p = Number(p)
-    const hi = props.builder.upper
-    if (hi) {
-      props.builder.upper = Math.max(hi,p)
-      props.builder.lower = Math.min(hi,p)
-    }
-    else {
-      props.builder.upper = p
-      props.builder.lower = p
-    }
-    adjustShapes()
-  }
-})
-
-
-const upper = computed({
-  get() {
-    return props.builder.upper
-  },
-  set(p) {
-    p = Number(p)
-    const lo = props.builder.lower
-    if (lo) {
-      console.log('max', lo, p, Math.max(lo,p))
-      props.builder.upper = Math.max(lo,p)
-      props.builder.lower = Math.min(lo,p)
-    }
-    else {
-      props.builder.upper = p
-      props.builder.lower = p
-    }
-    adjustShapes()
-  }
-})
-
-
 function computeRange() {
   let range = 0
   const series = chart.getSeries()
@@ -162,16 +144,15 @@ const rungs = computed({
 
 
 const prices = computed(()=>{
-  let lo = props.builder.lower
-  let hi = props.builder.upper
+  let a = props.builder.priceA
+  let b = props.builder.priceB
   const r = props.builder.rungs
-  if ( !lo || !r ) return []  // no data
-  if (r===1) return [(hi+lo)/2]  // single line
-  const spacing = (hi-lo)/(r-1)
-  console.log('price spacing', spacing, hi, lo, r)
+  if ( a===null || !r ) return []  // no data
+  if (r===1) return [a]  // single line
+  const spacing = (b-a)/(r-1)
   const result = []
   for( let i=0; i<r; i++ )
-    result.push(lo+i*spacing)
+    result.push(a+i*spacing)
   console.log('prices', result)
   return result
 })
@@ -181,70 +162,24 @@ let lineShapeIds = []
 let priceRangeId = null
 
 
-const limitLineCallbacks = {
-  onCreate(shapeId, points, properties) {
-    lineShapeIds.push(shapeId)
-  },
-  onPoints(shapeId, points) {
-    console.log('limit onPoints', shapeId, points[0].price, lineShapeIds)
-    if (lineShapeIds.length === 0) return
-    const r = rungs.value;
-    if (r === 1 && lineShapeIds[0] === shapeId ) {
-      const range = computeRange()
-      props.builder.lower = points[0].price - range/2
-      props.builder.upper = points[0].price + range/2
-    }
-    else if ( lineShapeIds[0] === shapeId ) {
-      console.log('setting lower')
-      props.builder.lower = points[0].price
-    }
-    else if ( lineShapeIds[lineShapeIds.length-1] === shapeId ) {
-      console.log('setting upper')
-      props.builder.upper = points[0].price
-    }
-  },
-  onMove(shapeId, points) {
-    console.log('limit onMove')
-  },
-  onProps(shapeId, properties) {
-    console.log('limit onProps', properties, properties.linecolor)
-    // props.builder.color = properties.linecolor
-  },
-  onDelete(shapeId) {
-    deleteBuilder()
-  },
-}
-
-
-const drawLineCallbacks = prototype(limitLineCallbacks, {
-})
-
-
 function adjustShapes() {
-  return
   const limits = prices.value
-  console.log('adjust shapes', limits)
-  if (limits.length === 1) {
+  if( limits.length === 0 ) {
+    lineA.delete()
+    lineB.delete()
+    for( const line of interiorLines )
+      line.delete()
+    interiorLines = []
+  }
+  else if (limits.length === 1) {
     //
     // SINGLE LINE
     //
-    if (lineShapeIds.length > 1) {
-      deleteShapes()
-    }
-    // remove range shape
-    if (priceRangeId) {
-      chart.removeEntity(priceRangeId)
-      priceRangeId = null
-    }
-    if (lineShapeIds.length === 0) {
-      // create a line
-      const lineId = createShape(ShapeType.HLine, {time:0, price: props.builder.lower}, {}, limitLineCallbacks)
-      lineShapeIds.push(lineId)
-    } else {
-      // adjust the line
-      console.log('adjusting line', lineShapeIds[0])
-      setPoints(lineShapeIds[0], {time:0, price: props.builder.lower})
-    }
+    lineA.setModel({price:limits[0]})
+    lineB.delete()
+    for( const line of interiorLines )
+      line.delete()
+    interiorLines = []
   }
   else {
     //
@@ -252,25 +187,26 @@ function adjustShapes() {
     //
     // first set the price range shaded background
     const rangePoints = [
-      {time: start.value, price: props.builder.lower},
-      {time: end.value, price: props.builder.upper},
+      {time: start.value, price: lineAPrice.value},
+      {time: end.value, price: lineBPrice.value},
     ];
-    if (priceRangeId !== null)
-      setPoints(priceRangeId, rangePoints)
-    else {
-      priceRangeId = createShape(ShapeType.PriceRange, rangePoints, {
-        disableSave: true, disableSelection: true, disableUndo: true, lock: true,
-        // https://www.tradingview.com/charting-library-docs/latest/customization/overrides/Shapes-and-Overrides
-        overrides: {
-          fillLabelBackground: false,
-          lineccolor: props.builder.color,
-          backgroundColor: faintColor.value,
-        },
-      })
-    }
-    while( lineShapeIds.length > limits.length )
-      lineShapeIds.pop()
-    // now adjust the lines
+    // todo price range shape
+    // if (priceRangeId !== null)
+    //   setPoints(priceRangeId, rangePoints)
+    // else {
+    //   priceRangeId = createShape(ShapeType.PriceRange, rangePoints, {
+    //     disableSave: true, disableSelection: true, disableUndo: true, lock: true,
+    //     // https://www.tradingview.com/charting-library-docs/latest/customization/overrides/Shapes-and-Overrides
+    //     overrides: {
+    //       fillLabelBackground: false,
+    //       lineccolor: props.builder.color,
+    //       backgroundColor: faintColor.value,
+    //     },
+    //   })
+    // }
+    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) {
@@ -298,7 +234,11 @@ function deleteShapes() {
   //   deleteShape(priceRangeId)
   // for (const id of lineShapeIds)
   //   deleteShape(id)
-  shape.delete()
+  lineA.delete()
+  lineB.delete()
+  for (const line of interiorLines)
+    line.delete()
+  interiorLines = []
 }
 
 
@@ -308,12 +248,8 @@ function deleteBuilder() {
 }
 
 
-function draw() {
-  builderShape(props.builder, 'limit', ShapeType.HLine, drawLineCallbacks)
-}
-
-// if (!props.builder.lower)
-//   draw();
+if (!props.builder.priceA)
+  lineA.createOrDraw();
 
 
 </script>