diff --git a/src/app/globals.css b/src/app/globals.css index 4899a54b..f9b1a6fb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -40,6 +40,19 @@ body { font-family: inherit; } +/* Skip hit-testing on images inside nodes — parent containers handle all + click/hover events. Prevents expensive bitmap decoding during mouse movement. */ +.react-flow__node img { + pointer-events: none; +} + +/* During active panning or node dragging, disable pointer events on all node + content to eliminate expensive browser hit-testing against the DOM tree. + The class is toggled on via direct DOM access (no React re-render). */ +.canvas-interacting .react-flow__node > * { + pointer-events: none; +} + /* Remove default React Flow styling for output nodes to match custom nodes */ .react-flow__node-output { border: none !important; diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx index bd25e2db..209485de 100644 --- a/src/components/WorkflowCanvas.tsx +++ b/src/components/WorkflowCanvas.tsx @@ -1964,10 +1964,10 @@ export function WorkflowCanvas() { onEdgesChange={onEdgesChange} onConnect={handleConnect} onConnectEnd={handleConnectEnd} - onMoveStart={() => { isPanningRef.current = true; setHoveredNodeId(null); }} - onMoveEnd={() => { isPanningRef.current = false; }} - onNodeDragStart={() => { isDraggingNodeRef.current = true; }} - onNodeDragStop={(event, node) => { isDraggingNodeRef.current = false; handleNodeDragStop(event, node); }} + onMoveStart={() => { isPanningRef.current = true; setHoveredNodeId(null); document.documentElement.classList.add("canvas-interacting"); }} + onMoveEnd={() => { isPanningRef.current = false; document.documentElement.classList.remove("canvas-interacting"); }} + onNodeDragStart={() => { isDraggingNodeRef.current = true; document.documentElement.classList.add("canvas-interacting"); }} + onNodeDragStop={(event, node) => { isDraggingNodeRef.current = false; document.documentElement.classList.remove("canvas-interacting"); handleNodeDragStop(event, node); }} onSelectionChange={handleSelectionChange} nodeTypes={nodeTypes} edgeTypes={edgeTypes}