interactive horizontal limit lines

src/components/chart/LimitBuilder.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
+  <v-card flat rounded="0">
+    <v-toolbar dense :color="color">
+      <v-toolbar-title>Limit</v-toolbar-title>
+      <v-text-field type="number" v-model="price" density="compact" hide-details single-line class="justify-self-start"/>
+      <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 '+ (price?price.toPrecision(5):'')"/>
+          <v-list-item title="Delete" key="withdraw" value="withdraw" prepend-icon="mdi-delete" color="red" @click="del"/>
+        </v-list>
+      </v-menu>
+    </v-toolbar>
+<!--      <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>
+import BuilderPanel from "@/components/chart/BuilderPanel.vue";
+import {computed, ref} from "vue";
+import {prototype} from "@/blockchain/common.js";
+import {builderShape, cancelDrawing, chart, crosshairPoint, setPoints, ShapeType, VerboseCallback} from "@/chart.js";
+import {useChartOrderStore} from "@/orderbuild.js";
+import {timestamp} from "@/misc.js";
+
+const co = useChartOrderStore()
+const props = defineProps(['builder'])
+
+let updating = false
+
+const color = computed(()=>{
+  // todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
+  return props.builder.props.limit?.linecolor
+})
+
+const price = computed({
+  get() {return props.builder.limit},
+  set(p) {
+    p = Number(p)
+    console.log('set price', p)
+    props.builder.limit = p;
+    if( drawingShapeId ) {
+      const shapeId = props.builder.shapes.limit;
+      console.log('adjust shape', shapeId)
+      updating = true
+      setPoints(shapeId, [{time: timestamp(), price:p}])
+      updating = false
+    }
+  }
+})
+
+
+const drawingShapeId = ref(null)
+
+
+function del() {
+  co.removeBuilder(props.builder)
+  console.log('remove shape', drawingShapeId.value)
+  if( drawingShapeId.value )
+    chart.removeEntity(drawingShapeId.value)
+}
+
+
+const callbacks = {
+  onUndraw() {console.log('on undraw')},
+  onCreate(shapeId, points, props) {drawingShapeId.value = shapeId},
+  onPoints(shapeId, points) {props.builder.limit = points[0].price; console.log('limit onPoints', points[0].price)},
+  onDelete(shapeId) {drawingShapeId.value=null; del()},
+}
+
+
+if (!props.builder.limit)
+  builderShape(props.builder, 'limit', ShapeType.HLine, callbacks)
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>