@uipath/apollo-react 4.14.1-pr556.aa710a0 → 4.15.0-pr605.2728a1c

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

@@ -33,8 +33,86 @@ 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 collapse_cjs_namespaceObject = require("../../utils/collapse.cjs");
+const container_sizing_cjs_namespaceObject = require("../../utils/container-sizing.cjs");
+const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
+const LoopNode_helpers_cjs_namespaceObject = require("../LoopNode/LoopNode.helpers.cjs");
+const LoopNode_sequence_cjs_namespaceObject = require("../LoopNode/LoopNode.sequence.cjs");
 const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type, (0, manifest_resolver_cjs_namespaceObject.getNodeTypeVersion)(node.data)) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    const fallbackDimensions = (0, collapse_cjs_namespaceObject.getExpandedSize)(manifest?.display.shape, manifest);
+    return (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(node, fallbackDimensions);
+}
+function getContainerFitGeometry(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return (0, LoopNode_helpers_cjs_namespaceObject.isLoopContainerManifest)(manifest) ? (0, LoopNode_helpers_cjs_namespaceObject.getLoopContainerFitGeometry)() : null;
+}
+function centerNodeOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(previewNode);
+    return {
+        x: previewNode.position.x + (previewDimensions.width - nodeDimensions.width) / 2,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function centerNodeVerticallyOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = (0, container_sizing_cjs_namespaceObject.getNodeDimensions)(previewNode);
+    return {
+        x: previewNode.position.x,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function resolveSiblingCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(siblingNodes, options);
+    const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
+}
+function resolveNodePlacement(nodes, insertedNode, registry, ignoredNodeTypes, edges, loopSequencePlacement) {
+    const getNodeSize = (node)=>getManifestAwareNodeDimensions(registry, node);
+    if (!insertedNode.parentId) {
+        const resolvedNodes = (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(nodes, {
+            ignoredNodeTypes,
+            getNodeSize
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+        };
+    }
+    const loopSequenceNodes = loopSequencePlacement ? (0, LoopNode_sequence_cjs_namespaceObject.resolveLoopSequenceMaterializedNodes)({
+        nodes,
+        edges,
+        insertedNode,
+        placement: loopSequencePlacement,
+        getNodeSize
+    }) : null;
+    let resolvedNodes = loopSequenceNodes;
+    if (!resolvedNodes) resolvedNodes = resolveSiblingCollisions(nodes, insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize
+    });
+    const fittedNodes = (0, container_sizing_cjs_namespaceObject.ensureContainersFitChildren)(resolvedNodes, {
+        containerIds: [
+            insertedNode.parentId
+        ],
+        getContainerFitGeometry: (node)=>getContainerFitGeometry(registry, node),
+        getNodeDimensions: getNodeSize,
+        ignoredNodeTypes,
+        includeAncestors: true
+    });
+    return {
+        nodes: fittedNodes,
+        insertedNode: fittedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+    };
+}
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
     const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
@@ -70,28 +148,45 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
     const handleNodeSelect = (0, external_react_namespaceObject.useCallback)((nodeItem)=>{
         const currentPreviewNode = reactFlowInstance.getNode(external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
         if (!currentPreviewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return;
+        const loopSequenceResolverOptions = (0, LoopNode_sequence_cjs_namespaceObject.createLoopSequenceResolverOptions)(registry);
+        const loopSequencePlacement = (0, LoopNode_sequence_cjs_namespaceObject.getLoopSequencePlacementFromPreviewGraph)(currentPreviewNode, previewNodeConnectionInfo, {
+            isLoopContainerId: (containerId)=>{
+                const containerNode = reactFlowInstance.getNode(containerId);
+                return containerNode ? loopSequenceResolverOptions.isLoopContainerNode?.(containerNode) ?? false : false;
+            }
+        });
         const newNodeId = `${nodeItem.data.type}-${Date.now()}`;
         const baseNodeData = createNodeData ? createNodeData(nodeItem) : {
             label: nodeItem.name,
             subLabel: nodeItem.description
         };
-        const nodeData = currentPreviewNode.data?.useSmartHandles ? {
+        const nodeData = {
             ...baseNodeData,
-            useSmartHandles: true
-        } : baseNodeData;
+            ...nodeItem.data.version ? {
+                typeVersion: nodeItem.data.version
+            } : {},
+            ...currentPreviewNode.data?.useSmartHandles ? {
+                useSmartHandles: true
+            } : {}
+        };
         const newNode = {
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
+            parentId: currentPreviewNode.parentId,
+            extent: currentPreviewNode.extent,
             selected: true,
             data: nodeData
         };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
+        const newNodeDimensions = getManifestAwareNodeDimensions(registry, newNode);
+        if (currentPreviewNode.parentId) newNode.position = centerNodeOnPreview(currentPreviewNode, newNodeDimensions);
+        else if ((0, LoopNode_helpers_cjs_namespaceObject.isLoopContainerManifest)(newNodeManifest)) newNode.position = centerNodeVerticallyOnPreview(currentPreviewNode, newNodeDimensions);
         const newEdges = [];
         const previewEdgeIds = [];
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
-            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
+            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
             const newNodeHandleId = newNodeDefaultHandle?.id;
             const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
                 source: newNode.id,
@@ -116,6 +211,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             newNode,
             newEdges
         };
+        let resolvedFinalNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((n)=>({
@@ -124,9 +220,9 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(newNodes, {
-                ignoredNodeTypes
-            });
+            const placement = resolveNodePlacement(newNodes, finalNode, registry, ignoredNodeTypes, reactFlowInstance.getEdges(), loopSequencePlacement);
+            resolvedFinalNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
                 ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
@@ -134,7 +230,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             ]);
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
                 source: finalNode.id,
                 sourceHandle: firstEdgeSourceHandle ?? 'output'
@@ -142,7 +238,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, resolvedFinalNode);
         }
         restoreEdgesRef.current = null;
         handleClose();

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,CAqMxD,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;AAS/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAShD,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;AAsHD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0OxD,CAAC"}

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

@@ -5,8 +5,86 @@ import { FLOATING_CANVAS_PANEL_OFFSET, PREVIEW_NODE_ID } from "../../constants.j
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/usePreviewNode.js";
 import { resolveCollisions } from "../../utils/index.js";
+import { getExpandedSize } from "../../utils/collapse.js";
+import { ensureContainersFitChildren, getNodeDimensions } from "../../utils/container-sizing.js";
+import { getNodeTypeVersion } from "../../utils/manifest-resolver.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
+import { getLoopContainerFitGeometry, isLoopContainerManifest } from "../LoopNode/LoopNode.helpers.js";
+import { createLoopSequenceResolverOptions, getLoopSequencePlacementFromPreviewGraph, resolveLoopSequenceMaterializedNodes } from "../LoopNode/LoopNode.sequence.js";
 import { AddNodePanel } from "./AddNodePanel.js";
+function getManifestForNode(registry, node) {
+    return node.type ? registry?.getManifest(node.type, getNodeTypeVersion(node.data)) : void 0;
+}
+function getManifestAwareNodeDimensions(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    const fallbackDimensions = getExpandedSize(manifest?.display.shape, manifest);
+    return getNodeDimensions(node, fallbackDimensions);
+}
+function getContainerFitGeometry(registry, node) {
+    const manifest = getManifestForNode(registry, node);
+    return isLoopContainerManifest(manifest) ? getLoopContainerFitGeometry() : null;
+}
+function centerNodeOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = getNodeDimensions(previewNode);
+    return {
+        x: previewNode.position.x + (previewDimensions.width - nodeDimensions.width) / 2,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function centerNodeVerticallyOnPreview(previewNode, nodeDimensions) {
+    const previewDimensions = getNodeDimensions(previewNode);
+    return {
+        x: previewNode.position.x,
+        y: previewNode.position.y + (previewDimensions.height - nodeDimensions.height) / 2
+    };
+}
+function resolveSiblingCollisions(nodes, insertedNode, options) {
+    const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
+    const resolvedSiblings = resolveCollisions(siblingNodes, options);
+    const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
+            node.id,
+            node
+        ]));
+    return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
+}
+function resolveNodePlacement(nodes, insertedNode, registry, ignoredNodeTypes, edges, loopSequencePlacement) {
+    const getNodeSize = (node)=>getManifestAwareNodeDimensions(registry, node);
+    if (!insertedNode.parentId) {
+        const resolvedNodes = resolveCollisions(nodes, {
+            ignoredNodeTypes,
+            getNodeSize
+        });
+        return {
+            nodes: resolvedNodes,
+            insertedNode: resolvedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+        };
+    }
+    const loopSequenceNodes = loopSequencePlacement ? resolveLoopSequenceMaterializedNodes({
+        nodes,
+        edges,
+        insertedNode,
+        placement: loopSequencePlacement,
+        getNodeSize
+    }) : null;
+    let resolvedNodes = loopSequenceNodes;
+    if (!resolvedNodes) resolvedNodes = resolveSiblingCollisions(nodes, insertedNode, {
+        ignoredNodeTypes,
+        getNodeSize
+    });
+    const fittedNodes = ensureContainersFitChildren(resolvedNodes, {
+        containerIds: [
+            insertedNode.parentId
+        ],
+        getContainerFitGeometry: (node)=>getContainerFitGeometry(registry, node),
+        getNodeDimensions: getNodeSize,
+        ignoredNodeTypes,
+        includeAncestors: true
+    });
+    return {
+        nodes: fittedNodes,
+        insertedNode: fittedNodes.find((node)=>node.id === insertedNode.id) ?? insertedNode
+    };
+}
 const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
     const reactFlowInstance = useReactFlow();
     const registry = useOptionalNodeTypeRegistry();
@@ -42,28 +120,45 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
     const handleNodeSelect = useCallback((nodeItem)=>{
         const currentPreviewNode = reactFlowInstance.getNode(PREVIEW_NODE_ID);
         if (!currentPreviewNode || !previewNodeConnectionInfo || 0 === previewNodeConnectionInfo.length) return;
+        const loopSequenceResolverOptions = createLoopSequenceResolverOptions(registry);
+        const loopSequencePlacement = getLoopSequencePlacementFromPreviewGraph(currentPreviewNode, previewNodeConnectionInfo, {
+            isLoopContainerId: (containerId)=>{
+                const containerNode = reactFlowInstance.getNode(containerId);
+                return containerNode ? loopSequenceResolverOptions.isLoopContainerNode?.(containerNode) ?? false : false;
+            }
+        });
         const newNodeId = `${nodeItem.data.type}-${Date.now()}`;
         const baseNodeData = createNodeData ? createNodeData(nodeItem) : {
             label: nodeItem.name,
             subLabel: nodeItem.description
         };
-        const nodeData = currentPreviewNode.data?.useSmartHandles ? {
+        const nodeData = {
             ...baseNodeData,
-            useSmartHandles: true
-        } : baseNodeData;
+            ...nodeItem.data.version ? {
+                typeVersion: nodeItem.data.version
+            } : {},
+            ...currentPreviewNode.data?.useSmartHandles ? {
+                useSmartHandles: true
+            } : {}
+        };
         const newNode = {
             id: newNodeId,
             type: nodeItem.data.type,
             position: currentPreviewNode.position,
+            parentId: currentPreviewNode.parentId,
+            extent: currentPreviewNode.extent,
             selected: true,
             data: nodeData
         };
-        const newNodeManifest = registry?.getManifest(nodeItem.data.type);
+        const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
+        const newNodeDimensions = getManifestAwareNodeDimensions(registry, newNode);
+        if (currentPreviewNode.parentId) newNode.position = centerNodeOnPreview(currentPreviewNode, newNodeDimensions);
+        else if (isLoopContainerManifest(newNodeManifest)) newNode.position = centerNodeVerticallyOnPreview(currentPreviewNode, newNodeDimensions);
         const newEdges = [];
         const previewEdgeIds = [];
         for (const connectionInfoItem of previewNodeConnectionInfo){
             const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
-            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
+            const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
             const newNodeHandleId = newNodeDefaultHandle?.id;
             const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
                 source: newNode.id,
@@ -88,6 +183,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             newNode,
             newEdges
         };
+        let resolvedFinalNode = finalNode;
         reactFlowInstance.setNodes((nodes)=>{
             const newNodes = [
                 ...nodes.filter((n)=>n.id !== PREVIEW_NODE_ID).map((n)=>({
@@ -96,9 +192,9 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                     })),
                 finalNode
             ];
-            return resolveCollisions(newNodes, {
-                ignoredNodeTypes
-            });
+            const placement = resolveNodePlacement(newNodes, finalNode, registry, ignoredNodeTypes, reactFlowInstance.getEdges(), loopSequencePlacement);
+            resolvedFinalNode = placement.insertedNode;
+            return placement.nodes;
         });
         reactFlowInstance.setEdges((edges)=>[
                 ...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
@@ -106,7 +202,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
             ]);
         const [firstConnection] = previewNodeConnectionInfo;
         if (firstConnection) {
-            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
+            const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
             const firstEdgeData = firstConnection.addNewNodeAsSource ? {
                 source: finalNode.id,
                 sourceHandle: firstEdgeSourceHandle ?? 'output'
@@ -114,7 +210,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
                 source: firstConnection.existingNodeId,
                 sourceHandle: firstConnection.existingHandleId
             };
-            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, finalNode);
+            onNodeAdded?.(firstEdgeData.source, firstEdgeData.sourceHandle, resolvedFinalNode);
         }
         restoreEdgesRef.current = null;
         handleClose();

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

@@ -28,7 +28,35 @@ __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_sequence_cjs_namespaceObject = require("../LoopNode/LoopNode.sequence.cjs");
+function normalizeOptions(options) {
+    return Array.isArray(options) ? {
+        ignoredNodeTypes: options
+    } : options;
+}
+function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = react_cjs_namespaceObject.Position.Right, sourceHandleType = 'source', options = []) {
+    const { ignoredNodeTypes = [], ...providedResolverOptions } = normalizeOptions(options);
+    const resolverOptions = {
+        ...(0, LoopNode_sequence_cjs_namespaceObject.createLoopSequenceResolverOptions)(null),
+        ...providedResolverOptions
+    };
+    if ('source' === sourceHandleType) {
+        const loopPreview = (0, LoopNode_sequence_cjs_namespaceObject.resolveLoopAddNodePreview)({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            resolverOptions
+        });
+        if ('create-preview' === loopPreview.action) return void (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            sourceHandleType,
+            handlePosition,
+            ignoredNodeTypes,
+            ...loopPreview.previewGraphOptions
+        });
+    }
     (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
         sourceNodeId,
         sourceHandleId,

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 LoopSequenceResolverOptions } from '../LoopNode/LoopNode.sequence';
+export interface CreateAddNodePreviewOptions extends LoopSequenceResolverOptions {
+    ignoredNodeTypes?: string[];
+}
+export declare function createAddNodePreview(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, handlePosition?: Position, sourceHandleType?: 'source' | 'target', options?: string[] | CreateAddNodePreviewOptions): 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,EAEL,KAAK,2BAA2B,EAEjC,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,2BAA4B,SAAQ,2BAA2B;IAC9E,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAkBD,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,OAAO,GAAE,MAAM,EAAE,GAAG,2BAAgC,GACnD,IAAI,CAqCN"}

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

@@ -1,6 +1,34 @@
 import { Position } from "../../xyflow/react.js";
 import { showPreviewGraph } from "../../utils/createPreviewGraph.js";
-function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', ignoredNodeTypes = []) {
+import { createLoopSequenceResolverOptions, resolveLoopAddNodePreview } from "../LoopNode/LoopNode.sequence.js";
+function normalizeOptions(options) {
+    return Array.isArray(options) ? {
+        ignoredNodeTypes: options
+    } : options;
+}
+function createAddNodePreview(sourceNodeId, sourceHandleId, reactFlowInstance, handlePosition = Position.Right, sourceHandleType = 'source', options = []) {
+    const { ignoredNodeTypes = [], ...providedResolverOptions } = normalizeOptions(options);
+    const resolverOptions = {
+        ...createLoopSequenceResolverOptions(null),
+        ...providedResolverOptions
+    };
+    if ('source' === sourceHandleType) {
+        const loopPreview = resolveLoopAddNodePreview({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            resolverOptions
+        });
+        if ('create-preview' === loopPreview.action) return void showPreviewGraph({
+            sourceNodeId,
+            sourceHandleId,
+            reactFlowInstance,
+            sourceHandleType,
+            handlePosition,
+            ignoredNodeTypes,
+            ...loopPreview.previewGraphOptions
+        });
+    }
     showPreviewGraph({
         sourceNodeId,
         sourceHandleId,

package/dist/canvas/components/Edges/SequenceEdge.cjs

@@ -92,6 +92,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
     const status = executionStatus ? executionStatus?.status ?? executionStatus : validationStatus;
     const isDiffAdded = data?.isDiffAdded === true;
     const isDiffRemoved = data?.isDiffRemoved === true;
+    const hideArrowHead = data?.hideArrowHead === true;
+    const hideToolbar = data?.hideToolbar === true;
     const angle = ANGLE_MAP[targetPosition];
     const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
     const { edgePath, labelX, labelY } = (0, index_cjs_namespaceObject.useEdgePath)({
@@ -102,8 +104,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
         sourceX,
         sourceY,
         sourcePosition,
-        targetX,
-        targetY,
+        targetX: hideArrowHead ? targetX + offsetX : targetX,
+        targetY: hideArrowHead ? targetY + offsetY : targetY,
         targetPosition
     });
     const { showToolbar, toolbarPositioning, config: toolbarConfig, handleMouseMoveOnPath } = (0, external_Toolbar_index_cjs_namespaceObject.useEdgeToolbarState)({
@@ -170,12 +172,12 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                         },
                         ref: pathElementRef
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("polygon", {
+                    !hideArrowHead && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("polygon", {
                         points: `
-            ${targetX},${targetY}
-            ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
-            ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
-          `,
+              ${targetX},${targetY}
+              ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
+              ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
+            `,
                         fill: edgeColor,
                         style: {
                             pointerEvents: 'none',
@@ -215,7 +217,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
                     })
                 ]
             }),
-            showToolbar && toolbarPositioning && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.EdgeToolbar, {
+            !hideToolbar && showToolbar && toolbarPositioning && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.EdgeToolbar, {
                 edgeId: id,
                 visible: showToolbar,
                 positioning: toolbarPositioning,

package/dist/canvas/components/Edges/SequenceEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDAuMJ,CAAC"}
+{"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDA+MJ,CAAC"}

package/dist/canvas/components/Edges/SequenceEdge.js

@@ -64,6 +64,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
     const status = executionStatus ? executionStatus?.status ?? executionStatus : validationStatus;
     const isDiffAdded = data?.isDiffAdded === true;
     const isDiffRemoved = data?.isDiffRemoved === true;
+    const hideArrowHead = data?.hideArrowHead === true;
+    const hideToolbar = data?.hideToolbar === true;
     const angle = ANGLE_MAP[targetPosition];
     const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
     const { edgePath, labelX, labelY } = useEdgePath({
@@ -74,8 +76,8 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
         sourceX,
         sourceY,
         sourcePosition,
-        targetX,
-        targetY,
+        targetX: hideArrowHead ? targetX + offsetX : targetX,
+        targetY: hideArrowHead ? targetY + offsetY : targetY,
         targetPosition
     });
     const { showToolbar, toolbarPositioning, config: toolbarConfig, handleMouseMoveOnPath } = useEdgeToolbarState({
@@ -142,12 +144,12 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                         },
                         ref: pathElementRef
                     }),
-                    /*#__PURE__*/ jsx("polygon", {
+                    !hideArrowHead && /*#__PURE__*/ jsx("polygon", {
                         points: `
-            ${targetX},${targetY}
-            ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
-            ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
-          `,
+              ${targetX},${targetY}
+              ${targetX - ARROW_SIZE * Math.cos(angle - Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle - Math.PI / 6)}
+              ${targetX - ARROW_SIZE * Math.cos(angle + Math.PI / 6)},${targetY - ARROW_SIZE * Math.sin(angle + Math.PI / 6)}
+            `,
                         fill: edgeColor,
                         style: {
                             pointerEvents: 'none',
@@ -187,7 +189,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
                     })
                 ]
             }),
-            showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
+            !hideToolbar && showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
                 edgeId: id,
                 visible: showToolbar,
                 positioning: toolbarPositioning,

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs

@@ -35,6 +35,7 @@ const canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
 const CanvasEventBus_cjs_namespaceObject = require("../../utils/CanvasEventBus.cjs");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const createAddNodePreview_cjs_namespaceObject = require("../AddNodePanel/createAddNodePreview.cjs");
+const LoopNode_sequence_cjs_namespaceObject = require("../LoopNode/LoopNode.sequence.cjs");
 const external_HierarchicalCanvas_cjs_namespaceObject = require("./HierarchicalCanvas.cjs");
 const createDemoCanvases = ()=>{
     const rootCanvas = {
@@ -325,6 +326,7 @@ const workflowManifest = {
 };
 const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
+    const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const currentCanvas = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectCurrentCanvas);
     const currentPathLength = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectCurrentPathLength);
     const addNode = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectAddNode);
@@ -332,15 +334,20 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
     const removeEdge = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectRemoveEdge);
     const updateNodes = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectUpdateNodes);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        const resolverOptions = (0, LoopNode_sequence_cjs_namespaceObject.createLoopSequenceResolverOptions)(registry);
         const handleAction = (event)=>{
-            if (reactFlowInstance) (0, createAddNodePreview_cjs_namespaceObject.createAddNodePreview)(event.nodeId, event.handleId, reactFlowInstance);
+            if (reactFlowInstance) {
+                const sourceHandleType = 'input' === event.handleType ? 'target' : 'source';
+                (0, createAddNodePreview_cjs_namespaceObject.createAddNodePreview)(event.nodeId, event.handleId, reactFlowInstance, event.position, sourceHandleType, resolverOptions);
+            }
         };
         CanvasEventBus_cjs_namespaceObject.canvasEventBus.on('handle:action', handleAction);
         return ()=>{
             CanvasEventBus_cjs_namespaceObject.canvasEventBus.off('handle:action', handleAction);
         };
     }, [
-        reactFlowInstance
+        reactFlowInstance,
+        registry
     ]);
     const handleAddNode = (0, external_react_namespaceObject.useCallback)((nodeType)=>{
         const existingNodes = currentCanvas?.nodes.filter((n)=>'blank-canvas-node' !== n.id).length || 0;

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6d/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}
+{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAye/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Panel, ReactFlowProvider, useReactFlow } from "../../xyflow/react.js";
 import { Button } from "@uipath/apollo-wind";
 import { useCallback, useEffect, useState } from "react";
-import { NodeRegistryProvider } from "../../core/index.js";
+import { NodeRegistryProvider, useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { selectAddNode, selectCurrentCanvas, selectCurrentPathLength, selectRemoveEdge, selectRemoveNode, selectUpdateNodes, useCanvasStore } from "../../stores/canvasStore.js";
 import { canvasEventBus } from "../../utils/CanvasEventBus.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 import { createAddNodePreview } from "../AddNodePanel/createAddNodePreview.js";
+import { createLoopSequenceResolverOptions } from "../LoopNode/LoopNode.sequence.js";
 import { HierarchicalCanvas } from "./HierarchicalCanvas.js";
 const createDemoCanvases = ()=>{
     const rootCanvas = {
@@ -297,6 +298,7 @@ const workflowManifest = {
 };
 const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const reactFlowInstance = useReactFlow();
+    const registry = useOptionalNodeTypeRegistry();
     const currentCanvas = useCanvasStore(selectCurrentCanvas);
     const currentPathLength = useCanvasStore(selectCurrentPathLength);
     const addNode = useCanvasStore(selectAddNode);
@@ -304,15 +306,20 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
     const removeEdge = useCanvasStore(selectRemoveEdge);
     const updateNodes = useCanvasStore(selectUpdateNodes);
     useEffect(()=>{
+        const resolverOptions = createLoopSequenceResolverOptions(registry);
         const handleAction = (event)=>{
-            if (reactFlowInstance) createAddNodePreview(event.nodeId, event.handleId, reactFlowInstance);
+            if (reactFlowInstance) {
+                const sourceHandleType = 'input' === event.handleType ? 'target' : 'source';
+                createAddNodePreview(event.nodeId, event.handleId, reactFlowInstance, event.position, sourceHandleType, resolverOptions);
+            }
         };
         canvasEventBus.on('handle:action', handleAction);
         return ()=>{
             canvasEventBus.off('handle:action', handleAction);
         };
     }, [
-        reactFlowInstance
+        reactFlowInstance,
+        registry
     ]);
     const handleAddNode = useCallback((nodeType)=>{
         const existingNodes = currentCanvas?.nodes.filter((n)=>'blank-canvas-node' !== n.id).length || 0;