@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/sequence/data/template-data.ts

@@ -1,635 +0,0 @@
-import {
-  SequenceTemplateData,
-  SequenceNode,
-  SequenceEdge,
-  SequenceEntityNode,
-  ActivationBarNode,
-  CombinedFragmentNode,
-  SequenceEntityData,
-  ActivationBarData,
-  CombinedFragmentData,
-  SequenceMessageData,
-} from '../../../types/sequence-types';
-import { Node, Edge } from '@xyflow/react';
-
-export const getTemplateData = (templateType: string): SequenceTemplateData => {
-  switch (templateType) {
-    case 'client-server':
-      return {
-        nodes: [
-          // Client entity
-          {
-            id: 'client',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'Client',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 500,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Web Browser',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Server entity
-          {
-            id: 'server',
-            type: 'sequenceEntity',
-            position: { x: 350, y: 50 },
-            data: {
-              label: 'Server',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 500,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'API Server',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Client activation
-          {
-            id: 'client-activation',
-            type: 'activationBar',
-            position: { x: 155, y: 150 },
-            data: {
-              entityId: 'client',
-              color: '#e6f0ff',
-              borderColor: '#0066cc',
-              length: 300,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Server activation
-          {
-            id: 'server-activation',
-            type: 'activationBar',
-            position: { x: 405, y: 180 },
-            data: {
-              entityId: 'server',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 200,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Request message
-          {
-            id: 'request-edge',
-            source: 'client',
-            target: 'server',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'HTTP Request',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Response message
-          {
-            id: 'response-edge',
-            source: 'server',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'HTTP Response',
-              type: 'return',
-              y: 350,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    case 'authentication':
-      return {
-        nodes: [
-          // User entity
-          {
-            id: 'user',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'User',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 600,
-              shape: 'actor',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'End User',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Auth Client entity
-          {
-            id: 'client',
-            type: 'sequenceEntity',
-            position: { x: 300, y: 50 },
-            data: {
-              label: 'Client App',
-              color: '#8800cc',
-              backgroundColor: '#f5e6ff',
-              lifelineLength: 600,
-              shape: 'roundedBox',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Frontend',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Auth Server entity
-          {
-            id: 'auth',
-            type: 'sequenceEntity',
-            position: { x: 500, y: 50 },
-            data: {
-              label: 'Auth Server',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 600,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Authentication Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Database entity
-          {
-            id: 'db',
-            type: 'sequenceEntity',
-            position: { x: 700, y: 50 },
-            data: {
-              label: 'Database',
-              color: '#cc0000',
-              backgroundColor: '#ffe6e6',
-              lifelineLength: 600,
-              shape: 'database',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'User Database',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Client activation
-          {
-            id: 'client-activation',
-            type: 'activationBar',
-            position: { x: 355, y: 150 },
-            data: {
-              entityId: 'client',
-              color: '#f5e6ff',
-              borderColor: '#8800cc',
-              length: 400,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Auth Server activation
-          {
-            id: 'auth-activation',
-            type: 'activationBar',
-            position: { x: 555, y: 180 },
-            data: {
-              entityId: 'auth',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 300,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation
-          {
-            id: 'db-activation',
-            type: 'activationBar',
-            position: { x: 755, y: 230 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 100,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Alt Fragment
-          {
-            id: 'alt-fragment',
-            type: 'combinedFragment',
-            position: { x: 280, y: 350 },
-            style: { width: 500, height: 150 },
-            data: {
-              label: 'alt',
-              conditions: ['[valid credentials]', '[invalid credentials]'],
-              style: {
-                width: 500,
-                height: 150,
-              },
-              color: '#000000',
-              backgroundColor: '#ffffff',
-              lifelineLength: 0,
-            },
-            draggable: true,
-            zIndex: 0,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Login message
-          {
-            id: 'login-edge',
-            source: 'user',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'Login(username, password)',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Auth request
-          {
-            id: 'auth-request-edge',
-            source: 'client',
-            target: 'auth',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'Authenticate(creds)',
-              type: 'sync',
-              y: 180,
-            },
-            animated: false,
-          },
-          // DB query
-          {
-            id: 'db-query-edge',
-            source: 'auth',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'QueryUser(username)',
-              type: 'sync',
-              y: 230,
-            },
-            animated: false,
-          },
-          // DB response
-          {
-            id: 'db-response-edge',
-            source: 'db',
-            target: 'auth',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'UserData',
-              type: 'return',
-              y: 310,
-            },
-            animated: false,
-          },
-          // Auth success
-          {
-            id: 'auth-success-edge',
-            source: 'auth',
-            target: 'client',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Token',
-              type: 'return',
-              y: 380,
-            },
-            animated: false,
-          },
-          // Login success
-          {
-            id: 'login-success-edge',
-            source: 'client',
-            target: 'user',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Login Success',
-              type: 'return',
-              y: 450,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    case 'database-transaction':
-      return {
-        nodes: [
-          // App entity
-          {
-            id: 'app',
-            type: 'sequenceEntity',
-            position: { x: 100, y: 50 },
-            data: {
-              label: 'Application',
-              color: '#0066cc',
-              backgroundColor: '#e6f0ff',
-              lifelineLength: 700,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Backend Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // DB Service entity
-          {
-            id: 'db-service',
-            type: 'sequenceEntity',
-            position: { x: 350, y: 50 },
-            data: {
-              label: 'DB Service',
-              color: '#009900',
-              backgroundColor: '#e6ffe6',
-              lifelineLength: 700,
-              shape: 'rectangle',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'Database Service',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // Database entity
-          {
-            id: 'db',
-            type: 'sequenceEntity',
-            position: { x: 600, y: 50 },
-            data: {
-              label: 'Database',
-              color: '#cc0000',
-              backgroundColor: '#ffe6e6',
-              lifelineLength: 700,
-              shape: 'database',
-              fontSize: 12,
-              borderWidth: 2,
-              description: 'SQL Database',
-              collapsed: false,
-            },
-            draggable: true,
-            zIndex: 5,
-          },
-          // App activation
-          {
-            id: 'app-activation',
-            type: 'activationBar',
-            position: { x: 155, y: 150 },
-            data: {
-              entityId: 'app',
-              color: '#e6f0ff',
-              borderColor: '#0066cc',
-              length: 500,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // DB Service activation
-          {
-            id: 'db-service-activation',
-            type: 'activationBar',
-            position: { x: 405, y: 180 },
-            data: {
-              entityId: 'db-service',
-              color: '#e6ffe6',
-              borderColor: '#009900',
-              length: 430,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 1
-          {
-            id: 'db-activation-1',
-            type: 'activationBar',
-            position: { x: 655, y: 230 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 50,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 2
-          {
-            id: 'db-activation-2',
-            type: 'activationBar',
-            position: { x: 655, y: 350 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 70,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Database activation 3
-          {
-            id: 'db-activation-3',
-            type: 'activationBar',
-            position: { x: 655, y: 470 },
-            data: {
-              entityId: 'db',
-              color: '#ffe6e6',
-              borderColor: '#cc0000',
-              length: 50,
-            },
-            draggable: true,
-            zIndex: 1,
-          },
-          // Transaction fragment
-          {
-            id: 'transaction-fragment',
-            type: 'combinedFragment',
-            position: { x: 320, y: 200 },
-            style: { width: 400, height: 350 },
-            data: {
-              label: 'transaction',
-              conditions: ['[begin transaction]'],
-              style: {
-                width: 400,
-                height: 350,
-              },
-              color: '#000000',
-              backgroundColor: '#ffffff',
-              lifelineLength: 0,
-            },
-            draggable: true,
-            zIndex: 0,
-          },
-        ] as SequenceNode[],
-        edges: [
-          // Start transaction
-          {
-            id: 'transaction-edge',
-            source: 'app',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'StartTransaction()',
-              type: 'sync',
-              y: 150,
-            },
-            animated: false,
-          },
-          // Begin transaction
-          {
-            id: 'begin-transaction-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'BEGIN',
-              type: 'sync',
-              y: 230,
-            },
-            animated: false,
-          },
-          // Begin OK
-          {
-            id: 'begin-ok-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'OK',
-              type: 'return',
-              y: 270,
-            },
-            animated: false,
-          },
-          // Execute SQL
-          {
-            id: 'execute-sql-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'INSERT/UPDATE',
-              type: 'sync',
-              y: 350,
-            },
-            animated: false,
-          },
-          // SQL Result
-          {
-            id: 'sql-result-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Result',
-              type: 'return',
-              y: 410,
-            },
-            animated: false,
-          },
-          // Commit
-          {
-            id: 'commit-edge',
-            source: 'db-service',
-            target: 'db',
-            type: 'sequenceMessage',
-            sourceHandle: 'right',
-            targetHandle: 'left',
-            data: {
-              label: 'COMMIT',
-              type: 'sync',
-              y: 470,
-            },
-            animated: false,
-          },
-          // Commit OK
-          {
-            id: 'commit-ok-edge',
-            source: 'db',
-            target: 'db-service',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'OK',
-              type: 'return',
-              y: 510,
-            },
-            animated: false,
-          },
-          // Transaction Result
-          {
-            id: 'transaction-result-edge',
-            source: 'db-service',
-            target: 'app',
-            type: 'sequenceMessage',
-            sourceHandle: 'left',
-            targetHandle: 'right',
-            data: {
-              label: 'Transaction Success',
-              type: 'return',
-              y: 580,
-            },
-            animated: false,
-          },
-        ] as SequenceEdge[],
-      };
-
-    default:
-      return { nodes: [], edges: [] };
-  }
-};

package/packages/diagrams/src/lib/templates/stateMachine/StateMachineDiagram.tsx

@@ -1,67 +0,0 @@
-import React, { useState, useRef, useCallback } from 'react';
-import { ReactFlowProvider, Node, Edge } from '@xyflow/react';
-import StateMachineDiagramFlow from './components/StateMachineDiagramFlow';
-import { NodeSelectionContext } from './controls/StateDiagramControls';
-import CompositeStateNodeSettings from './components/CompositeStateNodeSettings';
-import { StateMachineNode, StateMachineEdge, NodeSelectionContextType } from '../../types/state-machine-types';
-
-const StateMachineDiagram: React.FC<{ stateNodes: Node[]; stateEdges: Edge[] }> = ({
-    stateNodes,
-    stateEdges,
-}) => {
-    const [nodes, setNodes] = useState<StateMachineNode[]>(stateNodes as StateMachineNode[]);
-    const [edges, setEdges] = useState<StateMachineEdge[]>(stateEdges as StateMachineEdge[]);
-    const [selectedNode, setSelectedNode] = useState<StateMachineNode | null>(null);
-    const [settingsOpen, setSettingsOpen] = useState(false);
-    const diagramContainerRef = useRef<HTMLDivElement>(null);
-
-    // Handler to update node data
-    const handleUpdateNode = useCallback((updates: Partial<StateMachineNode['data']>) => {
-        if (!selectedNode) return;
-        setNodes((nds: StateMachineNode[]) =>
-            nds.map((n) =>
-                n.id === selectedNode.id
-                    ? { ...n, data: { ...n.data, ...updates } }
-                    : n
-            )
-        );
-    }, [selectedNode, setNodes]);
-
-    // Handler to close settings
-    const handleCloseSettings = useCallback(() => {
-        setSettingsOpen(false);
-        setSelectedNode(null);
-    }, []);
-
-    return (
-        <div className="state-machine-diagram-container" ref={diagramContainerRef}>
-            <ReactFlowProvider>
-                <NodeSelectionContext.Provider value={{
-                    selectedNodeType: null,
-                    setSelectedNodeType: () => { },
-                } as NodeSelectionContextType}>
-                    <StateMachineDiagramFlow
-                        nodes={nodes}
-                        setNodes={setNodes}
-                        edges={edges}
-                        setEdges={setEdges}
-                    />
-                    {settingsOpen && selectedNode && selectedNode.type === 'CompositeStateNode' && (
-                        <CompositeStateNodeSettings
-                            nodeId={selectedNode.id}
-                            data={selectedNode.data}
-                            nodes={nodes}
-                            setNodes={setNodes}
-                            onUpdate={handleUpdateNode}
-                            onClose={handleCloseSettings}
-                            edges={edges}
-                            setEdges={setEdges}
-                        />
-                    )}
-                </NodeSelectionContext.Provider>
-            </ReactFlowProvider>
-        </div>
-    );
-};
-
-export default StateMachineDiagram;