@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,310 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { ConnectionMode, ReactFlow, ReactFlowProps } from '@xyflow/react';
+import { useTriggerEvent } from '../utils/event-hooks';
+import { IBlock, ICardNodeData } from '../types/card-node';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+
+import { Box, Fab } from '@mui/material';
+import { CardDataProvider } from '../contexts/CardDataProvider';
+import BlockWrapper from '../molecules/BlockWrapper';
+import useDragCallbacks from '../hooks/useDragCallbacks';
+import { useElk } from '../utils/elkLayout';
+import { useModalControls } from '../hooks/useModalControls';
+import { useWorkflowNodeAction } from '../hooks/useWorkflowNodeActiont';
+import {
+  useContentHeights,
+  useDiagram,
+  useDiagramEdges,
+  useDiagramNodes,
+  useDiagramType,
+  useLayoutDirection,
+  useSetLayoutDirection,
+  usePannable,
+} from '../contexts/DiagramProvider';
+import { useAutoRegisterFunctions } from '../hooks/useAutoRegisterFunctions';
+import SequenceDiagram from './sequence/SequenceDiagram';
+import ArchDiagram from './arch/ArchDiagram';
+import StateMachineDiagram from './stateMachine/StateMachineDiagram';
+import SystemFlowDiagram from './systemFlow/SystemFlowDiagram';
+import CloudArchitectureDiagram from './cloud-arch/components/CloudArchitectureDiagram';
+import UseCaseDiagram from './useCaseDiagram/UseCaseDiagram';
+import CollaborationDiagram from './collaborationDiagram/CollaborationDiagram';
+import Header from '../components/Header';
+import { PaneMouseHandler } from '../utils/event-store';
+import { AutomationExecutionPanel } from '../components/automation/AutomationExecutionPanel';
+
+interface DiagramContentProps
+  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
+  className?: string;
+  showAutomationExecutionPanel?: boolean;
+}
+
+export const DiagramContent: React.FC<DiagramContentProps> = ({
+  className = '',
+  showAutomationExecutionPanel = true,
+  ...props
+}) => {
+  // Auto-register function nodes when they are created
+  useAutoRegisterFunctions();
+
+  const handleOnPaneClick = useTriggerEvent('onPaneClick');
+
+  // Use specific hooks where available
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const onConnect = useDiagram((state) => state.onConnect);
+  const onEdgesChange = useDiagram((state) => state.onEdgesChange);
+  const onNodeDragEnd = useDiagram((state) => state.onNodeDragEnd);
+  const onNodeDragStart = useDiagram((state) => state.onNodeDragStart);
+  const onNodesChange = useDiagram((state) => state.onNodesChange);
+  const setNodes = useDiagram((state) => state.setNodes);
+  const diagramType = useDiagramType();
+  const contentHeights = useContentHeights();
+  const setShowEditEdge = useDiagram((state) => state.setSelectedEdge);
+  const isPannable = usePannable();
+
+  // Filter out hidden nodes for ReactFlow rendering
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(node => !node.data?.isHidden);
+  }, [nodes]);
+
+  // Filter out edges connected to hidden nodes
+  const visibleEdges = useMemo(() => {
+    const visibleNodeIds = new Set(visibleNodes.map(node => node.id));
+    return edges.filter(edge =>
+      visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)
+    );
+  }, [edges, visibleNodes]);
+
+  const { addNode } = useWorkflowNodeAction({
+    isReplacing: false,
+    variant: 'addParallelCol',
+    addInMiddle: false,
+    closeModal: () => setOpen(false),
+    direction: 'left',
+  });
+  const [activeItem, setActiveItem] = useState<IBlock | null>(null);
+  const [activeCard, setActiveCard] = useState<ICardNodeData | null>(null);
+  const { setNodeRef } = useDroppable({ id: 'main' });
+  const { open, onClick, setOpen } = useModalControls();
+
+  const closeModalsOnClickOutside: PaneMouseHandler = () => {
+    handleOnPaneClick();
+    setShowEditEdge(null);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 250,
+        distance: 5,
+      },
+      onActivation({ event }) {
+        event.stopPropagation();
+      },
+    }),
+  );
+
+  const { getLayoutedElements } = useElk();
+  const layoutDirection = useLayoutDirection();
+  const setLayoutDirection = useSetLayoutDirection();
+
+
+  useEffect(() => {
+    getLayoutedElements();
+
+    return () => { };
+  }, [nodes.length, edges.length, contentHeights, diagramType]);
+
+  // Listen for layout direction changes
+  useEffect(() => {
+    const handleLayoutDirectionChange = () => {
+      getLayoutedElements();
+    };
+
+    window.addEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+
+    return () => {
+      window.removeEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+    };
+  }, [getLayoutedElements]);
+
+  const { onDragEnd, onDragStart, onDragCancel } = useDragCallbacks({
+    setActiveItem,
+    setActiveCard,
+  });
+
+  const renderDynamicDiagram = () => {
+    if (diagramType === 'sequence') {
+      return (
+        <>
+          <SequenceDiagram sequenceNodes={visibleNodes} sequenceEdges={visibleEdges} />
+        </>
+      );
+    }
+
+    if (diagramType === 'arch') {
+      return <ArchDiagram archNodes={visibleNodes as any} archEdges={visibleEdges as any} />;
+    }
+
+    if (diagramType === 'stateMachine') {
+      return (
+        <>
+          <StateMachineDiagram stateNodes={visibleNodes} stateEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'systemFlow') {
+      return (
+        <>
+          <SystemFlowDiagram systemFlowNodes={visibleNodes} systemFlowEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'case') {
+      return (
+        <>
+          <UseCaseDiagram caseNodes={visibleNodes} caseEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'cloud-architecture') {
+      return (
+        <>
+          <CloudArchitectureDiagram initialNodes={visibleNodes as any} initialEdges={visibleEdges as any} />
+        </>
+      );
+    }
+    if (diagramType === 'collaboration') {
+      return (
+        <>
+          <CollaborationDiagram collabNodes={visibleNodes} collabEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'automation') {
+      return (
+        <>
+          <Box
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            className={className}
+          >
+            <Box
+              ref={setNodeRef}
+              sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+            >
+              <ReactFlow
+                panOnDrag={isPannable}
+                nodesDraggable={isPannable}
+                nodes={visibleNodes}
+                onNodesChange={onNodesChange}
+                edges={visibleEdges}
+                onEdgesChange={onEdgesChange}
+                fitView
+                onNodeDragStart={onNodeDragStart}
+                onNodeDragStop={onNodeDragEnd}
+                onConnect={onConnect}
+                connectionMode={ConnectionMode.Strict}
+                suppressContentEditableWarning
+                suppressHydrationWarning
+                onPaneClick={closeModalsOnClickOutside}
+                {...props}
+              />
+              {props.children}
+            </Box>
+          </Box>
+
+          <DragOverlay>
+            {activeItem ? (
+              <CardDataProvider nodeId={activeItem?.id}>
+                <BlockWrapper data={activeItem} />
+              </CardDataProvider>
+            ) : null}
+          </DragOverlay>
+
+          {showAutomationExecutionPanel && (
+            <AutomationExecutionPanel
+              nodes={visibleNodes as any}
+              edges={visibleEdges as any}
+              workflowId="automation-workflow"
+              onNodeUpdate={(nodeId, updatedData) => {
+                const updatedNodes = nodes.map(node =>
+                  node.id === nodeId
+                    ? { ...node, data: updatedData }
+                    : node
+                );
+                setNodes(updatedNodes);
+              }}
+            />
+          )}
+        </>
+      );
+    }
+    return (
+      <>
+        <Box
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+          className={className}
+        >
+          <Box
+            ref={setNodeRef}
+            sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+          >
+            <Fab
+              onClick={() => addNode('function')}
+              sx={{ position: 'fixed', top: 450, left: 0 }}
+            >
+              Add Function
+            </Fab>
+            <ReactFlow
+              panOnDrag={isPannable}
+              nodesDraggable={isPannable}
+              nodes={visibleNodes}
+              onNodesChange={onNodesChange}
+              edges={visibleEdges}
+              onEdgesChange={onEdgesChange}
+              fitView
+              onNodeDragStart={onNodeDragStart}
+              onNodeDragStop={onNodeDragEnd}
+              onConnect={onConnect}
+              connectionMode={ConnectionMode.Strict}
+              suppressContentEditableWarning
+              suppressHydrationWarning
+              onPaneClick={closeModalsOnClickOutside}
+              {...props}
+            />
+            {props.children}
+          </Box>
+        </Box>
+
+        <DragOverlay>
+          {activeItem ? (
+            <CardDataProvider nodeId={activeItem?.id}>
+              <BlockWrapper data={activeItem} />
+            </CardDataProvider>
+          ) : null}
+        </DragOverlay>
+      </>
+    );
+  };
+
+  return (
+    <DndContext
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      onDragCancel={onDragCancel}
+      sensors={sensors}
+    >
+      {renderDynamicDiagram()}
+    </DndContext>
+  );
+};
+
+export default DiagramContent;

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

@@ -0,0 +1,178 @@
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Edge, Background, BackgroundVariant } 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 {
+  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[];
+}
+
+// Internal component that exposes undo/redo functionality
+const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, { children?: React.ReactNode; className?: string; showAutomationExecutionPanel?: boolean }>(({ children, className, showAutomationExecutionPanel }, 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);
+
+  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,
+  }));
+
+  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;
+}
+
+export const DiagrammingPage = forwardRef<DiagrammingPageRef, DiagrammingPageProps>(({
+  diagramType,
+  defaultNodes,
+  defaultEdges,
+  onChange,
+  children,
+  workflowNodeContent,
+  renderAddNodeView,
+  getDefaultNodeData,
+  availableFunctions,
+  availableVariables,
+  id,
+  className,
+  conditionBuilderStates,
+  onNodeSelect: onNodeSelectProp,
+  enableNodeJsonPopover: enableNodeJsonPopoverProp,
+  showAutomationExecutionPanel
+}, 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}>
+          {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;