@flowuent-org/diagramming-core 1.4.0 → 1.4.1

package/packages/diagrams/project.json

@@ -0,0 +1,42 @@
+{
+  "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": "babel",
+        "assets": [
+          {
+            "glob": "packages/diagrams/README.md",
+            "input": ".",
+            "output": "."
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/diagrams/locales",
+            "output": "locales"
+          }
+        ],
+        "buildableProjectDepsInPackageJsonType": "peerDependencies"
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false
+        }
+      }
+    }
+  }
+}

package/packages/diagrams/rollup.config.js

@@ -0,0 +1,26 @@
+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
+
+  // Add the preserveDirectives plugin to the existing plugins
+  nxRollupOptions.plugins = [
+    ...(Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : []),
+    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,125 @@
+export * from './lib/externals';
+export * from './lib/i18n';
+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/ConnectionPoints';
+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 {
+  orderNodesByEdges,
+  findAllPaths,
+  getWorkflowExecutionOrder,
+  validateNodeGraph,
+  type NodeOrderOptions,
+  type NodeOrderResult,
+} from './lib/utils/nodeOrderByEdges';
+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';
+export * from './lib/components/automation';
+export * from './lib/types/automation-node-data-types';

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';

package/packages/diagrams/src/lib/assets/markers/markers.param.tsx

@@ -0,0 +1,101 @@
+import { Position } from '@xyflow/react';
+import { Markers } from './markers.type';
+
+export const orientMap: {
+  [key: string]: { refY: number; refX: number; idPathMap: any };
+} = {
+  [Position.Top]: {
+    refY: 0,
+    refX: 50,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 50 100 L 50 0 M 50 50 L 25 100 M 50 50 L 75 100 M 25 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M50 0 L50 100 M25 25 L75 25 M25 75 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M50 100 L50 0 M50 50 L25 100 M50 50 L75 100 M25 25 L75 25" />
+      ),
+      [Markers.One]: <path d="M 50 100 L 50 0 M 25 25 L 75 25" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L50 100 M50 50 L25 100 M50 50 L75 100 M50 50 a25 25 0 1 1 1 0 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L50 0 M25 25 L75 25 M50 50 a25 25 0 1 1 -1 0 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 50 0 M 50 50 a 25 25 0 1 1 -1 0 Z" />,
+    },
+  },
+  [Position.Bottom]: {
+    refY: 100,
+    refX: 50,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 50 0 L 50 100 M 50 50 L 25 0 M 50 50 L 75 0 M 25 75" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M50 0 L50 100 M25 25 L75 25 M25 75 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M50 0 L50 100 M50 50 L25 0 M50 50 L75 0 M25 75 L75 75" />
+      ),
+      [Markers.One]: <path d="M 50 0 L 50 100 M 25 75 L 75 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L50 0 M50 50 L25 0 M50 50 L75 0 M50 50 a25 25 0 1 1 -1 0 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L50 100 M25 75 L75 75 M50 50 a25 25 0 1 1 1 0 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 50 100 M 50 50 a 25 25 0 1 1 1 0 Z" />,
+    },
+  },
+  [Position.Left]: {
+    refY: 50,
+    refX: 0,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 100 50 L 0 50 M 50 50 L 100 25 M 50 50 L 100 75 M 25 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M0 50 L100 50 M25 25 L 25 75 M75 25 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M100 50 L0 50 M50 50 L 100 25 M50 50 L100 75 M25 25 L25 75" />
+      ),
+      [Markers.One]: <path d="M 0 50 L 100 50 M 75 25 L 75 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L100 50 M50 50 L 100 25 M50 50 L100 75 M50 50 a25 25 0 1 1 0 -1 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L100 50 M75 25 L 75 75 M50 50 a25 25 0 1 1 0 -1 Z" />
+      ),
+      [Markers.Zero]: (
+        <path d="M 50 50 L 100 50 M 50 50 a 25 25 0 1 1 0 -1 Z" />
+      ),
+    },
+  },
+  [Position.Right]: {
+    refY: 50,
+    refX: 100,
+    idPathMap: {
+      [Markers.Many]: (
+        <path d="M 0 50 L 100 50 M 50 50 L 0 25 M 50 50 L 0 75 M 75 25" />
+      ),
+      [Markers.OneAndOneOnly]: (
+        <path d="M0 50 L100 50 M25 25 L 25 75 M75 25 L75 75" />
+      ),
+      [Markers.OneOrMany]: (
+        <path d="M0 50 L100 50 M50 50 L 0 25 M50 50 L0 75 M75 25 L75 75" />
+      ),
+      [Markers.One]: <path d="M 100 50 L 0 50 M 25 25 L 25 75" />,
+      [Markers.ZeroOrMany]: (
+        <path d="M50 50 L0 50 M50 50 L 0 25 M50 50 L0 75 M50 50 a25 25 0 1 1 0 1 Z" />
+      ),
+      [Markers.ZeroOrOne]: (
+        <path d="M50 50 L0 50 M25 25 L 25 75 M50 50 a25 25 0 1 1 0 1 Z" />
+      ),
+      [Markers.Zero]: <path d="M 50 50 L 0 50 M 50 50 a 25 25 0 1 1 0 1 Z" />,
+    },
+  },
+};

