@uipath/apollo-react 4.14.1 → 4.15.0-pr605.635fb17

package/dist/canvas/utils/createPreviewGraph.cjs

@@ -0,0 +1,126 @@
+"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__, {
+    createPreviewGraph: ()=>createPreviewGraph,
+    reparentPreviewNodeToContainer: ()=>reparentPreviewNodeToContainer,
+    showPreviewGraph: ()=>showPreviewGraph,
+    applyPreviewGraphToReactFlow: ()=>applyPreviewGraphToReactFlow
+});
+const external_constants_cjs_namespaceObject = require("../constants.cjs");
+const external_createPreviewNode_cjs_namespaceObject = require("./createPreviewNode.cjs");
+const external_NodeUtils_cjs_namespaceObject = require("./NodeUtils.cjs");
+function inferPreviewContainerId(sourceNode, targetNode) {
+    if (!targetNode) return sourceNode.parentId;
+    if (sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = (0, external_NodeUtils_cjs_namespaceObject.getAbsolutePosition)(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
+function createPreviewNodeForGraph({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode }) {
+    return (0, external_createPreviewNode_cjs_namespaceObject.createPreviewNode)(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode);
+}
+function createTrailingPreviewEdge({ targetNodeId, targetHandleId, trailingEdgeId, trailingEdgeStyle = external_createPreviewNode_cjs_namespaceObject.PREVIEW_EDGE_STYLE }) {
+    if (!targetNodeId) return null;
+    return {
+        id: trailingEdgeId ?? `${external_constants_cjs_namespaceObject.PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
+        sourceHandle: external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    };
+}
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, containerId, removedEdgeIds, sourceNodeId } = options;
+    const preview = createPreviewNodeForGraph(options);
+    if (!preview) return null;
+    const sourceNode = reactFlowInstance.getNode(sourceNodeId);
+    if (!sourceNode) return null;
+    const targetNode = targetNodeId ? reactFlowInstance.getNode(targetNodeId) : void 0;
+    const resolvedContainerId = containerId ?? inferPreviewContainerId(sourceNode, targetNode);
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const trailingEdge = createTrailingPreviewEdge(options);
+    const edges = trailingEdge ? [
+        preview.edge,
+        trailingEdge
+    ] : [
+        preview.edge
+    ];
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
+    const removedEdgeIds = new Set(preview.removedEdgeIds ?? []);
+    setTimeout(()=>{
+        reactFlowInstance.setNodes((nodes)=>[
+                ...nodes.filter((node)=>node.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((node)=>({
+                        ...node,
+                        selected: false
+                    })),
+                preview.node
+            ]);
+        reactFlowInstance.setEdges((edges)=>[
+                ...edges.filter((edge)=>!(0, external_createPreviewNode_cjs_namespaceObject.isPreviewEdge)(edge) && !removedEdgeIds.has(edge.id)),
+                ...preview.edges
+            ]);
+    }, 0);
+}
+exports.applyPreviewGraphToReactFlow = __webpack_exports__.applyPreviewGraphToReactFlow;
+exports.createPreviewGraph = __webpack_exports__.createPreviewGraph;
+exports.reparentPreviewNodeToContainer = __webpack_exports__.reparentPreviewNodeToContainer;
+exports.showPreviewGraph = __webpack_exports__.showPreviewGraph;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "applyPreviewGraphToReactFlow",
+    "createPreviewGraph",
+    "reparentPreviewNodeToContainer",
+    "showPreviewGraph"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/utils/createPreviewGraph.d.ts

@@ -0,0 +1,37 @@
+import type { Edge, Node, Position, ReactFlowInstance } from '../xyflow/react.ts';
+import { type PreviewNodePositionMode } from './createPreviewNode';
+export interface PreviewGraph {
+    node: Node;
+    edges: Edge[];
+    removedEdgeIds?: string[];
+}
+export interface CreatePreviewGraphOptions {
+    sourceNodeId: string;
+    sourceHandleId: string;
+    reactFlowInstance: ReactFlowInstance;
+    position?: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+    sourceHandleType?: 'source' | 'target';
+    previewNodeSize?: {
+        width: number;
+        height: number;
+    };
+    handlePosition?: Position;
+    ignoredNodeTypes?: string[];
+    positionMode?: PreviewNodePositionMode;
+    targetNodeId?: string;
+    targetHandleId?: string | null;
+    containerId?: string;
+    removedEdgeIds?: string[];
+    trailingEdgeId?: string;
+    trailingEdgeStyle?: Edge['style'];
+}
+export type PreviewGraphOverrides = Partial<Pick<CreatePreviewGraphOptions, 'containerId' | 'data' | 'position' | 'positionMode' | 'removedEdgeIds' | 'targetHandleId' | 'targetNodeId'>>;
+export declare function reparentPreviewNodeToContainer(previewNode: Node, containerId: string, reactFlowInstance: ReactFlowInstance): Node | null;
+export declare function createPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function showPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function applyPreviewGraphToReactFlow(preview: PreviewGraph, reactFlowInstance: ReactFlowInstance): void;
+//# sourceMappingURL=createPreviewGraph.d.ts.map

package/dist/canvas/utils/createPreviewGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPreviewGraph.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewGraph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,iBAAiB,EAClB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,uBAAuB,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACvC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CACnC;AAMD,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,IAAI,CACF,yBAAyB,EACvB,aAAa,GACb,MAAM,GACN,UAAU,GACV,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,CACjB,CACF,CAAC;AAsBF,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,MAAM,EACnB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,GAAG,IAAI,CAoBb;AAkDD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAyB1F;AAOD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAMxF;AAOD,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,YAAY,EACrB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAgBN"}

package/dist/canvas/utils/createPreviewGraph.js

@@ -0,0 +1,83 @@
+import { DEFAULT_SOURCE_HANDLE_ID, PREVIEW_NODE_ID } from "../constants.js";
+import { PREVIEW_EDGE_STYLE, createPreviewNode, isPreviewEdge } from "./createPreviewNode.js";
+import { getAbsolutePosition } from "./NodeUtils.js";
+function inferPreviewContainerId(sourceNode, targetNode) {
+    if (!targetNode) return sourceNode.parentId;
+    if (sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = getAbsolutePosition(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
+function createPreviewNodeForGraph({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode }) {
+    return createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode);
+}
+function createTrailingPreviewEdge({ targetNodeId, targetHandleId, trailingEdgeId, trailingEdgeStyle = PREVIEW_EDGE_STYLE }) {
+    if (!targetNodeId) return null;
+    return {
+        id: trailingEdgeId ?? `${PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: PREVIEW_NODE_ID,
+        sourceHandle: DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    };
+}
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, containerId, removedEdgeIds, sourceNodeId } = options;
+    const preview = createPreviewNodeForGraph(options);
+    if (!preview) return null;
+    const sourceNode = reactFlowInstance.getNode(sourceNodeId);
+    if (!sourceNode) return null;
+    const targetNode = targetNodeId ? reactFlowInstance.getNode(targetNodeId) : void 0;
+    const resolvedContainerId = containerId ?? inferPreviewContainerId(sourceNode, targetNode);
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const trailingEdge = createTrailingPreviewEdge(options);
+    const edges = trailingEdge ? [
+        preview.edge,
+        trailingEdge
+    ] : [
+        preview.edge
+    ];
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
+    const removedEdgeIds = new Set(preview.removedEdgeIds ?? []);
+    setTimeout(()=>{
+        reactFlowInstance.setNodes((nodes)=>[
+                ...nodes.filter((node)=>node.id !== PREVIEW_NODE_ID).map((node)=>({
+                        ...node,
+                        selected: false
+                    })),
+                preview.node
+            ]);
+        reactFlowInstance.setEdges((edges)=>[
+                ...edges.filter((edge)=>!isPreviewEdge(edge) && !removedEdgeIds.has(edge.id)),
+                ...preview.edges
+            ]);
+    }, 0);
+}
+export { applyPreviewGraphToReactFlow, createPreviewGraph, reparentPreviewNodeToContainer, showPreviewGraph };

package/dist/canvas/utils/createPreviewNode.cjs

@@ -24,13 +24,25 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    applyPreviewToReactFlow: ()=>applyPreviewToReactFlow,
+    PREVIEW_EDGE_STYLE: ()=>PREVIEW_EDGE_STYLE,
+    isPreviewEdge: ()=>isPreviewEdge,
     removePreviewFromReactFlow: ()=>removePreviewFromReactFlow,
+    applyPreviewToReactFlow: ()=>applyPreviewToReactFlow,
+    getOppositePosition: ()=>getOppositePosition,
     createPreviewNode: ()=>createPreviewNode
 });
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
 const external_constants_cjs_namespaceObject = require("../constants.cjs");
 const external_NodeUtils_cjs_namespaceObject = require("./NodeUtils.cjs");
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function isPreviewEdge(edge) {
+    return edge.id === external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID || edge.source === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID || edge.target === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID;
+}
 function getOppositePosition(position) {
     switch(position){
         case react_cjs_namespaceObject.Position.Left:
@@ -74,6 +86,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -82,6 +100,25 @@ function computeSpreadOffset(handle, size) {
     if (index >= Math.ceil(count / 2)) return size;
     return 0;
 }
+function getOppositeOverflowDirection(overflowDirection) {
+    return {
+        x: 'right' === overflowDirection.x ? 'left' : 'right',
+        y: 'down' === overflowDirection.y ? 'up' : 'down'
+    };
+}
+function getPerpendicularDistance(initialPosition, resolvedPosition, direction) {
+    return 'left' === direction || 'right' === direction ? Math.abs(resolvedPosition.y - initialPosition.y) : Math.abs(resolvedPosition.x - initialPosition.x);
+}
+function getNonOverlappingPreviewPosition({ nodes, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection, handle }) {
+    const preferredPosition = (0, external_NodeUtils_cjs_namespaceObject.getNonOverlappingPositionForDirection)(nodes, {
+        ...initialPosition
+    }, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
+    if ((handle?.count ?? 1) <= 1) return preferredPosition;
+    const alternatePosition = (0, external_NodeUtils_cjs_namespaceObject.getNonOverlappingPositionForDirection)(nodes, {
+        ...initialPosition
+    }, previewNodeSize, direction, offset, ignoredNodeTypes, getOppositeOverflowDirection(overflowDirection));
+    return getPerpendicularDistance(initialPosition, alternatePosition, direction) < getPerpendicularDistance(initialPosition, preferredPosition, direction) ? alternatePosition : preferredPosition;
+}
 function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, offset = 5 * external_constants_cjs_namespaceObject.GRID_SPACING, ignoredNodeTypes = [], handle) {
     const sourceAbsolutePosition = sourceNode.parentId ? (0, external_NodeUtils_cjs_namespaceObject.getAbsolutePosition)(sourceNode, existingNodes) : sourceNode.position;
     const sourceWidth = sourceNode.measured?.width ?? 0;
@@ -134,12 +171,21 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
         x: anchorX >= sourceAbsolutePosition.x + sourceWidth / 2 ? 'right' : 'left',
         y: anchorY >= sourceAbsolutePosition.y + sourceHeight / 2 ? 'down' : 'up'
     };
-    return (0, external_NodeUtils_cjs_namespaceObject.getNonOverlappingPositionForDirection)(nodesWithAbsolutePositions, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
+    return getNonOverlappingPreviewPosition({
+        nodes: nodesWithAbsolutePositions,
+        initialPosition,
+        previewNodeSize,
+        direction,
+        offset,
+        ignoredNodeTypes,
+        overflowDirection,
+        handle
+    });
 }
 function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
     height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE
-}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = [], positionMode = 'drop') {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -149,7 +195,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? (0, external_NodeUtils_cjs_namespaceObject.resolveHandleContext)(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const nodePosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
     const finalData = {
         ...data ?? {}
@@ -179,12 +225,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
         id: external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID,
         ...previewSourceAndTargetData,
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
         node: previewNode,
@@ -201,21 +242,27 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID),
+                ...edges.filter((e)=>e.source !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && e.target !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID),
                 preview.edge
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.source !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID && e.target !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
 }
+exports.PREVIEW_EDGE_STYLE = __webpack_exports__.PREVIEW_EDGE_STYLE;
 exports.applyPreviewToReactFlow = __webpack_exports__.applyPreviewToReactFlow;
 exports.createPreviewNode = __webpack_exports__.createPreviewNode;
+exports.getOppositePosition = __webpack_exports__.getOppositePosition;
+exports.isPreviewEdge = __webpack_exports__.isPreviewEdge;
 exports.removePreviewFromReactFlow = __webpack_exports__.removePreviewFromReactFlow;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PREVIEW_EDGE_STYLE",
     "applyPreviewToReactFlow",
     "createPreviewNode",
+    "getOppositePosition",
+    "isPreviewEdge",
     "removePreviewFromReactFlow"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/utils/createPreviewNode.d.ts

@@ -1,11 +1,19 @@
 import { type Edge, type Node, Position, type ReactFlowInstance } from '../xyflow/react.ts';
+export type PreviewNodePositionMode = 'drop' | 'center';
+export declare const PREVIEW_EDGE_STYLE: Edge['style'];
+export declare function isPreviewEdge(edge: {
+    id?: string;
+    source?: string;
+    target?: string;
+}): boolean;
+export declare function getOppositePosition(position: Position): Position;
 export declare function createPreviewNode(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, position?: {
     x: number;
     y: number;
-}, data?: Record<string, any>, sourceHandleType?: 'source' | 'target', previewNodeSize?: {
+}, data?: Record<string, unknown>, sourceHandleType?: 'source' | 'target', previewNodeSize?: {
     width: number;
     height: number;
-}, handlePosition?: Position, ignoredNodeTypes?: string[]): {
+}, handlePosition?: Position, ignoredNodeTypes?: string[], positionMode?: PreviewNodePositionMode): {
     node: Node;
     edge: Edge;
 } | null;

