@uipath/apollo-react 4.17.0 → 4.18.1

package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs

@@ -32,8 +32,9 @@ const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const usePreviewNode_cjs_namespaceObject = require("../../hooks/usePreviewNode.cjs");
-const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
+const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
+const external_AddNodeManager_helpers_cjs_namespaceObject = require("./AddNodeManager.helpers.cjs");
 const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
@@ -45,15 +46,20 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         if (!previewNode && lastPreviewNodeRef.current) {
             reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
             reactFlowInstance.setEdges((edges)=>{
-                const filteredEdges = edges.filter((e)=>e.source !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && e.target !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
-                return restoreEdgesRef.current ? [
+                const filteredEdges = edges.filter((edge)=>!(0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)(edge));
+                const restoredEdges = restoreEdgesRef.current ? [
                     ...filteredEdges,
                     ...restoreEdgesRef.current
                 ] : filteredEdges;
+                restoreEdgesRef.current = null;
+                return restoredEdges;
             });
-        } else if (previewNode && !restoreEdgesRef.current) restoreEdgesRef.current = previewNode.data.originalEdge ? [
-            previewNode.data.originalEdge
-        ] : null;
+        } else if (previewNode && !restoreEdgesRef.current) {
+            const originalEdge = (0, external_AddNodeManager_helpers_cjs_namespaceObject.getOriginalEdge)(previewNode);
+            restoreEdgesRef.current = originalEdge ? [
+                originalEdge
+            ] : null;
+        }
         lastPreviewNodeRef.current = previewNode || null;
     }, [
         previewNode,
@@ -83,17 +89,17 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             parentId: currentPreviewNode.parentId,
             extent: currentPreviewNode.extent
         } : {};
-        const newNode = {
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNode = (0, external_AddNodeManager_helpers_cjs_namespaceObject.alignNodeToPreview)({
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
             selected: true,
             data: nodeData,
             ...previewNodeScope
-        };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        }, currentPreviewNode, previewNodeConnectionInfo, newNodeManifest);
         const newEdges = [];
-        const previewEdgeIds = [];
+        const previewEdgeIds = new Set();
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
             const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
@@ -115,12 +121,14 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 ...edgeSourceTargetData,
                 type: 'default'
             });
-            previewEdgeIds.push(connectionInfoItem.previewEdgeId);
+            previewEdgeIds.add(connectionInfoItem.previewEdgeId);
         }
         const { newNode: finalNode, newEdges: finalEdges } = onBeforeNodeAdded?.(newNode, newEdges) ?? {
             newNode,
             newEdges
         };
