SMOOTH RENDERING!

src/components/chart/LimitBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
-                v-model:value-a="priceA" v-model:value-b="priceB" :mode="0" :flip="flipped"
+                v-model="priceEndpoints" :mode="0" :flip="flipped"
                  :shape="HLine"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :get-points-value="getPointsValue"
@@ -57,6 +57,7 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 function computeDefaultColor() {
   const index = props.order.builders.indexOf(props.builder)
@@ -101,19 +102,42 @@ function buildTranches() {
 
 
 const priceA = computed({
-  get() { return props.builder.priceA },
+  get() { return priceEndpoints.value[0] },
   set(v) {
-    props.builder.priceA = v===null ? v : Number(v)
+    if (v!==null)
+      v = Number(v)
+    update(v, priceEndpoints.value[1])
   }
 })
 
 const priceB = computed({
-  get() { return props.builder.priceB },
+  get() { return priceEndpoints.value[1] },
   set(v) {
-    props.builder.priceB = v===null ? v : Number(v)
+    if (v!==null)
+      v = Number(v)
+    update(priceEndpoints.value[0], v)
   }
 })
 
+
+const _priceEndpoints = ref([props.builder.priceA, props.builder.priceB])
+const priceEndpoints = computed({
+  get() { return _priceEndpoints.value},
+  set(v) {
+    const [a, b] = v
+    update(a,b)
+  }
+})
+
+
+function update(a, b) {
+    _priceEndpoints.value = [a, b]
+    const newBuilder = {...props.builder}
+    newBuilder.priceA = a
+    newBuilder.priceB = b
+    emit('update:builder', newBuilder)
+}
+
 const flipped = computed(()=>{
   const a = props.builder.priceA
   const b = props.builder.priceB
@@ -217,7 +241,7 @@ function getPointsValue(points) {
 }
 
 function setModelValue(model, value) {
-  // console.log('setModelValue->', {...model}, value)
+  // console.log('setModelValue->', model.price, value)
   if (model.price !== value)
     model.price = value
 }