skew flipping improvements

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">