+        const placementEdges = reactFlowInstance.getEdges();
+        let placedNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((n)=>({
@@ -129,28 +137,35 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(newNodes, {
+            const placement = (0, external_AddNodeManager_helpers_cjs_namespaceObject.placeAddedNode)({
+                nodes: newNodes,
+                edges: placementEdges,
+                previewNode: currentPreviewNode,
+                insertedNode: finalNode,
+                registry,
                 ignoredNodeTypes
             });
+            placedNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
+                ...edges.filter((edge)=>!previewEdgeIds.has(edge.id) && !(0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)(edge)),
                 ...finalEdges
             ]);
+        restoreEdgesRef.current = null;
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstMaterializedEdge = finalEdges.find((edge)=>edge.source === placedNode.id || edge.target === placedNode.id);
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
-                source: finalNode.id,
-                sourceHandle: firstEdgeSourceHandle ?? 'output'
+                source: placedNode.id,
+                sourceHandle: firstMaterializedEdge?.sourceHandle ?? 'output'
             } : {
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, placedNode);
         }
-        restoreEdgesRef.current = null;
-        handleClose();
+        lastPreviewNodeRef.current = null;
     }, [
         previewNodeConnectionInfo,
         reactFlowInstance,
@@ -158,8 +173,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         createNodeData,
         onBeforeNodeAdded,
         onNodeAdded,
-        ignoredNodeTypes,
-        handleClose
+        ignoredNodeTypes
     ]);
     if (!previewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {

package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyMxD,CAAC"}
+{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyNxD,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.cjs

@@ -0,0 +1,208 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    getOriginalEdge: ()=>getOriginalEdge,
+    placeAddedNode: ()=>placeAddedNode,
+    alignNodeToPreview: ()=>alignNodeToPreview
+});
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const index_cjs_namespaceObject = require("../../utils/index.cjs");
+const collapse_cjs_namespaceObject = require("../../utils/collapse.cjs");
+const container_cjs_namespaceObject = require("../../utils/container.cjs");
+const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
+const TOP_LEVEL_INSERTION_GAP_PX = 5 * external_constants_cjs_namespaceObject.GRID_SPACING;
+function getOriginalEdge(previewNode) {
+    return previewNode?.data?.originalEdge ?? null;
+}
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return (0, container_cjs_namespaceObject.getNodeDimensions)(node, (0, collapse_cjs_namespaceObject.getExpandedSize)(manifest?.display.shape));
+}
+function getPrimaryPreviewHandlePosition(previewNode, previewConnections) {
+    const primaryConnection = previewConnections.find((connection)=>!connection.addNewNodeAsSource) ?? previewConnections[0];
+    const handlePosition = primaryConnection?.addNewNodeAsSource ? previewNode.data?.outputHandlePosition : previewNode.data?.inputHandlePosition;
+    return handlePosition;
+}
+function alignNodeToPreview(node, previewNode, previewConnections, nodeManifest) {
+    const previewSize = (0, container_cjs_namespaceObject.getNodeDimensions)(previewNode);
+    const nodeSize = (0, container_cjs_namespaceObject.getNodeDimensions)(node, (0, collapse_cjs_namespaceObject.getExpandedSize)(nodeManifest?.display.shape));
+    if (previewSize.width === nodeSize.width && previewSize.height === nodeSize.height) return node;
+    const previewHandlePosition = getPrimaryPreviewHandlePosition(previewNode, previewConnections);
+    const previewCenterX = previewNode.position.x + previewSize.width / 2;
+    const previewCenterY = previewNode.position.y + previewSize.height / 2;
+    if (previewHandlePosition === react_cjs_namespaceObject.Position.Left) return {
+        ...node,
+        position: {
+            x: previewNode.position.x,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+    if (previewHandlePosition === react_cjs_namespaceObject.Position.Right) return {
+        ...node,
+        position: {
+            x: previewNode.position.x + previewSize.width - nodeSize.width,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+    if (previewHandlePosition === react_cjs_namespaceObject.Position.Top) return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewNode.position.y
+        }
+    };
+    if (previewHandlePosition === react_cjs_namespaceObject.Position.Bottom) return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewNode.position.y + previewSize.height - nodeSize.height
+        }
+    };
+    return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+}
+function resolveScopedCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = (0, index_cjs_namespaceObject.resolveCollisions)(siblingNodes, {
+        ignoredNodeTypes: options.ignoredNodeTypes,
+        getNodeSize: options.getNodeSize
+    });
+    const resolvedSiblingById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    const resolvedNodes = nodes.map((node)=>resolvedSiblingById.get(node.id) ?? node);
+    return {
+        nodes: resolvedNodes,
+        insertedNode: resolvedSiblingById.get(insertedNode.id)
+    };
+}
+function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNodeSize }) {
+    const originalEdge = getOriginalEdge(previewNode);
+    if (!originalEdge) return null;
+    const targetNode = nodes.find((node)=>node.id === originalEdge.target);
+    if (!targetNode || targetNode.parentId !== insertedNode.parentId) return null;
+    const insertedSize = getNodeSize(insertedNode);
+    let insertedX = insertedNode.position.x;
+    const sourceNode = nodes.find((node)=>node.id === originalEdge.source);
+    if (sourceNode && sourceNode.parentId === insertedNode.parentId) {
+        const sourceSize = getNodeSize(sourceNode);
+        const requiredInsertedLeft = sourceNode.position.x + sourceSize.width + TOP_LEVEL_INSERTION_GAP_PX;
+        if (insertedX < requiredInsertedLeft) insertedX = (0, NodeUtils_cjs_namespaceObject.snapUpToGrid)(requiredInsertedLeft);
+    }
+    const requiredTargetLeft = insertedX + insertedSize.width + TOP_LEVEL_INSERTION_GAP_PX;
+    const downstreamShift = targetNode.position.x < requiredTargetLeft ? (0, NodeUtils_cjs_namespaceObject.snapUpToGrid)(requiredTargetLeft - targetNode.position.x) : 0;
+    const chainIds = downstreamShift > 0 ? new Set((0, container_cjs_namespaceObject.collectLinearDownstreamSiblings)({
+        startNodeId: targetNode.id,
+        parentId: insertedNode.parentId,
+        nodes,
+        edges
+    })) : new Set();
+    const insertedXChanged = insertedX !== insertedNode.position.x;
+    if (!insertedXChanged && 0 === downstreamShift) return null;
+    const updatedInsertedNode = insertedXChanged ? {
+        ...insertedNode,
+        position: {
+            x: insertedX,
+            y: insertedNode.position.y
+        }
+    } : insertedNode;
+    const updatedNodes = nodes.map((node)=>{
+        if (node.id === insertedNode.id) return updatedInsertedNode;
+        if (chainIds.has(node.id)) return {
+            ...node,
+            position: {
+                x: node.position.x + downstreamShift,
+                y: node.position.y
+            }
+        };
+        return node;
+    });
+    return {
+        nodes: updatedNodes,
+        insertedNode: updatedInsertedNode
+    };
+}
+function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ignoredNodeTypes }) {
+    const getDimensions = (node)=>getManifestAwareNodeDimensions(registry, node);
+    const placement = (0, container_cjs_namespaceObject.getContainerPlacement)(previewNode);
+    if (placement) {
+        const containerNode = nodes.find((node)=>node.id === placement.containerId);
+        if (!containerNode) return resolveScopedCollisions(nodes, insertedNode, {
+            ignoredNodeTypes,
+            getNodeSize: getDimensions
+        });
+        const containerManifest = getManifestForNode(registry, containerNode);
+        if (!(0, container_cjs_namespaceObject.isContainerNodeManifest)(containerManifest)) return resolveScopedCollisions(nodes, insertedNode, {
+            ignoredNodeTypes,
+            getNodeSize: getDimensions
+        });
+        const resolvedNodes = (0, container_cjs_namespaceObject.placeContainerNode)({
+            nodes,
+            insertedNode,
+            placement,
+            edges,
+            getNodeDimensions: getDimensions,
+            safeArea: (0, container_cjs_namespaceObject.getContainerSafeArea)(containerNode),
+            getContainerFitGeometry: (node)=>(0, container_cjs_namespaceObject.isContainerNodeManifest)(getManifestForNode(registry, node)) ? (0, container_cjs_namespaceObject.getContainerFitGeometry)() : null
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id)
+        };
+    }
+    const shifted = shiftForEdgeInsertion({
+        nodes,
+        edges,
+        previewNode,
+        insertedNode,
+        getNodeSize: getDimensions
+    });
+    return resolveScopedCollisions(shifted?.nodes ?? nodes, shifted?.insertedNode ?? insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize: getDimensions
+    });
+}
+exports.alignNodeToPreview = __webpack_exports__.alignNodeToPreview;
+exports.getOriginalEdge = __webpack_exports__.getOriginalEdge;
+exports.placeAddedNode = __webpack_exports__.placeAddedNode;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "alignNodeToPreview",
+    "getOriginalEdge",
+    "placeAddedNode"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.d.ts

