feat: fix viewport

frontend/src/app/canvas/CanvasPage.tsx

@@ -3,7 +3,7 @@
  * Rendered inside the platform when a project is selected.
  */
 
-import React, { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import {
   ReactFlow,
   ReactFlowProvider,
@@ -181,6 +181,7 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   const [renamingNodeId, setRenamingNodeId] = React.useState<string | null>(null)
   const [connectionFrom, setConnectionFrom] = React.useState<{ nodeId: string; sourceHandle?: string } | null>(null)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const canvasWrapperRef = useRef<HTMLDivElement | null>(null)
   const lastClickRef = useRef<{ clientX: number; clientY: number } | null>(null)
   const flowActionsRef = useRef<{ pasteAtViewportCenter: () => void; fitView: () => void } | null>(null)
   const [contextTarget, setContextTarget] = React.useState<null | { type: 'canvas'; clientX: number; clientY: number }>(null)
@@ -367,14 +368,6 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
     }
   }, [])
 
-  const onWheelCapture = useCallback((ev: React.WheelEvent) => {
-    const target = ev.target as HTMLElement
-    if (target.closest('.react-flow__node')) {
-      ev.preventDefault()
-      ev.stopPropagation()
-    }
-  }, [])
-
   const onCanvasContextMenu = useCallback((ev: React.MouseEvent) => {
     ev.preventDefault()
     lastClickRef.current = { clientX: ev.clientX, clientY: ev.clientY }
@@ -518,8 +511,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
             <ContextMenu>
               <ContextMenuTrigger asChild>
                 <div
+                  ref={canvasWrapperRef}
                   className="flex-1 min-h-0 w-full relative"
-                  onWheelCapture={onWheelCapture}
                   role="application"
                   aria-label="Graph canvas"
                   tabIndex={0}
@@ -556,7 +549,10 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
                     <FlowFitViewOnLoad />
                     <FlowKeyboardShortcuts />
                     <ReactFlow
-                      nodes={nodes}
+                      nodes={nodes.map((n) => ({
+                        ...n,
+                        className: [n.className, 'nowheel'].filter(Boolean).join(' '),
+                      }))}
                       edges={edges}
                       onNodesChange={onNodesChange}
                       onEdgesChange={onEdgesChange}