@flowuent-org/diagramming-core 1.0.7 → 1.1.0

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

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