@@ -0,0 +1,20 @@
+import type { Edge, Node } from '../../xyflow/react.ts';
+import type { NodeTypeRegistry } from '../../core';
+import type { PreviewNodeConnectionInfo } from '../../hooks/usePreviewNode';
+import type { NodeManifest } from '../../schema';
+interface AddNodePlacementResult {
+    nodes: Node[];
+    insertedNode: Node;
+}
+export declare function getOriginalEdge(previewNode: Node | null | undefined): Edge | null;
+export declare function alignNodeToPreview(node: Node, previewNode: Node, previewConnections: PreviewNodeConnectionInfo[], nodeManifest: NodeManifest | undefined): Node;
+export declare function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ignoredNodeTypes, }: {
+    nodes: Node[];
+    edges: Edge[];
+    previewNode: Node;
+    insertedNode: Node;
+    registry: NodeTypeRegistry | null;
+    ignoredNodeTypes?: string[];
+}): AddNodePlacementResult;
+export {};
+//# sourceMappingURL=AddNodeManager.helpers.d.ts.map

package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNodeManager.helpers.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAsBjD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,IAAI,CAAC;CACpB;AAMD,wBAAgB,eAAe,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAEjF;AAmCD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,IAAI,EACjB,kBAAkB,EAAE,yBAAyB,EAAE,EAC/C,YAAY,EAAE,YAAY,GAAG,SAAS,GACrC,IAAI,CA2DN;AAoHD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,IAAI,CAAC;IACnB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,GAAG,sBAAsB,CAsDzB"}