package/packages/diagrams/src/lib/assets/markers/markers.type.ts

@@ -0,0 +1,10 @@
+export enum Markers {
+  One = 'one',
+  Zero = 'zero',
+  Many = 'many',
+  OneAndOneOnly = 'one and one only',
+  OneOrMany = 'one or many',
+  ZeroOrOne = 'zero or one',
+  ZeroOrMany = 'zero or many',
+
+}

package/packages/diagrams/src/lib/atoms/ActorNode.tsx

@@ -0,0 +1,124 @@
+import React, { memo } from 'react';
+import { Handle, NodeProps, Position, NodeResizeControl } from '@xyflow/react';
+import { ActorNodeData } from '../types/shared-node-types';
+import { Box, Typography } from '@mui/material';
+import ResizeIcon from '../components/ResizeIcon';
+
+const controlStyle = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'nw-resize',
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+const ActorNode: React.FC<NodeProps> = (props) => {
+    const { data, selected } = props as NodeProps & { data: ActorNodeData };
+    const color = data.color || '#61dafb';
+    const isBusiness = data.style === 'business';
+    const labelLength = data.label.length;
+
+    // Flexible dimensions calculation
+    const getFlexibleDimensions = () => {
+        // 1. INFINITE RESIZE: Truly infinite limits
+        if (data.infiniteResize === true) {
+            return {
+                minWidth: 20,
+                minHeight: 30,
+                maxWidth: 50000, // Effectively infinite
+                maxHeight: 50000 // Effectively infinite
+            };
+        }
+
+        // 2. CUSTOM RESTRICTIONS: User-defined limits
+        if (data.customRestrictions) {
+            const baseMinWidth = Math.max(labelLength * 10 + 32, data.customRestrictions.minWidth || 40);
+            return {
+                minWidth: baseMinWidth,
+                minHeight: data.customRestrictions.minHeight || 60,
+                maxWidth: data.customRestrictions.maxWidth || 50000, // Default to infinite if not specified
+                maxHeight: data.customRestrictions.maxHeight || 50000, // Default to infinite if not specified
+            };
+        }
+
+        // 3. DEFAULT RESTRICTIONS: Much more generous standard actor sizing
+        const baseMinWidth = Math.max(labelLength * 10 + 32, 40);
+        return {
+            minWidth: baseMinWidth,
+            minHeight: 60,
+            maxWidth: 25000, // Much larger default limits
+            maxHeight: 25000, // Much larger default limits
+        };
+    };
+
+    const { minWidth, minHeight, maxWidth, maxHeight } = getFlexibleDimensions();
+    const calculatedWidth = Math.max(data.width || minWidth, minWidth);
+    const calculatedHeight = Math.max(data.height || minHeight, minHeight);
+
+    return (
+        <>
+            {/* Conditional NodeResizeControl */}
+            {data.resizable !== false && (
+                <NodeResizeControl
+                    style={controlStyle}
+                    minWidth={minWidth}
+                    minHeight={minHeight}
+                    maxWidth={maxWidth}
+                    maxHeight={maxHeight}
+                >
+                    <ResizeIcon
+                        size={18}
+                        color={color}
+                        hoverColor={color === '#61dafb' ? '#4fc3f7' : `${color}dd`}
+                    />
+                </NodeResizeControl>
+            )}
+
+            <Box sx={{
+                textAlign: 'center',
+                width: calculatedWidth,
+                height: calculatedHeight,
+                padding: 0,
+                margin: 0,
+                position: 'relative',
+                border: '2px solid #61dafb',
+                backgroundColor: '#4d4d4d',
+                borderRadius: 1
+            }}>
+                {/* Stickman or Business Actor SVG */}
+                <svg width={calculatedWidth} height={calculatedHeight} viewBox="0 0 40 60">
+                    <circle cx="20" cy="10" r="8" stroke={color} strokeWidth="2" fill="#4d4d4d" />
+                    {isBusiness && (
+                        <>
+                            <line x1="16" y1="6" x2="24" y2="14" stroke={color} strokeWidth="2" />
+                            <line x1="24" y1="6" x2="16" y2="14" stroke={color} strokeWidth="2" />
+                        </>
+                    )}
+                    <line x1="20" y1="18" x2="20" y2="38" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="24" x2="8" y2="32" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="24" x2="32" y2="32" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="38" x2="8" y2="52" stroke={color} strokeWidth="2" />
+                    <line x1="20" y1="38" x2="32" y2="52" stroke={color} strokeWidth="2" />
+                </svg>
+                <Typography variant="body2" sx={{ fontWeight: selected ? 'bold' : 'normal', whiteSpace: 'nowrap', color: '#ffffff' }}>
+                    {data.label}
+                </Typography>
+                <Handle
+                    id="right"
+                    type="source"
+                    position={Position.Right}
+                />
+                <Handle
+                    id="left"
+                    type="target"
+                    position={Position.Left}
+                />
+            </Box>
+        </>
+    );
+};
+
+export default memo(ActorNode); 

