shape editing

web/src/components/ChartView.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import Card from 'primevue/card'
 import { createTradingViewDatafeed } from '../composables/useTradingViewDatafeed'
+import { useTradingViewShapes } from '../composables/useTradingViewShapes'
 import { useChartStore } from '../stores/chart'
 import type { IChartingLibraryWidget } from '../types/tradingview'
 
@@ -10,6 +11,7 @@ const chartStore = useChartStore()
 let tvWidget: IChartingLibraryWidget | null = null
 let datafeed: any = null
 let isUpdatingFromChart = false // Flag to prevent circular updates
+let shapeCleanup: (() => void) | null = null // Cleanup function for shape sync
 
 onMounted(() => {
   if (!chartContainer.value) return
@@ -49,6 +51,10 @@ onMounted(() => {
         setupStoreWatchers()
         // Initialize visible range on chart load
         initializeVisibleRange()
+        // Setup shape synchronization
+        if (tvWidget) {
+          shapeCleanup = useTradingViewShapes(tvWidget)
+        }
       })
     } catch (error) {
       console.error('Failed to initialize TradingView widget:', error)
@@ -165,6 +171,12 @@ function setupStoreWatchers() {
 }
 
 onBeforeUnmount(() => {
+  // Cleanup shape synchronization
+  if (shapeCleanup) {
+    shapeCleanup()
+    shapeCleanup = null
+  }
+
   if (tvWidget) {
     tvWidget.remove()
     tvWidget = null