@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/UNDO_REDO_API.md

@@ -0,0 +1,306 @@
+# Undo/Redo API Documentation
+
+## Overview
+
+The diagramming library provides comprehensive undo/redo functionality for all diagram types, including automation diagrams. This document explains how to expose and use undo/redo controls externally when using the library.
+
+## How Undo/Redo Works
+
+### Internal Implementation
+
+1. **History Management**: The system maintains a `history` array and `historyIndex` in the DiagramStore
+2. **Change Tracking**: Every change to nodes/edges is tracked and stored as `HistoryEvent` objects
+3. **State Restoration**: Changes are applied in reverse (undo) or forward (redo) direction
+4. **Keyboard Shortcuts**: Ctrl+Z (undo) and Ctrl+Y/Cmd+Shift+Z (redo) work automatically
+
+### Key Components
+
+- **DiagramProvider**: Contains the main store with `undo()` and `redo()` methods
+- **History System**: Tracks all changes with forward/backward operations
+- **DownloadPanel**: Built-in undo/redo buttons (can be hidden)
+
+## External Undo/Redo Control
+
+### Method 1: Using Ref-based API (Recommended)
+
+The `DiagrammingPage` component now supports a ref that exposes undo/redo functionality:
+
+```typescript
+import React, { useRef } from 'react';
+import { DiagrammingPage, DiagrammingPageRef } from '@flowuent-org/diagrams';
+
+const MyComponent = () => {
+  const diagramRef = useRef<DiagrammingPageRef>(null);
+
+  const handleUndo = () => {
+    if (diagramRef.current?.canUndo()) {
+      diagramRef.current.undo();
+    }
+  };
+
+  const handleRedo = () => {
+    if (diagramRef.current?.canRedo()) {
+      diagramRef.current.redo();
+    }
+  };
+
+  return (
+    <div>
+      {/* Your external undo/redo buttons */}
+      <button onClick={handleUndo} disabled={!diagramRef.current?.canUndo()}>
+        Undo
+      </button>
+      <button onClick={handleRedo} disabled={!diagramRef.current?.canRedo()}>
+        Redo
+      </button>
+
+      {/* The diagram */}
+      <DiagrammingPage
+        ref={diagramRef}
+        diagramType="automation"
+        defaultNodes={nodes}
+        defaultEdges={edges}
+        availableFunctions={[]}
+        id={1}
+      />
+    </div>
+  );
+};
+```
+
+### Available Methods
+
+The `DiagrammingPageRef` interface provides these methods:
+
+```typescript
+interface DiagrammingPageRef {
+  undo: () => void;                    // Perform undo operation
+  redo: () => void;                    // Perform redo operation
+  canUndo: () => boolean;              // Check if undo is available
+  canRedo: () => boolean;              // Check if redo is available
+  reset: () => void;                   // Clear the diagram
+  getHistoryLength: () => number;      // Get total history length
+  getHistoryIndex: () => number;       // Get current history index
+}
+```
+
+### Method 2: Using DownloadPanel with Hidden Built-in Controls
+
+You can hide the built-in undo/redo buttons and use your own:
+
+```typescript
+import { DiagrammingPage, DownloadPanel } from '@flowuent-org/diagrams';
+
+const MyComponent = () => {
+  return (
+    <DiagrammingPage
+      diagramType="automation"
+      defaultNodes={nodes}
+      defaultEdges={edges}
+      availableFunctions={[]}
+      id={1}
+    >
+      {/* Hide built-in undo/redo buttons */}
+      <DownloadPanel 
+        hideUndo={true} 
+        hideRedo={true}
+        position="top-left"
+      />
+      
+      {/* Your custom controls */}
+      <YourCustomControls />
+    </DiagrammingPage>
+  );
+};
+```
+
+## Complete Example
+
+Here's a complete example showing how to implement external undo/redo controls:
+
+```typescript
+import React, { useRef, useState, useEffect } from 'react';
+import { Button, Box, Typography, IconButton } from '@mui/material';
+import { UndoIcon, RedoIcon, ClearIcon } from '@mui/icons-material';
+import { DiagrammingPage, DiagrammingPageRef } from '@flowuent-org/diagrams';
+import { ICardNode } from '@flowuent-org/diagrams';
+import { Edge } from '@xyflow/react';
+
+const AutomationDiagramWithExternalControls: React.FC = () => {
+  const diagramRef = useRef<DiagrammingPageRef>(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [historyInfo, setHistoryInfo] = useState({ index: 0, length: 0 });
+
+  // Sample automation diagram data
+  const defaultNodes: ICardNode[] = [
+    {
+      id: '1',
+      type: 'AutomationStartNode',
+      position: { x: 100, y: 100 },
+      data: { label: 'Start Process' }
+    },
+    {
+      id: '2',
+      type: 'AutomationApiNode',
+      position: { x: 300, y: 100 },
+      data: { label: 'API Call' }
+    },
+    {
+      id: '3',
+      type: 'AutomationEndNode',
+      position: { x: 500, y: 100 },
+      data: { label: 'End Process' }
+    }
+  ];
+
+  const defaultEdges: Edge[] = [
+    { id: 'e1-2', source: '1', target: '2' },
+    { id: 'e2-3', source: '2', target: '3' }
+  ];
+
+  const updateButtonStates = () => {
+    if (diagramRef.current) {
+      setCanUndo(diagramRef.current.canUndo());
+      setCanRedo(diagramRef.current.canRedo());
+      setHistoryInfo({
+        index: diagramRef.current.getHistoryIndex(),
+        length: diagramRef.current.getHistoryLength()
+      });
+    }
+  };
+
+  const handleUndo = () => {
+    if (diagramRef.current?.canUndo()) {
+      diagramRef.current.undo();
+      updateButtonStates();
+    }
+  };
+
+  const handleRedo = () => {
+    if (diagramRef.current?.canRedo()) {
+      diagramRef.current.redo();
+      updateButtonStates();
+    }
+  };
+
+  const handleReset = () => {
+    diagramRef.current?.reset();
+    updateButtonStates();
+  };
+
+  // Update button states when diagram changes
+  useEffect(() => {
+    const interval = setInterval(updateButtonStates, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* External Controls Toolbar */}
+      <Box sx={{ 
+        p: 2, 
+        bgcolor: '#f5f5f5', 
+        borderBottom: '1px solid #ddd',
+        display: 'flex',
+        gap: 2,
+        alignItems: 'center',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      }}>
+        <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+          Automation Diagram Controls
+        </Typography>
+        
+        <Box sx={{ display: 'flex', gap: 1, ml: 2 }}>
+          <IconButton 
+            onClick={handleUndo}
+            disabled={!canUndo}
+            sx={{ 
+              bgcolor: canUndo ? '#1976d2' : '#e0e0e0',
+              color: canUndo ? 'white' : '#9e9e9e',
+              '&:hover': {
+                bgcolor: canUndo ? '#1565c0' : '#e0e0e0'
+              }
+            }}
+          >
+            <UndoIcon />
+          </IconButton>
+          
+          <IconButton 
+            onClick={handleRedo}
+            disabled={!canRedo}
+            sx={{ 
+              bgcolor: canRedo ? '#1976d2' : '#e0e0e0',
+              color: canRedo ? 'white' : '#9e9e9e',
+              '&:hover': {
+                bgcolor: canRedo ? '#1565c0' : '#e0e0e0'
+              }
+            }}
+          >
+            <RedoIcon />
+          </IconButton>
+          
+          <IconButton 
+            onClick={handleReset}
+            sx={{ 
+              bgcolor: '#d32f2f',
+              color: 'white',
+              '&:hover': {
+                bgcolor: '#c62828'
+              }
+            }}
+          >
+            <ClearIcon />
+          </IconButton>
+        </Box>
+
+        <Typography variant="body2" sx={{ ml: 'auto', color: '#666' }}>
+          History: {historyInfo.index} / {historyInfo.length}
+        </Typography>
+      </Box>
+
+      {/* Diagram */}
+      <Box sx={{ flex: 1 }}>
+        <DiagrammingPage
+          ref={diagramRef}
+          diagramType="automation"
+          defaultNodes={defaultNodes}
+          defaultEdges={defaultEdges}
+          availableFunctions={[]}
+          id={1}
+          onChange={() => {
+            // Update button states when diagram changes
+            setTimeout(updateButtonStates, 100);
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default AutomationDiagramWithExternalControls;
+```
+
+## Integration Steps for Your Team Member
+
+1. **Install the updated library** with the new ref-based API
+2. **Create a ref** to the DiagrammingPage component
+3. **Add external buttons** that call the ref methods
+4. **Handle state updates** to enable/disable buttons appropriately
+5. **Test the functionality** with various diagram operations
+
+## Key Benefits
+
+- **Full Control**: Complete control over undo/redo UI and behavior
+- **State Awareness**: Know when undo/redo is available
+- **History Information**: Access to history length and current index
+- **Keyboard Support**: Built-in keyboard shortcuts still work
+- **Flexible Integration**: Works with any UI framework or custom components
+
+## Notes
+
+- The undo/redo functionality works automatically for all diagram types
+- History is maintained per diagram instance
+- Changes are tracked for node/edge additions, deletions, modifications, and movements
+- The system prevents infinite loops and handles edge cases gracefully
+- Keyboard shortcuts (Ctrl+Z, Ctrl+Y) work alongside external controls

