skew flipping improvements

src/components/chart/LimitBuilder.vue

@@ -9,30 +9,30 @@
       <template v-if="prices.length>1">
         <tr>
           <td>
-            <v-text-field type="number" v-model="priceB" min="0"
+            <v-text-field type="number" v-model="higherPrice" min="0"
                           density="compact" hide-details class="mx-1 my-2" variant="outlined"
                           label="Price"
                           :color="color" :base-color="color"
                           style="flex: 6em"
             />
           </td>
-          <td class="weight">{{ allocationText(weights[weights.length - 1]) }}</td>
+          <td class="weight">{{ allocationText(weights[higherIndex]) }}</td>
         </tr>
-        <tr v-for="i in prices.length-2" class="ml-5">
-          <td class="pl-5">{{ prices[prices.length-i-1] }}</td>
-          <td class="weight">{{ allocationText(weights[prices.length-i-1]) }}</td>
+        <tr v-for="i in innerIndexes" class="ml-5">
+          <td class="pl-5">{{ prices[i] }}</td>
+          <td class="weight">{{ allocationText(weights[i]) }}</td>
         </tr>
       </template>
       <tr>
         <td>
-          <v-text-field type="number" v-model="priceA" min="0"
+          <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"
           />
         </td>
-        <td class="weight">{{ weights.length ? allocationText(weights[0]) : '' }}</td>
+        <td class="weight">{{ weights.length ? allocationText(weights[lowerIndex]) : '' }}</td>
       </tr>
       </tbody>
     </table>
@@ -46,7 +46,7 @@ import {useTheme} from "vuetify";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
-import {computed, ref} from "vue";
+import {computed, ref, watchEffect} from "vue";
 import {chart} from "@/charts/chart.js";
 import {HLine} from "@/charts/shape.js";
 
@@ -112,6 +112,45 @@ const priceB = computed({
   }
 })
 
+const flipped = computed(()=>{
+  const a = props.builder.priceA
+  const b = props.builder.priceB
+  return a !== null && b !== null && a > b
+})
+
+const higherPrice = computed({
+  get() { return flipped.value ? priceA.value : priceB.value },
+  set(v) {
+    if (flipped.value)
+      priceA.value = v
+    else
+      priceB.value = v
+  }
+})
+
+const higherIndex = computed(()=>flipped.value ? 0 : weights.value.length-1)
+const lowerIndex = computed(()=>!flipped.value ? 0 : weights.value.length-1)
+const innerIndexes = computed(()=>{
+  const result = []
+  const n = prices.value.length
+  const f = flipped.value
+  for (let i=1; i<n-1; i++)
+    result.push(f?i:n-1-i)
+  return result
+})
+
+const lowerPrice = computed({
+  get() {
+    return !flipped.value ? priceA.value : priceB.value
+  },
+  set(v) {
+    if (!flipped.value)
+      priceA.value = v
+    else
+      priceB.value = v
+  }
+})
+
 const start = computed({
   get() {return props.builder.start || 0},
   set(v) {props.builder.start=v; },
@@ -125,10 +164,7 @@ const end = computed({
 
 const prices = ref([])
 const weights = ref([])
-function setPrices(ps) {
-  console.log('setPrices', ps)
-  prices.value = ps
-}
+function setPrices(ps) {prices.value = ps}
 function setWeights(ws) { weights.value = ws }
 
 
@@ -175,20 +211,11 @@ function getModelValue(model) {
 }
 
 function setModelValue(model, value) {
-  console.log('setModelValue->', {...model}, value)
+  // console.log('setModelValue->', {...model}, value)
   if (model.price !== value)
     model.price = value
 }
 
-function setValues(values) {
-  prices.value = values
-}
-
-function valueFromPoints(points) {
-  const result = points[0].time;
-  console.log('valueFromPoints', points, result);
-  return result
-}
 
 </script>