package/packages/diagrams/src/lib/atoms/AddNodeAnchor.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react';
+import Button from '@mui/material/Button';
+import { useNodeId } from '../contexts/CardDataProvider';
+import { getNewNodeEdge } from '../utils/add-new-node';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { alpha } from '@mui/material/styles';
+import { useDiagram } from '../contexts/DiagramProvider';
+
+export type Direction = 'bottom' | 'right';
+
+export interface AddNodeAnchorProps {
+  direction: Direction;
+}
+
+const AddNodeAnchor: React.FC<AddNodeAnchorProps> = React.memo(
+  ({ direction }) => {
+    const nodeId = useNodeId();
+    // Use the useDiagram hook to access actions
+    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+    const setPannable = useDiagram((state) => state.setPannable);
+
+    const { getNodes, setNodes, setEdges } = useCustomReactFlow();
+
+    const closeToolbar = useCallback(() => {
+      setSelectedNode(null);
+      setPannable(true);
+    }, [setSelectedNode, setPannable]);
+
+    const addNode = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>, direction: Direction) => {
+        e.stopPropagation();
+        const nodes = getNodes();
+        const curNode = nodes.find(({ id }) => nodeId === id);
+        if (!curNode) return;
+
+        const offset =
+          direction === 'bottom' ? curNode.height! + 50 : curNode.width! + 50;
+        const positionKey = direction === 'bottom' ? 'offsetY' : 'offsetX';
+        const { edge, node } = getNewNodeEdge({
+          pos: direction,
+          curr: curNode,
+        });
+
+        setNodes((prevNodes) => [...prevNodes, node]);
+        // Automation nodes වලට automatic edge connections වැළැක්වීම
+        const isAutomationNodeType = (nodeType: string | undefined) => {
+          return nodeType && nodeType.startsWith('Automation');
+        };
+        const isCurrentNodeAutomation = isAutomationNodeType(curNode.type);
+        const isNewNodeAutomation = isAutomationNodeType(node.type);
+        if ((direction === 'bottom' || curNode.parentId) && !isCurrentNodeAutomation && !isNewNodeAutomation) {
+          setEdges((prevEdges) => [...prevEdges, edge]);
+        }
+        closeToolbar();
+      },
+      [setNodes, setEdges, closeToolbar],
+    );
+
+    const onClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        addNode(e, direction);
+      },
+      [direction],
+    );
+
+    return (
+      <Button
+        onClick={onClick}
+        sx={{
+          position: 'absolute',
+          width: '8px',
+          height: '8px',
+          minWidth: '8px',
+          minHeight: '8px',
+          padding: '7px 6px 6px 6px',
+          borderRadius: '50%',
+          border: 'none',
+          backgroundColor: '#0050ff',
+          fontSize: '13px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: '#fff',
+          '&:hover': {
+            backgroundColor: alpha('#0050ff', 0.8),
+          },
+          ...(direction === 'bottom'
+            ? {
+              bottom: '-6px',
+              left: '75%',
+            }
+            : {
+              top: '15%',
+              right: '-6px',
+            }),
+        }}
+      >
+        +
+      </Button>
+    );
+  },
+);
+export default AddNodeAnchor;