@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/packages/diagrams/src/lib/templates/systemFlow/components/FloatingEdge.tsx

@@ -1,219 +1,219 @@
-import React, { useCallback, useMemo, useRef, memo } from 'react';
-import { EdgeProps, useReactFlow, Node, Edge } from '@xyflow/react';
-import { getEdgeParams } from '../../../utils/nodeutils';
-import { SystemFlowEdgeData } from '../../../types/system-flow-types';
-import { v4 as uuidv4 } from 'uuid';
-
-const FloatingEdge = ({
-    id,
-    source,
-    target,
-    data,
-    style = {},
-}: EdgeProps) => {
-    const { getNodes, setNodes, setEdges, screenToFlowPosition } = useReactFlow();
-    const nodes = getNodes();
-    const pathRef = useRef<SVGPathElement>(null);
-
-    // Double click handler to create a bendpoint
-    const onEdgeDoubleClick = useCallback(
-        (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
-            evt.preventDefault();
-            evt.stopPropagation();
-            if (!pathRef.current) return;
-
-            const flowPosition = screenToFlowPosition({
-                x: evt.clientX,
-                y: evt.clientY,
-            });
-
-            const bendpointId = `bendpoint-${uuidv4()}`;
-            const newNode = {
-                id: bendpointId,
-                type: 'bendpoint',
-                position: flowPosition,
-                data: {},
-                measured: { width: 5, height: 5 },
-                width: 5,
-                height: 5,
-                draggable: true,
-                deletable: true,
-                selectable: true,
-            };
-
-            const newEdge = {
-                id: `edge-${uuidv4()}`,
-                source: bendpointId,
-                target,
-                type: 'floatingEdge',
-                data: {
-                    ...data,
-                    // Ensure bendpoint edges don't have arrows by default
-                    arrowHeadLeft: 'none',
-                    arrowHeadRight: 'none'
-                },
-            };
-
-            const updatedEdge = {
-                id,
-                source,
-                target: bendpointId,
-                type: 'floatingEdge',
-                data: {
-                    ...data,
-                    // Ensure bendpoint edges don't have arrows by default
-                    arrowHeadLeft: 'none',
-                    arrowHeadRight: 'none'
-                },
-            };
-
-            setNodes((nds) => [...nds, newNode]);
-            setEdges((eds) => {
-                const filteredEdges = eds.filter((e) => e.id !== id);
-                return [...filteredEdges, updatedEdge, newEdge];
-            });
-        },
-        [id, source, target, data, setNodes, setEdges, screenToFlowPosition]
-    );
-
-    // Memoize node lookup for source and target
-    const [sourceNodeRaw, targetNodeRaw] = useMemo(() => [
-        nodes.find((n: Node) => n.id === source),
-        nodes.find((n: Node) => n.id === target)
-    ], [nodes, source, target]);
-
-    if (!sourceNodeRaw || !targetNodeRaw) return null;
-
-    // Get absolute position of a node, including parent offsets
-    const getAbsolutePosition = useCallback((node: Node): { x: number, y: number } => {
-        return node.position;
-    }, []);
-
-    // Normalize bendpoint node size for edge calculation
-    const shrinkForEdgeCalc = useCallback((node: Node) => {
-        if (!node) return node;
-        if (node.type === 'bendpoint') {
-            return {
-                ...node,
-                width: 5,
-                height: 5,
-                measured: { width: 5, height: 5 },
-            };
-        }
-        return node;
-    }, []);
-
-    // Memoize absolute positions and safe node objects
-    const { sourceNode, targetNode, safeNodes } = useMemo(() => {
-        const sourceAbs = getAbsolutePosition(sourceNodeRaw);
-        const targetAbs = getAbsolutePosition(targetNodeRaw);
-        return {
-            sourceNode: {
-                ...sourceNodeRaw,
-                position: sourceAbs,
-                width: sourceNodeRaw.width || 120,
-                height: sourceNodeRaw.height || 40,
-            },
-            targetNode: {
-                ...targetNodeRaw,
-                position: targetAbs,
-                width: targetNodeRaw.width || 120,
-                height: targetNodeRaw.height || 40,
-            },
-            safeNodes: nodes.map((n) => {
-                const normalizedNode = shrinkForEdgeCalc(n);
-                return {
-                    ...normalizedNode,
-                    width: normalizedNode.width || 120,
-                    height: normalizedNode.height || 40,
-                };
-            }),
-        };
-    }, [getAbsolutePosition, sourceNodeRaw, targetNodeRaw, nodes]);
-
-    // Edge params for floating positioning
-    const {
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-        sourcePosition,
-        targetPosition,
-    } = useMemo(() => getEdgeParams(
-        sourceNode,
-        targetNode,
-        undefined,
-        2,
-        'system-flow',
-        safeNodes
-    ), [sourceNode, targetNode, safeNodes]);
-
-    // Calculate straight line edge path connecting directly to nodes
-    const edgePath = useMemo(() => {
-        // Use the exact edge connection points without any offset
-        // The sourceX, sourceY, targetX, targetY are already calculated to be on the node edges
-        return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
-    }, [sourceX, sourceY, targetX, targetY]);
-
-    // Marker IDs for arrowheads
-    const markerStartId = `${id}-floating-marker-start`;
-    const markerEndId = `${id}-floating-marker-end`;
-    const edgeData = data as SystemFlowEdgeData;
-
-    // For bendpoint edges, don't show arrows by default unless explicitly set
-    const isBendpointEdge = sourceNodeRaw?.type === 'bendpoint' || targetNodeRaw?.type === 'bendpoint';
-    const showStart = edgeData?.arrowHeadLeft === 'v';
-    const showEnd = isBendpointEdge ? false : (edgeData?.arrowHeadRight === 'v');
-
-    const edgeColor = edgeData?.color || "#666";
-
-    return (
-        <>
-            <defs>
-                {showStart && (
-                    <marker
-                        id={markerStartId}
-                        markerWidth="8"
-                        markerHeight="8"
-                        refX="7"
-                        refY="4"
-                        orient="auto"
-                        markerUnits="strokeWidth"
-                    >
-                        <path d="M8,0 L0,4 L8,8" fill="none" stroke={edgeColor} strokeWidth="1" />
-                    </marker>
-                )}
-                {showEnd && (
-                    <marker
-                        id={markerEndId}
-                        markerWidth="8"
-                        markerHeight="8"
-                        refX="7"
-                        refY="4"
-                        orient="auto"
-                        markerUnits="strokeWidth"
-                    >
-                        <path d="M0,0 L8,4 L0,8" fill="none" stroke={edgeColor} strokeWidth="1" />
-                    </marker>
-                )}
-            </defs>
-            <path
-                ref={pathRef}
-                id={id}
-                style={{
-                    ...(style as React.CSSProperties),
-                    strokeWidth: 2,
-                    stroke: edgeColor,
-                    fill: "none",
-                }}
-                className="react-flow__edge-path"
-                d={edgePath}
-                markerStart={showStart ? `url(#${markerStartId})` : undefined}
-                markerEnd={showEnd ? `url(#${markerEndId})` : undefined}
-                onDoubleClick={onEdgeDoubleClick}
-            />
-        </>
-    );
-};
-
-export default memo(FloatingEdge);
+import React, { useCallback, useMemo, useRef, memo } from 'react';
+import { EdgeProps, useReactFlow, Node, Edge } from '@xyflow/react';
+import { getEdgeParams } from '../../../utils/nodeutils';
+import { SystemFlowEdgeData } from '../../../types/system-flow-types';
+import { v4 as uuidv4 } from 'uuid';
+
+const FloatingEdge = ({
+    id,
+    source,
+    target,
+    data,
+    style = {},
+}: EdgeProps) => {
+    const { getNodes, setNodes, setEdges, screenToFlowPosition } = useReactFlow();
+    const nodes = getNodes();
+    const pathRef = useRef<SVGPathElement>(null);
+
+    // Double click handler to create a bendpoint
+    const onEdgeDoubleClick = useCallback(
+        (evt: React.MouseEvent<SVGPathElement, MouseEvent>) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (!pathRef.current) return;
+
+            const flowPosition = screenToFlowPosition({
+                x: evt.clientX,
+                y: evt.clientY,
+            });
+
+            const bendpointId = `bendpoint-${uuidv4()}`;
+            const newNode = {
+                id: bendpointId,
+                type: 'bendpoint',
+                position: flowPosition,
+                data: {},
+                measured: { width: 5, height: 5 },
+                width: 5,
+                height: 5,
+                draggable: true,
+                deletable: true,
+                selectable: true,
+            };
+
+            const newEdge = {
+                id: `edge-${uuidv4()}`,
+                source: bendpointId,
+                target,
+                type: 'floatingEdge',
+                data: {
+                    ...data,
+                    // Ensure bendpoint edges don't have arrows by default
+                    arrowHeadLeft: 'none',
+                    arrowHeadRight: 'none'
+                },
+            };
+
+            const updatedEdge = {
+                id,
+                source,
+                target: bendpointId,
+                type: 'floatingEdge',
+                data: {
+                    ...data,
+                    // Ensure bendpoint edges don't have arrows by default
+                    arrowHeadLeft: 'none',
+                    arrowHeadRight: 'none'
+                },
+            };
+
+            setNodes((nds) => [...nds, newNode]);
+            setEdges((eds) => {
+                const filteredEdges = eds.filter((e) => e.id !== id);
+                return [...filteredEdges, updatedEdge, newEdge];
+            });
+        },
+        [id, source, target, data, setNodes, setEdges, screenToFlowPosition]
+    );
+
+    // Memoize node lookup for source and target
+    const [sourceNodeRaw, targetNodeRaw] = useMemo(() => [
+        nodes.find((n: Node) => n.id === source),
+        nodes.find((n: Node) => n.id === target)
+    ], [nodes, source, target]);
+
+    if (!sourceNodeRaw || !targetNodeRaw) return null;
+
+    // Get absolute position of a node, including parent offsets
+    const getAbsolutePosition = useCallback((node: Node): { x: number, y: number } => {
+        return node.position;
+    }, []);
+
+    // Normalize bendpoint node size for edge calculation
+    const shrinkForEdgeCalc = useCallback((node: Node) => {
+        if (!node) return node;
+        if (node.type === 'bendpoint') {
+            return {
+                ...node,
+                width: 5,
+                height: 5,
+                measured: { width: 5, height: 5 },
+            };
+        }
+        return node;
+    }, []);
+
+    // Memoize absolute positions and safe node objects
+    const { sourceNode, targetNode, safeNodes } = useMemo(() => {
+        const sourceAbs = getAbsolutePosition(sourceNodeRaw);
+        const targetAbs = getAbsolutePosition(targetNodeRaw);
+        return {
+            sourceNode: {
+                ...sourceNodeRaw,
+                position: sourceAbs,
+                width: sourceNodeRaw.width || 120,
+                height: sourceNodeRaw.height || 40,
+            },
+            targetNode: {
+                ...targetNodeRaw,
+                position: targetAbs,
+                width: targetNodeRaw.width || 120,
+                height: targetNodeRaw.height || 40,
+            },
+            safeNodes: nodes.map((n) => {
+                const normalizedNode = shrinkForEdgeCalc(n);
+                return {
+                    ...normalizedNode,
+                    width: normalizedNode.width || 120,
+                    height: normalizedNode.height || 40,
+                };
+            }),
+        };
+    }, [getAbsolutePosition, sourceNodeRaw, targetNodeRaw, nodes]);
+
+    // Edge params for floating positioning
+    const {
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    } = useMemo(() => getEdgeParams(
+        sourceNode,
+        targetNode,
+        undefined,
+        2,
+        'system-flow',
+        safeNodes
+    ), [sourceNode, targetNode, safeNodes]);
+
+    // Calculate straight line edge path connecting directly to nodes
+    const edgePath = useMemo(() => {
+        // Use the exact edge connection points without any offset
+        // The sourceX, sourceY, targetX, targetY are already calculated to be on the node edges
+        return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
+    }, [sourceX, sourceY, targetX, targetY]);
+
+    // Marker IDs for arrowheads
+    const markerStartId = `${id}-floating-marker-start`;
+    const markerEndId = `${id}-floating-marker-end`;
+    const edgeData = data as SystemFlowEdgeData;
+
+    // For bendpoint edges, don't show arrows by default unless explicitly set
+    const isBendpointEdge = sourceNodeRaw?.type === 'bendpoint' || targetNodeRaw?.type === 'bendpoint';
+    const showStart = edgeData?.arrowHeadLeft === 'v';
+    const showEnd = isBendpointEdge ? false : (edgeData?.arrowHeadRight === 'v');
+
+    const edgeColor = edgeData?.color || "#666";
+
+    return (
+        <>
+            <defs>
+                {showStart && (
+                    <marker
+                        id={markerStartId}
+                        markerWidth="8"
+                        markerHeight="8"
+                        refX="7"
+                        refY="4"
+                        orient="auto"
+                        markerUnits="strokeWidth"
+                    >
+                        <path d="M8,0 L0,4 L8,8" fill="none" stroke={edgeColor} strokeWidth="1" />
+                    </marker>
+                )}
+                {showEnd && (
+                    <marker
+                        id={markerEndId}
+                        markerWidth="8"
+                        markerHeight="8"
+                        refX="7"
+                        refY="4"
+                        orient="auto"
+                        markerUnits="strokeWidth"
+                    >
+                        <path d="M0,0 L8,4 L0,8" fill="none" stroke={edgeColor} strokeWidth="1" />
+                    </marker>
+                )}
+            </defs>
+            <path
+                ref={pathRef}
+                id={id}
+                style={{
+                    ...(style as React.CSSProperties),
+                    strokeWidth: 2,
+                    stroke: edgeColor,
+                    fill: "none",
+                }}
+                className="react-flow__edge-path"
+                d={edgePath}
+                markerStart={showStart ? `url(#${markerStartId})` : undefined}
+                markerEnd={showEnd ? `url(#${markerEndId})` : undefined}
+                onDoubleClick={onEdgeDoubleClick}
+            />
+        </>
+    );
+};
+
+export default memo(FloatingEdge);

