@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/useCaseDiagram/components/UseCaseDiagramFlow.tsx

@@ -1,637 +1,637 @@
-import React, { useCallback, useState, useRef, useEffect } from 'react';
-import {
-  ReactFlow,
-  Background,
-  useNodesState,
-  useEdgesState,
-  Node,
-  Edge,
-  NodeMouseHandler,
-  Connection,
-  OnConnectStartParams,
-} from '@xyflow/react';
-import {
-  UseCaseDiagramProps,
-  UseCaseNodeData,
-  PackageNodeData,
-  UseCaseEdgeData,
-  UseCaseEdgeType,
-  CreateNodeParams,
-  CreateNodeResult,
-  HistoryState,
-  RelationshipDialogState,
-} from '../../../types/usecase-types';
-import { ActorNodeData } from '../../../types/shared-node-types';
-import UseCaseControls from '../controls/UseCaseControls';
-import ActorNode from '../../../atoms/ActorNode';
-import UseCaseNode from '../nodes/UseCaseNode';
-import PackageNode from '../nodes/PackageNode';
-import UseCaseEdge from '../nodes/UseCaseEdge';
-import { Button, Paper, Box } from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import DownloadIcon from '@mui/icons-material/Download';
-import UploadIcon from '@mui/icons-material/Upload';
-import ActorNodeSettings from './ActorNodeSettings';
-import AddRelationshipDialog from './AddRelationshipDialog';
-import UseCaseNodeSettings from './UseCaseNodeSettings';
-import PackageNodeSettings from './PackageNodeSettings';
-import DiagramPanel from '../../../components/DiagramPanel';
-import Sidebar from '../../../components/SideBar';
-import MiniMapCommon from '../../../components/MiniMapCommon';
-import AiButton from '../../../components/AiButton';
-
-const nodeTypes = {
-  actor: ActorNode,
-  usecase: UseCaseNode,
-  package: PackageNode,
-};
-
-const edgeTypes = {
-  association: UseCaseEdge,
-  include: UseCaseEdge,
-  extend: UseCaseEdge,
-};
-
-// Utility: Get a random position for a new node
-function getRandomPosition(): { x: number; y: number } {
-  return { x: 100 + Math.random() * 400, y: 100 + Math.random() * 300 };
-}
-
-// Utility: Get absolute position of a node (recursively sums parent positions)
-function getAbsolutePosition(
-  node: Node,
-  allNodes: Node[],
-): { x: number; y: number } {
-  let x = node.position.x;
-  let y = node.position.y;
-  let current = node;
-  while (current.parentId) {
-    const parent = allNodes.find((n) => n.id === current.parentId);
-    if (!parent) break;
-    x += parent.position.x;
-    y += parent.position.y;
-    current = parent;
-  }
-  return { x, y };
-}
-
-// Utility: Shallow compare node/edge arrays by id and length
-function shallowCompareById(a: (Node | Edge)[], b: (Node | Edge)[]) {
-  if (a.length !== b.length) return false;
-  const aIds = a.map((n) => n.id).sort();
-  const bIds = b.map((n) => n.id).sort();
-  for (let i = 0; i < aIds.length; i++) {
-    if (aIds[i] !== bIds[i]) return false;
-  }
-  return true;
-}
-
-// Utility: Debounce function
-function debounce(fn: (...args: unknown[]) => void, delay: number) {
-  let timer: NodeJS.Timeout | null = null;
-  return (...args: unknown[]) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), delay);
-  };
-}
-
-const UseCaseDiagramFlow: React.FC<UseCaseDiagramProps> = ({
-  caseNodes,
-  caseEdges,
-}) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(caseNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(caseEdges);
-
-  // Improved history state for undo/redo
-  const [history, setHistory] = useState<HistoryState[]>(
-    [],
-  );
-  const [historyIndex, setHistoryIndex] = useState<number>(-1);
-  const isUndoRedoAction = useRef(false);
-
-  // Debounced history update
-  const debouncedUpdateHistory = useRef(
-    debounce(
-      (...args: unknown[]) => {
-        const [nodes, edges, history, historyIndex, setHistory, setHistoryIndex] = args as [
-          Node[],
-          Edge[],
-          HistoryState[],
-          number,
-          React.Dispatch<React.SetStateAction<HistoryState[]>>,
-          React.Dispatch<React.SetStateAction<number>>
-        ];
-        const newHistoryEntry: HistoryState = {
-          nodes: [...nodes],
-          edges: [...edges],
-        };
-        const currentState = history[historyIndex];
-        if (
-          shallowCompareById(currentState.nodes, newHistoryEntry.nodes) &&
-          shallowCompareById(currentState.edges, newHistoryEntry.edges)
-        ) {
-          return; // No change, don't add to history
-        }
-        // Trim future history if we're in the middle of the history stack
-        const newHistory = history.slice(0, historyIndex + 1);
-        newHistory.push(newHistoryEntry);
-        setHistory(newHistory);
-        setHistoryIndex(newHistory.length - 1);
-      },
-      300,
-    ),
-  ).current;
-
-  // Initialize history with initial state
-  useEffect(() => {
-    if (history.length === 0) {
-      setHistory([{ nodes: [...nodes], edges: [...edges] }]);
-      setHistoryIndex(0);
-    }
-  }, []); // Only run on mount
-
-  // Debounced save to history on nodes/edges change
-  useEffect(() => {
-    if (isUndoRedoAction.current || history.length === 0) return;
-    debouncedUpdateHistory(
-      nodes,
-      edges,
-      history,
-      historyIndex,
-      setHistory,
-      setHistoryIndex,
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodes, edges]);
-
-  // Undo handler
-  const handleUndo = useCallback(() => {
-    if (historyIndex > 0) {
-      isUndoRedoAction.current = true;
-      const prev = history[historyIndex - 1];
-      setNodes(prev.nodes);
-      setEdges(prev.edges);
-      setHistoryIndex(historyIndex - 1);
-      setTimeout(() => {
-        isUndoRedoAction.current = false;
-      }, 0);
-    }
-  }, [history, historyIndex, setNodes, setEdges]);
-
-  // Redo handler
-  const handleRedo = useCallback(() => {
-    if (historyIndex < history.length - 1) {
-      isUndoRedoAction.current = true;
-      const next = history[historyIndex + 1];
-      setNodes(next.nodes);
-      setEdges(next.edges);
-      setHistoryIndex(historyIndex + 1);
-      setTimeout(() => {
-        isUndoRedoAction.current = false;
-      }, 0);
-    }
-  }, [history, historyIndex, setNodes, setEdges]);
-
-  // Keyboard shortcuts for undo/redo
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ctrl+Z or Cmd+Z (undo)
-      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
-        e.preventDefault();
-        handleUndo();
-      }
-      // Ctrl+Y or Cmd+Shift+Z (redo)
-      if (
-        ((e.ctrlKey || e.metaKey) && e.key === 'y') ||
-        ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z')
-      ) {
-        e.preventDefault();
-        handleRedo();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleUndo, handleRedo]);
-
-  const handleClear = useCallback(() => {
-    const cleared = { nodes: [], edges: [] };
-    const newHistory = history.slice(0, historyIndex + 1);
-    newHistory.push(cleared);
-    setNodes([]);
-    setEdges([]);
-    setHistory(newHistory);
-    setHistoryIndex(newHistory.length - 1);
-  }, [history, historyIndex, setNodes, setEdges]);
-
-  // Node creation helpers (DRY)
-  function createNode({
-    type,
-    label,
-    data = {},
-    style,
-    business,
-    parentNode,
-    width,
-    height,
-  }: CreateNodeParams): CreateNodeResult {
-    const id = `${type}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
-    const position = getRandomPosition();
-    let nodeData: UseCaseNodeData | PackageNodeData;
-    switch (type) {
-      case 'actor':
-        nodeData = {
-          label: label || 'Actor',
-          style: style || 'stickman',
-          ...data,
-        } as ActorNodeData;
-        break;
-      case 'usecase':
-        nodeData = {
-          label: label || 'Use Case',
-          business: !!business,
-          ...data,
-        } as UseCaseNodeData;
-        break;
-      case 'package':
-        nodeData = {
-          label: label || 'Package',
-          width,
-          height,
-          ...data
-        } as PackageNodeData;
-        break;
-      default:
-        nodeData = { label: label || 'Node', ...data } as UseCaseNodeData;
-    }
-    return {
-      id,
-      type,
-      position,
-      data: nodeData,
-      ...(parentNode
-        ? { parentNode, extent: 'parent' as const, draggable: true }
-        : {}),
-    };
-  }
-
-  const handleAddActor = useCallback(
-    (type: 'stickman' | 'business') => {
-      const label = `${type === 'business' ? 'Business Actor' : 'Actor'} ${nodes.filter((n) => n.type === 'actor' && (type === 'business' ? n.data.style === 'business' : n.data.style !== 'business')).length + 1}`;
-      const newNode = createNode({ type: 'actor', label, style: type });
-      setNodes((nds) => [...nds, newNode]);
-    },
-    [nodes, setNodes],
-  );
-
-  const handleAddUseCase = useCallback(() => {
-    const label = `Use Case ${nodes.filter((n) => n.type === 'usecase' && !n.data.business).length + 1}`;
-    const newNode = createNode({ type: 'usecase', label, business: false });
-    setNodes((nds) => [...nds, newNode]);
-  }, [nodes, setNodes]);
-
-  const handleAddBusinessUseCase = useCallback(() => {
-    const label = `Business Use Case ${nodes.filter((n) => n.type === 'usecase' && n.data.business).length + 1}`;
-    const newNode = createNode({ type: 'usecase', label, business: true });
-    setNodes((nds) => [...nds, newNode]);
-  }, [nodes, setNodes]);
-
-  const handleAddPackage = useCallback(() => {
-    const label = `Package ${nodes.filter((n) => n.type === 'package').length + 1}`;
-    const newNode = createNode({ type: 'package', label });
-    setNodes((nds) => [...nds, newNode]);
-  }, [nodes, setNodes]);
-
-  // Relationship dialog state
-  const [relationshipDialogOpen, setRelationshipDialogOpen] = useState(false);
-  const [pendingRelationshipType, setPendingRelationshipType] = useState<
-    null | 'association' | 'include' | 'extend'
-  >(null);
-  const [pendingSourceId, setPendingSourceId] = useState<string | null>(null);
-  const [pendingTargetId, setPendingTargetId] = useState<string | null>(null);
-  const [editingEdge, setEditingEdge] = useState<Edge<UseCaseEdgeData> | null>(null);
-
-  const handleAddAssociation = useCallback(() => {
-    setPendingRelationshipType('association');
-    setRelationshipDialogOpen(true);
-    setEditingEdge(null);
-  }, []);
-  const handleAddInclude = useCallback(() => {
-    setPendingRelationshipType('include');
-    setRelationshipDialogOpen(true);
-    setEditingEdge(null);
-  }, []);
-  const handleAddExtend = useCallback(() => {
-    setPendingRelationshipType('extend');
-    setRelationshipDialogOpen(true);
-    setEditingEdge(null);
-  }, []);
-
-  const handleEditRelationship = useCallback((edge: Edge<UseCaseEdgeData>) => {
-    setEditingEdge(edge);
-    setPendingRelationshipType((edge.data?.type || edge.type) as UseCaseEdgeType);
-    setPendingSourceId(edge.source);
-    setPendingTargetId(edge.target);
-    setRelationshipDialogOpen(true);
-  }, []);
-
-  // Manual edge creation state
-  const [connectStartNodeId, setConnectStartNodeId] = useState<string | null>(
-    null,
-  );
-  const [pendingSourceHandle, setPendingSourceHandle] = useState<string | null>(
-    null,
-  );
-  const [pendingTargetHandle, setPendingTargetHandle] = useState<string | null>(
-    null,
-  );
-  const handleConnectStart = useCallback(
-    (
-      event: MouseEvent | TouchEvent,
-      params: OnConnectStartParams,
-    ) => {
-      setConnectStartNodeId(params.nodeId);
-    },
-    [],
-  );
-
-  const handleConnect = useCallback(
-    (params: Connection) => {
-      if (!params.source || !params.target) return;
-      const trueSource = connectStartNodeId || params.source;
-      const trueTarget =
-        trueSource === params.source ? params.target : params.source;
-      let sourceHandle = params.sourceHandle || 'right';
-      let targetHandle = params.targetHandle || 'left';
-      const sourceNode = nodes.find((n) => n.id === trueSource);
-      const targetNode = nodes.find((n) => n.id === trueTarget);
-      let sourceAbsX = 0,
-        targetAbsX = 0;
-      if (sourceNode && targetNode) {
-        sourceAbsX = getAbsolutePosition(sourceNode, nodes).x;
-        targetAbsX = getAbsolutePosition(targetNode, nodes).x;
-      }
-      if (sourceNode && targetNode && sourceAbsX > targetAbsX) {
-        setPendingSourceId(trueTarget);
-        setPendingTargetId(trueSource);
-        setPendingSourceHandle(targetHandle);
-        setPendingTargetHandle(sourceHandle);
-      } else {
-        setPendingSourceId(trueSource);
-        setPendingTargetId(trueTarget);
-        setPendingSourceHandle(sourceHandle);
-        setPendingTargetHandle(targetHandle);
-      }
-      setPendingRelationshipType('association');
-      setRelationshipDialogOpen(true);
-      setConnectStartNodeId(null);
-    },
-    [connectStartNodeId, nodes],
-  );
-
-  const handleAddRelationship = (
-    sourceId: string,
-    targetId: string,
-    type: 'association' | 'include' | 'extend',
-    label?: string,
-    arrowHeadSource?: 'none' | 'triangle' | 'v',
-    arrowHeadTarget?: 'none' | 'triangle' | 'v',
-  ) => {
-    if (editingEdge) {
-      setEdges((eds) =>
-        eds.map((e) =>
-          e.id === editingEdge.id
-            ? {
-              ...e,
-              source: sourceId,
-              target: targetId,
-              type,
-              data: {
-                ...e.data,
-                type,
-                label,
-                arrowHeadSource: arrowHeadSource || 'none',
-                arrowHeadTarget: arrowHeadTarget || 'none',
-              },
-              sourceHandle: pendingSourceHandle || undefined,
-              targetHandle: pendingTargetHandle || undefined,
-            }
-            : e,
-        ),
-      );
-      setEditingEdge(null);
-    } else {
-      const id = `${type}-${edges.length + 1}-${Date.now()}`;
-      const newEdge: Edge<UseCaseEdgeData> = {
-        id,
-        source: sourceId,
-        target: targetId,
-        type,
-        data: {
-          type,
-          label,
-          arrowHeadSource: arrowHeadSource || 'none',
-          arrowHeadTarget: arrowHeadTarget || 'none',
-        },
-        sourceHandle: pendingSourceHandle || undefined,
-        targetHandle: pendingTargetHandle || undefined,
-      };
-      setEdges((eds) => [...eds, newEdge]);
-    }
-    setPendingSourceHandle(null);
-    setPendingTargetHandle(null);
-  };
-
-  const handleDeleteRelationship = () => {
-    if (editingEdge) {
-      setEdges((eds) => eds.filter((e) => e.id !== editingEdge.id));
-      setEditingEdge(null);
-      setRelationshipDialogOpen(false);
-    }
-  };
-
-  // Export/import diagram
-  const exportDiagram = useCallback(() => {
-    const diagramData = { nodes, edges };
-    const dataStr = JSON.stringify(diagramData, null, 2);
-    const dataUri =
-      'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
-    const exportFileDefaultName = 'usecase-diagram.json';
-    const linkElement = document.createElement('a');
-    linkElement.setAttribute('href', dataUri);
-    linkElement.setAttribute('download', exportFileDefaultName);
-    linkElement.click();
-  }, [nodes, edges]);
-
-  const importDiagram = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.files || event.target.files.length === 0) return;
-      const fileReader = new FileReader();
-      fileReader.readAsText(event.target.files[0], 'UTF-8');
-      fileReader.onload = (e) => {
-        try {
-          if (!e.target || typeof e.target.result !== 'string') return;
-          const imported = JSON.parse(e.target.result);
-          if (imported.nodes && imported.edges) {
-            setNodes(imported.nodes);
-            setEdges(imported.edges);
-          }
-        } catch (error) {
-          console.error('Error importing diagram:', error);
-          alert('Failed to import diagram. Invalid file format.');
-        }
-      };
-    },
-    [setNodes, setEdges],
-  );
-
-  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
-
-  const handleNodeDoubleClick = useCallback<NonNullable<NodeMouseHandler>>(
-    (event, node) => {
-      setSelectedNode(node);
-    },
-    [],
-  );
-
-  const handleUpdateNode = useCallback(
-    (updates: Partial<UseCaseNodeData | PackageNodeData | ActorNodeData>) => {
-      if (!selectedNode) return;
-      setNodes((nds) =>
-        nds.map((n) =>
-          n.id === selectedNode.id
-            ? { ...n, data: { ...n.data, ...updates } }
-            : n,
-        ),
-      );
-    },
-    [selectedNode, setNodes],
-  );
-
-  return (
-    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
-      <div>
-        <Sidebar>
-          <UseCaseControls
-            onAddActor={handleAddActor}
-            onAddUseCase={handleAddUseCase}
-            onAddBusinessUseCase={handleAddBusinessUseCase}
-            onAddPackage={handleAddPackage}
-            onAddAssociation={handleAddAssociation}
-            onAddInclude={handleAddInclude}
-            onAddExtend={handleAddExtend}
-            edges={edges as Edge<UseCaseEdgeData>[]}
-            nodes={nodes}
-            onEditRelationship={handleEditRelationship}
-          />
-        </Sidebar>
-      </div>
-      <div style={{ flex: 1, height: '100%', position: 'relative' }}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges.map((edge) => ({
-            ...edge,
-            label:
-              typeof edge.data?.label === 'string'
-                ? edge.data.label
-                : undefined,
-          }))}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={handleConnect}
-          onConnectStart={handleConnectStart}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          fitView
-          onNodeDoubleClick={handleNodeDoubleClick}
-          onEdgeClick={(_, edge) => handleEditRelationship(edge as Edge<UseCaseEdgeData>)}
-          onPaneClick={() => {
-            setSelectedNode(null);
-          }}
-        >
-          <Background color="#f8f9fa" gap={16} />
-          <MiniMapCommon />
-          <AiButton />
-        </ReactFlow>
-
-        {/* Node Settings Panel */}
-        {selectedNode && selectedNode.type === 'actor' && (
-          <ActorNodeSettings
-            open={true}
-            node={selectedNode as Node<ActorNodeData>}
-            onUpdate={handleUpdateNode}
-            onClose={() => setSelectedNode(null)}
-          />
-        )}
-        {selectedNode && selectedNode.type === 'usecase' && (
-          <UseCaseNodeSettings
-            open={true}
-            node={selectedNode as unknown as Node<UseCaseNodeData>}
-            onUpdate={handleUpdateNode}
-            onClose={() => setSelectedNode(null)}
-          />
-        )}
-        {selectedNode && selectedNode.type === 'package' && (
-          <PackageNodeSettings
-            nodeId={selectedNode.id}
-            data={selectedNode.data as unknown as PackageNodeData}
-            nodes={nodes}
-            setNodes={setNodes}
-            onUpdate={handleUpdateNode}
-            onClose={() => setSelectedNode(null)}
-          />
-        )}
-        {/* Bottom-right panel for controls */}
-        <DiagramPanel
-          historyIndex={historyIndex}
-          historyLength={history.length}
-          onUndo={handleUndo}
-          onRedo={handleRedo}
-          onClear={handleClear}
-          onImport={importDiagram}
-          isSettingsOpen={false}
-          onToggleSettings={() => { }}
-        />
-        <AddRelationshipDialog
-          open={relationshipDialogOpen}
-          onClose={() => {
-            setRelationshipDialogOpen(false);
-            setEditingEdge(null);
-          }}
-          onAddRelationship={(
-            sourceId,
-            targetId,
-            type,
-            label,
-            arrowHeadSource,
-            arrowHeadTarget,
-          ) => {
-            handleAddRelationship(
-              sourceId,
-              targetId,
-              type,
-              label,
-              arrowHeadSource,
-              arrowHeadTarget,
-            );
-            setRelationshipDialogOpen(false);
-            setPendingSourceId(null);
-            setPendingTargetId(null);
-            setPendingRelationshipType(null);
-            setEditingEdge(null);
-          }}
-          nodes={nodes}
-          initialSourceId={editingEdge ? editingEdge.source : pendingSourceId}
-          initialTargetId={editingEdge ? editingEdge.target : pendingTargetId}
-          onDialogOpen={() => { }}
-          editingEdge={editingEdge}
-          onDeleteRelationship={handleDeleteRelationship}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default UseCaseDiagramFlow;
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import {
+  ReactFlow,
+  Background,
+  useNodesState,
+  useEdgesState,
+  Node,
+  Edge,
+  NodeMouseHandler,
+  Connection,
+  OnConnectStartParams,
+} from '@xyflow/react';
+import {
+  UseCaseDiagramProps,
+  UseCaseNodeData,
+  PackageNodeData,
+  UseCaseEdgeData,
+  UseCaseEdgeType,
+  CreateNodeParams,
+  CreateNodeResult,
+  HistoryState,
+  RelationshipDialogState,
+} from '../../../types/usecase-types';
+import { ActorNodeData } from '../../../types/shared-node-types';
+import UseCaseControls from '../controls/UseCaseControls';
+import ActorNode from '../../../atoms/ActorNode';
+import UseCaseNode from '../nodes/UseCaseNode';
+import PackageNode from '../nodes/PackageNode';
+import UseCaseEdge from '../nodes/UseCaseEdge';
+import { Button, Paper, Box } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import DownloadIcon from '@mui/icons-material/Download';
+import UploadIcon from '@mui/icons-material/Upload';
+import ActorNodeSettings from './ActorNodeSettings';
+import AddRelationshipDialog from './AddRelationshipDialog';
+import UseCaseNodeSettings from './UseCaseNodeSettings';
+import PackageNodeSettings from './PackageNodeSettings';
+import DiagramPanel from '../../../components/DiagramPanel';
+import Sidebar from '../../../components/SideBar';
+import MiniMapCommon from '../../../components/MiniMapCommon';
+import AiButton from '../../../components/AiButton';
+
+const nodeTypes = {
+  actor: ActorNode,
+  usecase: UseCaseNode,
+  package: PackageNode,
+};
+
+const edgeTypes = {
+  association: UseCaseEdge,
+  include: UseCaseEdge,
+  extend: UseCaseEdge,
+};
+
+// Utility: Get a random position for a new node
+function getRandomPosition(): { x: number; y: number } {
+  return { x: 100 + Math.random() * 400, y: 100 + Math.random() * 300 };
+}
+
+// Utility: Get absolute position of a node (recursively sums parent positions)
+function getAbsolutePosition(
+  node: Node,
+  allNodes: Node[],
+): { x: number; y: number } {
+  let x = node.position.x;
+  let y = node.position.y;
+  let current = node;
+  while (current.parentId) {
+    const parent = allNodes.find((n) => n.id === current.parentId);
+    if (!parent) break;
+    x += parent.position.x;
+    y += parent.position.y;
+    current = parent;
+  }
+  return { x, y };
+}
+
+// Utility: Shallow compare node/edge arrays by id and length
+function shallowCompareById(a: (Node | Edge)[], b: (Node | Edge)[]) {
+  if (a.length !== b.length) return false;
+  const aIds = a.map((n) => n.id).sort();
+  const bIds = b.map((n) => n.id).sort();
+  for (let i = 0; i < aIds.length; i++) {
+    if (aIds[i] !== bIds[i]) return false;
+  }
+  return true;
+}
+
+// Utility: Debounce function
+function debounce(fn: (...args: unknown[]) => void, delay: number) {
+  let timer: NodeJS.Timeout | null = null;
+  return (...args: unknown[]) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+}
+
+const UseCaseDiagramFlow: React.FC<UseCaseDiagramProps> = ({
+  caseNodes,
+  caseEdges,
+}) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(caseNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(caseEdges);
+
+  // Improved history state for undo/redo
+  const [history, setHistory] = useState<HistoryState[]>(
+    [],
+  );
+  const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const isUndoRedoAction = useRef(false);
+
+  // Debounced history update
+  const debouncedUpdateHistory = useRef(
+    debounce(
+      (...args: unknown[]) => {
+        const [nodes, edges, history, historyIndex, setHistory, setHistoryIndex] = args as [
+          Node[],
+          Edge[],
+          HistoryState[],
+          number,
+          React.Dispatch<React.SetStateAction<HistoryState[]>>,
+          React.Dispatch<React.SetStateAction<number>>
+        ];
+        const newHistoryEntry: HistoryState = {
+          nodes: [...nodes],
+          edges: [...edges],
+        };
+        const currentState = history[historyIndex];
+        if (
+          shallowCompareById(currentState.nodes, newHistoryEntry.nodes) &&
+          shallowCompareById(currentState.edges, newHistoryEntry.edges)
+        ) {
+          return; // No change, don't add to history
+        }
+        // Trim future history if we're in the middle of the history stack
+        const newHistory = history.slice(0, historyIndex + 1);
+        newHistory.push(newHistoryEntry);
+        setHistory(newHistory);
+        setHistoryIndex(newHistory.length - 1);
+      },
+      300,
+    ),
+  ).current;
+
+  // Initialize history with initial state
+  useEffect(() => {
+    if (history.length === 0) {
+      setHistory([{ nodes: [...nodes], edges: [...edges] }]);
+      setHistoryIndex(0);
+    }
+  }, []); // Only run on mount
+
+  // Debounced save to history on nodes/edges change
+  useEffect(() => {
+    if (isUndoRedoAction.current || history.length === 0) return;
+    debouncedUpdateHistory(
+      nodes,
+      edges,
+      history,
+      historyIndex,
+      setHistory,
+      setHistoryIndex,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodes, edges]);
+
+  // Undo handler
+  const handleUndo = useCallback(() => {
+    if (historyIndex > 0) {
+      isUndoRedoAction.current = true;
+      const prev = history[historyIndex - 1];
+      setNodes(prev.nodes);
+      setEdges(prev.edges);
+      setHistoryIndex(historyIndex - 1);
+      setTimeout(() => {
+        isUndoRedoAction.current = false;
+      }, 0);
+    }
+  }, [history, historyIndex, setNodes, setEdges]);
+
+  // Redo handler
+  const handleRedo = useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      isUndoRedoAction.current = true;
+      const next = history[historyIndex + 1];
+      setNodes(next.nodes);
+      setEdges(next.edges);
+      setHistoryIndex(historyIndex + 1);
+      setTimeout(() => {
+        isUndoRedoAction.current = false;
+      }, 0);
+    }
+  }, [history, historyIndex, setNodes, setEdges]);
+
+  // Keyboard shortcuts for undo/redo
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl+Z or Cmd+Z (undo)
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        handleUndo();
+      }
+      // Ctrl+Y or Cmd+Shift+Z (redo)
+      if (
+        ((e.ctrlKey || e.metaKey) && e.key === 'y') ||
+        ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z')
+      ) {
+        e.preventDefault();
+        handleRedo();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleUndo, handleRedo]);
+
+  const handleClear = useCallback(() => {
+    const cleared = { nodes: [], edges: [] };
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(cleared);
+    setNodes([]);
+    setEdges([]);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  }, [history, historyIndex, setNodes, setEdges]);
+
+  // Node creation helpers (DRY)
+  function createNode({
+    type,
+    label,
+    data = {},
+    style,
+    business,
+    parentNode,
+    width,
+    height,
+  }: CreateNodeParams): CreateNodeResult {
+    const id = `${type}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+    const position = getRandomPosition();
+    let nodeData: UseCaseNodeData | PackageNodeData;
+    switch (type) {
+      case 'actor':
+        nodeData = {
+          label: label || 'Actor',
+          style: style || 'stickman',
+          ...data,
+        } as ActorNodeData;
+        break;
+      case 'usecase':
+        nodeData = {
+          label: label || 'Use Case',
+          business: !!business,
+          ...data,
+        } as UseCaseNodeData;
+        break;
+      case 'package':
+        nodeData = {
+          label: label || 'Package',
+          width,
+          height,
+          ...data
+        } as PackageNodeData;
+        break;
+      default:
+        nodeData = { label: label || 'Node', ...data } as UseCaseNodeData;
+    }
+    return {
+      id,
+      type,
+      position,
+      data: nodeData,
+      ...(parentNode
+        ? { parentNode, extent: 'parent' as const, draggable: true }
+        : {}),
+    };
+  }
+
+  const handleAddActor = useCallback(
+    (type: 'stickman' | 'business') => {
+      const label = `${type === 'business' ? 'Business Actor' : 'Actor'} ${nodes.filter((n) => n.type === 'actor' && (type === 'business' ? n.data.style === 'business' : n.data.style !== 'business')).length + 1}`;
+      const newNode = createNode({ type: 'actor', label, style: type });
+      setNodes((nds) => [...nds, newNode]);
+    },
+    [nodes, setNodes],
+  );
+
+  const handleAddUseCase = useCallback(() => {
+    const label = `Use Case ${nodes.filter((n) => n.type === 'usecase' && !n.data.business).length + 1}`;
+    const newNode = createNode({ type: 'usecase', label, business: false });
+    setNodes((nds) => [...nds, newNode]);
+  }, [nodes, setNodes]);
+
+  const handleAddBusinessUseCase = useCallback(() => {
+    const label = `Business Use Case ${nodes.filter((n) => n.type === 'usecase' && n.data.business).length + 1}`;
+    const newNode = createNode({ type: 'usecase', label, business: true });
+    setNodes((nds) => [...nds, newNode]);
+  }, [nodes, setNodes]);
+
+  const handleAddPackage = useCallback(() => {
+    const label = `Package ${nodes.filter((n) => n.type === 'package').length + 1}`;
+    const newNode = createNode({ type: 'package', label });
+    setNodes((nds) => [...nds, newNode]);
+  }, [nodes, setNodes]);
+
+  // Relationship dialog state
+  const [relationshipDialogOpen, setRelationshipDialogOpen] = useState(false);
+  const [pendingRelationshipType, setPendingRelationshipType] = useState<
+    null | 'association' | 'include' | 'extend'
+  >(null);
+  const [pendingSourceId, setPendingSourceId] = useState<string | null>(null);
+  const [pendingTargetId, setPendingTargetId] = useState<string | null>(null);
+  const [editingEdge, setEditingEdge] = useState<Edge<UseCaseEdgeData> | null>(null);
+
+  const handleAddAssociation = useCallback(() => {
+    setPendingRelationshipType('association');
+    setRelationshipDialogOpen(true);
+    setEditingEdge(null);
+  }, []);
+  const handleAddInclude = useCallback(() => {
+    setPendingRelationshipType('include');
+    setRelationshipDialogOpen(true);
+    setEditingEdge(null);
+  }, []);
+  const handleAddExtend = useCallback(() => {
+    setPendingRelationshipType('extend');
+    setRelationshipDialogOpen(true);
+    setEditingEdge(null);
+  }, []);
+
+  const handleEditRelationship = useCallback((edge: Edge<UseCaseEdgeData>) => {
+    setEditingEdge(edge);
+    setPendingRelationshipType((edge.data?.type || edge.type) as UseCaseEdgeType);
+    setPendingSourceId(edge.source);
+    setPendingTargetId(edge.target);
+    setRelationshipDialogOpen(true);
+  }, []);
+
+  // Manual edge creation state
+  const [connectStartNodeId, setConnectStartNodeId] = useState<string | null>(
+    null,
+  );
+  const [pendingSourceHandle, setPendingSourceHandle] = useState<string | null>(
+    null,
+  );
+  const [pendingTargetHandle, setPendingTargetHandle] = useState<string | null>(
+    null,
+  );
+  const handleConnectStart = useCallback(
+    (
+      event: MouseEvent | TouchEvent,
+      params: OnConnectStartParams,
+    ) => {
+      setConnectStartNodeId(params.nodeId);
+    },
+    [],
+  );
+
+  const handleConnect = useCallback(
+    (params: Connection) => {
+      if (!params.source || !params.target) return;
+      const trueSource = connectStartNodeId || params.source;
+      const trueTarget =
+        trueSource === params.source ? params.target : params.source;
+      let sourceHandle = params.sourceHandle || 'right';
+      let targetHandle = params.targetHandle || 'left';
+      const sourceNode = nodes.find((n) => n.id === trueSource);
+      const targetNode = nodes.find((n) => n.id === trueTarget);
+      let sourceAbsX = 0,
+        targetAbsX = 0;
+      if (sourceNode && targetNode) {
+        sourceAbsX = getAbsolutePosition(sourceNode, nodes).x;
+        targetAbsX = getAbsolutePosition(targetNode, nodes).x;
+      }
+      if (sourceNode && targetNode && sourceAbsX > targetAbsX) {
+        setPendingSourceId(trueTarget);
+        setPendingTargetId(trueSource);
+        setPendingSourceHandle(targetHandle);
+        setPendingTargetHandle(sourceHandle);
+      } else {
+        setPendingSourceId(trueSource);
+        setPendingTargetId(trueTarget);
+        setPendingSourceHandle(sourceHandle);
+        setPendingTargetHandle(targetHandle);
+      }
+      setPendingRelationshipType('association');
+      setRelationshipDialogOpen(true);
+      setConnectStartNodeId(null);
+    },
+    [connectStartNodeId, nodes],
+  );
+
+  const handleAddRelationship = (
+    sourceId: string,
+    targetId: string,
+    type: 'association' | 'include' | 'extend',
+    label?: string,
+    arrowHeadSource?: 'none' | 'triangle' | 'v',
+    arrowHeadTarget?: 'none' | 'triangle' | 'v',
+  ) => {
+    if (editingEdge) {
+      setEdges((eds) =>
+        eds.map((e) =>
+          e.id === editingEdge.id
+            ? {
+              ...e,
+              source: sourceId,
+              target: targetId,
+              type,
+              data: {
+                ...e.data,
+                type,
+                label,
+                arrowHeadSource: arrowHeadSource || 'none',
+                arrowHeadTarget: arrowHeadTarget || 'none',
+              },
+              sourceHandle: pendingSourceHandle || undefined,
+              targetHandle: pendingTargetHandle || undefined,
+            }
+            : e,
+        ),
+      );
+      setEditingEdge(null);
+    } else {
+      const id = `${type}-${edges.length + 1}-${Date.now()}`;
+      const newEdge: Edge<UseCaseEdgeData> = {
+        id,
+        source: sourceId,
+        target: targetId,
+        type,
+        data: {
+          type,
+          label,
+          arrowHeadSource: arrowHeadSource || 'none',
+          arrowHeadTarget: arrowHeadTarget || 'none',
+        },
+        sourceHandle: pendingSourceHandle || undefined,
+        targetHandle: pendingTargetHandle || undefined,
+      };
+      setEdges((eds) => [...eds, newEdge]);
+    }
+    setPendingSourceHandle(null);
+    setPendingTargetHandle(null);
+  };
+
+  const handleDeleteRelationship = () => {
+    if (editingEdge) {
+      setEdges((eds) => eds.filter((e) => e.id !== editingEdge.id));
+      setEditingEdge(null);
+      setRelationshipDialogOpen(false);
+    }
+  };
+
+  // Export/import diagram
+  const exportDiagram = useCallback(() => {
+    const diagramData = { nodes, edges };
+    const dataStr = JSON.stringify(diagramData, null, 2);
+    const dataUri =
+      'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+    const exportFileDefaultName = 'usecase-diagram.json';
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+  }, [nodes, edges]);
+
+  const importDiagram = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files || event.target.files.length === 0) return;
+      const fileReader = new FileReader();
+      fileReader.readAsText(event.target.files[0], 'UTF-8');
+      fileReader.onload = (e) => {
+        try {
+          if (!e.target || typeof e.target.result !== 'string') return;
+          const imported = JSON.parse(e.target.result);
+          if (imported.nodes && imported.edges) {
+            setNodes(imported.nodes);
+            setEdges(imported.edges);
+          }
+        } catch (error) {
+          console.error('Error importing diagram:', error);
+          alert('Failed to import diagram. Invalid file format.');
+        }
+      };
+    },
+    [setNodes, setEdges],
+  );
+
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+
+  const handleNodeDoubleClick = useCallback<NonNullable<NodeMouseHandler>>(
+    (event, node) => {
+      setSelectedNode(node);
+    },
+    [],
+  );
+
+  const handleUpdateNode = useCallback(
+    (updates: Partial<UseCaseNodeData | PackageNodeData | ActorNodeData>) => {
+      if (!selectedNode) return;
+      setNodes((nds) =>
+        nds.map((n) =>
+          n.id === selectedNode.id
+            ? { ...n, data: { ...n.data, ...updates } }
+            : n,
+        ),
+      );
+    },
+    [selectedNode, setNodes],
+  );
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
+      <div>
+        <Sidebar>
+          <UseCaseControls
+            onAddActor={handleAddActor}
+            onAddUseCase={handleAddUseCase}
+            onAddBusinessUseCase={handleAddBusinessUseCase}
+            onAddPackage={handleAddPackage}
+            onAddAssociation={handleAddAssociation}
+            onAddInclude={handleAddInclude}
+            onAddExtend={handleAddExtend}
+            edges={edges as Edge<UseCaseEdgeData>[]}
+            nodes={nodes}
+            onEditRelationship={handleEditRelationship}
+          />
+        </Sidebar>
+      </div>
+      <div style={{ flex: 1, height: '100%', position: 'relative' }}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges.map((edge) => ({
+            ...edge,
+            label:
+              typeof edge.data?.label === 'string'
+                ? edge.data.label
+                : undefined,
+          }))}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={handleConnect}
+          onConnectStart={handleConnectStart}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          fitView
+          onNodeDoubleClick={handleNodeDoubleClick}
+          onEdgeClick={(_, edge) => handleEditRelationship(edge as Edge<UseCaseEdgeData>)}
+          onPaneClick={() => {
+            setSelectedNode(null);
+          }}
+        >
+          <Background color="#f8f9fa" gap={16} />
+          <MiniMapCommon />
+          <AiButton />
+        </ReactFlow>
+
+        {/* Node Settings Panel */}
+        {selectedNode && selectedNode.type === 'actor' && (
+          <ActorNodeSettings
+            open={true}
+            node={selectedNode as Node<ActorNodeData>}
+            onUpdate={handleUpdateNode}
+            onClose={() => setSelectedNode(null)}
+          />
+        )}
+        {selectedNode && selectedNode.type === 'usecase' && (
+          <UseCaseNodeSettings
+            open={true}
+            node={selectedNode as unknown as Node<UseCaseNodeData>}
+            onUpdate={handleUpdateNode}
+            onClose={() => setSelectedNode(null)}
+          />
+        )}
+        {selectedNode && selectedNode.type === 'package' && (
+          <PackageNodeSettings
+            nodeId={selectedNode.id}
+            data={selectedNode.data as unknown as PackageNodeData}
+            nodes={nodes}
+            setNodes={setNodes}
+            onUpdate={handleUpdateNode}
+            onClose={() => setSelectedNode(null)}
+          />
+        )}
+        {/* Bottom-right panel for controls */}
+        <DiagramPanel
+          historyIndex={historyIndex}
+          historyLength={history.length}
+          onUndo={handleUndo}
+          onRedo={handleRedo}
+          onClear={handleClear}
+          onImport={importDiagram}
+          isSettingsOpen={false}
+          onToggleSettings={() => { }}
+        />
+        <AddRelationshipDialog
+          open={relationshipDialogOpen}
+          onClose={() => {
+            setRelationshipDialogOpen(false);
+            setEditingEdge(null);
+          }}
+          onAddRelationship={(
+            sourceId,
+            targetId,
+            type,
+            label,
+            arrowHeadSource,
+            arrowHeadTarget,
+          ) => {
+            handleAddRelationship(
+              sourceId,
+              targetId,
+              type,
+              label,
+              arrowHeadSource,
+              arrowHeadTarget,
+            );
+            setRelationshipDialogOpen(false);
+            setPendingSourceId(null);
+            setPendingTargetId(null);
+            setPendingRelationshipType(null);
+            setEditingEdge(null);
+          }}
+          nodes={nodes}
+          initialSourceId={editingEdge ? editingEdge.source : pendingSourceId}
+          initialTargetId={editingEdge ? editingEdge.target : pendingTargetId}
+          onDialogOpen={() => { }}
+          editingEdge={editingEdge}
+          onDeleteRelationship={handleDeleteRelationship}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UseCaseDiagramFlow;