@flowuent-org/diagramming-core 1.4.0 → 1.4.2

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

@@ -0,0 +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;
+  // 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/templates/PageLinks.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+const PageLinks = () => {
+  return (
+    <div className="container">
+      <Link to="/flow">Flow</Link>
+      <Link to="/erd">ERD</Link>
+      <Link to="/workflow">Workflow</Link>
+    </div>
+  );
+};
+
+export default PageLinks;