@uipath/apollo-react 4.16.1 → 4.17.0-pr605.41c0b8c

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,150 @@
+"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 index_cjs_namespaceObject = require("../../utils/index.cjs");
+const collapse_cjs_namespaceObject = require("../../utils/collapse.cjs");
+const container_cjs_namespaceObject = require("../../utils/container.cjs");
+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 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);
+        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)
+        };
+    }
+    return resolveScopedCollisions(nodes, 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;AAE3E,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;AAajD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,IAAI,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAEjF;AA6BD,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;AAwBD,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,CAsCzB"}

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

@@ -0,0 +1,110 @@
+import { Position } from "../../xyflow/react.js";
+import { resolveCollisions } from "../../utils/index.js";
+import { getExpandedSize } from "../../utils/collapse.js";
+import { getContainerFitGeometry, getContainerPlacement, getContainerSafeArea, getNodeDimensions, isContainerNodeManifest, placeContainerNode } from "../../utils/container.js";
+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 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);
+        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)
+        };
+    }
+    return resolveScopedCollisions(nodes, 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, {

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

@@ -28,14 +28,25 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const createPreviewGraph_cjs_namespaceObject = require("../../utils/createPreviewGraph.cjs");
-function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = react_cjs_namespaceObject.Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
+const LoopNode_helpers_cjs_namespaceObject = require("../LoopNode/LoopNode.helpers.cjs");
+function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = react_cjs_namespaceObject.Position.Right, sourceHandleType = 'source', ignoredNodeTypes = [], options = {}) {
+    const source = {
+        nodeId: sourceNodeId,
+        handleId: sourceHandleId
+    };
+    const overrides = options.getManifestForNode ? (0, LoopNode_helpers_cjs_namespaceObject.resolveContainerAddNodePreview)({
+        source,
+        sourceHandleType,
+        reactFlowInstance,
+        getManifestForNode: options.getManifestForNode
+    }) : null;
     (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
-        sourceNodeId,
-        sourceHandleId,
+        source,
         reactFlowInstance,
         sourceHandleType,
         handlePosition,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        ...overrides ?? {}
     });
 }
 exports.createAddNodePreview = __webpack_exports__.createAddNodePreview;

package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts

@@ -1,3 +1,7 @@
 import { Position, type ReactFlowInstance } from '../../xyflow/react.ts';
-export declare function createAddNodePreview(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, handlePosition?: Position, sourceHandleType?: 'source' | 'target', ignoredNodeTypes?: string[]): void;
+import { type ContainerPreviewManifestResolver } from '../LoopNode/LoopNode.helpers';
+export interface AddNodePreviewOptions {
+    getManifestForNode?: ContainerPreviewManifestResolver;
+}
+export declare function createAddNodePreview(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, handlePosition?: Position, sourceHandleType?: 'source' | 'target', ignoredNodeTypes?: string[], options?: AddNodePreviewOptions): void;
 //# sourceMappingURL=createAddNodePreview.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createAddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/createAddNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAa5F,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,gBAAgB,GAAE,MAAM,EAAO,GAC9B,IAAI,CASN"}
+{"version":3,"file":"createAddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/createAddNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAE5F,OAAO,EACL,KAAK,gCAAgC,EAEtC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,CAAC,EAAE,gCAAgC,CAAC;CACvD;AAcD,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,gBAAgB,GAAE,MAAM,EAAO,EAC/B,OAAO,GAAE,qBAA0B,GAClC,IAAI,CAsBN"}

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

@@ -1,13 +1,24 @@
 import { Position } from "../../xyflow/react.js";
 import { showPreviewGraph } from "../../utils/createPreviewGraph.js";
-function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
+import { resolveContainerAddNodePreview } from "../LoopNode/LoopNode.helpers.js";
+function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', ignoredNodeTypes = [], options = {}) {
+    const source = {
+        nodeId: sourceNodeId,
+        handleId: sourceHandleId
+    };
+    const overrides = options.getManifestForNode ? resolveContainerAddNodePreview({
+        source,
+        sourceHandleType,
+        reactFlowInstance,
+        getManifestForNode: options.getManifestForNode
+    }) : null;
     showPreviewGraph({
-        sourceNodeId,
-        sourceHandleId,
+        source,
         reactFlowInstance,
         sourceHandleType,
         handlePosition,
-        ignoredNodeTypes
+        ignoredNodeTypes,
+        ...overrides ?? {}
     });
 }
 export { createAddNodePreview };

package/dist/canvas/components/AddNodePanel/index.d.ts

@@ -3,5 +3,5 @@ export { AddNodeManager } from './AddNodeManager';
 export { AddNodePanel } from './AddNodePanel';
 export type { AddNodePanelProps, NodeItemData } from './AddNodePanel.types';
 export { AddNodePreview, type AddNodePreviewData } from './AddNodePreview';
-export { createAddNodePreview } from './createAddNodePreview';
+export { type AddNodePreviewOptions, createAddNodePreview } from './createAddNodePreview';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,KAAK,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}