feat: introdce store

frontend/src/app/canvas/CanvasPage.tsx

@@ -34,7 +34,8 @@ import { useCanvasGraph } from '@/app/canvas/useCanvasGraph'
 import { getExampleGraph, backfillEdgeTargetTypes } from '@/app/canvas/canvasGraphUtils'
 import { ContextMenu, ContextMenuTrigger } from '@/components/ui/context-menu'
 import { CanvasContextMenuContent } from '@/app/canvas/CanvasContextMenuContent'
-import { useCanvasConnectionPath } from '@/app/canvas/useCanvasConnectionPath'
+import { useCanvasConnectionPathFromStore } from '@/app/canvas/useCanvasConnectionPathFromStore'
+import { dispatchCanvasCommand } from '@/app/canvas/canvasStore'
 import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
 import { createContextualNode } from '@/app/canvas/ContextualZoomNode'
 import { ViewportDisplayProvider } from '@/app/canvas/ViewportDisplayContext'
@@ -186,7 +187,11 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   const [isSelecting, setIsSelecting] = React.useState(false)
   const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null)
   const [fullscreenNodeId, setFullscreenNodeId] = React.useState<string | null>(null)
-  const connectionPath = useCanvasConnectionPath(edges)
+  useEffect(() => {
+    dispatchCanvasCommand({ type: 'graph/apply', payload: { nodes, edges } })
+  }, [nodes, edges])
+
+  const connectionPath = useCanvasConnectionPathFromStore()
 
   const nodesRef = useRef(nodes)
   nodesRef.current = nodes