package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.js

@@ -0,0 +1,168 @@
+import { Position } from "../../xyflow/react.js";
+import { GRID_SPACING } from "../../constants.js";
+import { resolveCollisions } from "../../utils/index.js";
+import { getExpandedSize } from "../../utils/collapse.js";
+import { collectLinearDownstreamSiblings, getContainerFitGeometry, getContainerPlacement, getContainerSafeArea, getNodeDimensions, isContainerNodeManifest, placeContainerNode } from "../../utils/container.js";
+import { snapUpToGrid } from "../../utils/NodeUtils.js";
+const TOP_LEVEL_INSERTION_GAP_PX = 5 * GRID_SPACING;
+function getOriginalEdge(previewNode) {
+    return previewNode?.data?.originalEdge ?? null;
+}
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return getNodeDimensions(node, getExpandedSize(manifest?.display.shape));
+}
+function getPrimaryPreviewHandlePosition(previewNode, previewConnections) {
+    const primaryConnection = previewConnections.find((connection)=>!connection.addNewNodeAsSource) ?? previewConnections[0];
+    const handlePosition = primaryConnection?.addNewNodeAsSource ? previewNode.data?.outputHandlePosition : previewNode.data?.inputHandlePosition;
+    return handlePosition;
+}
+function alignNodeToPreview(node, previewNode, previewConnections, nodeManifest) {
+    const previewSize = getNodeDimensions(previewNode);
+    const nodeSize = getNodeDimensions(node, getExpandedSize(nodeManifest?.display.shape));
+    if (previewSize.width === nodeSize.width && previewSize.height === nodeSize.height) return node;
+    const previewHandlePosition = getPrimaryPreviewHandlePosition(previewNode, previewConnections);
+    const previewCenterX = previewNode.position.x + previewSize.width / 2;
+    const previewCenterY = previewNode.position.y + previewSize.height / 2;
+    if (previewHandlePosition === Position.Left) return {
+        ...node,
+        position: {
+            x: previewNode.position.x,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+    if (previewHandlePosition === Position.Right) return {
+        ...node,
+        position: {
+            x: previewNode.position.x + previewSize.width - nodeSize.width,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+    if (previewHandlePosition === Position.Top) return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewNode.position.y
+        }
+    };
+    if (previewHandlePosition === Position.Bottom) return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewNode.position.y + previewSize.height - nodeSize.height
+        }
+    };
+    return {
+        ...node,
+        position: {
+            x: previewCenterX - nodeSize.width / 2,
+            y: previewCenterY - nodeSize.height / 2
+        }
+    };
+}
+function resolveScopedCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = resolveCollisions(siblingNodes, {
+        ignoredNodeTypes: options.ignoredNodeTypes,
+        getNodeSize: options.getNodeSize
+    });
+    const resolvedSiblingById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    const resolvedNodes = nodes.map((node)=>resolvedSiblingById.get(node.id) ?? node);
+    return {
+        nodes: resolvedNodes,
+        insertedNode: resolvedSiblingById.get(insertedNode.id)
+    };
+}
+function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNodeSize }) {
+    const originalEdge = getOriginalEdge(previewNode);
+    if (!originalEdge) return null;
+    const targetNode = nodes.find((node)=>node.id === originalEdge.target);
+    if (!targetNode || targetNode.parentId !== insertedNode.parentId) return null;
+    const insertedSize = getNodeSize(insertedNode);
+    let insertedX = insertedNode.position.x;
+    const sourceNode = nodes.find((node)=>node.id === originalEdge.source);
+    if (sourceNode && sourceNode.parentId === insertedNode.parentId) {
+        const sourceSize = getNodeSize(sourceNode);
+        const requiredInsertedLeft = sourceNode.position.x + sourceSize.width + TOP_LEVEL_INSERTION_GAP_PX;
+        if (insertedX < requiredInsertedLeft) insertedX = snapUpToGrid(requiredInsertedLeft);
+    }
+    const requiredTargetLeft = insertedX + insertedSize.width + TOP_LEVEL_INSERTION_GAP_PX;
+    const downstreamShift = targetNode.position.x < requiredTargetLeft ? snapUpToGrid(requiredTargetLeft - targetNode.position.x) : 0;
+    const chainIds = downstreamShift > 0 ? new Set(collectLinearDownstreamSiblings({
+        startNodeId: targetNode.id,
+        parentId: insertedNode.parentId,
+        nodes,
+        edges
+    })) : new Set();
+    const insertedXChanged = insertedX !== insertedNode.position.x;
+    if (!insertedXChanged && 0 === downstreamShift) return null;
+    const updatedInsertedNode = insertedXChanged ? {
+        ...insertedNode,
+        position: {
+            x: insertedX,
+            y: insertedNode.position.y
+        }
+    } : insertedNode;
+    const updatedNodes = nodes.map((node)=>{
+        if (node.id === insertedNode.id) return updatedInsertedNode;
+        if (chainIds.has(node.id)) return {
+            ...node,
+            position: {
+                x: node.position.x + downstreamShift,
+                y: node.position.y
+            }
+        };
+        return node;
+    });
+    return {
+        nodes: updatedNodes,
+        insertedNode: updatedInsertedNode
+    };
+}
+function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ignoredNodeTypes }) {
+    const getDimensions = (node)=>getManifestAwareNodeDimensions(registry, node);
+    const placement = getContainerPlacement(previewNode);
+    if (placement) {
+        const containerNode = nodes.find((node)=>node.id === placement.containerId);
+        if (!containerNode) return resolveScopedCollisions(nodes, insertedNode, {
+            ignoredNodeTypes,
+            getNodeSize: getDimensions
+        });
+        const containerManifest = getManifestForNode(registry, containerNode);
+        if (!isContainerNodeManifest(containerManifest)) return resolveScopedCollisions(nodes, insertedNode, {
+            ignoredNodeTypes,
+            getNodeSize: getDimensions
+        });
+        const resolvedNodes = placeContainerNode({
+            nodes,
+            insertedNode,
+            placement,
+            edges,
+            getNodeDimensions: getDimensions,
+            safeArea: getContainerSafeArea(containerNode),
+            getContainerFitGeometry: (node)=>isContainerNodeManifest(getManifestForNode(registry, node)) ? getContainerFitGeometry() : null
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id)
+        };
+    }
+    const shifted = shiftForEdgeInsertion({
+        nodes,
+        edges,
+        previewNode,
+        insertedNode,
+        getNodeSize: getDimensions
+    });
+    return resolveScopedCollisions(shifted?.nodes ?? nodes, shifted?.insertedNode ?? insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize: getDimensions
+    });
+}
+export { alignNodeToPreview, getOriginalEdge, placeAddedNode };

