@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,845 +0,0 @@
-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;