SMOOTH RENDERING!

src/components/chart/DCABuilder.vue

@@ -1,6 +1,5 @@
 <template>
-  <rung-builder name='DCA' :order="order" :builder="builder"
-                v-model:value-a="absTimeA" v-model:value-b="absTimeB"
+  <rung-builder name='DCA' :order="order" :builder="builder" v-model="timeEndpoints"
                 :shape="VLine"
                 :mode="1" :flip="flipped" :orientation="0"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
@@ -28,14 +27,7 @@
       </tr>
       <tr v-if="weights.length>1">
         <td>
-<!--
-          <v-text-field type="number" v-model="lowerPrice" min="0"
-                        density="compact" hide-details class="mx-1 my-2" variant="outlined"
-                        label="Price"
-                        :color="color" :base-color="color"
-                        style="flex: 6em"
-          />
--->
+          <absolute-time-entry v-model="absTimeB"/>
         </td>
         <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
       </tr>
@@ -63,6 +55,7 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 const minWidth = computed(()=>co.intervalSecs)
 const stdWidth = computed(()=>10 * minWidth.value)
@@ -125,34 +118,43 @@ watchEffect(()=>{
 
 
 const absTimeA = computed({
-  get() {
-    let result = props.builder.timeA
-    // if (props.builder.relative)
-    //   result += s.clock
-    console.log('get absTimeA', result)
-    return result
-  },
+  get() { return _timeEndpoints.value[0] },
   set(v) {
-    console.error('set absTimeA', props.builder.timeA, v)
-    props.builder.timeA = v
-    console.log('absTimeA=',props.builder.timeA)
+    console.log('set A', v)
+    if (v!==null)
+      v = Number(v)
+    update(v, _timeEndpoints.value[1])
   }
 })
 const absTimeB = computed({
-  get() {return props.builder.timeB},
+  get() { return _timeEndpoints.value[1] },
   set(v) {
-    console.error('set absTimeB', props.builder.timeB, v)
-    props.builder.timeB = v
-    if (v !== null) {
-      const maxA = v - minWidth.value;
-      if (props.builder.timeA > maxA) {
-        console.log('scootching A to', maxA)
-        props.builder.timeA = maxA
-      }
-    }
+    console.log('set B', v)
+    if (v!==null)
+      v = Number(v)
+    update(_timeEndpoints.value[0], v)
   }
 })
 
+
+const _timeEndpoints = ref([props.builder.timeA, props.builder.timeB])
+const timeEndpoints = computed({
+  get() { return _timeEndpoints.value},
+  set(v) {
+    const [a, b] = v
+    update(a,b)
+  }
+})
+
+
+function update(a, b) {
+    _timeEndpoints.value = [a, b]
+    const newBuilder = {...props.builder}
+    newBuilder.timeA = a
+    newBuilder.timeB = b
+    emit('update:builder', newBuilder)
+}
+
 const flipped = computed(()=>{
   const a = props.builder.timeA
   const b = props.builder.timeB