@flowuent-org/diagramming-core 1.1.4 → 1.1.6

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

@@ -1,338 +1,548 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { ConnectionMode, ReactFlow, ReactFlowProps } 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 } from '@mui/material';
-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,
-} 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';
-
-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 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 isPannable = usePannable();
-
-  // Filter out hidden nodes for ReactFlow rendering
-  const visibleNodes = useMemo(() => {
-    return nodes.filter(node => !node.data?.isHidden);
-  }, [nodes]);
-
-  // 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(() => {
-    // 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' }}
-            >
-              <ReactFlow
-                panOnDrag={isPannable}
-                nodesDraggable={isPannable}
-                nodes={visibleNodes}
-                onNodesChange={onNodesChange}
-                edges={visibleEdges}
-                onEdgesChange={onEdgesChange}
-                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
-                onPaneClick={closeModalsOnClickOutside}
-                {...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' }}
-          >
-            <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={closeModalsOnClickOutside}
-              {...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}
-    >
-      {renderDynamicDiagram()}
-    </DndContext>
-  );
-};
-
-export default DiagramContent;
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { ConnectionMode, ReactFlow, ReactFlowProps, NodeChange, applyNodeChanges } 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';
+
+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();
+
+  // Handle keyboard shortcuts for undo/redo
+  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();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [undo, redo, canUndo, canRedo]);
+
+  // Filter out hidden nodes for ReactFlow rendering
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(node => !node.data?.isHidden);
+  }, [nodes]);
+
+  // 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(() => {
+    // 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,
+  });
+
+  // Handle keyboard deletion of selected nodes (only for automation diagram)
+  useEffect(() => {
+    if (diagramType !== 'automation') return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if Delete or Backspace key is pressed
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Don't trigger deletion if user is typing in an input field
+        if (
+          event.target instanceof HTMLInputElement ||
+          event.target instanceof HTMLTextAreaElement ||
+          (event.target as any)?.isContentEditable
+        ) {
+          return;
+        }
+
+        // Check if a node is selected (either from store or ReactFlow's selection)
+        const selectedNodeId = selectedNode || visibleNodes.find(node => node.selected)?.id;
+        
+        if (selectedNodeId) {
+          event.preventDefault();
+          event.stopPropagation();
+          
+          // Find the node to delete
+          const nodeToDelete = nodes.find((node) => node.id === selectedNodeId);
+          if (!nodeToDelete) return;
+
+          // Create a remove change for the node
+          const nodeChanges: NodeChange[] = [
+            {
+              id: selectedNodeId,
+              type: 'remove',
+            },
+          ];
+
+          // Apply the changes through onNodesChange (which handles edge cleanup)
+          onNodesChange(nodeChanges);
+
+          // Clear the selected node
+          setSelectedNode(null);
+        }
+      }
+    };
+
+    // Add event listener
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup on unmount
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [diagramType, selectedNode, nodes, visibleNodes, onNodesChange, setSelectedNode]);
+
+  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' }}
+            >
+              {/* 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>
+              <ReactFlow
+                panOnDrag={isPannable}
+                nodesDraggable={isPannable}
+                nodes={visibleNodes}
+                onNodesChange={onNodesChange}
+                edges={visibleEdges}
+                onEdgesChange={onEdgesChange}
+                onReconnect={onReconnect}
+                onNodeClick={(event, node) => {
+                  event.stopPropagation();
+                  setSelectedNode(node.id);
+                }}
+                onPaneClick={(event) => {
+                  setSelectedNode(null);
+                  closeModalsOnClickOutside(event);
+                }}
+                nodesConnectable={true}
+                nodesFocusable={true}
+                edgesFocusable={true}
+                elementsSelectable={true}
+                selectNodesOnDrag={false}
+                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={closeModalsOnClickOutside}
+              {...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}
+    >
+      {renderDynamicDiagram()}
+    </DndContext>
+  );
+};
+
+export default DiagramContent;