@flowuent-org/diagramming-core 1.1.0 → 1.1.2

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

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