package/packages/diagrams/src/lib/types/card-node.ts

@@ -1,68 +1,68 @@
-import { Node } from '@xyflow/react';
-import { blockTypes } from '../organisms/Card/card.params';
-import { colorMap } from './colors';
-import { RuleGroup } from './condition-builder';
-import { NodeForm } from './workflow-node-data-types';
-
-export type NodeDirection = 'bottom' | 'right' | 'left' | 'middle' | 'top';
-export type NodeVariant =
-  | 'parallel'
-  | 'branch'
-  | 'group'
-  | 'return'
-  | 'loop'
-  | 'switch'
-  | 'try'
-  | 'catch'
-  | 'tryCatch'
-  | 'forLoop'
-  | 'emptyNode'
-  | 'entity'
-  | 'call'
-  | 'function'
-  | 'let'
-  | 'set';
-
-export interface ICardNodeData {
-  isBlock?: boolean;
-  nodeId: string;
-  blocks?: IBlock[];
-  title?: string;
-  color?: keyof typeof colorMap;
-  sideHandles?: boolean;
-  img?: string;
-  caseCount?: number;
-  falseCase?: string;
-  trueCase?: string;
-  label?: string;
-  variant?: NodeVariant;
-  branchIndex?: number | 'default';
-  parallelColIndex?: number;
-  parallelChildrenCount?: number;
-  isRoot?: boolean;
-  finalNodeId?: string;
-  type?: NodeVariant;
-  formData?: NodeForm;
-  conditions?: RuleGroup;
-  isPinned?: boolean;
-  isHidden?: boolean; // Add visibility flag for expandable functionality
-}
-
-export interface IBlock {
-  id: string;
-  color: keyof typeof colorMap;
-  title: string;
-  type?: IBlockType;
-}
-
-export type IBlockType = keyof typeof blockTypes;
-
-export type ICardNode = Node & {
-  type: 'entity' | 'workflow' | 'bendPoint';
-  draggable?: boolean;
-  width?: number;
-  height?: number;
-  parentId?: string | null;
-  subParentId?: string | null;
-  data: ICardNodeData;
-};
+import { Node } from '@xyflow/react';
+import { blockTypes } from '../organisms/Card/card.params';
+import { colorMap } from './colors';
+import { RuleGroup } from './condition-builder';
+import { NodeForm } from './workflow-node-data-types';
+
+export type NodeDirection = 'bottom' | 'right' | 'left' | 'middle' | 'top';
+export type NodeVariant =
+  | 'parallel'
+  | 'branch'
+  | 'group'
+  | 'return'
+  | 'loop'
+  | 'switch'
+  | 'try'
+  | 'catch'
+  | 'tryCatch'
+  | 'forLoop'
+  | 'emptyNode'
+  | 'entity'
+  | 'call'
+  | 'function'
+  | 'let'
+  | 'set';
+
+export interface ICardNodeData {
+  isBlock?: boolean;
+  nodeId: string;
+  blocks?: IBlock[];
+  title?: string;
+  color?: keyof typeof colorMap;
+  sideHandles?: boolean;
+  img?: string;
+  caseCount?: number;
+  falseCase?: string;
+  trueCase?: string;
+  label?: string;
+  variant?: NodeVariant;
+  branchIndex?: number | 'default';
+  parallelColIndex?: number;
+  parallelChildrenCount?: number;
+  isRoot?: boolean;
+  finalNodeId?: string;
+  type?: NodeVariant;
+  formData?: NodeForm;
+  conditions?: RuleGroup;
+  isPinned?: boolean;
+  isHidden?: boolean; // Add visibility flag for expandable functionality
+}
+
+export interface IBlock {
+  id: string;
+  color: keyof typeof colorMap;
+  title: string;
+  type?: IBlockType;
+}
+
+export type IBlockType = keyof typeof blockTypes;
+
+export type ICardNode = Node & {
+  type: 'entity' | 'workflow' | 'bendPoint';
+  draggable?: boolean;
+  width?: number;
+  height?: number;
+  parentId?: string | null;
+  subParentId?: string | null;
+  data: ICardNodeData;
+};

