more UI updates

src/components/chart/LimitBuilder.vue

@@ -65,7 +65,7 @@ import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
 import {HLine} from "@/charts/shape.js";
-import {builderDefaults, lightenColor2} from "@/misc.js";
+import {builderDefaults, lightenColor2, lineColor} from "@/misc.js";
 import {useTheme} from "vuetify";
 import {useOrderStore} from "@/store/store.js";
 import RowBar from "@/components/chart/RowBar.vue";
@@ -77,6 +77,12 @@ const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
 const emit = defineEmits(['update:builder'])
 
+function computeDefaultColor() {
+  const index = props.order.builders.indexOf(props.builder)
+  return lineColor(props.order.buy, index)
+}
+
+const defaultColor = computeDefaultColor()
 
 // Fields must be defined in order to be reactive
 builderDefaults(props, emit, {
@@ -87,7 +93,7 @@ builderDefaults(props, emit, {
   priceB: null,
   rungs: 1,
   skew: 0,
-  color: null,
+  color: defaultColor,
 })
 
 const skew100 = computed( {
@@ -106,7 +112,7 @@ const lineAPrice = computed({
 })
 
 const lineA = new HLine(
-    {price:null,color:null},
+    {price:null,color:defaultColor},
     function (line) {props.builder.priceA = line.price; props.builder.color = line.color; adjustShapes()},
     deleteBuilder
 )
@@ -120,7 +126,7 @@ const lineBPrice = computed({
 })
 
 const lineB = new HLine(
-    {price:null,color:null},
+    {price:null,color:props.builder.color.value},
     (line)=>{props.builder.priceB = line.price; props.builder.color = line.color; adjustShapes()},
     deleteBuilder
 )