@flowuent-org/diagramming-core 1.1.9 → 1.2.1

package/package.json

@@ -1,116 +1,116 @@
-{
-  "name": "@flowuent-org/diagramming-core",
-  "version": "1.1.9",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev-diagramming": "nx serve diagramming",
-    "build-diagrams": "nx build diagrams"
-  },
-  "dependencies": {
-    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/modifiers": "^8.0.0",
-    "@dnd-kit/sortable": "^9.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@fontsource/roboto": "^5.1.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@mui/base": "5.0.0-beta.62",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
-    "@mui/types": "^7.2.19",
-    "@mui/x-data-grid": "^7.22.3",
-    "@tabler/icons-react": "^3.22.0",
-    "@welldone-software/why-did-you-render": "^8.0.3",
-    "@xyflow/react": "^12.3.5",
-    "axios": "^1.7.8",
-    "elkjs": "^0.9.3",
-    "file-saver": "^2.0.5",
-    "formik": "^2.4.6",
-    "framer-motion": "^11.11.17",
-    "gapi-script": "^1.2.0",
-    "html-to-image": "^1.11.11",
-    "i18next": "^24.0.2",
-    "immer": "^10.1.1",
-    "jotai": "^2.10.3",
-    "js-beautify": "^1.15.1",
-    "lodash": "^4.17.21",
-    "nanoid": "^5.0.9",
-    "react": "19.0.0",
-    "react-color": "^2.19.3",
-    "react-dnd": "^16.0.1",
-    "react-dom": "19.0.0",
-    "react-from-json": "^0.8.0",
-    "react-hook-form": "^7.53.2",
-    "react-i18next": "^15.1.2",
-    "react-icons": "^5.3.0",
-    "react-json-view": "^1.21.3",
-    "react-rnd": "^10.4.13",
-    "react-router-dom": "^7.0.1",
-    "react-syntax-highlighter": "^15.6.1",
-    "reactflow": "^11.11.4",
-    "tslib": "^2.8.1",
-    "use-undo": "^1.1.1",
-    "uuid": "^11.1.0",
-    "xlsx": "^0.18.5",
-    "yup": "^1.4.0",
-    "zustand": "^5.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@nx/cypress": "20.6.4",
-    "@nx/eslint": "20.6.4",
-    "@nx/eslint-plugin": "20.6.4",
-    "@nx/js": "20.6.4",
-    "@nx/react": "20.6.4",
-    "@nx/rollup": "20.6.4",
-    "@nx/vite": "20.6.4",
-    "@nx/web": "20.6.4",
-    "@nx/webpack": "20.6.4",
-    "@nx/workspace": "20.6.4",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "@svgr/rollup": "^8.1.0",
-    "@svgr/webpack": "^8.1.0",
-    "@swc-node/register": "~1.10.9",
-    "@swc/cli": "~0.5.1",
-    "@swc/core": "~1.9.3",
-    "@swc/helpers": "~0.5.15",
-    "@testing-library/react": "16.1.0",
-    "@types/file-saver": "^2.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/js-beautify": "^1.14.3",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-color": "^3.0.12",
-    "@types/react-dom": "18.3.1",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.6",
-    "@vitest/ui": "^2.1.6",
-    "eslint": "~9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "jsdom": "~25.0.1",
-    "nx": "20.6.4",
-    "prettier": "^3.4.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "swc-loader": "0.1.15",
-    "typescript": "~5.7.2",
-    "vite": "^6.3.6",
-    "vitest": "^2.1.6",
-    "webpack-cli": "^5.1.4"
-  }
-}
+{
+  "name": "@flowuent-org/diagramming-core",
+  "version": "1.2.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev-diagramming": "nx serve diagramming",
+    "build-diagrams": "nx build diagrams"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^8.0.0",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/roboto": "^5.1.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@mui/base": "5.0.0-beta.62",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/types": "^7.2.19",
+    "@mui/x-data-grid": "^7.22.3",
+    "@tabler/icons-react": "^3.22.0",
+    "@welldone-software/why-did-you-render": "^8.0.3",
+    "@xyflow/react": "^12.3.5",
+    "axios": "^1.7.8",
+    "elkjs": "^0.9.3",
+    "file-saver": "^2.0.5",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.11.17",
+    "gapi-script": "^1.2.0",
+    "html-to-image": "^1.11.11",
+    "i18next": "^24.0.2",
+    "immer": "^10.1.1",
+    "jotai": "^2.10.3",
+    "js-beautify": "^1.15.1",
+    "lodash": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "react": "19.0.0",
+    "react-color": "^2.19.3",
+    "react-dnd": "^16.0.1",
+    "react-dom": "19.0.0",
+    "react-from-json": "^0.8.0",
+    "react-hook-form": "^7.53.2",
+    "react-i18next": "^15.1.2",
+    "react-icons": "^5.3.0",
+    "react-json-view": "^1.21.3",
+    "react-rnd": "^10.4.13",
+    "react-router-dom": "^7.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "reactflow": "^11.11.4",
+    "tslib": "^2.8.1",
+    "use-undo": "^1.1.1",
+    "uuid": "^11.1.0",
+    "xlsx": "^0.18.5",
+    "yup": "^1.4.0",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@nx/cypress": "20.6.4",
+    "@nx/eslint": "20.6.4",
+    "@nx/eslint-plugin": "20.6.4",
+    "@nx/js": "20.6.4",
+    "@nx/react": "20.6.4",
+    "@nx/rollup": "20.6.4",
+    "@nx/vite": "20.6.4",
+    "@nx/web": "20.6.4",
+    "@nx/webpack": "20.6.4",
+    "@nx/workspace": "20.6.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@swc-node/register": "~1.10.9",
+    "@swc/cli": "~0.5.1",
+    "@swc/core": "~1.9.3",
+    "@swc/helpers": "~0.5.15",
+    "@testing-library/react": "16.1.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.14",
+    "@types/js-beautify": "^1.14.3",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "22.10.0",
+    "@types/react": "18.3.12",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "18.3.1",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "@vitest/ui": "^2.1.6",
+    "eslint": "~9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "jsdom": "~25.0.1",
+    "nx": "20.6.4",
+    "prettier": "^3.4.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "swc-loader": "0.1.15",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.6",
+    "vitest": "^2.1.6",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/packages/diagrams/src/index.ts

@@ -7,6 +7,7 @@ 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';

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

@@ -0,0 +1,149 @@
+import React, { useMemo } from 'react';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box } from '@mui/material';
+import { useSelectedNode } from '../contexts/DiagramProvider';
+
+export type ConnectionPointPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface ConnectionPointConfig {
+  position: ConnectionPointPosition;
+  type: 'source' | 'target' | 'both';
+  offset?: number;
+}
+
+interface ConnectionPointsProps {
+  /** Show handles regardless of node selection */
+  alwaysVisible?: boolean;
+  /** Custom positions configuration */
+  positions?: ConnectionPointConfig[];
+  /** Custom handle size */
+  handleSize?: number;
+  /** Custom handle color */
+  handleColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+}
+
+const positionMap: Record<ConnectionPointPosition, Position> = {
+  top: Position.Top,
+  bottom: Position.Bottom,
+  left: Position.Left,
+  right: Position.Right,
+};
+
+const defaultPositions: ConnectionPointConfig[] = [
+  { position: 'top', type: 'target' },
+  { position: 'bottom', type: 'source' },
+  { position: 'left', type: 'target' },
+  { position: 'right', type: 'source' },
+];
+
+/**
+ * ConnectionPoints component displays interactive connection handles
+ * on a node when it's selected. Users can drag from these points to
+ * create edges connecting to other nodes.
+ */
+export const ConnectionPoints: React.FC<ConnectionPointsProps> = React.memo(({
+  alwaysVisible = false,
+  positions = defaultPositions,
+  handleSize = 14,
+  handleColor = '#10B981',
+  backgroundColor = '#1a1a2e',
+}) => {
+  const nodeId = useNodeId();
+  const selectedNode = useSelectedNode();
+  
+  const isSelected = selectedNode === nodeId;
+  const shouldShow = alwaysVisible || isSelected;
+
+  const handleStyle = useMemo(() => ({
+    width: `${handleSize}px`,
+    height: `${handleSize}px`,
+    borderRadius: '50%',
+    border: `3px solid ${handleColor}`,
+    backgroundColor: backgroundColor,
+    transition: 'all 0.2s ease-in-out',
+    cursor: 'crosshair',
+    zIndex: 10,
+  }), [handleSize, handleColor, backgroundColor]);
+
+  const getPositionStyle = (position: ConnectionPointPosition): React.CSSProperties => {
+    const offset = -Math.floor(handleSize / 2);
+    switch (position) {
+      case 'top': return { top: `${offset}px` };
+      case 'bottom': return { bottom: `${offset}px` };
+      case 'left': return { left: `${offset}px` };
+      case 'right': return { right: `${offset}px` };
+    }
+  };
+
+  const renderHandle = (config: ConnectionPointConfig, index: number) => {
+    const { position, type, offset } = config;
+    const baseId = `${nodeId}-${position}`;
+
+    if (type === 'both') {
+      // Render both source and target handles at the same position
+      return (
+        <React.Fragment key={`${position}-${index}`}>
+          <Handle
+            type="source"
+            id={`${baseId}-source`}
+            position={positionMap[position]}
+            className="connection-handle"
+            style={{
+              ...handleStyle,
+              ...getPositionStyle(position),
+            }}
+          />
+          <Handle
+            type="target"
+            id={`${baseId}-target`}
+            position={positionMap[position]}
+            className="connection-handle"
+            style={{
+              ...handleStyle,
+              ...getPositionStyle(position),
+              opacity: 0, // Hidden but functional
+              pointerEvents: shouldShow ? 'auto' : 'none',
+            }}
+          />
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <Handle
+        key={`${position}-${type}-${index}`}
+        type={type}
+        id={baseId}
+        position={positionMap[position]}
+        className="connection-handle"
+        style={{
+          ...handleStyle,
+          ...getPositionStyle(position),
+        }}
+      />
+    );
+  };
+
+  return (
+    <Box
+      className="connection-points-container"
+      sx={{
+        opacity: shouldShow ? 1 : 0,
+        transition: 'opacity 0.2s ease-in-out',
+        pointerEvents: shouldShow ? 'auto' : 'none',
+        '& .react-flow__handle': {
+          visibility: shouldShow ? 'visible' : 'hidden',
+        },
+      }}
+    >
+      {positions.map((config, index) => renderHandle(config, index))}
+    </Box>
+  );
+});
+
+ConnectionPoints.displayName = 'ConnectionPoints';
+
+export default ConnectionPoints;
+

package/packages/diagrams/src/lib/components/automation/AutomationApiNode.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
 import { AISuggestion } from './AISuggestionsModal';
 import { AISuggestionsPanel } from './AISuggestionsPanel';
+import { NodeActionButtons } from './NodeActionButtons';
 
 interface AutomationApiNodeProps {
     data: {
@@ -66,6 +67,9 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
     const nodeId = useNodeId();
     const setSelectedNode = useDiagram((state) => state.setSelectedNode);
     const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+    const onNodesChange = useDiagram((state) => state.onNodesChange);
+    const nodes = useDiagram((state) => state.nodes);
+    const setNodes = useDiagram((state) => state.setNodes);
 
     // Get the icon component based on the iconName
     const IconComponent = getIconByName(data.iconName);
@@ -525,35 +529,169 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                 </Box>
             </Box>
 
-            {/* Handles - Hidden but functional */}
+            {/* Connection Handles - Bidirectional (source + target at each position) */}
+            {/* Top - Source */}
+            <Handle
+                type="source"
+                position={Position.Top}
+                id="top-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    top: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Top - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Top}
+                id="top-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    top: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Bottom - Source */}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                id="bottom-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    bottom: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Bottom - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Bottom}
+                id="bottom-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    bottom: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Left - Source */}
+            <Handle
+                type="source"
+                position={Position.Left}
+                id="left-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    left: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Left - Target (hidden but functional) */}
             <Handle
                 type="target"
                 position={Position.Left}
-                id="left"
+                id="left-target"
                 style={{
-                    background: '#3b82f6',
-                    width: '12px',
-                    height: '12px',
-                    border: '2px solid white',
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
                     left: '-8px',
-                    opacity: 0, // Hidden but functional
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
                 }}
             />
+            {/* Right - Source */}
             <Handle
                 type="source"
                 position={Position.Right}
-                id="right"
+                id="right-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    right: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Right - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Right}
+                id="right-target"
                 style={{
-                    background: '#3b82f6',
-                    width: '12px',
-                    height: '12px',
-                    border: '2px solid white',
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
                     right: '-8px',
-                    opacity: 0, // Hidden but functional
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
                 }}
             />
+
             </Box>
 
+            {/* Node Action Buttons - Shows when selected */}
+            <NodeActionButtons
+                selected={selected}
+                onDelete={() => {
+                    if (nodeId && onNodesChange) {
+                        onNodesChange([{ id: nodeId, type: 'remove' }]);
+                    }
+                }}
+                onDuplicate={() => {
+                    if (nodeId) {
+                        const currentNode = nodes.find(n => n.id === nodeId);
+                        if (currentNode) {
+                            const newNode = {
+                                ...currentNode,
+                                id: `${currentNode.id}-copy-${Date.now()}`,
+                                position: {
+                                    x: currentNode.position.x + 50,
+                                    y: currentNode.position.y + 50,
+                                },
+                                selected: false,
+                            };
+                            setNodes([...nodes, newNode]);
+                        }
+                    }
+                }}
+            />
+
             {/* AI Suggestions Button - Positioned below the node box */}
             {data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && (
                 <Box