interactive horizontal limit lines

src/components/chart/Chart.vue

@@ -5,46 +5,19 @@
 <script setup>
 import "/tradingview/charting_library/charting_library.js"
 import "/tradingview/datafeeds/udf/dist/bundle.js"
-import {onMounted, reactive, ref} from "vue";
-import {useShapeStore} from "@/store/store.js";
+import {onMounted, ref} from "vue";
+import {initWidget} from "@/chart.js";
 
 const element = ref()
 
-let widget = null;
-
 onMounted(() => {
   const el = element.value;
-  widget = window.tvWidget = new TradingView.widget({
-    library_path: "/tradingview/charting_library/",
-    // debug: true,
-    autosize: true,
-    symbol: 'AAPL',
-    interval: '1D',
-    container: el,
-    datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
-    locale: "en",
-    disabled_features: [],
-    enabled_features: [],
-    drawings_access: {
-      type: 'white',
-      tools: [
-        {name: 'Ray'},
-        {name: 'Trend Line'},
-        {name: 'Horizontal Line'},
-        {name: 'Horizontal Ray'},
-        {name: 'Vertical Line'},
-        {name: 'Extended Line'},
-      ]
-    },
-  });
-  widget.subscribe('drawing_event', handleDrawingEvent)
+  initWidget(el)
   initShapes()
 })
 
-const ss = useShapeStore()
-
 function initShapes() {
-  // const c = widget.activeChart()
+  // const c = widget.chart()
   // for( const s of ss.shapes ) {
   //   const type = s.type.toLowerCase().replace(' ','_')
   //   console.log('create type', type)
@@ -52,46 +25,6 @@ function initShapes() {
   // }
 }
 
-function handleDrawingEvent(id, event) {
-  if (event === 'create') {
-    const shape = widget.activeChart().getShapeById(id);
-    const points = shape.getPoints()
-    const props = shape.getProperties()
-    let type;
-    if (points.length === 1)
-        // vertical or horizontal line
-      type = props.textOrientation === 'vertical' ? 'Vertical Line' : props.extendLeft || props.extendRight ? 'Horizontal Ray' : 'Horizontal Line'
-    else if (points.length === 2) {
-      type = !props.extendLeft && !props.extendRight ? 'Trend Line' : props.extendLeft && props.extendRight ? 'Extended Line' : 'Ray'
-    } else
-      console.log('unknown shape', points, props)
-    console.log('create shape', type, points)
-    ss.shapes.push({id, type, points, props})
-  } else if (event === 'points_changed') {
-    const s = ss.shape(id)
-    if( !s ) {
-      console.log('warning: ignoring drawing event for non-existant shape')
-      return
-    }
-    const points = widget.activeChart().getShapeById(id).getPoints()
-    if (s.points_changed)
-      s.points_changed(points)
-    ss.shape(id).points = points
-  } else if (event === 'properties_changed') {
-    const s = ss.shape(id)
-    if( !s ) {
-      const props = widget.activeChart().getShapeById(id).getProperties()
-      console.log('warning: ignoring drawing event for non-existant shape', props)
-      return
-    }
-    const props = widget.activeChart().getShapeById(id).getProperties()
-    if (s.properties_changed)
-      s.properties_changed(props)
-    ss.shape(id).props = props
-  } else
-    console.log('unknown drawing event', event)
-}
-
 </script>
 
 <style scoped lang="scss">