package/packages/diagrams/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@flowuent-org/diagrams",
+  "version": "0.2.2",
+  "scripts": {
+    "build": "nx build diagrams",
+    "generate-barrels": "ctix build"
+  },
+  "dependencies": {
+    "@mui/material": "^6.1.6",
+    "@types/js-beautify": "^1.14.3",
+    "core-js": "^3.38.1",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.10.0",
+    "js-beautify": "^1.15.1",
+    "prettier": "^3.3.3",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.7",
+    "ctix": "^2.6.4",
+    "nx": "^20.3.1"
+  },
+  "main": "./index.esm.js",
+  "module": "./index.esm.js",
+  "types": "./index.esm.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.esm.js",
+      "types": "./index.esm.d.ts"
+    },
+    "./styles": "./index.esm.css"
+  },
+  "files": [
+    "index.esm.js",
+    "index.esm.d.ts",
+    "index.esm.css",
+    "validationSchema.esm.js",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/packages/diagrams/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "diagrams",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/diagrams/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/diagrams",
+        "tsConfig": "packages/diagrams/tsconfig.lib.json",
+        "project": "packages/diagrams/package.json",
+        "entryFile": "packages/diagrams/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "packages/diagrams/rollup.config.js",
+        "compiler": "swc",
+        "skipTypeCheck": false,
+        "assets": [
+          {
+            "glob": "packages/diagrams/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ],
+        "buildableProjectDepsInPackageJsonType": "peerDependencies"
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false
+        }
+      }
+    }
+  }
+}