package/packages/diagrams/src/lib/types/node-types.ts

@@ -1,29 +1,29 @@
-import { EntityNode } from '../organisms/Card/EntityNode';
-import BendpointNode from '../atoms/BendpointNode';
-import WorkflowNode from '../organisms/WorkflowNode';
-import CollabObjectNode from '../templates/collaborationDiagram/nodes/CollabObjectNode';
-import ActorNode from '../atoms/ActorNode';
-import {
-  AutomationStartNode,
-  AutomationApiNode,
-  AutomationFormattingNode,
-  AutomationSheetsNode,
-  AutomationEndNode,
-  AutomationNoteNode,
-  AutomationAISuggestionNode,
-} from '../components/automation';
-
-export default {
-  entity: EntityNode,
-  bendPoint: BendpointNode,
-  workflow: WorkflowNode,
-  collabObject: CollabObjectNode,
-  actor: ActorNode,
-  AutomationStartNode,
-  AutomationApiNode,
-  AutomationFormattingNode,
-  AutomationSheetsNode,
-  AutomationEndNode,
-  AutomationNoteNode,
-  AutomationAISuggestionNode,
-};
+import { EntityNode } from '../organisms/Card/EntityNode';
+import BendpointNode from '../atoms/BendpointNode';
+import WorkflowNode from '../organisms/WorkflowNode';
+import CollabObjectNode from '../templates/collaborationDiagram/nodes/CollabObjectNode';
+import ActorNode from '../atoms/ActorNode';
+import {
+  AutomationStartNode,
+  AutomationApiNode,
+  AutomationFormattingNode,
+  AutomationSheetsNode,
+  AutomationEndNode,
+  AutomationNoteNode,
+  AutomationAISuggestionNode,
+} from '../components/automation';
+
+export default {
+  entity: EntityNode,
+  bendPoint: BendpointNode,
+  workflow: WorkflowNode,
+  collabObject: CollabObjectNode,
+  actor: ActorNode,
+  AutomationStartNode,
+  AutomationApiNode,
+  AutomationFormattingNode,
+  AutomationSheetsNode,
+  AutomationEndNode,
+  AutomationNoteNode,
+  AutomationAISuggestionNode,
+};