@uipath/apollo-react 4.17.0 → 4.18.0

package/dist/canvas/components/LoopNode/LoopNode.js

@@ -2,10 +2,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { NodeResizeControl, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
 import { cn } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH } from "../../constants.js";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
+import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_CONTAINER_WIDTH } from "../../utils/container.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
 import { selectIsConnecting, snapToGrid } from "../../utils/NodeUtils.js";
@@ -18,8 +18,9 @@ import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
 import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
 import { ButtonHandles } from "../ButtonHandle/index.js";
 import { NodeToolbar } from "../Toolbar/index.js";
-import { DEFAULT_CONTAINER_MIN_HEIGHT, DEFAULT_CONTAINER_MIN_WIDTH, DEFAULT_LOOP_ICON, DEFAULT_LOOP_TITLE } from "./LoopNode.constants.js";
 import { resolveContainerHandleGroups } from "./LoopNode.helpers.js";
+const DEFAULT_LOOP_ICON = 'repeat';
+const DEFAULT_LOOP_TITLE = 'Loop';
 const EMPTY_DATA = {};
 const RESIZE_CONTROLS = [
     {
@@ -186,7 +187,7 @@ function LoopNodeComponent(props) {
     ]);
     const handleMouseEnter = useCallback(()=>setIsHovered(true), []);
     const handleMouseLeave = useCallback(()=>setIsHovered(false), []);
-    const handleOuterHandleAction = useCallback((_event)=>{
+    const handleHandleAction = useCallback((_event)=>{
         setIsHovered(false);
     }, []);
     const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
@@ -264,7 +265,7 @@ function LoopNodeComponent(props) {
                 nodeWidth: containerWidth,
                 nodeHeight: containerHeight,
                 connectedHandleIds: connectedHandleIds,
-                onOuterHandleAction: handleOuterHandleAction
+                onHandleAction: handleHandleAction
             })
         ]
     });
@@ -376,24 +377,29 @@ function HandleGroups({ groups, ...handleGroupProps }) {
             }, `${group.boundary}:${group.position}:${groupIndex}`))
     });
 }
-function HandleGroup({ nodeId, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onOuterHandleAction }) {
+function HandleGroup({ nodeId, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onHandleAction }) {
     const groupVisible = shouldShowHandles && (group.visible ?? true);
     const position = group.position;
     const enhancedHandles = useMemo(()=>group.handles.map((handle)=>{
-            const isInnerSourceHandle = 'inner' === group.boundary && 'source' === handle.type;
-            const shouldResetHoverOnAction = 'outer' === group.boundary && 'source' === handle.type && handle.showButton;
+            const showHandle = connectedHandleIds.has(handle.id) || groupVisible;
+            if ('inner' === group.boundary) return {
+                ...handle,
+                showHandle,
+                showButton: false,
+                onAction: void 0
+            };
             return {
                 ...handle,
-                showHandle: connectedHandleIds.has(handle.id) || groupVisible,
-                showButton: isInnerSourceHandle ? false : handle.showButton,
-                onAction: handle.onAction ?? (shouldResetHoverOnAction ? onOuterHandleAction : void 0)
+                showHandle,
+                showButton: handle.showButton,
+                onAction: handle.onAction ?? onHandleAction
             };
         }), [
         group.boundary,
         group.handles,
         connectedHandleIds,
         groupVisible,
-        onOuterHandleAction
+        onHandleAction
     ]);
     return /*#__PURE__*/ jsx(ButtonHandles, {
         nodeId: nodeId,

package/dist/canvas/components/LoopNode/LoopNodePreview.cjs

@@ -39,15 +39,28 @@ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewH
         x: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.x + relativeCenter.x),
         y: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.y + relativeCenter.y)
     };
-    (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+    const placement = {
+        containerId,
         sourceNodeId: containerId,
-        sourceHandleId: previewHandles.sourceHandleId,
+        targetNodeId: containerId,
+        mode: 'first-child'
+    };
+    (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
+        source: {
+            nodeId: containerId,
+            handleId: previewHandles.sourceHandleId
+        },
         reactFlowInstance,
         position: previewCenter,
         positionMode: 'center',
         handlePosition: previewHandles.sourceHandlePosition,
-        targetNodeId: containerId,
-        targetHandleId: previewHandles.targetHandleId,
+        target: {
+            nodeId: containerId,
+            handleId: previewHandles.targetHandleId
+        },
+        data: {
+            placement
+        },
         containerId,
         trailingEdgeId
     });

package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAGlF,OAAO,EACL,KAAK,iCAAiC,EAEvC,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,iCAAiC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAwBA"}
+{"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAIlF,OAAO,EACL,KAAK,iCAAiC,EAEvC,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,iCAAiC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAmCA"}

package/dist/canvas/components/LoopNode/LoopNodePreview.js

@@ -11,15 +11,28 @@ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewH
         x: snapToGrid(containerAbsolutePosition.x + relativeCenter.x),
         y: snapToGrid(containerAbsolutePosition.y + relativeCenter.y)
     };
