shape onModel improvements; vline fixes; time entry; couple bugs remain with dca dragging

src/components/chart/RungBuilder.vue

@@ -20,7 +20,7 @@
       Click the chart!
     </div>
     <div v-if="rungs>1" class="mx-2 d-flex align-center">
-      <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100"
+      <v-slider v-if="rungs>1" :direction="orientation?'vertical':'horizontal'" min="-100" max="100" v-model="skew100"
                 class="no-slider-bg ml-2 mr-4" hide-details/>
       <v-text-field type="number" v-model="skew100" min="-100" max="100"
                     density="compact" hide-details variant="outlined" label="Skew" step="5"
@@ -41,7 +41,7 @@ import {useTheme} from "vuetify";
 import {linspace, sideColor} from "@/misc.js";
 import {computed, onUnmounted, watchEffect} from "vue";
 import Color from "color";
-import {cancelDrawing, chart} from "@/charts/chart.js";
+import {cancelDrawing} from "@/charts/chart.js";
 
 const os = useOrderStore()
 const co = useChartOrderStore()
@@ -57,6 +57,7 @@ const props = defineProps({
   shape: Function,  // shape() -> Shape
   mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
   flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
+  orientation: { type: Number, default: 1 },  // 0 = horizontal slider, 1 = vertical
   getModelValue: Function,  // getModelValue(model) -> value
   setModelValue: Function,  // setModelValue(model,value) -> void
   getPointsValue: Function,  // getValueFromPoints(points) -> value
@@ -89,6 +90,7 @@ const rungs = computed({
       props.builder.rungs = 1
       return
     }
+    const prevR = props.builder.rungs
     r = Number(r)
     props.builder.rungs = r
     const b = valueB.value
@@ -115,8 +117,10 @@ const rungs = computed({
     }
     else {
       // from multi to multi
-      if (props.mode===1)
-        valueB.value = valueA.value + props.stdWidth * (r-1)
+      if (props.mode===1) {
+        const width = (valueB.value - valueA.value) / (prevR-1)
+        valueB.value = valueA.value + width * (r-1)
+      }
     }
   }
 })
@@ -182,82 +186,62 @@ function createShape(value, model, onModel, onDelete) {
 }
 
 
-function translateOnDrag(shape) {
-  const oldOnPoints = shape.onPoints
-  shape.onPoints = function (points) {
+function translateOnModel(shape) {
+  const oldOnModel = shape.onModel
+  shape.onModel = function (model, oldModel) {
+    oldOnModel.call(this, ...arguments)
     // console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
     if (!this.beingDragged()) {
-      oldOnPoints.call(this, points)
+      oldOnModel.call(this, ...arguments)
       return
     }
-    const prev = props.getModelValue(this.model)
-    oldOnPoints.call(this, points)
+    const prev = props.getModelValue(oldModel)
     const cur = props.getModelValue(this.model)
     const delta = cur - prev
-    // console.log('delta', points, shape.ourPoints, prev, cur, delta)
+    // console.log('delta', shape.id, prev, cur, delta)
     if (delta !== 0) {
       valueA.value += delta
-      valueB.value += delta
+      if (rungs.value > 1)
+        valueB.value += delta
     }
   }
 }
 
-// function translateOnDrag(shape) {
-//   const oldOnPoints = shape.onPoints
-//   shape.onPoints = function (points) {
-//     console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
-//     if (!this.beingDragged()) {
-//       oldOnPoints.call(this, points)
-//       return
-//     }
-//
-//     // todo vectorize
-//     const prev = props.getPointsValue(shape.ourPoints)
-//     const cur = props.getPointsValue(points)
-//     const delta = cur - prev
-//     console.log('delta', points, shape.ourPoints, prev, cur, delta)
-//     if (delta !== 0) {
-//       valueA.value += delta
-//       valueB.value += delta
-//     }
-//     oldOnPoints.call(this, points)
-//   }
-// }
-
+function setModelColor(model) {
+  if (model.color && model.color !== color.value)
+    color.value = model.color
+}
 
 const shapeA = createShape(valueA.value, {color: defaultColor},
     function (model) {
       const value = props.getModelValue(model);
-      if (value!==null && value!==undefined)
+      if (value !== valueA.value)
         valueA.value = value;
-      if (model.color)
-        color.value = model.color
+      setModelColor(model)
     },
     deleteSelf)
 
 if (props.mode===1)
-  translateOnDrag(shapeA)
+  translateOnModel(shapeA)
 
 const shapeB = createShape(valueB.value, {color:defaultColor},
     function (model) {
       const value = props.getModelValue(model);
-      if (value!==null && value!==undefined)
+      if (value !== valueB.value)
         valueB.value = value;
-      if (model.color)
-        color.value = model.color
+      setModelColor(model)
     },
     deleteSelf)
 
 function interiorOnModel(model) {
-  if (model.color)
-    color.value = model.color
+  setModelColor(model)
 }
 
 let interiorShapes = []
 
 function createInteriorShape(index) {
   const shape = new props.shape(makeModel(index), interiorOnModel, deleteSelf)
-  translateOnDrag(shape)
+  translateOnModel(shape)
   interiorShapes.push(shape)
 }
 
@@ -388,6 +372,9 @@ if (!valueA.value)
 :deep(.v-slider.v-input--vertical > .v-input__control) {
   min-height: 5em !important;
 }
+:deep(.v-slider.v-input--horizontal > .v-input__control) {
+  min-width: 5em !important;
+}
 :deep(.v-slider.no-slider-bg .v-slider-track__fill) {
   background-color: inherit !important;
 }