package/packages/diagrams/rollup.config.js

@@ -0,0 +1,31 @@
+const getRollupOptions = require('@nx/react/plugins/bundle-rollup');
+const preserveDirectives = require('rollup-preserve-directives').default;
+
+module.exports = (options) => {
+  // Get the default Nx Rollup options
+  const nxRollupOptions = getRollupOptions(options);
+
+  // Enable tree shaking
+  nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
+
+  // Filter out rollup-plugin-typescript2 (rpt2) which has path issues on Windows
+  // But keep @rollup/plugin-typescript if it exists
+  nxRollupOptions.plugins = (Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : [])
+    .filter(plugin => {
+      // Remove rollup-plugin-typescript2 (rpt2) - it has cross-platform path issues
+      return !(plugin && plugin.name === 'rpt2');
+    });
+
+  // Add the preserveDirectives plugin  
+  nxRollupOptions.plugins.push(preserveDirectives());
+
+  // Externalize MUI packages
+  nxRollupOptions.external = [
+    ...(Array.isArray(nxRollupOptions.external) ? nxRollupOptions.external : []),
+    '@mui/material',
+    '@mui/icons-material',
+    /^@mui\/icons-material\/.*/,
+  ];
+
+  return nxRollupOptions;
+};

package/packages/diagrams/src/DiagramFlow.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function DiagramFlow() {
+  return (
+    <div>DiagramFlow</div>
+  )
+}

package/packages/diagrams/src/declarations.d.ts

@@ -0,0 +1,7 @@
+declare module 'react-syntax-highlighter' {
+  export const Prism: any;
+}
+
+declare module 'react-syntax-highlighter/dist/esm/styles/prism' {
+  export const materialDark: any;
+}

package/packages/diagrams/src/index.ts

