@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/project.json

@@ -1,42 +0,0 @@
-{
-  "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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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 * 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

@@ -1,99 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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;