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>
 

src/components/chart/RungBuilder.vue

@@ -39,7 +39,7 @@ import {useOrderStore} from "@/store/store.js";
 import {allocationText, deleteBuilder, linearWeights, useChartOrderStore, weightColors} from "@/orderbuild.js";
 import {useTheme} from "vuetify";
 import {linspace, sideColor} from "@/misc.js";
-import {computed, watchEffect} from "vue";
+import {computed, onUnmounted, watchEffect} from "vue";
 import Color from "color";
 import {cancelDrawing} from "@/charts/chart.js";
 
@@ -62,9 +62,12 @@ const props = defineProps({
   setWeights: Function,  // setValues(values:Array) -> void
 })
 
+const flipped = computed(() => valueA.value !== null && valueB.value !== null && valueA.value > valueB.value)
+const flippedSign = computed(()=>flipped.value?-1:1)
+
 const skew100 = computed( {
-  get() {return props.builder.skew*100},
-  set(v) {props.builder.skew = v/100; }
+  get() {console.log('skew100 flipped?',flippedSign.value); return flippedSign.value*props.builder.skew*100},
+  set(v) {props.builder.skew = flippedSign.value*v/100; }
 } )
 
 // validity checks
@@ -83,7 +86,6 @@ const rungs = computed({
     return props.builder.rungs
   },
   set(r) {
-    // todo this is subclass specific: make TWAP extend the range rather than compressing it
     if (!r) {
       props.builder.rungs = 1
       return
@@ -91,13 +93,12 @@ const rungs = computed({
     r = Number(r)
     props.builder.rungs = r
     const b = valueB.value
-    console.log('set rungs', r, valueA.value, b)
+    // console.log('set rungs', r, valueA.value, b)
     if ( r > 0 && b === null ) {
       // convert single shape to a range
       if (props.mode===0) {
         const width = props.stdWidth
         const mid = valueA.value
-        console.log('single to range', mid - width/2, mid + width/2)
         valueA.value = mid - width/2
         valueB.value = mid + width/2
       }
@@ -139,6 +140,7 @@ const values = computed(()=>{
 
 
 const weights = computed(() => {
+  // const skew = flipped.value ? -props.builder.skew : props.builder.skew
   const ws = linearWeights(props.builder.rungs, -props.builder.skew)
   if (props.setWeights)
     props.setWeights(ws)
@@ -159,28 +161,16 @@ const color = computed({
   get() {return props.builder.color},
   set(v) {
     const maxLightness = 60
+    // noinspection JSUnresolvedReference
     const c = new Color(v).hsl()
     props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string()
   }
 })
-const colors = computed( ()=> {
-  const color = props.builder.color !== null ? props.builder.color
-      : props.buy ? theme.value.colors.success : theme.value.colors.error
-  const ws = weights.value;
-  return weightColors(ws, color);
-})
 const colorStyle = computed(() => {
   return {'color': color.value}
 })
 
 
-function allocText(weight) {
-  const alloc = props.builder.allocation
-  if (alloc===null) return ''
-  return allocationText(weight * alloc, props.order.amount * alloc, amountSymbol.value);
-}
-
-
 //
 // SHAPE MANAGEMENT
 //
@@ -214,7 +204,6 @@ function translateOnDrag(shape) {
 
 const shapeA = createShape(valueA.value, {color: defaultColor},
     function (model) {
-      console.log('shapeA onModel', model)
       const value = props.getModelValue(model);
       if (value!==null && value!==undefined)
         valueA.value = value;
@@ -259,7 +248,6 @@ function removeInteriorShape() {
 
 function makeModel(index) {
   const ws = weights.value
-  const w = ws[index]
   const alloc = props.builder.allocation * ws[index];
   const result = {
     color: color.value,
@@ -274,12 +262,10 @@ function makeModel(index) {
 
 function adjustShapes() {
   // this is where all the shapes are created or adjusted
-  console.log('adjustShapes()', valueA.value, valueB.value)
+  // console.log('adjustShapes()', valueA.value, valueB.value)
   const vs = values.value
   if (vs.length)
       cancelDrawing()
-  const ws = weights.value
-  const colorStrings = colors.value
   // shape properties
   if( vs.length === 0 ) {
     shapeA.delete()
@@ -312,8 +298,6 @@ function adjustShapes() {
       removeInteriorShape()
     // adjust the interior shape values and/or add shapes
     for( let i=1; i<vs.length-1; i++ ) {
-      const v = vs[i]
-      const w = ws[i];
       if (i-1 === interiorShapes.length)
         createInteriorShape(i)
       else
@@ -335,12 +319,11 @@ function deleteShapes() {
   interiorShapes = []
 }
 
+onUnmounted(deleteShapes)
 
-console.log('valueA', valueA.value, shapeA)
 if (!valueA.value)
   shapeA.createOrDraw(); // initiate drawing mode
 
-
 </script>
 
 <style scoped lang="scss">