cancel drawing when limit entered

src/charts/chart.js

@@ -112,6 +112,7 @@ export const VerboseCallback = prototype(ShapeCallback, {
 })
 
 let drawingTool = null
+let previousDrawingTool = null
 
 export function drawShape(shapeType, ...callbacks) {
     // puts the chart into a line-drawing mode for a new shape
@@ -121,6 +122,7 @@ export function drawShape(shapeType, ...callbacks) {
         invokeCallbacks(co.drawingCallbacks, 'onUndraw')
     co.drawingCallbacks = callbacks
     drawingTool = null
+    previousDrawingTool = widget.selectedLineTool()
     co.drawing = true
     widget.selectLineTool(shapeType.code)
     invokeCallbacks(callbacks, 'onDraw')
@@ -154,8 +156,9 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
 export function cancelDrawing() {
     const co = useChartOrderStore()
     if (co.drawing) {
-        invokeCallbacks(co.drawingCallbacks, 'onUndraw')
         co.drawing = false
+        widget.selectLineTool(previousDrawingTool)
+        invokeCallbacks(co.drawingCallbacks, 'onUndraw')
     }
 }
 

src/components/chart/LimitBuilder.vue

@@ -36,7 +36,7 @@
                       density="compact" hide-details variant="outlined" label="Skew" step="5"
                       :color="color" :base-color="color">
           <template v-slot:prepend>
-            <v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0; adjustShapes()" :color="color"/>
+            <v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0" :color="color"/>
           </template>
         </v-text-field>
       </div>
@@ -62,7 +62,7 @@
 
 <script setup>
 import {computed, onBeforeUnmount, onMounted, onUnmounted, onUpdated, watch, watchEffect} from "vue";
-import {chart} from "@/charts/chart.js";
+import {cancelDrawing, chart} from "@/charts/chart.js";
 import {applyLine2, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
 import {HLine} from "@/charts/shape.js";
@@ -149,7 +149,7 @@ onUnmounted(() => delete builderFuncs[lastId])
 
 const skew100 = computed( {
   get() {return props.builder.skew*100},
-  set(v) {props.builder.skew = v/100; adjustShapes()}
+  set(v) {props.builder.skew = v/100; }
 } )
 
 // we keep two special control lines as the edge of the ranges and then deletable lines in-between
@@ -158,13 +158,12 @@ 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:defaultColor},
-    function (line) {props.builder.priceA = line.price; props.builder.color = line.color; adjustShapes()},
+    function (line) {props.builder.priceA = line.price; props.builder.color = line.color; },
     deleteBuilder
 )
 
@@ -172,19 +171,17 @@ 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:props.builder.color.value},
-    (line)=>{props.builder.priceB = line.price; props.builder.color = line.color; adjustShapes()},
+    (line)=>{props.builder.priceB = line.price; props.builder.color = line.color; },
     deleteBuilder
 )
 
 const adjustInteriorLine = (line) => {
   props.builder.color = line.color
-  adjustShapes()
 }
 
 let interiorLines = []
@@ -196,7 +193,6 @@ function createInteriorLine(price, lineProps) {
     if (delta !== 0) {
       props.builder.priceA += delta
       props.builder.priceB += delta
-      adjustShapes()
     }
   }
   interiorLines.push(line)
@@ -228,12 +224,12 @@ const colorStyle = computed(() => {
 
 const start = computed({
   get() {return props.builder.start || 0},
-  set(v) {props.builder.start=v; adjustShapes()},
+  set(v) {props.builder.start=v; },
 })
 
 const end = computed({
   get() {return props.builder.end || 0},
-  set(v) {props.builder.end=v; adjustShapes()},
+  set(v) {props.builder.end=v; },
 })
 
 function computeRange() {
@@ -277,7 +273,6 @@ const rungs = computed({
       props.builder.priceA = (props.builder.priceA + props.builder.priceB) / 2
       props.builder.priceB = null
     }
-    adjustShapes()
   }
 })
 
@@ -353,7 +348,7 @@ function allocationText(weight) {
 function adjustShapes() {
   // this is where all the lines are created or adjusted
   // console.log('adjustShapes()')
-
+  cancelDrawing()
   const limits = prices.value
   const colorStrings = colors.value
   // line properties
@@ -407,7 +402,7 @@ function adjustShapes() {
 }
 
 
-watch(props.order, adjustShapes)
+watchEffect(adjustShapes)
 // const autoAdjust = computed(adjustShapes)