@flowuent-org/diagramming-core 1.1.8 → 1.2.0

package/packages/diagrams/src/lib/templates/Diagramming.tsx

@@ -1,204 +1,246 @@
-import { CssBaseline, ThemeProvider } from '@mui/material';
-import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
-import { Edge, Background, BackgroundVariant, Node } from '@xyflow/react';
-import FloatingConnectionLine from '../atoms/FloatingConnectionLine';
-import { DiagramStoreProvider, useDiagram } from '../contexts/DiagramProvider';
-import { theme } from '../theme';
-import { ICardNode } from '../types/card-node';
-import DiagramTypes from '../types/diagram-types';
-import edgeTypes, { defaultEdgeOptions } from '../types/edge-types';
-import nodeTypes from '../types/node-types';
-import { useAutoRegisterVariables } from '../hooks/useAutoRegisterVariables';
-import { orderNodesByEdges, NodeOrderResult } from '../utils/nodeOrderByEdges';
-
-import {
-  ConditionBuilderState,
-  GetDefaultNodeDataType,
-  OnChangeEventHandler,
-  RenderAddNodeViewType,
-  WorkflowNodeContentType,
-} from '../contexts/diagramStoreTypes';
-import { DiagramContainer } from './DiagramContainer';
-import { FunctionSignature } from '../types/FunctionSignature';
-import { AvailableVariable } from '../types/available-variables';
-
-// Component that handles variable registration
-const VariableRegistrationHandler: React.FC = () => {
-  useAutoRegisterVariables();
-  return null;
-};
-
-// Interface for the ref methods
-export interface DiagrammingPageRef {
-  undo: () => void;
-  redo: () => void;
-  canUndo: () => boolean;
-  canRedo: () => boolean;
-  reset: () => void;
-  getHistoryLength: () => number;
-  getHistoryIndex: () => number;
-  // Node data management methods
-  getNodeData: (nodeId: string) => any | null;
-  updateNodeData: (nodeId: string, data: any) => boolean;
-  getSelectedNode: () => string | null;
-  getNodes: () => any[];
-  getEdges: () => any[];
-  // Get ordered nodes based on edge connections (arrow direction)
-  getNodeOrder: () => NodeOrderResult;
-}
-
-// Internal component that exposes undo/redo functionality
-const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, { 
-  children?: React.ReactNode; 
-  className?: string; 
-  showAutomationExecutionPanel?: boolean;
-  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
-}>(({ children, className, showAutomationExecutionPanel, onNodeOrderChange }, ref) => {
-  const undo = useDiagram((state) => state.undo);
-  const redo = useDiagram((state) => state.redo);
-  const reset = useDiagram((state) => state.reset);
-  const history = useDiagram((state) => state.history);
-  const historyIndex = useDiagram((state) => state.historyIndex);
-  const nodes = useDiagram((state) => state.nodes);
-  const edges = useDiagram((state) => state.edges);
-  const selectedNode = useDiagram((state) => state.selectedNode);
-  const setNodes = useDiagram((state) => state.setNodes);
-
-  // Send node order to parent project whenever nodes/edges change
-  useEffect(() => {
-    if (nodes.length > 0 && edges.length > 0 && onNodeOrderChange) {
-      const nodeOrder = orderNodesByEdges(nodes, edges);
-      onNodeOrderChange(nodeOrder);
-    }
-  }, [nodes, edges, onNodeOrderChange]);
-
-  useImperativeHandle(ref, () => ({
-    undo,
-    redo,
-    canUndo: () => historyIndex > 0,
-    canRedo: () => historyIndex < history.length - 1,
-    reset,
-    getHistoryLength: () => history.length,
-    getHistoryIndex: () => historyIndex,
-    // Node data management methods
-    getNodeData: (nodeId: string) => {
-      const node = nodes.find(n => n.id === nodeId);
-      return node ? node.data : null;
-    },
-    updateNodeData: (nodeId: string, newData: any) => {
-      const nodeIndex = nodes.findIndex(n => n.id === nodeId);
-      if (nodeIndex === -1) return false;
-
-      const updatedNodes = [...nodes];
-      updatedNodes[nodeIndex] = {
-        ...updatedNodes[nodeIndex],
-        data: { ...updatedNodes[nodeIndex].data, ...newData }
-      };
-      setNodes(updatedNodes);
-      return true;
-    },
-    getSelectedNode: () => selectedNode,
-    getNodes: () => nodes,
-    getEdges: () => edges,
-    // Get ordered nodes based on edge connections
-    getNodeOrder: () => orderNodesByEdges(nodes, edges),
-  }));
-
-  return (
-    <DiagramContainer
-      defaultEdgeOptions={defaultEdgeOptions}
-      edgeTypes={edgeTypes}
-      nodeTypes={nodeTypes as any}
-      connectionLineComponent={FloatingConnectionLine}
-      style={{ backgroundColor: '#141519' }}
-      className={className}
-      showAutomationExecutionPanel={showAutomationExecutionPanel}
-    >
-      <Background
-        color="#ffffff"
-        variant={BackgroundVariant.Dots}
-        gap={20}
-        size={1}
-      />
-      {children}
-    </DiagramContainer>
-  );
-});
-
-export interface DiagrammingPageProps {
-  diagramType: DiagramTypes;
-  onChange?: OnChangeEventHandler;
-  defaultNodes: ICardNode[];
-  defaultEdges: Edge[];
-  children?: React.ReactNode;
-  workflowNodeContent?: WorkflowNodeContentType;
-  renderAddNodeView?: RenderAddNodeViewType;
-  getDefaultNodeData?: GetDefaultNodeDataType;
-  availableFunctions: FunctionSignature[];
-  availableVariables?: AvailableVariable[];
-  id: number;
-  className?: string;
-  conditionBuilderStates?: ConditionBuilderState;
-  // New: emit node selection to host app
-  onNodeSelect?: (payload: { nodeId: string; type?: string; data?: any }) => void;
-  // New: allow host to disable library JSON popovers/drawers
-  enableNodeJsonPopover?: boolean;
-  // New: control visibility of automation execution panel
-  showAutomationExecutionPanel?: boolean;
-  // New: callback to receive node order based on arrow/edge connections
-  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
-}
-
-export const DiagrammingPage = forwardRef<DiagrammingPageRef, DiagrammingPageProps>(({
-  diagramType,
-  defaultNodes,
-  defaultEdges,
-  onChange,
-  children,
-  workflowNodeContent,
-  renderAddNodeView,
-  getDefaultNodeData,
-  availableFunctions,
-  availableVariables,
-  id,
-  className,
-  conditionBuilderStates,
-  onNodeSelect: onNodeSelectProp,
-  enableNodeJsonPopover: enableNodeJsonPopoverProp,
-  showAutomationExecutionPanel,
-  onNodeOrderChange
-}, ref) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-
-      <DiagramStoreProvider
-        id={id}
-        availableFunctions={availableFunctions}
-        availableVariables={availableVariables}
-        defaultNodes={defaultNodes} // Pass defaultNodes to the context
-        defaultEdges={defaultEdges} // Pass defaultEdges to the context
-        diagramType={diagramType} // Pass diagramType to the context
-        onChange={onChange} // Pass onChange to the context
-        workflowNodeContent={workflowNodeContent} // Pass workflowNodeContent to the context
-        renderAddNodeView={renderAddNodeView} // Pass workflowNodeContent to the context
-        getDefaultNodeData={getDefaultNodeData}
-        conditionBuilderStates={conditionBuilderStates}
-        onNodeSelect={onNodeSelectProp}
-        enableNodeJsonPopover={enableNodeJsonPopoverProp}
-      >
-        {/* Variable registration handler */}
-        <VariableRegistrationHandler />
-
-        <DiagrammingPageInternal 
-          ref={ref} 
-          className={className} 
-          showAutomationExecutionPanel={showAutomationExecutionPanel}
-          onNodeOrderChange={onNodeOrderChange}
-        >
-          {children}
-        </DiagrammingPageInternal>
-      </DiagramStoreProvider>
-    </ThemeProvider>
-  );
-});
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Edge, Background, BackgroundVariant, Node } from '@xyflow/react';
+import FloatingConnectionLine from '../atoms/FloatingConnectionLine';
+import { DiagramStoreProvider, useDiagram } from '../contexts/DiagramProvider';
+import { theme } from '../theme';
+import { ICardNode } from '../types/card-node';
+import DiagramTypes from '../types/diagram-types';
+import edgeTypes, { defaultEdgeOptions } from '../types/edge-types';
+import nodeTypes from '../types/node-types';
+import { useAutoRegisterVariables } from '../hooks/useAutoRegisterVariables';
+import { orderNodesByEdges, NodeOrderResult } from '../utils/nodeOrderByEdges';
+
+import {
+  ConditionBuilderState,
+  GetDefaultNodeDataType,
+  OnChangeEventHandler,
+  RenderAddNodeViewType,
+  WorkflowNodeContentType,
+} from '../contexts/diagramStoreTypes';
+import { DiagramContainer } from './DiagramContainer';
+import { FunctionSignature } from '../types/FunctionSignature';
+import { AvailableVariable } from '../types/available-variables';
+
+// Component that handles variable registration
+const VariableRegistrationHandler: React.FC = () => {
+  useAutoRegisterVariables();
+  return null;
+};
+
+// Interface for the ref methods
+export interface DiagrammingPageRef {
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  reset: () => void;
+  getHistoryLength: () => number;
+  getHistoryIndex: () => number;
+  // Node data management methods
+  getNodeData: (nodeId: string) => any | null;
+  updateNodeData: (nodeId: string, data: any) => boolean;
+  getSelectedNode: () => string | null;
+  getNodes: () => any[];
+  getEdges: () => any[];
+  // Get ordered nodes based on edge connections (arrow direction)
+  getNodeOrder: () => NodeOrderResult;
+  // Get current state for saving
+  getCurrentState: () => { nodes: any[]; edges: any[] };
+  // Set nodes and edges (for restoring saved state)
+  setNodesAndEdges: (nodes: any[], edges: any[]) => void;
+}
+
+// Internal component that exposes undo/redo functionality
+const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, { 
+  children?: React.ReactNode; 
+  className?: string; 
+  showAutomationExecutionPanel?: boolean;
+  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
+}>(({ children, className, showAutomationExecutionPanel, onNodeOrderChange }, ref) => {
+  const undo = useDiagram((state) => state.undo);
+  const redo = useDiagram((state) => state.redo);
+  const reset = useDiagram((state) => state.reset);
+  const history = useDiagram((state) => state.history);
+  const historyIndex = useDiagram((state) => state.historyIndex);
+  const nodes = useDiagram((state) => state.nodes);
+  const edges = useDiagram((state) => state.edges);
+  const selectedNode = useDiagram((state) => state.selectedNode);
+  const setNodes = useDiagram((state) => state.setNodes);
+  const setEdges = useDiagram((state) => state.setEdges);
+
+  // Send node order to parent project whenever nodes/edges change
+  useEffect(() => {
+    if (edges.length > 0) {
+      // Get only nodes that are connected by edges
+      const connectedNodeIds = new Set<string>();
+      edges.forEach((edge) => {
+        connectedNodeIds.add(edge.source);
+        connectedNodeIds.add(edge.target);
+      });
+      
+      // Filter nodes to only include connected ones
+      const connectedNodes = nodes.filter((node) => connectedNodeIds.has(node.id));
+      
+      // Get node order for connected nodes only
+      const nodeOrder = orderNodesByEdges(connectedNodes, edges, { includeOrphanNodes: false });
+      
+      // Print only connected nodes to console
+      console.log('\n========== NODE ORDER (Connected Only) ==========');
+      console.log('\n📋 EXECUTION ORDER:');
+      nodeOrder.orderedNodes.forEach((node, index) => {
+        console.log(`  ${index + 1}. [${node.type || 'unknown'}] ${node.id}`);
+      });
+      
+      console.log('\n🔗 EDGE ORDER:');
+      edges.forEach((edge, index) => {
+        console.log(`  ${index + 1}. ${edge.source} ──→ ${edge.target}`);
+      });
+      
+      console.log('\n📊 TOTAL:', nodeOrder.orderedNodes.length, 'nodes,', edges.length, 'edges');
+      console.log('=================================================\n');
+      
+      // Send to parent project if callback provided
+      if (onNodeOrderChange) {
+        onNodeOrderChange(nodeOrder);
+      }
+    }
+  }, [nodes, edges, onNodeOrderChange]);
+
+  useImperativeHandle(ref, () => ({
+    undo,
+    redo,
+    canUndo: () => historyIndex > 0,
+    canRedo: () => historyIndex < history.length - 1,
+    reset,
+    getHistoryLength: () => history.length,
+    getHistoryIndex: () => historyIndex,
+    // Node data management methods
+    getNodeData: (nodeId: string) => {
+      const node = nodes.find(n => n.id === nodeId);
+      return node ? node.data : null;
+    },
+    updateNodeData: (nodeId: string, newData: any) => {
+      const nodeIndex = nodes.findIndex(n => n.id === nodeId);
+      if (nodeIndex === -1) return false;
+
+      const updatedNodes = [...nodes];
+      updatedNodes[nodeIndex] = {
+        ...updatedNodes[nodeIndex],
+        data: { ...updatedNodes[nodeIndex].data, ...newData }
+      };
+      setNodes(updatedNodes);
+      return true;
+    },
+    getSelectedNode: () => selectedNode,
+    getNodes: () => nodes,
+    getEdges: () => edges,
+    // Get ordered nodes based on edge connections
+    getNodeOrder: () => orderNodesByEdges(nodes, edges),
+    // Get current state for saving
+    getCurrentState: () => ({ nodes: [...nodes], edges: [...edges] }),
+    // Set nodes and edges (for restoring saved state)
+    setNodesAndEdges: (newNodes: any[], newEdges: any[]) => {
+      setNodes(newNodes);
+      setEdges(newEdges);
+    },
+  }));
+
+  return (
+    <DiagramContainer
+      defaultEdgeOptions={defaultEdgeOptions}
+      edgeTypes={edgeTypes}
+      nodeTypes={nodeTypes as any}
+      connectionLineComponent={FloatingConnectionLine}
+      style={{ backgroundColor: '#141519' }}
+      className={className}
+      showAutomationExecutionPanel={showAutomationExecutionPanel}
+    >
+      <Background
+        color="#ffffff"
+        variant={BackgroundVariant.Dots}
+        gap={20}
+        size={1}
+      />
+      {children}
+    </DiagramContainer>
+  );
+});
+
+export interface DiagrammingPageProps {
+  diagramType: DiagramTypes;
+  onChange?: OnChangeEventHandler;
+  defaultNodes: ICardNode[];
+  defaultEdges: Edge[];
+  children?: React.ReactNode;
+  workflowNodeContent?: WorkflowNodeContentType;
+  renderAddNodeView?: RenderAddNodeViewType;
+  getDefaultNodeData?: GetDefaultNodeDataType;
+  availableFunctions: FunctionSignature[];
+  availableVariables?: AvailableVariable[];
+  id: number;
+  className?: string;
+  conditionBuilderStates?: ConditionBuilderState;
+  // New: emit node selection to host app
+  onNodeSelect?: (payload: { nodeId: string; type?: string; data?: any }) => void;
+  // New: allow host to disable library JSON popovers/drawers
+  enableNodeJsonPopover?: boolean;
+  // New: control visibility of automation execution panel
+  showAutomationExecutionPanel?: boolean;
+  // New: callback to receive node order based on arrow/edge connections
+  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
+}
+
+export const DiagrammingPage = forwardRef<DiagrammingPageRef, DiagrammingPageProps>(({
+  diagramType,
+  defaultNodes,
+  defaultEdges,
+  onChange,
+  children,
+  workflowNodeContent,
+  renderAddNodeView,
+  getDefaultNodeData,
+  availableFunctions,
+  availableVariables,
+  id,
+  className,
+  conditionBuilderStates,
+  onNodeSelect: onNodeSelectProp,
+  enableNodeJsonPopover: enableNodeJsonPopoverProp,
+  showAutomationExecutionPanel,
+  onNodeOrderChange
+}, ref) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+
+      <DiagramStoreProvider
+        id={id}
+        availableFunctions={availableFunctions}
+        availableVariables={availableVariables}
+        defaultNodes={defaultNodes} // Pass defaultNodes to the context
+        defaultEdges={defaultEdges} // Pass defaultEdges to the context
+        diagramType={diagramType} // Pass diagramType to the context
+        onChange={onChange} // Pass onChange to the context
+        workflowNodeContent={workflowNodeContent} // Pass workflowNodeContent to the context
+        renderAddNodeView={renderAddNodeView} // Pass workflowNodeContent to the context
+        getDefaultNodeData={getDefaultNodeData}
+        conditionBuilderStates={conditionBuilderStates}
+        onNodeSelect={onNodeSelectProp}
+        enableNodeJsonPopover={enableNodeJsonPopoverProp}
+      >
+        {/* Variable registration handler */}
+        <VariableRegistrationHandler />
+
+        <DiagrammingPageInternal 
+          ref={ref} 
+          className={className} 
+          showAutomationExecutionPanel={showAutomationExecutionPanel}
+          onNodeOrderChange={onNodeOrderChange}
+        >
+          {children}
+        </DiagrammingPageInternal>
+      </DiagramStoreProvider>
+    </ThemeProvider>
+  );
+});

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

