@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,308 @@
+import { Node, Edge } from '@xyflow/react';
+
+export const systemFlowDefaultNodes: Node[] = [
+  {
+    id: 'node-1',
+    type: 'SystemNode',
+    position: { x: 100, y: 100 },
+    data: {
+      label: 'Start',
+      color: '#4CAF50',
+    },
+    draggable: true,
+    width: 120,
+    height: 60,
+    measured: {
+      width: 120,
+      height: 60,
+    },
+  },
+  {
+    id: 'node-2',
+    type: 'SystemNode',
+    position: { x: 300, y: 100 },
+    data: {
+      label: 'Process',
+      color: '#2196F3',
+    },
+    draggable: true,
+    width: 120,
+    height: 60,
+    measured: {
+      width: 120,
+      height: 60,
+    },
+  },
+  {
+    id: 'node-3',
+    type: 'SystemNode',
+    position: { x: 500, y: 100 },
+    data: {
+      label: 'Decision',
+      color: '#FF9800',
+    },
+    draggable: true,
+    width: 120,
+    height: 60,
+    measured: {
+      width: 120,
+      height: 60,
+    },
+  },
+  {
+    id: 'node-4',
+    type: 'SystemNode',
+    position: { x: 700, y: 100 },
+    data: {
+      label: 'End',
+      color: '#F44336',
+    },
+    draggable: true,
+    width: 120,
+    height: 60,
+    measured: {
+      width: 120,
+      height: 60,
+    },
+  },
+];
+
+export const systemFlowDefaultEdges: Edge[] = [
+  {
+    id: 'edge-1',
+    source: 'node-1',
+    target: 'node-2',
+    type: 'floatingEdge',
+    data: {},
+  },
+  {
+    id: 'edge-2',
+    source: 'node-2',
+    target: 'node-3',
+    type: 'floatingEdge',
+    data: {},
+  },
+  {
+    id: 'edge-3',
+    source: 'node-3',
+    target: 'node-4',
+    type: 'floatingEdge',
+    data: {},
+  },
+];
+
+// Tree structure template - Structure 1 (original design)
+export const treeStructureTemplate1: { nodes: Node[]; edges: Edge[] } = {
+  nodes: [
+    {
+      id: 'tree-events-1',
+      type: 'TreeSystemNode',
+      position: { x: 300, y: 100 }, // Centered position
+      data: {
+        label: 'Events',
+        color: '#2196F3',
+        isTreeStructure: true,
+        structureId: 'tree-structure-1',
+        nodeType: 'root',
+        structureType: 'structure1',
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-request-1',
+      type: 'TreeSystemNode',
+      position: { x: 200, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Request',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-1',
+        nodeType: 'child',
+        parentId: 'tree-events-1',
+        level: 1,
+        relativePosition: { x: -100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-response-1',
+      type: 'TreeSystemNode',
+      position: { x: 400, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Response',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-1',
+        nodeType: 'child',
+        parentId: 'tree-events-1',
+        level: 1,
+        relativePosition: { x: 100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+  ],
+  edges: [], // No edges needed - connections are visual SVG elements
+};
+
+// Tree structure template - Structure 2 (arrow design with space)
+export const treeStructureTemplate2: { nodes: Node[]; edges: Edge[] } = {
+  nodes: [
+    {
+      id: 'tree-events-2',
+      type: 'TreeSystemNode',
+      position: { x: 300, y: 100 }, // Centered position
+      data: {
+        label: 'Events',
+        color: '#2196F3',
+        isTreeStructure: true,
+        structureId: 'tree-structure-2',
+        nodeType: 'root',
+        structureType: 'structure2',
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-request-2',
+      type: 'TreeSystemNode',
+      position: { x: 200, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Request',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-2',
+        nodeType: 'child',
+        parentId: 'tree-events-2',
+        level: 1,
+        relativePosition: { x: -100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-response-2',
+      type: 'TreeSystemNode',
+      position: { x: 400, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Response',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-2',
+        nodeType: 'child',
+        parentId: 'tree-events-2',
+        level: 1,
+        relativePosition: { x: 100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+  ],
+  edges: [], // No edges needed - connections are visual SVG elements
+};
+
+// Tree structure template - Structure 3 (circle center point design)
+export const treeStructureTemplate3: { nodes: Node[]; edges: Edge[] } = {
+  nodes: [
+    {
+      id: 'tree-events-3',
+      type: 'TreeSystemNode',
+      position: { x: 300, y: 100 }, // Centered position
+      data: {
+        label: 'Events',
+        color: '#2196F3',
+        isTreeStructure: true,
+        structureId: 'tree-structure-3',
+        nodeType: 'root',
+        structureType: 'structure3',
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-request-3',
+      type: 'TreeSystemNode',
+      position: { x: 200, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Request',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-3',
+        nodeType: 'child',
+        parentId: 'tree-events-3',
+        level: 1,
+        relativePosition: { x: -100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+    {
+      id: 'tree-response-3',
+      type: 'TreeSystemNode',
+      position: { x: 400, y: 250 }, // Initial position, will be calculated by layout system
+      data: {
+        label: 'Response',
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: 'tree-structure-3',
+        nodeType: 'child',
+        parentId: 'tree-events-3',
+        level: 1,
+        relativePosition: { x: 100, y: 150 }, // Will be recalculated by layout system
+      },
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    },
+  ],
+  edges: [], // No edges needed - connections are visual SVG elements
+};
+
+// Legacy template for backward compatibility
+export const treeStructureTemplate = treeStructureTemplate1;

package/packages/diagrams/src/lib/templates/systemFlow/demo.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { SystemFlowDiagram } from './index';
+
+const SystemFlowDemo: React.FC = () => {
+    const demoNodes = [
+        {
+            id: 'start-1',
+            type: 'SystemNode',
+            position: { x: 100, y: 100 },
+            data: {
+                label: 'Start',
+                color: '#4CAF50',
+            },
+            draggable: true,
+        },
+        {
+            id: 'process-1',
+            type: 'SystemNode',
+            position: { x: 300, y: 100 },
+            data: {
+                label: 'Process Data',
+                color: '#2196F3',
+            },
+            draggable: true,
+        },
+        {
+            id: 'decision-1',
+            type: 'SystemNode',
+            position: { x: 500, y: 100 },
+            data: {
+                label: 'Valid?',
+                color: '#FF9800',
+            },
+            draggable: true,
+        },
+        {
+            id: 'end-1',
+            type: 'SystemNode',
+            position: { x: 700, y: 100 },
+            data: {
+                label: 'End',
+                color: '#F44336',
+            },
+            draggable: true,
+        }
+    ];
+
+    const demoEdges = [
+        {
+            id: 'edge-1',
+            source: 'start-1',
+            target: 'process-1',
+            type: 'floatingEdge',
+            data: {
+                color: '#666'
+            },
+            animated: false,
+        },
+        {
+            id: 'edge-2',
+            source: 'process-1',
+            target: 'decision-1',
+            type: 'floatingEdge',
+            data: {
+                color: '#666'
+            },
+            animated: false,
+        },
+        {
+            id: 'edge-3',
+            source: 'decision-1',
+            target: 'end-1',
+            type: 'floatingEdge',
+            data: {
+                color: '#666'
+            },
+            animated: false,
+        }
+    ];
+
+    return (
+        <div style={{ width: '100vw', height: '100vh' }}>
+            <SystemFlowDiagram
+                systemFlowNodes={demoNodes}
+                systemFlowEdges={demoEdges}
+            />
+        </div>
+    );
+};
+
+export default SystemFlowDemo;

package/packages/diagrams/src/lib/templates/systemFlow/index.ts

@@ -0,0 +1,5 @@
+export { default as SystemFlowDiagram } from './SystemFlowDiagram';
+export { default as SystemFlowDiagramFlow } from './components/SystemFlowDiagramFlow';
+export * from './components/SystemFlowComponents';
+export * from './data/template-data';
+

package/packages/diagrams/src/lib/templates/systemFlow/nodes/BendpointNode.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { Edge, Handle, NodeProps, Position, useReactFlow } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import { Box } from '@mui/material';
+
+const BendpointNode = React.memo(({ selected, id }: NodeProps) => {
+    const rf = useReactFlow();
+
+    useEffect(() => {
+        const deleteThisNode = (e: KeyboardEvent) => {
+            if (e.key !== 'Delete' || !selected) return;
+
+            const thisNode = rf.getNode(id);
+            const sourceEdge = rf.getEdges().find((edge) => edge.source === id);
+            const targetEdge = rf.getEdges().find((edge) => edge.target === id);
+
+            if (!thisNode || !sourceEdge || !targetEdge) return;
+
+            const newEdge: Edge = {
+                ...sourceEdge,
+                id: uuidv4(),
+                source: sourceEdge.source,
+                target: targetEdge.target,
+                type: 'floatingEdge',
+                data: sourceEdge.data,
+            };
+
+            rf.setEdges(
+                rf
+                    .getEdges()
+                    .filter(
+                        (edge) => edge.id !== sourceEdge.id && edge.id !== targetEdge.id,
+                    )
+                    .concat(newEdge),
+            );
+            rf.setNodes(rf.getNodes().filter((node) => node.id !== thisNode.id));
+        };
+
+        window.addEventListener('keydown', deleteThisNode);
+        return () => window.removeEventListener('keydown', deleteThisNode);
+    }, [selected, id, rf]);
+
+    return (
+        <>
+            <Handle
+                isConnectableEnd={false}
+                isConnectableStart={false}
+                isConnectable={false}
+                type="target"
+                position={Position.Left}
+                style={{ opacity: 0 }}
+            />
+            <Box
+                sx={{
+                    height: 7.5,
+                    width: 7.5,
+                    borderRadius: '50%',
+                    backgroundColor: selected ? 'black' : 'gray',
+                    cursor: 'pointer',
+                }}
+            />
+            <Handle
+                isConnectableEnd={false}
+                isConnectableStart={false}
+                isConnectable={false}
+                type="source"
+                position={Position.Right}
+                style={{ opacity: 0 }}
+            />
+        </>
+    );
+});
+
+export default BendpointNode;
+
+
+
+
+
+

package/packages/diagrams/src/lib/templates/systemFlow/nodes/SystemNode.tsx

@@ -0,0 +1,92 @@
+import { memo, useRef } from "react"
+import { Handle, Position, type NodeProps } from "@xyflow/react"
+import { Paper, Typography, Box } from "@mui/material"
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { SystemFlowNodeData } from '../../../types/system-flow-types';
+
+const SystemNode = ({ id, data, isConnectable }: NodeProps) => {
+    const nodeRef = useRef<HTMLDivElement>(null);
+
+    const systemData = data as SystemFlowNodeData;
+
+    useResizeObserver(nodeRef, ({ width, height }) => {
+        if (typeof systemData.onResize === 'function') {
+            const actualWidth = nodeRef.current?.scrollWidth || width;
+            const actualHeight = nodeRef.current?.scrollHeight || height;
+            systemData.onResize(id, actualWidth, actualHeight);
+        }
+    });
+
+    return (
+        <Paper
+            ref={nodeRef}
+            elevation={2}
+            sx={{
+                minWidth: 120,
+                minHeight: 60,
+                width: 'max-content',
+                height: 'max-content',
+                borderRadius: 2,
+                border: `2px solid ${systemData.color || '#2196F3'}`,
+                padding: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                position: 'relative',
+                overflow: 'visible',
+                boxSizing: 'border-box',
+                backgroundColor: 'white',
+            }}
+        >
+            <Handle
+                type="target"
+                position={Position.Left}
+                isConnectable={isConnectable}
+                style={{
+                    left: '-6px',
+                    backgroundColor: systemData.color || '#2196F3',
+                    border: '2px solid #fff',
+                    width: '12px',
+                    height: '12px'
+                }}
+            />
+
+            <Box sx={{
+                textAlign: "center",
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                width: 'max-content',
+                minWidth: 'min-content'
+            }}>
+                <Typography
+                    variant="subtitle1"
+                    fontWeight="bold"
+                    sx={{
+                        whiteSpace: 'nowrap',
+                        overflow: 'visible',
+                        width: 'max-content',
+                        color: systemData.color || '#2196F3',
+                    }}
+                >
+                    {(systemData.label as string) || 'System'}
+                </Typography>
+            </Box>
+
+            <Handle
+                type="source"
+                position={Position.Right}
+                isConnectable={isConnectable}
+                style={{
+                    right: '-6px',
+                    backgroundColor: systemData.color || '#2196F3',
+                    border: '2px solid #fff',
+                    width: '12px',
+                    height: '12px'
+                }}
+            />
+        </Paper>
+    )
+}
+
+export default memo(SystemNode)