limit ladder weights; still some color wonkiness

src/components/SplitPane.vue

@@ -5,7 +5,7 @@
     <div class="top">
       <slot name="top"/>
     </div>
-    <div class="resizer bg-grey-lighten-2" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
+    <div class="resizer bg-green-lighten-4" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
     <div class="scrollpane">
       <slot name="bottom"/>
     </div>

src/components/chart/LimitBuilder.vue

@@ -1,17 +1,43 @@
 <template>
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
-  <v-card flat rounded="0">
-    <v-toolbar dense :color="faintColor" elevation="3">
-      <span :style="colorStyle" style="width:1em;height:100%">&nbsp;</span>
-      <v-toolbar-title>{{ rungs === 1 ? 'Limit' : 'Ladder' }}</v-toolbar-title>
-      <v-text-field type="number" v-model="lineAPrice"
-                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"
-                    :color="color" :base-color="color" min="0"
-      />
+    <v-sheet dense :color="faintColor" class="d-flex align-content-stretch" style="overflow-y: hidden">
+      <div :style="colorStyle" style="width:1em">&nbsp;</div>
+      <div style="min-width: 3em; font-size: larger" class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
+      <div>
         <v-text-field type="number" v-model="rungs"
-                    density="compact" hide-details single-line class="justify-self-start" variant="outlined"
+                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                      label="Rungs"
                       :color="color" :base-color="color" min="1"
+                      style="width: 4.5em;"
         />
+      </div>
+      <div>
+        <div v-if="rungs>1">
+          <v-text-field type="number" v-model="lineBPrice" min="0"
+                        density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                        label="Price"
+                        :color="color" :base-color="color"
+                        style="flex: 6em"
+          />
+        </div>
+        <v-text-field type="number" v-model="lineAPrice" min="0"
+                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                      label="Price"
+                      :color="color" :base-color="color"
+                      style="flex: 6em"
+        />
+      </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" class="slider 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="10"
+                      :color="color" :base-color="color">
+          <template v-slot:prepend>
+            <v-btn icon="mdi-scale-balance" variant="text" @click="builder.skew=0"/>
+          </template>
+        </v-text-field>
+      </div>
+      <div class="align-self-center">
         <v-menu>
           <template v-slot:activator="{ props }">
             <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
@@ -22,12 +48,13 @@
                          @click="deleteBuilder"/>
           </v-list>
         </v-menu>
-    </v-toolbar>
+      </div>
+    </v-sheet>
+
     <!--      <v-col>-->
     <!--        <v-btn v-if="!co.drawing" prepend-icon="mdi-ray-vertex" @click="draw" variant="tonal">Draw</v-btn>-->
     <!--        <v-btn v-if="co.drawing" prepend-icon="mdi-ray-vertex" @click="cancelDrawing" variant="tonal">Cancel Drawing</v-btn>-->
     <!--      </v-col>-->
-  </v-card>
 </template>
 
 <script setup>
@@ -35,7 +62,7 @@ import {computed} from "vue";
 import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
-import {HLine, ShapeType} from "@/charts/shape.js";
+import {HLine} from "@/charts/shape.js";
 import {builderDefaults} from "@/misc.js";
 
 const co = useChartOrderStore()
@@ -49,9 +76,15 @@ builderDefaults(props.builder, {
   priceA: null,
   priceB: null,
   rungs: 1,
+  skew: 0,
   color: null,
 })
 
+const skew100 = computed( {
+  get() {return props.builder.skew*100},
+  set(v) {props.builder.skew = v/100; adjustShapes()}
+} )
+
 // we keep two special control lines as the edge of the ranges and then deletable lines in-between
 
 const lineAPrice = computed({
@@ -112,9 +145,13 @@ function removeInteriorLine() {
 }
 
 
-const color = computed(() => {
-  // todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
-  return props.builder.color
+const color = computed({
+  get() {
+    const maxLightness = 60
+    const c = new Color(props.builder.color).hsl()
+    return c.saturation <= maxLightness ? props.builder.color : c.lightness(maxLightness).string()
+  },
+  set(v) {props.builder.color = v}
 })
 const faintColor = computed(() => new Color(color.value).hsl().lightness(97).string())
 const colorStyle = computed(() => {
@@ -190,6 +227,38 @@ const prices = computed(()=>{
 })
 
 
+const weights = computed(() => {
+  const r = props.builder.rungs
+  const s = -props.builder.skew
+  if (r === 1) return [1]
+  const result = []
+  if (s === 0) {
+    for (let i = 0; i < r; i++)
+      result.push(1 / r)
+  } else if (s === 1) {
+    result.push(1)
+    for (let i = 1; i < r; i++)
+      result.push(0)
+  } else if (s === -1) {
+    for (let i = 1; i < r; i++)
+      result.push(0)
+    result.push(1)
+  } else {
+    for (let i = 0; i < r; i++)
+      result.push((1 - s * (2 * i / (r - 1) - 1)) / r)
+  }
+  return result
+})
+
+
+const colors = computed( ()=> {
+  const c = new Color(props.builder.color).rgb()
+  const ws = weights.value;
+  const max = Math.max(...ws)
+  return ws.map((w)=>c.alpha(w/max).string())
+})
+
+
 let priceRangeId = null
 
 
@@ -210,7 +279,7 @@ function adjustShapes() {
     // SINGLE LINE
     //
     console.log('single line')
-    lineA.setModel({price:limits[0], color: props.builder.color})
+    lineA.setModel({price:limits[0], color: colors.value[0]})
     lineB.delete()
     for( const line of interiorLines )
       line.delete()
@@ -242,8 +311,9 @@ function adjustShapes() {
     //   })
     // }
 
-    lineA.setModel({price:limits[0], color: props.builder.color})
-    lineB.setModel({price:limits[limits.length-1], color: props.builder.color})
+    const colorStrings = colors.value
+    lineA.setModel({price:limits[0], color: colorStrings[0]})
+    lineB.setModel({price:limits[limits.length-1], color: colorStrings[colorStrings.length-1]})
 
     const numInterior = Math.max(0,limits.length-2);
     // trim excess interior lines
@@ -256,7 +326,7 @@ function adjustShapes() {
       if (i === interiorLines.length)
         createInteriorLine(limit)
       else
-        interiorLines[i].setModel({price:limit, color: props.builder.color})
+        interiorLines[i].setModel({price:limit, color: colorStrings[1+i]})
     }
   }
 }
@@ -288,5 +358,10 @@ if (!props.builder.priceA)
 </script>
 
 <style scoped lang="scss">
-
+:deep(.v-slider.v-input--vertical > .v-input__control) {
+  min-height: 5em !important;
+}
+.v-slider-track__fill {
+  background-color: inherit !important;
+}
 </style>

src/components/chart/Toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" >
+  <div class="d-flex mb-1">
     <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
     <span class="logo">dexorder</span>
     <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start" variant="text"/>