@flowuent-org/diagramming-core 1.4.0 → 1.4.1

package/packages/diagrams/src/lib/templates/DiagramContent.tsx

@@ -0,0 +1,845 @@
+import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import { ConnectionMode, ReactFlow, ReactFlowProps, NodeChange, applyNodeChanges, useReactFlow, Node } from '@xyflow/react';
+import { useTriggerEvent } from '../utils/event-hooks';
+import { IBlock, ICardNodeData } from '../types/card-node';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+
+import { Box, Fab, IconButton, Tooltip } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import { CardDataProvider } from '../contexts/CardDataProvider';
+import BlockWrapper from '../molecules/BlockWrapper';
+import useDragCallbacks from '../hooks/useDragCallbacks';
+import { useElk } from '../utils/elkLayout';
+import { useModalControls } from '../hooks/useModalControls';
+import { useWorkflowNodeAction } from '../hooks/useWorkflowNodeActiont';
+import {
+  useContentHeights,
+  useDiagram,
+  useDiagramEdges,
+  useDiagramNodes,
+  useDiagramType,
+  useLayoutDirection,
+  useSetLayoutDirection,
+  usePannable,
+  useUndo,
+  useRedo,
+  useCanUndo,
+  useCanRedo,
+} from '../contexts/DiagramProvider';
+import { useAutoRegisterFunctions } from '../hooks/useAutoRegisterFunctions';
+import SequenceDiagram from './sequence/SequenceDiagram';
+import ArchDiagram from './arch/ArchDiagram';
+import StateMachineDiagram from './stateMachine/StateMachineDiagram';
+import SystemFlowDiagram from './systemFlow/SystemFlowDiagram';
+import CloudArchitectureDiagram from './cloud-arch/components/CloudArchitectureDiagram';
+import UseCaseDiagram from './useCaseDiagram/UseCaseDiagram';
+import CollaborationDiagram from './collaborationDiagram/CollaborationDiagram';
+import Header from '../components/Header';
+import { PaneMouseHandler } from '../utils/event-store';
+import { AutomationExecutionPanel } from '../components/automation/AutomationExecutionPanel';
+import { CanvasSearchBar } from '../components/CanvasSearchBar';
+
+interface DiagramContentProps
+  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
+  className?: string;
+  showAutomationExecutionPanel?: boolean;
+}
+
+export const DiagramContent: React.FC<DiagramContentProps> = ({
+  className = '',
+  showAutomationExecutionPanel = true,
+  ...props
+}) => {
+  // Auto-register function nodes when they are created
+  useAutoRegisterFunctions();
+
+  const handleOnPaneClick = useTriggerEvent('onPaneClick');
+
+  // Use specific hooks where available
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const onConnect = useDiagram((state) => state.onConnect);
+  const onReconnect = useDiagram((state) => state.onReconnect);
+  const onEdgesChange = useDiagram((state) => state.onEdgesChange);
+  const onNodeDragEnd = useDiagram((state) => state.onNodeDragEnd);
+  const onNodeDragStart = useDiagram((state) => state.onNodeDragStart);
+  const onNodesChange = useDiagram((state) => state.onNodesChange);
+  const setNodes = useDiagram((state) => state.setNodes);
+  const diagramType = useDiagramType();
+  const contentHeights = useContentHeights();
+  const setShowEditEdge = useDiagram((state) => state.setSelectedEdge);
+  const selectedNode = useDiagram((state) => state.selectedNode);
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const isPannable = usePannable();
+  
+  // Undo/Redo hooks
+  const undo = useUndo();
+  const redo = useRedo();
+  const canUndo = useCanUndo();
+  const canRedo = useCanRedo();
+
+  // Zoom hooks - get zoom functions from ReactFlow
+  const { zoomIn, zoomOut, fitView, setViewport, getViewport, getNodes, screenToFlowPosition } = useReactFlow();
+
+  // Search bar state
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
+  // Clipboard state for copy/paste - support multiple nodes
+  const [copiedNodes, setCopiedNodes] = useState<Node[]>([]);
+  
+  // Store last click position on canvas for paste positioning
+  const [lastClickPosition, setLastClickPosition] = useState<{ x: number; y: number } | null>(null);
+  
+  // Flag to prevent layout recalculation immediately after paste
+  const skipLayoutRef = useRef(false);
+  
+  // Rename state
+  const [renamingNodeId, setRenamingNodeId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+
+  // Filter out hidden nodes for ReactFlow rendering
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(node => !node.data?.isHidden);
+  }, [nodes]);
+
+  // Search canvas functionality - opens search bar
+  const handleSearchCanvas = useCallback(() => {
+    setShowSearchBar(true);
+  }, []);
+
+  // Copy selected nodes (single or multiple)
+  const handleCopyNode = useCallback(() => {
+    // Get all selected nodes from ReactFlow
+    const selectedNodesList = getNodes().filter(node => node.selected);
+    
+    // If multiple nodes are selected, copy all of them
+    if (selectedNodesList.length > 0) {
+      setCopiedNodes(selectedNodesList);
+    } else {
+      // Fallback to single node selection (custom selectedNode state)
+      const nodeToCopy = visibleNodes.find(node => node.id === selectedNode);
+      if (nodeToCopy) {
+        setCopiedNodes([nodeToCopy]);
+      }
+    }
+  }, [visibleNodes, selectedNode, getNodes]);
+
+  // Paste nodes (single or multiple) at the clicked position
+  const handlePasteNode = useCallback(() => {
+    if (copiedNodes.length === 0) return;
+    
+    // Determine paste position:
+    // 1. Use last click position on canvas if available
+    // 2. Fallback to offset from original position
+    let pasteX: number;
+    let pasteY: number;
+    
+    if (lastClickPosition) {
+      // Use stored click position
+      pasteX = lastClickPosition.x;
+      pasteY = lastClickPosition.y;
+    } else {
+      // Fallback: use offset from original position
+      const minX = Math.min(...copiedNodes.map(node => node.position.x));
+      const minY = Math.min(...copiedNodes.map(node => node.position.y));
+      pasteX = minX + 50;
+      pasteY = minY + 50;
+    }
+    
+    // Find the minimum X and Y positions of copied nodes (reference point)
+    const minX = Math.min(...copiedNodes.map(node => node.position.x));
+    const minY = Math.min(...copiedNodes.map(node => node.position.y));
+    
+    // Calculate offset from reference point to paste position
+    const offsetX = pasteX - minX;
+    const offsetY = pasteY - minY;
+    
+    // Create new nodes with updated IDs and positions
+    const newNodes = copiedNodes.map((node, index) => {
+      // Calculate relative position from the minimum position
+      const relativeX = node.position.x - minX;
+      const relativeY = node.position.y - minY;
+      
+      return {
+        ...node,
+        id: `${node.id}-copy-${Date.now()}-${index}`,
+        position: {
+          x: minX + relativeX + offsetX,
+          y: minY + relativeY + offsetY,
+        },
+        selected: false,
+        data: {
+          ...node.data,
+          isPinned: true, // Mark as pinned to prevent auto-layout from moving it
+        },
+      };
+    });
+    
+    // Prevent layout recalculation from moving pasted nodes
+    skipLayoutRef.current = true;
+    
+    // Add all new nodes to the diagram
+    setNodes([...nodes, ...newNodes as any]);
+    
+    // Select the first pasted node (or all if multiple)
+    if (newNodes.length === 1) {
+      setSelectedNode(newNodes[0].id);
+    } else {
+      // For multiple nodes, select the first one (ReactFlow will handle multi-selection)
+      setSelectedNode(newNodes[0].id);
+    }
+  }, [copiedNodes, nodes, setNodes, setSelectedNode, lastClickPosition]);
+
+  // Delete selected nodes (single or multiple)
+  const handleDeleteNode = useCallback(() => {
+    // Get all selected nodes from ReactFlow
+    const selectedNodesList = getNodes().filter(node => node.selected);
+    
+    if (selectedNodesList.length > 0) {
+      // Delete all selected nodes
+      const changes = selectedNodesList.map(node => ({
+        id: node.id,
+        type: 'remove' as const,
+      }));
+      onNodesChange(changes);
+      setSelectedNode(null);
+    } else {
+      // Fallback to single node deletion (custom selectedNode state)
+      const nodeToDelete = visibleNodes.find(node => node.id === selectedNode);
+      if (nodeToDelete && onNodesChange) {
+        onNodesChange([{ id: nodeToDelete.id, type: 'remove' }]);
+        setSelectedNode(null);
+      }
+    }
+  }, [visibleNodes, selectedNode, onNodesChange, setSelectedNode, getNodes]);
+
+  // Rename node
+  const handleRenameNode = useCallback(() => {
+    const nodeToRename = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToRename) {
+      setRenamingNodeId(nodeToRename.id);
+      setRenameValue((nodeToRename.data as any)?.label || nodeToRename.id);
+    }
+  }, [visibleNodes, selectedNode]);
+
+  // Save rename
+  const handleSaveRename = useCallback(() => {
+    if (!renamingNodeId || !renameValue.trim()) {
+      setRenamingNodeId(null);
+      return;
+    }
+
+    const updatedNodes = nodes.map(node => {
+      if (node.id === renamingNodeId) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            label: renameValue.trim(),
+          },
+        };
+      }
+      return node;
+    });
+
+    setNodes(updatedNodes);
+    setRenamingNodeId(null);
+    setRenameValue('');
+  }, [renamingNodeId, renameValue, nodes, setNodes]);
+
+  // Cancel rename
+  const handleCancelRename = useCallback(() => {
+    setRenamingNodeId(null);
+    setRenameValue('');
+  }, []);
+
+  // Edit node (open node configuration/form)
+  const handleEditNode = useCallback(() => {
+    const nodeToEdit = visibleNodes.find(node => node.id === selectedNode || node.selected);
+    if (nodeToEdit) {
+      // For automation nodes, we can trigger a double-click or open a form
+      // This will depend on the specific node type implementation
+      // For now, we'll just ensure the node is selected and could trigger a modal
+      setSelectedNode(nodeToEdit.id);
+      // You can add specific edit logic here based on node type
+    }
+  }, [visibleNodes, selectedNode, setSelectedNode]);
+
+  // Handle keyboard shortcuts for undo/redo and zoom
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Don't trigger if user is typing in an input field
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement ||
+        (event.target as any)?.isContentEditable
+      ) {
+        return;
+      }
+
+      // Ctrl+Z or Cmd+Z for Undo
+      if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
+        event.preventDefault();
+        if (canUndo) {
+          undo();
+        }
+      }
+
+      // Ctrl+Y or Cmd+Shift+Z for Redo
+      if (
+        ((event.ctrlKey || event.metaKey) && event.key === 'y') ||
+        ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
+      ) {
+        event.preventDefault();
+        if (canRedo) {
+          redo();
+        }
+      }
+
+      // + or = for Zoom In (handles both + key and = key with shift)
+      if (event.key === '+' || event.key === '=') {
+        event.preventDefault();
+        zoomIn();
+      }
+
+      // - for Zoom Out
+      if (event.key === '-') {
+        event.preventDefault();
+        zoomOut();
+      }
+
+      // 0 for Reset Zoom (reset to zoom level 1)
+      if (event.key === '0' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        const viewport = getViewport();
+        setViewport({ x: viewport.x, y: viewport.y, zoom: 1 });
+      }
+
+      // 1 for Fit to View
+      if (event.key === '1' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        fitView();
+      }
+
+      // Ctrl+G or Cmd+G for Search Canvas (toggle search bar)
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'g' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        if (showSearchBar) {
+          // Close search bar if already open
+          setShowSearchBar(false);
+        } else {
+          // Open search bar
+          handleSearchCanvas();
+        }
+      }
+
+      // Ctrl+C or Cmd+C for Copy selected node
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'c' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        handleCopyNode();
+      }
+
+      // Ctrl+V or Cmd+V for Paste node
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === 'v' &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        handlePasteNode();
+      }
+
+      // Delete key for Delete selected node
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        if (selectedNode || visibleNodes.some(node => node.selected)) {
+          event.preventDefault();
+          handleDeleteNode();
+        }
+      }
+
+      // F2 for Rename node
+      if (event.key === 'F2') {
+        event.preventDefault();
+        handleRenameNode();
+      }
+
+      // Enter for Edit node
+      if (event.key === 'Enter' && !event.shiftKey) {
+        if (selectedNode || visibleNodes.some(node => node.selected)) {
+          event.preventDefault();
+          handleEditNode();
+        }
+      }
+
+      // Escape to cancel rename
+      if (event.key === 'Escape' && renamingNodeId) {
+        event.preventDefault();
+        handleCancelRename();
+      }
+
+      // Enter to save rename
+      if (event.key === 'Enter' && renamingNodeId) {
+        event.preventDefault();
+        handleSaveRename();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    undo, redo, canUndo, canRedo, zoomIn, zoomOut, fitView, setViewport, getViewport,
+    handleSearchCanvas, showSearchBar, handleCopyNode, handlePasteNode, handleDeleteNode,
+    handleRenameNode, handleEditNode, handleSaveRename, handleCancelRename,
+    selectedNode, visibleNodes, renamingNodeId
+  ]);
+
+  // Filter out edges connected to hidden nodes
+  const visibleEdges = useMemo(() => {
+    const visibleNodeIds = new Set(visibleNodes.map(node => node.id));
+    return edges.filter(edge =>
+      visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)
+    );
+  }, [edges, visibleNodes]);
+
+  const { addNode } = useWorkflowNodeAction({
+    isReplacing: false,
+    variant: 'addParallelCol',
+    addInMiddle: false,
+    closeModal: () => setOpen(false),
+    direction: 'left',
+  });
+  const [activeItem, setActiveItem] = useState<IBlock | null>(null);
+  const [activeCard, setActiveCard] = useState<ICardNodeData | null>(null);
+  const { setNodeRef } = useDroppable({ id: 'main' });
+  const { open, onClick, setOpen } = useModalControls();
+
+  const closeModalsOnClickOutside: PaneMouseHandler = () => {
+    handleOnPaneClick();
+    setShowEditEdge(null);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 250,
+        distance: 5,
+      },
+      onActivation({ event }) {
+        event.stopPropagation();
+      },
+    }),
+  );
+
+  const { getLayoutedElements } = useElk();
+  const layoutDirection = useLayoutDirection();
+  const setLayoutDirection = useSetLayoutDirection();
+  const layoutTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  // Set layout direction to RIGHT for automation diagrams
+  useEffect(() => {
+    if (diagramType === 'automation' && layoutDirection !== 'RIGHT') {
+      setLayoutDirection('RIGHT');
+    }
+  }, [diagramType, layoutDirection, setLayoutDirection]);
+
+  // Debounce layout recalculation to prevent continuous propagation
+  useEffect(() => {
+    // Skip layout recalculation if we just pasted nodes
+    if (skipLayoutRef.current) {
+      skipLayoutRef.current = false;
+      return;
+    }
+
+    // Clear any pending layout recalculation
+    if (layoutTimeoutRef.current) {
+      clearTimeout(layoutTimeoutRef.current);
+    }
+
+    // Debounce the layout recalculation
+    layoutTimeoutRef.current = setTimeout(() => {
+      getLayoutedElements();
+    }, 300); // 300ms debounce delay
+
+    return () => {
+      if (layoutTimeoutRef.current) {
+        clearTimeout(layoutTimeoutRef.current);
+      }
+    };
+  }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
+
+  // Listen for layout direction changes
+  useEffect(() => {
+    const handleLayoutDirectionChange = () => {
+      getLayoutedElements();
+    };
+
+    window.addEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+
+    return () => {
+      window.removeEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+    };
+  }, [getLayoutedElements]);
+
+  const { onDragEnd, onDragStart, onDragCancel } = useDragCallbacks({
+    setActiveItem,
+    setActiveCard,
+  });
+
+
+  const renderDynamicDiagram = () => {
+    if (diagramType === 'sequence') {
+      return (
+        <>
+          <SequenceDiagram sequenceNodes={visibleNodes} sequenceEdges={visibleEdges} />
+        </>
+      );
+    }
+
+    if (diagramType === 'arch') {
+      return <ArchDiagram archNodes={visibleNodes as any} archEdges={visibleEdges as any} />;
+    }
+
+    if (diagramType === 'stateMachine') {
+      return (
+        <>
+          <StateMachineDiagram stateNodes={visibleNodes} stateEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'systemFlow') {
+      return (
+        <>
+          <SystemFlowDiagram systemFlowNodes={visibleNodes} systemFlowEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'case') {
+      return (
+        <>
+          <UseCaseDiagram caseNodes={visibleNodes} caseEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'cloud-architecture') {
+      return (
+        <>
+          <CloudArchitectureDiagram initialNodes={visibleNodes as any} initialEdges={visibleEdges as any} />
+        </>
+      );
+    }
+    if (diagramType === 'collaboration') {
+      return (
+        <>
+          <CollaborationDiagram collabNodes={visibleNodes} collabEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'automation') {
+      return (
+        <>
+          <Box
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            className={className}
+          >
+            <Box
+              ref={setNodeRef}
+              sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+            >
+              {/* Redo Toolbar */}
+             
+                 
+              <ReactFlow
+                panOnDrag={isPannable}
+                nodesDraggable={isPannable}
+                nodes={visibleNodes}
+                onNodesChange={onNodesChange}
+                edges={visibleEdges}
+                onEdgesChange={onEdgesChange}
+                onReconnect={onReconnect}
+                onNodeClick={(event, node) => {
+                  // Don't interfere with multi-selection - let ReactFlow handle it
+                  // Only set our custom selectedNode if it's a single click without modifiers
+                  if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                    // Check if multiple nodes are selected - if so, don't override
+                    const selectedNodes = getNodes().filter(n => n.selected);
+                    if (selectedNodes.length <= 1) {
+                      event.stopPropagation();
+                      setSelectedNode(node.id);
+                    }
+                    // If multiple nodes are selected, let ReactFlow handle the drag
+                  }
+                }}
+                onPaneClick={(event) => {
+                  setSelectedNode(null);
+                  closeModalsOnClickOutside(event);
+                  // Store click position for paste operation
+                  const flowPosition = screenToFlowPosition({
+                    x: event.clientX,
+                    y: event.clientY,
+                  });
+                  setLastClickPosition(flowPosition);
+                }}
+                nodesConnectable={true}
+                nodesFocusable={true}
+                edgesFocusable={true}
+                elementsSelectable={true}
+                selectNodesOnDrag={false}
+                selectionOnDrag={true}
+                selectionKeyCode={["Control", "Meta"]}
+                defaultEdgeOptions={{
+                  reconnectable: true,
+                }}
+                fitView
+                fitViewOptions={{
+                  padding: 0.2,
+                  minZoom: 0.3,
+                  maxZoom: 2,
+                  includeHiddenNodes: false,
+                }}
+                minZoom={0.1}
+                maxZoom={2}
+                onNodeDragStart={onNodeDragStart}
+                onNodeDragStop={onNodeDragEnd}
+                onConnect={onConnect}
+                connectionMode={ConnectionMode.Strict}
+                suppressContentEditableWarning
+                suppressHydrationWarning
+                {...props}
+              />
+              {props.children}
+            </Box>
+          </Box>
+
+          <DragOverlay>
+            {activeItem ? (
+              <CardDataProvider nodeId={activeItem?.id}>
+                <BlockWrapper data={activeItem} />
+              </CardDataProvider>
+            ) : null}
+          </DragOverlay>
+
+          {showAutomationExecutionPanel && (
+            <AutomationExecutionPanel
+              nodes={visibleNodes as any}
+              edges={visibleEdges as any}
+              workflowId="automation-workflow"
+              onNodeUpdate={(nodeId, updatedData) => {
+                const updatedNodes = nodes.map(node =>
+                  node.id === nodeId
+                    ? { ...node, data: updatedData }
+                    : node
+                );
+                setNodes(updatedNodes);
+              }}
+            />
+          )}
+        </>
+      );
+    }
+    return (
+      <>
+        <Box
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+          className={className}
+        >
+          <Box
+            ref={setNodeRef}
+            sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+          >
+            {/* Undo/Redo Toolbar */}
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 16,
+                left: 16,
+                zIndex: 10,
+                display: 'flex',
+                gap: 0.5,
+                backgroundColor: 'background.paper',
+                borderRadius: 2,
+                boxShadow: 2,
+                padding: 0.5,
+              }}
+            >
+              <Tooltip title="Undo (Ctrl+Z)" placement="bottom">
+                <span>
+                  <IconButton
+                    onClick={undo}
+                    disabled={!canUndo}
+                    size="small"
+                    sx={{
+                      color: canUndo ? 'primary.main' : 'action.disabled',
+                    }}
+                  >
+                    <UndoIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+              <Tooltip title="Redo (Ctrl+Y)" placement="bottom">
+                <span>
+                  <IconButton
+                    onClick={redo}
+                    disabled={!canRedo}
+                    size="small"
+                    sx={{
+                      color: canRedo ? 'primary.main' : 'action.disabled',
+                    }}
+                  >
+                    <RedoIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+            <Fab
+              onClick={() => addNode('function')}
+              sx={{ position: 'fixed', top: 450, left: 0 }}
+            >
+              Add Function
+            </Fab>
+            <ReactFlow
+              panOnDrag={isPannable}
+              nodesDraggable={isPannable}
+              nodes={visibleNodes}
+              onNodesChange={onNodesChange}
+              edges={visibleEdges}
+              onEdgesChange={onEdgesChange}
+              fitView
+              onNodeDragStart={onNodeDragStart}
+              onNodeDragStop={onNodeDragEnd}
+              onConnect={onConnect}
+              connectionMode={ConnectionMode.Strict}
+              suppressContentEditableWarning
+              suppressHydrationWarning
+              onPaneClick={(event) => {
+                closeModalsOnClickOutside(event);
+                // Store click position for paste operation
+                const flowPosition = screenToFlowPosition({
+                  x: event.clientX,
+                  y: event.clientY,
+                });
+                setLastClickPosition(flowPosition);
+              }}
+              onNodeClick={(event, node) => {
+                // Don't interfere with multi-selection - let ReactFlow handle it
+                // Only set our custom selectedNode if it's a single click without modifiers
+                if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                  // Check if multiple nodes are selected - if so, don't override
+                  const selectedNodes = getNodes().filter(n => n.selected);
+                  if (selectedNodes.length <= 1) {
+                    event.stopPropagation();
+                    setSelectedNode(node.id);
+                  }
+                  // If multiple nodes are selected, let ReactFlow handle the drag
+                }
+              }}
+              selectionOnDrag={true}
+              selectionKeyCode={["Control", "Meta"]}
+              {...props}
+            />
+            {props.children}
+          </Box>
+        </Box>
+
+        <DragOverlay>
+          {activeItem ? (
+            <CardDataProvider nodeId={activeItem?.id}>
+              <BlockWrapper data={activeItem} />
+            </CardDataProvider>
+          ) : null}
+        </DragOverlay>
+      </>
+    );
+  };
+
+  return (
+    <DndContext
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      onDragCancel={onDragCancel}
+      sensors={sensors}
+    >
+      {/* Canvas Search Bar - Available for all diagram types */}
+      {showSearchBar && (
+        <CanvasSearchBar
+          nodes={visibleNodes}
+          onClose={() => setShowSearchBar(false)}
+          onNodeSelect={setSelectedNode}
+          onViewportChange={(nodeId) => {
+            // Viewport change is handled inside CanvasSearchBar
+          }}
+          getViewport={getViewport}
+          setViewport={setViewport}
+        />
+      )}
+
+      {/* Rename Input - Appears when F2 is pressed */}
+      {renamingNodeId && (() => {
+        const nodeToRename = visibleNodes.find(n => n.id === renamingNodeId);
+        if (!nodeToRename) return null;
+        const viewport = getViewport();
+        return (
+          <Box
+            sx={{
+              position: 'fixed',
+              top: `${nodeToRename.position.y * viewport.zoom + viewport.y + 20}px`,
+              left: `${nodeToRename.position.x * viewport.zoom + viewport.x + 20}px`,
+              zIndex: 1000,
+              backgroundColor: '#1e293b',
+              border: '2px solid #3b82f6',
+              borderRadius: '8px',
+              padding: '8px 12px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            <input
+              type="text"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleSaveRename();
+                } else if (e.key === 'Escape') {
+                  handleCancelRename();
+                }
+              }}
+              onBlur={handleSaveRename}
+              autoFocus
+              style={{
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: '#fff',
+                fontSize: '14px',
+                outline: 'none',
+                width: '200px',
+              }}
+            />
+          </Box>
+        );
+      })()}
+      {renderDynamicDiagram()}
+    </DndContext>
+  );
+};
+
+export default DiagramContent;