smooth ladder dragging!

src/components/Vault.vue

@@ -117,7 +117,7 @@ function checkVault() {
     ensureVault()
 }
 
-setTimeout(checkVault, 1)
+setTimeout(checkVault, 0)
 
 </script>
 

src/components/chart/LimitBuilder.vue

@@ -1,4 +1,5 @@
 <template>
+  {{JSON.stringify(lineA.props)}}
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
     <v-sheet dense :color="faintColor" class="d-flex align-content-stretch" style="overflow-y: hidden">
       <div :style="colorStyle" style="width:1em">&nbsp;</div>
@@ -59,7 +60,7 @@
 
 <script setup>
 import {computed} from "vue";
-import {chart} from "@/charts/chart.js";
+import {chart, draggingShapeIds} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
 import {HLine} from "@/charts/shape.js";
@@ -98,10 +99,9 @@ const lineAPrice = computed({
 
 const lineA = new HLine(
     {price:null,color:null},
-    (line)=>{props.builder.priceA = line.price; props.builder.color = line.color; adjustShapes()},
+    function (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 },
@@ -123,14 +123,11 @@ let interiorLines = []
 function createInteriorLine(price) {
   const line = new HLine({price: price, color: props.builder.color},
       function (line) {
-        console.log('interior onModel', line.price)
         props.builder.color = line.color  // todo adjust for saturation
       },
       deleteBuilder)
   line.onPoints = function (points) {
-    console.log('interior onPoints', 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
@@ -268,9 +265,9 @@ let priceRangeId = null
 
 
 function adjustShapes() {
-  // console.log('limit adjust shapes')
   const limits = prices.value
-  console.log('limits', limits)
+  // console.log('limits', limits)
+  const colorStrings = colors.value
   if( limits.length === 0 ) {
     lineA.delete()
     lineB.delete()
@@ -282,40 +279,23 @@ function adjustShapes() {
     //
     // SINGLE LINE
     //
-    lineA.setModel({price:limits[0], color: colors.value[0]})
+    if (!lineA.beingDragged())
+      lineA.setModel({price:limits[0], color: colors.value[0]})
     lineB.delete()
-    for( const line of interiorLines )
-      line.delete()
-    interiorLines = []
+    if (interiorLines.length) {
+      for( const line of interiorLines )
+        line.delete()
+      interiorLines = []
+    }
   }
   else {
     //
     // PRICE RANGE
     //
-    // 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 {
-    //   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,
-    //     },
-    //   })
-    // }
-
-    const colorStrings = colors.value
-    lineA.setModel({price:limits[0], color: colorStrings[0]})
-    lineB.setModel({price:limits[limits.length-1], color: colorStrings[colorStrings.length-1]})
+    if (!lineA.beingDragged())
+      lineA.setModel({price:limits[0], color: colorStrings[0]})
+    if (!lineB.beingDragged())
+      lineB.setModel({price:limits[limits.length-1], color: colorStrings[colorStrings.length-1]})
 
     const numInterior = Math.max(0,limits.length-2);
     // trim excess interior lines
@@ -327,10 +307,11 @@ function adjustShapes() {
       const limit = limits[1+i]
       if (i === interiorLines.length)
         createInteriorLine(limit)
-      else
+      else if (!interiorLines[i].beingDragged())
         interiorLines[i].setModel({price:limit, color: colorStrings[1+i]})
     }
   }
+
 }