package/dist/canvas/components/AddNodePanel/AddNodeManager.js

@@ -4,8 +4,9 @@ import { useCallback, useEffect, useRef } from "react";
 import { FLOATING_CANVAS_PANEL_OFFSET, PREVIEW_NODE_ID } from "../../constants.js";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/usePreviewNode.js";
-import { resolveCollisions } from "../../utils/index.js";
+import { isPreviewEdge } from "../../utils/createPreviewNode.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
+import { alignNodeToPreview, getOriginalEdge, placeAddedNode } from "./AddNodeManager.helpers.js";
 import { AddNodePanel } from "./AddNodePanel.js";
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = useReactFlow();
@@ -17,15 +18,20 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         if (!previewNode && lastPreviewNodeRef.current) {
             reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
             reactFlowInstance.setEdges((edges)=>{
-                const filteredEdges = edges.filter((e)=>e.source !== PREVIEW_NODE_ID && e.target !== PREVIEW_NODE_ID);
-                return restoreEdgesRef.current ? [
+                const filteredEdges = edges.filter((edge)=>!isPreviewEdge(edge));
+                const restoredEdges = restoreEdgesRef.current ? [
                     ...filteredEdges,
                     ...restoreEdgesRef.current
                 ] : filteredEdges;
+                restoreEdgesRef.current = null;
+                return restoredEdges;
             });
-        } else if (previewNode && !restoreEdgesRef.current) restoreEdgesRef.current = previewNode.data.originalEdge ? [
-            previewNode.data.originalEdge
-        ] : null;
+        } else if (previewNode && !restoreEdgesRef.current) {
+            const originalEdge = getOriginalEdge(previewNode);
+            restoreEdgesRef.current = originalEdge ? [
+                originalEdge
+            ] : null;
+        }
         lastPreviewNodeRef.current = previewNode || null;
     }, [
         previewNode,
@@ -55,17 +61,17 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             parentId: currentPreviewNode.parentId,
             extent: currentPreviewNode.extent
         } : {};
