UI fixes including loop suppression when model doesnt change

src/components/chart/LimitBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
-    <row-bar :color="builder.color">
+    <row-bar :color="builder.color" :data-ignore="autoAdjust">
       <color-band :color="builder.color"/>
       <div style="min-width: 3em; font-size: larger" :style="colorStyle"
            class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-import {computed} from "vue";
+import {computed, onBeforeUnmount, onMounted} from "vue";
 import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
@@ -94,7 +94,6 @@ const skew100 = computed( {
   set(v) {props.builder.skew = v/100; adjustShapes()}
 } )
 
-
 // we keep two special control lines as the edge of the ranges and then deletable lines in-between
 
 const lineAPrice = computed({
@@ -126,15 +125,14 @@ const lineB = new HLine(
 )
 
 const adjustInteriorLine = (line) => {
-  console.log('interior line onModel')
   props.builder.color = line.color
   adjustShapes()
 }
 
 let interiorLines = []
 
-function createInteriorLine(price) {
-  const line = new HLine({price: price, color: props.builder.color}, adjustInteriorLine, deleteBuilder)
+function createInteriorLine(price, lineProps) {
+  const line = new HLine({price: price, color: props.builder.color}, adjustInteriorLine, deleteBuilder, lineProps)
   line.onPoints = function (points) {
     const delta = points[0].price - this.model.price
     if (delta !== 0) {
@@ -225,6 +223,8 @@ const rungs = computed({
 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
@@ -264,7 +264,7 @@ const weights = computed(() => {
 
 const colors = computed( ()=> {
   const color = props.builder.color !== null ? props.builder.color
-      : os.buy ? theme.value.colors.success : theme.value.colors.error
+      : props.buy ? theme.value.colors.success : theme.value.colors.error
   const c = new Color(color).rgb()
   const ws = weights.value;
   const max = Math.max(...ws)
@@ -274,24 +274,27 @@ const colors = computed( ()=> {
 })
 
 
+const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
+
+
 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
-  const t = os.amountToken
-  return `${(w*100).toFixed(1)}% ${a.toLocaleString('fullwide')} ${t.s}`
+  return `${(w*100).toFixed(1)}% = ${a.toLocaleString('fullwide')} ${amountSymbol.value}`
 }
 
 
 function adjustShapes() {
   // this is where all the lines are created or adjusted
-  console.log('adjustShapes()')
+  // console.log('adjustShapes()')
 
   const limits = prices.value
   const colorStrings = colors.value
+  // line properties
   const lps = weights.value.map((w)=>{return {text:allocationText(w), textcolor:color.value}})
-  console.log('things', colorStrings, lps)
   if( limits.length === 0 ) {
     lineA.delete()
     lineB.delete()
@@ -332,15 +335,18 @@ function adjustShapes() {
     for( let i=0; i<limits.length-2; i++ ) {
       const limit = limits[1+i]
       if (i === interiorLines.length)
-        createInteriorLine(limit)
+        createInteriorLine(limit, lps[1+i])
       else if (!interiorLines[i].beingDragged())
         interiorLines[i].setModel({price:limit, color: colorStrings[1+i]}, lps[1+i])
     }
   }
-
+  return ''
 }
 
 
+const autoAdjust = computed(adjustShapes)
+
+
 function deleteShapes() {
   lineA.delete()
   lineB.delete()
@@ -359,6 +365,8 @@ function deleteBuilder() {
 if (!props.builder.priceA)
   lineA.createOrDraw(); // initiate drawing mode
 
+onMounted(adjustShapes)
+onBeforeUnmount(deleteShapes)
 
 </script>