-    showPreviewGraph({
+    const placement = {
+        containerId,
         sourceNodeId: containerId,
-        sourceHandleId: previewHandles.sourceHandleId,
+        targetNodeId: containerId,
+        mode: 'first-child'
+    };
+    showPreviewGraph({
+        source: {
+            nodeId: containerId,
+            handleId: previewHandles.sourceHandleId
+        },
         reactFlowInstance,
         position: previewCenter,
         positionMode: 'center',
         handlePosition: previewHandles.sourceHandlePosition,
-        targetNodeId: containerId,
-        targetHandleId: previewHandles.targetHandleId,
+        target: {
+            nodeId: containerId,
+            handleId: previewHandles.targetHandleId
+        },
+        data: {
+            placement
+        },
         containerId,
         trailingEdgeId
     });

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs

@@ -29,14 +29,20 @@ __webpack_require__.d(__webpack_exports__, {
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
+const index_cjs_namespaceObject = require("../../../core/index.cjs");
 const createPreviewGraph_cjs_namespaceObject = require("../../../utils/createPreviewGraph.cjs");
 const createPreviewNode_cjs_namespaceObject = require("../../../utils/createPreviewNode.cjs");
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../../BaseCanvas/BaseCanvasModeProvider.cjs");
+const LoopNode_helpers_cjs_namespaceObject = require("../../LoopNode/LoopNode.helpers.cjs");
 const external_useEdgeToolbarPositioning_cjs_namespaceObject = require("./useEdgeToolbarPositioning.cjs");
 function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
     const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
+    const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
     const isDesignMode = 'design' === mode;
+    const getManifestForNode = (0, external_react_namespaceObject.useCallback)((node)=>node.type ? registry?.getManifest(node.type) : void 0, [
+        registry
+    ]);
     const previewEdge = (0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)({
         id: edgeId,
         source,
@@ -48,36 +54,42 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = (0, external_react_namespaceObject.useCallback)((position)=>{
-        const originalEdge = {
-            id: edgeId,
-            source,
-            sourceHandle: sourceHandleId,
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
+        const originalEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        if (!originalEdge) return;
+        const sourceEndpoint = {
+            nodeId: source,
+            handleId: sourceHandleId ?? external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID
         };
+        const containerOverrides = registry ? (0, LoopNode_helpers_cjs_namespaceObject.resolveContainerAddNodePreview)({
+            source: sourceEndpoint,
+            sourceHandleType: 'source',
+            reactFlowInstance: reactFlow,
+            getManifestForNode
+        }) : null;
         (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
-            sourceNodeId: source,
-            sourceHandleId: sourceHandleId ?? external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+            source: sourceEndpoint,
             reactFlowInstance: reactFlow,
             position,
+            positionMode: 'drop',
             data: {
                 originalEdge
             },
             sourceHandleType: 'source',
             handlePosition: sourcePosition,
             ignoredNodeTypes: ignoredNodeTypes ?? [],
-            targetNodeId: target,
-            targetHandleId,
-            removedEdgeIds: [
-                edgeId
-            ]
+            target: {
+                nodeId: target,
+                handleId: targetHandleId
+            },
+            ...containerOverrides ?? {}
         });
     }, [
         sourcePosition,
         source,
         sourceHandleId,
         reactFlow,
+        registry,
+        getManifestForNode,
         target,
         targetHandleId,
         edgeId,

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAMlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CAgF7C"}
+{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAQlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,gBAAgB,CA+F7C"}

package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js

@@ -1,14 +1,20 @@
 import { useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useMemo } from "react";
 import { DEFAULT_SOURCE_HANDLE_ID } from "../../../constants.js";
+import { useOptionalNodeTypeRegistry } from "../../../core/index.js";
 import { showPreviewGraph } from "../../../utils/createPreviewGraph.js";
 import { isPreviewEdge } from "../../../utils/createPreviewNode.js";
 import { useBaseCanvasMode } from "../../BaseCanvas/BaseCanvasModeProvider.js";
+import { resolveContainerAddNodePreview } from "../../LoopNode/LoopNode.helpers.js";
 import { useEdgeToolbarPositioning } from "./useEdgeToolbarPositioning.js";
 function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
     const reactFlow = useReactFlow();
+    const registry = useOptionalNodeTypeRegistry();
     const { mode } = useBaseCanvasMode();
     const isDesignMode = 'design' === mode;
+    const getManifestForNode = useCallback((node)=>node.type ? registry?.getManifest(node.type) : void 0, [
+        registry
+    ]);
     const previewEdge = isPreviewEdge({
         id: edgeId,
         source,
@@ -20,36 +26,42 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
         targetPosition
     });
     const handleAddNodeOnEdge = useCallback((position)=>{
-        const originalEdge = {
-            id: edgeId,
-            source,
-            sourceHandle: sourceHandleId,
-            target,
-            targetHandle: targetHandleId,
-            type: 'default'
+        const originalEdge = reactFlow.getEdges().find((edge)=>edge.id === edgeId);
+        if (!originalEdge) return;
+        const sourceEndpoint = {
+            nodeId: source,
+            handleId: sourceHandleId ?? DEFAULT_SOURCE_HANDLE_ID
         };
+        const containerOverrides = registry ? resolveContainerAddNodePreview({
+            source: sourceEndpoint,
+            sourceHandleType: 'source',
+            reactFlowInstance: reactFlow,
+            getManifestForNode
+        }) : null;
         showPreviewGraph({
-            sourceNodeId: source,
-            sourceHandleId: sourceHandleId ?? DEFAULT_SOURCE_HANDLE_ID,
+            source: sourceEndpoint,
             reactFlowInstance: reactFlow,
             position,
+            positionMode: 'drop',
             data: {
                 originalEdge
             },
             sourceHandleType: 'source',
             handlePosition: sourcePosition,
             ignoredNodeTypes: ignoredNodeTypes ?? [],
-            targetNodeId: target,
-            targetHandleId,
-            removedEdgeIds: [
-                edgeId
-            ]
+            target: {
+                nodeId: target,
+                handleId: targetHandleId
+            },
+            ...containerOverrides ?? {}
         });
     }, [
         sourcePosition,
         source,
         sourceHandleId,
         reactFlow,
+        registry,
+        getManifestForNode,
         target,
         targetHandleId,
         edgeId,

package/dist/canvas/constants.cjs

@@ -25,8 +25,6 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
-    DEFAULT_CONTAINER_HEIGHT: ()=>DEFAULT_CONTAINER_HEIGHT,
-    DEFAULT_CONTAINER_WIDTH: ()=>DEFAULT_CONTAINER_WIDTH,
     DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
     DEFAULT_RECTANGLE_NODE_WIDTH: ()=>DEFAULT_RECTANGLE_NODE_WIDTH,
     DEFAULT_SOURCE_HANDLE_ID: ()=>DEFAULT_SOURCE_HANDLE_ID,
@@ -60,8 +58,6 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;
@@ -86,8 +82,6 @@ const NODE_BADGE_SIZE = 20;
 const NODE_BADGE_INSET_SQUARE = 6;
 const NODE_BADGE_INSET_CIRCLE = 12;
 exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
-exports.DEFAULT_CONTAINER_HEIGHT = __webpack_exports__.DEFAULT_CONTAINER_HEIGHT;
-exports.DEFAULT_CONTAINER_WIDTH = __webpack_exports__.DEFAULT_CONTAINER_WIDTH;
 exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
 exports.DEFAULT_RECTANGLE_NODE_WIDTH = __webpack_exports__.DEFAULT_RECTANGLE_NODE_WIDTH;
 exports.DEFAULT_SOURCE_HANDLE_ID = __webpack_exports__.DEFAULT_SOURCE_HANDLE_ID;
@@ -117,8 +111,6 @@ exports.TOOLBOX_PADDING_Y = __webpack_exports__.TOOLBOX_PADDING_Y;
 exports.TOOLBOX_WIDTH = __webpack_exports__.TOOLBOX_WIDTH;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CANVAS_COMPACT_BREAKPOINT",
-    "DEFAULT_CONTAINER_HEIGHT",
-    "DEFAULT_CONTAINER_WIDTH",
     "DEFAULT_NODE_SIZE",
     "DEFAULT_RECTANGLE_NODE_WIDTH",
     "DEFAULT_SOURCE_HANDLE_ID",

package/dist/canvas/constants.d.ts

@@ -3,8 +3,6 @@ export declare const PREVIEW_EDGE_ID = "preview-edge-id";
 export declare const DEFAULT_SOURCE_HANDLE_ID = "output";
 export declare const DEFAULT_NODE_SIZE = 96;
 export declare const GRID_SPACING = 16;
-export declare const DEFAULT_CONTAINER_WIDTH: number;
-export declare const DEFAULT_CONTAINER_HEIGHT: number;
 export declare const CANVAS_COMPACT_BREAKPOINT = 600;
 export declare const TOOLBOX_WIDTH = 320;
 export declare const TOOLBOX_HEIGHT = 440;

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,uBAAuB,QAAoB,CAAC;AACzD,eAAO,MAAM,wBAAwB,QAAoB,CAAC;AAG1D,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/canvas/constants.js

@@ -3,8 +3,6 @@ const PREVIEW_EDGE_ID = 'preview-edge-id';
 const DEFAULT_SOURCE_HANDLE_ID = 'output';
 const DEFAULT_NODE_SIZE = 96;
 const GRID_SPACING = 16;
-const DEFAULT_CONTAINER_WIDTH = 35 * GRID_SPACING;
-const DEFAULT_CONTAINER_HEIGHT = 20 * GRID_SPACING;
 const CANVAS_COMPACT_BREAKPOINT = 600;
 const TOOLBOX_WIDTH = 320;
 const TOOLBOX_HEIGHT = 440;
@@ -28,4 +26,4 @@ const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
 const NODE_BADGE_SIZE = 20;
 const NODE_BADGE_INSET_SQUARE = 6;
 const NODE_BADGE_INSET_CIRCLE = 12;
-export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH, DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, DEFAULT_SOURCE_HANDLE_ID, FLOATING_CANVAS_PANEL_OFFSET, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_ERROR_ICON_SIZE, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO, NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES, PREVIEW_EDGE_ID, PREVIEW_NODE_ID, TOOLBOX_GAP, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };
+export { CANVAS_COMPACT_BREAKPOINT, DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, DEFAULT_SOURCE_HANDLE_ID, FLOATING_CANVAS_PANEL_OFFSET, GRID_SPACING, NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE, NODE_BORDER_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_ERROR_ICON_SIZE, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO, NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES, PREVIEW_EDGE_ID, PREVIEW_NODE_ID, TOOLBOX_GAP, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };

package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs

@@ -49,8 +49,10 @@ function useAddNodeOnConnectEnd(ignoredNodeTypes = EMPTY_IGNORED_NODE_TYPES) {
         if (!clientPosition) return;
         const flowDropPosition = reactFlowInstance.screenToFlowPosition(clientPosition);
         (0, index_cjs_namespaceObject.showPreviewGraph)({
-            sourceNodeId: connectionState.fromNode.id,
-            sourceHandleId: connectionState.fromHandle.id ?? 'output',
+            source: {
+                nodeId: connectionState.fromNode.id,
+                handleId: connectionState.fromHandle.id ?? 'output'
+            },
             reactFlowInstance,
             position: flowDropPosition,
             sourceHandleType: connectionState.fromHandle.type,

package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAddNodeOnConnectEnd.d.ts","sourceRoot":"","sources":["../../../src/canvas/hooks/useAddNodeOnConnectEnd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,0CAA0C,CAAC;AAoB3F,wBAAgB,sBAAsB,CAAC,gBAAgB,GAAE,MAAM,EAA6B,gBA+B3F"}
+{"version":3,"file":"useAddNodeOnConnectEnd.d.ts","sourceRoot":"","sources":["../../../src/canvas/hooks/useAddNodeOnConnectEnd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,0CAA0C,CAAC;AAoB3F,wBAAgB,sBAAsB,CAAC,gBAAgB,GAAE,MAAM,EAA6B,gBAiC3F"}

package/dist/canvas/hooks/useAddNodeOnConnectEnd.js

@@ -21,8 +21,10 @@ function useAddNodeOnConnectEnd(ignoredNodeTypes = EMPTY_IGNORED_NODE_TYPES) {
         if (!clientPosition) return;
         const flowDropPosition = reactFlowInstance.screenToFlowPosition(clientPosition);
         showPreviewGraph({
-            sourceNodeId: connectionState.fromNode.id,
-            sourceHandleId: connectionState.fromHandle.id ?? 'output',
+            source: {
+                nodeId: connectionState.fromNode.id,
+                handleId: connectionState.fromHandle.id ?? 'output'
+            },
             reactFlowInstance,
             position: flowDropPosition,
             sourceHandleType: connectionState.fromHandle.type,

package/dist/canvas/storybook-utils/hooks/useCanvasStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasStory.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/hooks/useCanvasStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAW,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAMjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAKjD,MAAM,WAAW,qBAAqB;IAIpC,YAAY,EAAE,IAAI,EAAE,CAAC;IAMrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IAMtB,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAKlC,mBAAmB,CAAC,EAAE,SAAS,CAAC;CACjC;AAKD,MAAM,WAAW,oBAAoB;IAEnC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,SAAS,EAAE,SAAS,CAAC;IAErB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAG5C,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;IAEzD,SAAS,EAAE,SAAS,CAAC;IAMrB,WAAW,EAAE;QACX,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AA8BD,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CA8DnF;AAYD,wBAAgB,wBAAwB,CAAC,aAAa,GAAE,SAAS,CAAC,MAAM,CAAY,GAAG,SAAS,CAY/F"}
+{"version":3,"file":"useCanvasStory.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/hooks/useCanvasStory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAW,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAMjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAMjD,MAAM,WAAW,qBAAqB;IAIpC,YAAY,EAAE,IAAI,EAAE,CAAC;IAMrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IAMtB,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAKlC,mBAAmB,CAAC,EAAE,SAAS,CAAC;CACjC;AAKD,MAAM,WAAW,oBAAoB;IAEnC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,SAAS,EAAE,SAAS,CAAC;IAErB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAEvD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAG5C,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;IAEzD,SAAS,EAAE,SAAS,CAAC;IAMrB,WAAW,EAAE;QACX,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,aAAa,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AA8BD,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CA8DnF;AAYD,wBAAgB,wBAAwB,CAAC,aAAa,GAAE,SAAS,CAAC,MAAM,CAAY,GAAG,SAAS,CAY/F"}

package/dist/canvas/utils/NodeUtils.cjs

@@ -26,11 +26,14 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     getAbsolutePosition: ()=>getAbsolutePosition,
     getNonOverlappingPositionForDirection: ()=>getNonOverlappingPositionForDirection,
-    resolveCollisions: ()=>resolveCollisions,
-    resolveHandleContext: ()=>resolveHandleContext,
-    getHandleIndex: ()=>getHandleIndex,
     selectIsConnecting: ()=>selectIsConnecting,
-    snapToGrid: ()=>snapToGrid
+    clamp: ()=>clamp,
+    getHandleIndex: ()=>getHandleIndex,
+    snapToGrid: ()=>snapToGrid,
+    snapUpToGrid: ()=>snapUpToGrid,
+    resolveHandleContext: ()=>resolveHandleContext,
+    resolveCollisions: ()=>resolveCollisions,
+    snapDownToGrid: ()=>snapDownToGrid
 });
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
 const external_constants_cjs_namespaceObject = require("../constants.cjs");
@@ -63,25 +66,32 @@ function getNonOverlappingPositionForDirection(nodes, newNodePosition, newNodeSt
     return newNodePosition;
 }
 const snapToGrid = (value)=>Math.round(value / external_constants_cjs_namespaceObject.GRID_SPACING) * external_constants_cjs_namespaceObject.GRID_SPACING;
-function getBoxesFromNodes(nodes, margin = 0) {
+const snapUpToGrid = (value)=>Math.ceil(value / external_constants_cjs_namespaceObject.GRID_SPACING) * external_constants_cjs_namespaceObject.GRID_SPACING;
+const snapDownToGrid = (value)=>Math.floor(value / external_constants_cjs_namespaceObject.GRID_SPACING) * external_constants_cjs_namespaceObject.GRID_SPACING;
+const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
+function getBoxesFromNodes(nodes, margin = 0, getNodeSize) {
     const boxes = new Array(nodes.length);
     for(let i = 0; i < nodes.length; i++){
         const node = nodes[i];
+        const nodeSize = getNodeSize?.(node) ?? {
+            width: node.width ?? node.measured?.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
+            height: node.height ?? node.measured?.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE
+        };
         boxes[i] = {
             x: node.position.x - margin,
             y: node.position.y - margin,
-            width: (node.width ?? node.measured?.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE) + 2 * margin,
-            height: (node.height ?? node.measured?.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE) + 2 * margin,
+            width: nodeSize.width + 2 * margin,
+            height: nodeSize.height + 2 * margin,
             node,
             moved: false
         };
     }
     return boxes;
 }
-const resolveCollisions = (nodes, { maxIterations = 50, overlapThreshold = 0, margin = 2 * external_constants_cjs_namespaceObject.GRID_SPACING, ignoredNodeTypes } = {})=>{
+const resolveCollisions = (nodes, { maxIterations = 50, overlapThreshold = 0, margin = 2 * external_constants_cjs_namespaceObject.GRID_SPACING, ignoredNodeTypes, getNodeSize } = {})=>{
     const ignoredSet = new Set(ignoredNodeTypes);
     const collisionNodes = ignoredSet.size > 0 ? nodes.filter((n)=>!ignoredSet.has(n.type ?? '')) : nodes;
-    const boxes = getBoxesFromNodes(collisionNodes, margin);
+    const boxes = getBoxesFromNodes(collisionNodes, margin, getNodeSize);
     for(let iter = 0; iter < maxIterations; iter++){
         let moved = false;
         for(let i = 0; i < boxes.length; i++)for(let j = i + 1; j < boxes.length; j++){
@@ -143,21 +153,27 @@ function getHandleIndex(handleId, position, allHandles) {
     const index = peers.findIndex((h)=>h.id === handleId);
     return -1 === index ? null : index;
 }
+exports.clamp = __webpack_exports__.clamp;
 exports.getAbsolutePosition = __webpack_exports__.getAbsolutePosition;
 exports.getHandleIndex = __webpack_exports__.getHandleIndex;
 exports.getNonOverlappingPositionForDirection = __webpack_exports__.getNonOverlappingPositionForDirection;
 exports.resolveCollisions = __webpack_exports__.resolveCollisions;
 exports.resolveHandleContext = __webpack_exports__.resolveHandleContext;
 exports.selectIsConnecting = __webpack_exports__.selectIsConnecting;
+exports.snapDownToGrid = __webpack_exports__.snapDownToGrid;
 exports.snapToGrid = __webpack_exports__.snapToGrid;
+exports.snapUpToGrid = __webpack_exports__.snapUpToGrid;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "clamp",
     "getAbsolutePosition",
     "getHandleIndex",
     "getNonOverlappingPositionForDirection",
     "resolveCollisions",
     "resolveHandleContext",
     "selectIsConnecting",
-    "snapToGrid"
+    "snapDownToGrid",
+    "snapToGrid",
+    "snapUpToGrid"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -12,11 +12,18 @@ export declare function getNonOverlappingPositionForDirection(nodes: Node[], new
     y: 'up' | 'down';
 }): XYPosition;
 export declare const snapToGrid: (value: number) => number;
+export declare const snapUpToGrid: (value: number) => number;
+export declare const snapDownToGrid: (value: number) => number;
+export declare const clamp: (value: number, min: number, max: number) => number;
 export type CollisionAlgorithmOptions = {
     maxIterations?: number;
     overlapThreshold?: number;
     margin?: number;
     ignoredNodeTypes?: string[];
+    getNodeSize?: (node: Node) => {
+        width: number;
+        height: number;
+    };
 };
 export type CollisionAlgorithm = (nodes: Node[], options?: CollisionAlgorithmOptions) => Node[];
 export declare const resolveCollisions: CollisionAlgorithm;

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

@@ -1 +1 @@
-{"version":3,"file":"NodeUtils.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/NodeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,0CAA0C,CAAC;AAQlD,eAAO,MAAM,kBAAkB,GAAI,OAAO,cAAc,YAAkC,CAAC;AAS3F,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAWrF,CAAC;AAeF,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,IAAI,EAAE,EACb,eAAe,EAAE,UAAU,EAC3B,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAC9C,MAAM,SAAmB,EACzB,gBAAgB,GAAE,MAAM,EAAO,EAC/B,iBAAiB,GAAE;IAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAA8B,GACvF,UAAU,CAgCZ;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAE1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,EAAE,yBAAyB,KAAK,IAAI,EAAE,CAAC;AA6BhG,eAAO,MAAM,iBAAiB,EAAE,kBAwE/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,QAAQ,GACvB,aAAa,GAAG,SAAS,CAgB3B;AAWD,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,GAAG,IAAI,CAQf"}
+{"version":3,"file":"NodeUtils.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/NodeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,0CAA0C,CAAC;AAQlD,eAAO,MAAM,kBAAkB,GAAI,OAAO,cAAc,YAAkC,CAAC;AAS3F,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAWrF,CAAC;AAeF,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,IAAI,EAAE,EACb,eAAe,EAAE,UAAU,EAC3B,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAC9C,MAAM,SAAmB,EACzB,gBAAgB,GAAE,MAAM,EAAO,EAC/B,iBAAiB,GAAE;IAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAA8B,GACvF,UAAU,CAgCZ;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAE1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,MAE5C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAE9C,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAE/D,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,EAAE,yBAAyB,KAAK,IAAI,EAAE,CAAC;AAyChG,eAAO,MAAM,iBAAiB,EAAE,kBA8E/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,QAAQ,GACvB,aAAa,GAAG,SAAS,CAgB3B;AAWD,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,GAAG,IAAI,CAQf"}

package/dist/canvas/utils/NodeUtils.js

@@ -29,25 +29,32 @@ function getNonOverlappingPositionForDirection(nodes, newNodePosition, newNodeSt
     return newNodePosition;
 }
 const snapToGrid = (value)=>Math.round(value / GRID_SPACING) * GRID_SPACING;
-function getBoxesFromNodes(nodes, margin = 0) {
+const snapUpToGrid = (value)=>Math.ceil(value / GRID_SPACING) * GRID_SPACING;
+const snapDownToGrid = (value)=>Math.floor(value / GRID_SPACING) * GRID_SPACING;
+const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
+function getBoxesFromNodes(nodes, margin = 0, getNodeSize) {
     const boxes = new Array(nodes.length);
     for(let i = 0; i < nodes.length; i++){
         const node = nodes[i];
+        const nodeSize = getNodeSize?.(node) ?? {
+            width: node.width ?? node.measured?.width ?? DEFAULT_NODE_SIZE,
+            height: node.height ?? node.measured?.height ?? DEFAULT_NODE_SIZE
+        };
         boxes[i] = {
             x: node.position.x - margin,
             y: node.position.y - margin,
-            width: (node.width ?? node.measured?.width ?? DEFAULT_NODE_SIZE) + 2 * margin,
-            height: (node.height ?? node.measured?.height ?? DEFAULT_NODE_SIZE) + 2 * margin,
+            width: nodeSize.width + 2 * margin,
+            height: nodeSize.height + 2 * margin,
             node,
             moved: false
         };
     }
     return boxes;
 }
-const resolveCollisions = (nodes, { maxIterations = 50, overlapThreshold = 0, margin = 2 * GRID_SPACING, ignoredNodeTypes } = {})=>{
+const resolveCollisions = (nodes, { maxIterations = 50, overlapThreshold = 0, margin = 2 * GRID_SPACING, ignoredNodeTypes, getNodeSize } = {})=>{
     const ignoredSet = new Set(ignoredNodeTypes);
     const collisionNodes = ignoredSet.size > 0 ? nodes.filter((n)=>!ignoredSet.has(n.type ?? '')) : nodes;
-    const boxes = getBoxesFromNodes(collisionNodes, margin);
+    const boxes = getBoxesFromNodes(collisionNodes, margin, getNodeSize);
     for(let iter = 0; iter < maxIterations; iter++){
         let moved = false;
         for(let i = 0; i < boxes.length; i++)for(let j = i + 1; j < boxes.length; j++){
@@ -109,4 +116,4 @@ function getHandleIndex(handleId, position, allHandles) {
     const index = peers.findIndex((h)=>h.id === handleId);
     return -1 === index ? null : index;
 }
-export { getAbsolutePosition, getHandleIndex, getNonOverlappingPositionForDirection, resolveCollisions, resolveHandleContext, selectIsConnecting, snapToGrid };
+export { clamp, getAbsolutePosition, getHandleIndex, getNonOverlappingPositionForDirection, resolveCollisions, resolveHandleContext, selectIsConnecting, snapDownToGrid, snapToGrid, snapUpToGrid };

package/dist/canvas/utils/collapse.cjs

@@ -31,7 +31,7 @@ __webpack_require__.d(__webpack_exports__, {
     COLLAPSED_NODE_SIZE: ()=>COLLAPSED_NODE_SIZE,
     getCollapsedSize: ()=>getCollapsedSize
 });
-const external_constants_cjs_namespaceObject = require("../constants.cjs");
+const external_container_cjs_namespaceObject = require("./container.cjs");
 const COLLAPSED_NODE_SIZE = 96;
 const EXPANDED_RECTANGLE_WIDTH = 288;
 const getCollapsedShape = (originalShape)=>'rectangle' === originalShape ? 'square' : originalShape;
@@ -42,8 +42,8 @@ const getCollapsedSize = ()=>({
     });
 const getExpandedSize = (shape)=>{
     if ('container' === shape) return {
-        width: external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH,
-        height: external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT
+        width: external_container_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH,
+        height: external_container_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT
     };
     return {
         width: 'rectangle' === shape ? EXPANDED_RECTANGLE_WIDTH : COLLAPSED_NODE_SIZE,

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

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/collapse.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAK3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAKtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAM5C,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAOF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAMF,eAAO,MAAM,gBAAgB,QAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAKlE,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,QAAQ,SAAS,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAYlF,CAAC"}
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/collapse.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAM3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAKtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAM5C,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAOF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAMF,eAAO,MAAM,gBAAgB,QAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAKlE,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,QAAQ,SAAS,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAYlF,CAAC"}

package/dist/canvas/utils/collapse.js

@@ -1,4 +1,4 @@
-import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH } from "../constants.js";
+import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH } from "./container.js";
 const COLLAPSED_NODE_SIZE = 96;
 const EXPANDED_RECTANGLE_WIDTH = 288;
 const getCollapsedShape = (originalShape)=>'rectangle' === originalShape ? 'square' : originalShape;