-        const newNode = {
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNode = alignNodeToPreview({
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
             selected: true,
             data: nodeData,
             ...previewNodeScope
-        };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        }, currentPreviewNode, previewNodeConnectionInfo, newNodeManifest);
         const newEdges = [];
-        const previewEdgeIds = [];
+        const previewEdgeIds = new Set();
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
             const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
@@ -87,12 +93,14 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 ...edgeSourceTargetData,
                 type: 'default'
             });
-            previewEdgeIds.push(connectionInfoItem.previewEdgeId);
+            previewEdgeIds.add(connectionInfoItem.previewEdgeId);
         }
         const { newNode: finalNode, newEdges: finalEdges } = onBeforeNodeAdded?.(newNode, newEdges) ?? {
             newNode,
             newEdges
         };
+        const placementEdges = reactFlowInstance.getEdges();
+        let placedNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== PREVIEW_NODE_ID).map((n)=>({
@@ -101,28 +109,35 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return resolveCollisions(newNodes, {
+            const placement = placeAddedNode({
+                nodes: newNodes,
+                edges: placementEdges,
+                previewNode: currentPreviewNode,
+                insertedNode: finalNode,
+                registry,
                 ignoredNodeTypes
             });
+            placedNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
+                ...edges.filter((edge)=>!previewEdgeIds.has(edge.id) && !isPreviewEdge(edge)),
                 ...finalEdges
             ]);
+        restoreEdgesRef.current = null;
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstMaterializedEdge = finalEdges.find((edge)=>edge.source === placedNode.id || edge.target === placedNode.id);
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
-                source: finalNode.id,
-                sourceHandle: firstEdgeSourceHandle ?? 'output'
+                source: placedNode.id,
+                sourceHandle: firstMaterializedEdge?.sourceHandle ?? 'output'
             } : {
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, placedNode);
         }
-        restoreEdgesRef.current = null;
-        handleClose();
+        lastPreviewNodeRef.current = null;
     }, [
         previewNodeConnectionInfo,
         reactFlowInstance,
@@ -130,8 +145,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         createNodeData,
         onBeforeNodeAdded,
         onNodeAdded,
-        ignoredNodeTypes,
-        handleClose
+        ignoredNodeTypes
     ]);
     if (!previewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return null;
     return /*#__PURE__*/ jsx(FloatingCanvasPanel, {