@@ -0,0 +1,113 @@
+export * from './lib/externals';
+export * from './lib/templates/systemFlow';
+export * from './lib/theme';
+export * from './lib/atoms/AddNodeAnchor';
+export * from './lib/atoms/AddParallelColButton';
+export * from './lib/atoms/BendpointNode';
+export * from './lib/atoms/CardBlockTypeSelector';
+export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/FloatingConnectionLine';
+export * from './lib/atoms/MarkerSelector';
+export * from './lib/atoms/PropertyInput';
+export * from './lib/atoms/StyledBox';
+export * from './lib/contexts/CardDataProvider';
+export * from './lib/contexts/DiagramProvider';
+export * from './lib/contexts/diagramStoreTypes';
+export * from './lib/contexts/onConnect';
+export * from './lib/contexts/onDragStart';
+export * from './lib/contexts/onNodeDragEnd';
+export * from './lib/contexts/onNodesChange';
+export * from './lib/contexts/setContentHeight';
+export * from './lib/contexts/setDiagramType';
+export * from './lib/contexts/setEdges';
+export * from './lib/contexts/setEdgeShapeType';
+export * from './lib/contexts/setNodes';
+export * from './lib/contexts/setNodeSetting';
+export * from './lib/contexts/setPannable';
+export * from './lib/contexts/setSelectedEdge';
+export * from './lib/contexts/setSelectedNode';
+export * from './lib/contexts/undo';
+export * from './lib/contexts/updateNodeSetting';
+export * from './lib/hooks/customUseReactFlow';
+export * from './lib/hooks/updateNodes';
+export * from './lib/hooks/useDragCallbacks';
+export * from './lib/hooks/useModalControls';
+export * from './lib/hooks/useWorkflowNodeActiont';
+export * from './lib/hooks/useAutoRegisterFunctions';
+export * from './lib/molecules/AddingBlock';
+export * from './lib/molecules/animated-add-button';
+export * from './lib/molecules/Block';
+export * from './lib/molecules/BlockProvider';
+export * from './lib/molecules/BlockWrapper';
+export * from './lib/molecules/DraggablePane';
+export * from './lib/molecules/EntityNodeBlocks';
+export * from './lib/molecules/json-viewer';
+export * from './lib/molecules/SideHandles';
+export * from './lib/molecules/StencilItem';
+export * from './lib/molecules/WorkflowNodeActionButtons';
+export * from './lib/organisms/AddNodeView';
+export * from './lib/organisms/DownloadPanel';
+export * from './lib/organisms/EdgeModal';
+export * from './lib/organisms/NodeContextMenu';
+export * from './lib/organisms/SmartDynamicForm';
+export * from './lib/organisms/Stencil';
+export * from './lib/organisms/UseDiagramStore';
+export * from './lib/organisms/ConditionRuleGroup';
+export * from './lib/organisms/WorkflowNode';
+export * from './lib/templates/DiagramContainer';
+export * from './lib/templates/DiagramContent';
+export * from './lib/templates/Diagramming';
+export type { DiagrammingPageRef } from './lib/templates/Diagramming';
+export * from './lib/templates/PageLinks';
+export * from './lib/types/card-node';
+export * from './lib/types/collaboration-types';
+export * from './lib/types/colors';
+export * from './lib/types/edge-types';
+export * from './lib/types/hooks.types';
+export * from './lib/types/node-types';
+export * from './lib/types/SmartDynamicFormField';
+export * from './lib/types/stencil-item';
+export * from './lib/types/structures';
+export * from './lib/types/workflow-content-dynamic-form-type';
+export * from './lib/types/FunctionSignature';
+export * from './lib/utils/add-new-block';
+export * from './lib/utils/add-new-node';
+export * from './lib/utils/addToHistory';
+export * from './lib/utils/closestPoint';
+export * from './lib/utils/color-options';
+export * from './lib/utils/compress-img';
+export * from './lib/utils/constant-lengths';
+export * from './lib/utils/create-updated';
+export * from './lib/utils/createHistoryChange';
+export * from './lib/utils/edge-hooks';
+export * from './lib/utils/elkLayout';
+export * from './lib/utils/event-hooks';
+export * from './lib/utils/event-store';
+export * from './lib/utils/flow-node-hooks';
+export * from './lib/utils/flow-to-js';
+export * from './lib/utils/helpers.types';
+export * from './lib/utils/logger';
+export * from './lib/utils/model-hooks';
+export * from './lib/utils/node-hooks';
+export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
+export * from './lib/utils/object';
+export * from './lib/utils/nodeutils';
+export * from './lib/utils/utilities';
+export * from './lib/utils/vhToPixels';
+export * from './lib/assets/markers/markers.param';
+export * from './lib/assets/markers/markers.type';
+export * from './lib/organisms/Card/card.params';
+export * from './lib/organisms/Card/card.types';
+export * from './lib/organisms/Card/EntityNode';
+export * from './lib/organisms/CustomEdge/custom-edge-generator';
+export * from './lib/organisms/CustomEdge/custom-edge.params';
+export * from './lib/organisms/CustomEdge/custom-edge.type';
+export * from './lib/organisms/PropertiesPane';
+export * from './lib/organisms/HistoryPane';
+//export * from './lib/types/workflow-node-data-types';
+export * from './lib/templates/node-forms/NodeForm';
+export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
+export type {
+  AutomationLog,
+  AutomationResult,
+} from './lib/utils/AutomationExecutionEngine';

package/packages/diagrams/src/index.ts.bak