package/dist/canvas/utils/createPreviewNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAiMlD,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,eAAe,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAG/C,EACD,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,MAAM,EAAO,GAC9B;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CA2FnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAGrF"}
+{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AASlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAK5C,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAM9F;AAMD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAahE;AA2PD,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,eAAe,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAG/C,EACD,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,MAAM,EAAO,EAC/B,YAAY,GAAE,uBAAgC,GAC7C;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAwFnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAKrF"}

package/dist/canvas/utils/createPreviewNode.js

@@ -1,6 +1,15 @@
 import { Position } from "../xyflow/react.js";
 import { DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from "../constants.js";
 import { getAbsolutePosition, getNonOverlappingPositionForDirection, resolveHandleContext } from "./NodeUtils.js";
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function isPreviewEdge(edge) {
+    return edge.id === PREVIEW_EDGE_ID || edge.source === PREVIEW_NODE_ID || edge.target === PREVIEW_NODE_ID;
+}
 function getOppositePosition(position) {
     switch(position){
         case Position.Left:
@@ -44,6 +53,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -52,6 +67,25 @@ function computeSpreadOffset(handle, size) {
     if (index >= Math.ceil(count / 2)) return size;
     return 0;
 }
+function getOppositeOverflowDirection(overflowDirection) {
+    return {
+        x: 'right' === overflowDirection.x ? 'left' : 'right',
+        y: 'down' === overflowDirection.y ? 'up' : 'down'
+    };
+}
+function getPerpendicularDistance(initialPosition, resolvedPosition, direction) {
+    return 'left' === direction || 'right' === direction ? Math.abs(resolvedPosition.y - initialPosition.y) : Math.abs(resolvedPosition.x - initialPosition.x);
+}
+function getNonOverlappingPreviewPosition({ nodes, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection, handle }) {
+    const preferredPosition = getNonOverlappingPositionForDirection(nodes, {
+        ...initialPosition
+    }, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
+    if ((handle?.count ?? 1) <= 1) return preferredPosition;
+    const alternatePosition = getNonOverlappingPositionForDirection(nodes, {
+        ...initialPosition
+    }, previewNodeSize, direction, offset, ignoredNodeTypes, getOppositeOverflowDirection(overflowDirection));
+    return getPerpendicularDistance(initialPosition, alternatePosition, direction) < getPerpendicularDistance(initialPosition, preferredPosition, direction) ? alternatePosition : preferredPosition;
+}
 function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, offset = 5 * GRID_SPACING, ignoredNodeTypes = [], handle) {
     const sourceAbsolutePosition = sourceNode.parentId ? getAbsolutePosition(sourceNode, existingNodes) : sourceNode.position;
     const sourceWidth = sourceNode.measured?.width ?? 0;
@@ -104,12 +138,21 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
         x: anchorX >= sourceAbsolutePosition.x + sourceWidth / 2 ? 'right' : 'left',
         y: anchorY >= sourceAbsolutePosition.y + sourceHeight / 2 ? 'down' : 'up'
     };
-    return getNonOverlappingPositionForDirection(nodesWithAbsolutePositions, initialPosition, previewNodeSize, direction, offset, ignoredNodeTypes, overflowDirection);
+    return getNonOverlappingPreviewPosition({
+        nodes: nodesWithAbsolutePositions,
+        initialPosition,
+        previewNodeSize,
+        direction,
+        offset,
+        ignoredNodeTypes,
+        overflowDirection,
+        handle
+    });
 }
 function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: DEFAULT_NODE_SIZE,
     height: DEFAULT_NODE_SIZE
-}, handlePosition = Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = Position.Right, ignoredNodeTypes = [], positionMode = 'drop') {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -119,7 +162,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? resolveHandleContext(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const nodePosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
     const finalData = {
         ...data ?? {}
@@ -149,12 +192,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
         id: PREVIEW_EDGE_ID,
         ...previewSourceAndTargetData,
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
         node: previewNode,
@@ -171,13 +209,13 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== PREVIEW_EDGE_ID),
+                ...edges.filter((e)=>e.source !== PREVIEW_NODE_ID && e.target !== PREVIEW_NODE_ID),
                 preview.edge
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.source !== PREVIEW_NODE_ID && e.target !== PREVIEW_NODE_ID));
 }
-export { applyPreviewToReactFlow, createPreviewNode, removePreviewFromReactFlow };
+export { PREVIEW_EDGE_STYLE, applyPreviewToReactFlow, createPreviewNode, getOppositePosition, isPreviewEdge, removePreviewFromReactFlow };