massive Shape rework: keep both tvPoints/Props and ourPoints/Props; delegate model updates to subclasses; DCA/VLine working but Ladder/HLine not done.

src/components/chart/BuilderPanel.vue

@@ -1,28 +1,65 @@
 <template>
-  <div :key="builder.id">
-    <v-card-text :color="titleColor">
-      <slot name="title"><span>Unimplemented</span></slot>
-    </v-card-text>
-    <v-card-text>
-      <slot name="text">
-        Unimplemented builder panel
-      </slot>
-      <div><v-btn variant="tonal" color="error" @click="co.removeBuilder(builder)" prepend-icon="mdi-delete">DELETE</v-btn></div>
-    </v-card-text>
-  </div>
+  <row-bar :color="builder.color">
+    <color-band :color="builder.color"/>
+    <slot/>
+    <div class="align-self-center">
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
+        </template>
+        <v-list>
+<!--          <v-list-subheader :title="'Limit '+ (lineAPrice?lineAPrice.toPrecision(5):'')"/>-->
+          <v-list-item title="Delete" key="withdraw" value="withdraw" prepend-icon="mdi-delete" color="red"
+                       @click="deleteMyBuilder"/>
+        </v-list>
+      </v-menu>
+    </div>
+  </row-bar>
 </template>
 
 <script setup>
-import {useChartOrderStore} from "@/orderbuild.js";
-import {computed} from "vue";
+import {builderFuncs, deleteBuilder, useChartOrderStore} from "@/orderbuild.js";
+import ColorBand from "@/components/chart/ColorBand.vue";
+import RowBar from "@/components/chart/RowBar.vue";
+import {onBeforeUnmount, onMounted, onUnmounted, onUpdated, watchEffect} from "vue";
 
-const props = defineProps(['builder', 'color', 'colorTag'])
+const props = defineProps({
+  order: Object,
+  builder: Object,
+  buildTranches: {type: Function},
+  adjustShapes: {type: Function, default: null},
+  deleteShapes: {type: Function, default: null},
+})
+const emit = defineEmits(['update:builder'])
 const co = useChartOrderStore()
 
-const titleColor = computed(()=>props.color ? props.color : props.colorTag ? props.builder.props[props.colorTag]?.linecolor : props.builder.props.a.linecolor )
+
+let lastId = props.builder.id
+builderFuncs[props.builder.id] = props.buildTranches
+onUpdated(()=>{
+  if (lastId !== props.builder.id ) {
+    delete builderFuncs[lastId]
+    builderFuncs[props.builder.id] = props.buildTranches
+    lastId = props.builder.id
+  }
+})
+onUnmounted(() => delete builderFuncs[lastId])
+
+if (props.adjustShapes) {
+  watchEffect(props.adjustShapes)
+  onMounted(props.adjustShapes)
+}
+
+if (props.deleteShapes)
+  onBeforeUnmount(props.deleteShapes)
+
+function deleteMyBuilder() {
+  deleteBuilder(props.order, props.builder);
+}
+
 
 </script>
 
 <style scoped lang="scss">
 
-</style>
+</style>