@@ -0,0 +1,99 @@
+export * from './lib/externals';
+export * from './lib/theme';
+export * from './lib/atoms/AddNodeAnchor';
+export * from './lib/atoms/AddParallelColButton';
+export * from './lib/atoms/BendpointNode';
+export * from './lib/atoms/CardBlockTypeSelector';
+export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/editable-title';
+export * from './lib/atoms/FloatingConnectionLine';
+export * from './lib/atoms/LazyIcon';
+export * from './lib/atoms/MarkerSelector';
+export * from './lib/atoms/PropertyInput';
+export * from './lib/atoms/StyledBox';
+export * from './lib/contexts/CardDataProvider';
+export * from './lib/contexts/DiagramProvider';
+export * from './lib/contexts/diagramStoreTypes';
+export * from './lib/contexts/onBeforeBendPointCreation';
+export * from './lib/contexts/onConnect';
+export * from './lib/contexts/onDragStart';
+export * from './lib/contexts/onNodeDragEnd';
+export * from './lib/contexts/onNodesChange';
+export * from './lib/contexts/setContentHeight';
+export * from './lib/contexts/setDiagramType';
+export * from './lib/contexts/setEdges';
+export * from './lib/contexts/setEdgeShapeType';
+export * from './lib/contexts/setNodes';
+export * from './lib/contexts/setNodeSetting';
+export * from './lib/contexts/setPannable';
+export * from './lib/contexts/setSelectedEdge';
+export * from './lib/contexts/setSelectedNode';
+export * from './lib/contexts/undo';
+export * from './lib/contexts/updateNodeSetting';
+export * from './lib/hooks/customUseReactFlow';
+export * from './lib/hooks/updateNodes';
+export * from './lib/hooks/useDragCallbacks';
+export * from './lib/hooks/useModalControls';
+export * from './lib/hooks/useWorkflowNodeActiont';
+export * from './lib/molecules/AddingBlock';
+export * from './lib/molecules/animated-add-button';
+export * from './lib/molecules/Block';
+export * from './lib/molecules/BlockProvider';
+export * from './lib/molecules/BlockWrapper';
+export * from './lib/molecules/DraggablePane';
+export * from './lib/molecules/EntityNodeBlocks';
+export * from './lib/molecules/json-viewer';
+export * from './lib/molecules/SideHandles';
+export * from './lib/molecules/StencilItem';
+export * from './lib/molecules/WorkflowNodeActionButtons';
+export * from './lib/organisms/AddNodeView';
+export * from './lib/organisms/DownloadPanel';
+export * from './lib/organisms/EdgeModal';
+export * from './lib/organisms/NodeContextMenu';
+export * from './lib/organisms/SmartDynamicForm';
+export * from './lib/organisms/Stencil';
+export * from './lib/organisms/UseDiagramStore';
+export * from './lib/organisms/WorkflowNode';
+export * from './lib/templates/DiagramContainer';
+export * from './lib/templates/DiagramContent';
+export * from './lib/templates/Diagramming';
+export * from './lib/templates/PageLinks';
+export * from './lib/types/card-node';
+export * from './lib/types/colors';
+export * from './lib/types/edge-types';
+export * from './lib/types/hooks.types';
+export * from './lib/types/node-types';
+export * from './lib/types/SmartDynamicFormField';
+export * from './lib/types/stencil-item';
+export * from './lib/types/structures';
+export * from './lib/types/workflow-content-dynamic-form-type';
+export * from './lib/utils/add-new-block';
+export * from './lib/utils/add-new-node';
+export * from './lib/utils/addToHistory';
+export * from './lib/utils/closestPoint';
+export * from './lib/utils/color-options';
+export * from './lib/utils/compress-img';
+export * from './lib/utils/constant-lengths';
+export * from './lib/utils/create-updated';
+export * from './lib/utils/createHistoryChange';
+export * from './lib/utils/edge-hooks';
+export * from './lib/utils/elkLayout';
+export * from './lib/utils/event-hooks';
+export * from './lib/utils/event-store';
+export * from './lib/utils/flow-node-hooks';
+export * from './lib/utils/helpers.types';
+export * from './lib/utils/logger';
+export * from './lib/utils/model-hooks';
+export * from './lib/utils/node-hooks';
+export * from './lib/utils/object';
+export * from './lib/utils/nodeutils';
+export * from './lib/utils/utilities';
+export * from './lib/utils/vhToPixels';
+export * from './lib/assets/markers/markers.param';
+export * from './lib/assets/markers/markers.type';
+export * from './lib/organisms/Card/card.params';
+export * from './lib/organisms/Card/card.types';
+export * from './lib/organisms/Card/EntityNode';
+export * from './lib/organisms/CustomEdge/custom-edge-generator';
+export * from './lib/organisms/CustomEdge/custom-edge.params';
+export * from './lib/organisms/CustomEdge/custom-edge.type';