@@ -1,3 +1,4 @@
+import { MarkerType } from '@xyflow/react';
 import { Markers } from '../assets/markers/markers.type';
 import { CustomEdgeGenerator } from '../organisms/CustomEdge/custom-edge-generator';
 import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
@@ -13,6 +14,22 @@ export default {
 };
 
 export const defaultEdgeOptions = {
+  style: {
+    strokeWidth: 2,
+    stroke: '#10B981', // Green color for better visibility
+  },
+  // Arrow marker at the end of the edge
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 20,
+    height: 20,
+    color: '#10B981',
+  },
+  animated: false,
+};
+
+// ER Diagram edge options (for entity relationship diagrams)
+export const erDiagramEdgeOptions = {
   style: {
     strokeWidth: 2,
     stroke: '#4858E9',

package/packages/diagrams/src/lib/utils/generateEdgesFromNodeOrder.ts

@@ -0,0 +1,113 @@
+import { Edge, MarkerType } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+
+/**
+ * Generates edges based on the order of nodes in the array.
+ * Creates a linear connection from first node to last node.
+ * 
+ * @param nodes - Array of nodes in the desired order
+ * @param options - Configuration options for edge generation
+ * @returns Array of edges connecting nodes in sequence
+ */
+export interface GenerateEdgesOptions {
+  /** Edge style stroke color */
+  strokeColor?: string;
+  /** Edge stroke width */
+  strokeWidth?: number;
+  /** Whether to add arrow marker at the end */
+  markerEnd?: boolean;
+  /** Whether edges should be animated */
+  animated?: boolean;
+  /** Source handle ID pattern (e.g., 'right-source', 'bottom-source') */
+  sourceHandleId?: string;
+  /** Target handle ID pattern (e.g., 'left-target', 'top-target') */
+  targetHandleId?: string;
+}
+
+const defaultOptions: GenerateEdgesOptions = {
+  strokeColor: '#10B981',
+  strokeWidth: 2,
+  markerEnd: true,
+  animated: false,
+  sourceHandleId: 'right-source',
+  targetHandleId: 'left-target',
+};
+
+export function generateEdgesFromNodeOrder(
+  nodes: ICardNode[],
+  options: GenerateEdgesOptions = {}
+): Edge[] {
+  const opts = { ...defaultOptions, ...options };
+  const edges: Edge[] = [];
+
+  // Need at least 2 nodes to create edges
+  if (nodes.length < 2) {
+    return edges;
+  }
+
+  // Create edges between consecutive nodes
+  for (let i = 0; i < nodes.length - 1; i++) {
+    const sourceNode = nodes[i];
+    const targetNode = nodes[i + 1];
+
+    const edge: Edge = {
+      id: `edge-${sourceNode.id}-${targetNode.id}`,
+      source: sourceNode.id,
+      target: targetNode.id,
+      sourceHandle: opts.sourceHandleId,
+      targetHandle: opts.targetHandleId,
+      type: 'default',
+      animated: opts.animated,
+      style: {
+        stroke: opts.strokeColor,
+        strokeWidth: opts.strokeWidth,
+      },
+    };
+
+    // Add arrow marker if enabled
+    if (opts.markerEnd) {
+      edge.markerEnd = {
+        type: MarkerType.ArrowClosed,
+        width: 20,
+        height: 20,
+        color: opts.strokeColor,
+      };
+    }
+
+    edges.push(edge);
+  }
+
+  return edges;
+}
+
+/**
+ * Generates edges based on node order for automation diagrams (horizontal layout)
+ */
+export function generateAutomationEdges(nodes: ICardNode[]): Edge[] {
+  return generateEdgesFromNodeOrder(nodes, {
+    strokeColor: '#10B981',
+    strokeWidth: 2,
+    markerEnd: true,
+    animated: false,
+    sourceHandleId: 'right-source',
+    targetHandleId: 'left-target',
+  });
+}
+
+/**
+ * Generates edges based on node order for vertical layout diagrams
+ */
+export function generateVerticalEdges(nodes: ICardNode[]): Edge[] {
+  return generateEdgesFromNodeOrder(nodes, {
+    strokeColor: '#10B981',
+    strokeWidth: 2,
+    markerEnd: true,
+    animated: false,
+    sourceHandleId: 'bottom-source',
+    targetHandleId: 'top-target',
+  });
+}
+
+export default generateEdgesFromNodeOrder;
+
+

package/packages/diagrams/src/lib/utils/nodeAIAssistantConfig.ts

@@ -0,0 +1,54 @@
+/**
+ * Configuration utility for Node AI Assistant
+ * This allows setting a global API endpoint and headers for all node AI assistants
+ */
+
+let globalApiEndpoint: string | undefined = undefined;
+let globalApiHeaders: Record<string, string> = {};
+
+/**
+ * Set the global API endpoint for Node AI Assistant
+ * @param endpoint - The API endpoint URL (e.g., 'https://api.example.com/chat')
+ */
+export const setNodeAIAssistantEndpoint = (endpoint: string | undefined) => {
+    globalApiEndpoint = endpoint;
+};
+
+/**
+ * Set global API headers for Node AI Assistant requests
+ * @param headers - Headers object (e.g., { 'Authorization': 'Bearer token' })
+ */
+export const setNodeAIAssistantHeaders = (headers: Record<string, string>) => {
+    globalApiHeaders = headers;
+};
+
+/**
+ * Get the global API endpoint
+ */
+export const getNodeAIAssistantEndpoint = (): string | undefined => {
+    return globalApiEndpoint;
+};
+
+/**
+ * Get the global API headers
+ */
+export const getNodeAIAssistantHeaders = (): Record<string, string> => {
+    return globalApiHeaders;
+};
+
+/**
+ * Configure Node AI Assistant with endpoint and headers
+ * @param config - Configuration object
+ */
+export const configureNodeAIAssistant = (config: {
+    endpoint?: string;
+    headers?: Record<string, string>;
+}) => {
+    if (config.endpoint !== undefined) {
+        globalApiEndpoint = config.endpoint;
+    }
+    if (config.headers) {
+        globalApiHeaders = { ...globalApiHeaders, ...config.headers };
+    }
+};
+