@xyflow/system 0.0.10 → 0.0.12

package/dist/esm/index.mjs

@@ -64,6 +64,46 @@ var Position;
     Position["Bottom"] = "bottom";
 })(Position || (Position = {}));
 
+/**
+ * @internal
+ */
+function areConnectionMapsEqual(a, b) {
+    if (!a && !b) {
+        return true;
+    }
+    if (!a || !b || a.size !== b.size) {
+        return false;
+    }
+    if (!a.size && !b.size) {
+        return true;
+    }
+    for (const key of a.keys()) {
+        if (!b.has(key)) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * We call the callback for all connections in a that are not in b
+ *
+ * @internal
+ */
+function handleConnectionChange(a, b, cb) {
+    if (!cb) {
+        return;
+    }
+    const diff = [];
+    a.forEach((connection, key) => {
+        if (!b?.has(key)) {
+            diff.push(connection);
+        }
+    });
+    if (diff.length) {
+        cb(diff);
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 const isNodeBase = (element) => 'id' in element && !('source' in element) && !('target' in element);
@@ -102,18 +142,18 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
             },
         };
     }
-    const offsetX = (node.width ?? 0) * nodeOrigin[0];
-    const offsetY = (node.height ?? 0) * nodeOrigin[1];
+    const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
+    const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
     const position = {
         x: node.position.x - offsetX,
         y: node.position.y - offsetY,
     };
     return {
         ...position,
-        positionAbsolute: node.positionAbsolute
+        positionAbsolute: node.computed?.positionAbsolute
             ? {
-                x: node.positionAbsolute.x - offsetX,
-                y: node.positionAbsolute.y - offsetY,
+                x: node.computed.positionAbsolute.x - offsetX,
+                y: node.computed.positionAbsolute.y - offsetY,
             }
             : position,
     };
@@ -127,8 +167,8 @@ const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
         return getBoundsOfBoxes(currBox, rectToBox({
             x,
             y,
-            width: node.width || 0,
-            height: node.height || 0,
+            width: node.computed?.width ?? node.width ?? 0,
+            height: node.computed?.height ?? node.height ?? 0,
         }));
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
@@ -142,14 +182,16 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
         height: rect.height / tScale,
     };
     const visibleNodes = nodes.reduce((res, node) => {
-        const { width, height, selectable = true, hidden = false } = node;
+        const { computed, selectable = true, hidden = false } = node;
+        const width = computed?.width ?? node.width ?? null;
+        const height = computed?.height ?? node.height ?? null;
         if ((excludeNonSelectableNodes && !selectable) || hidden) {
             return res;
         }
         const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
-        const notInitialized = width === undefined || height === undefined || width === null || height === null;
+        const notInitialized = width === null || height === null;
         const partiallyVisible = partially && overlappingArea > 0;
-        const area = (width || 0) * (height || 0);
+        const area = (width ?? 0) * (height ?? 0);
         const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
         if (isVisible || node.dragging) {
             res.push(node);
@@ -167,7 +209,7 @@ const getConnectedEdgesBase = (nodes, edges) => {
 };
 function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
     const filteredNodes = nodes.filter((n) => {
-        const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden);
+        const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
         if (options?.nodes?.length) {
             return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
         }
@@ -185,7 +227,7 @@ function clampNodeExtent(node, extent) {
     if (!extent || extent === 'parent') {
         return extent;
     }
-    return [extent[0], [extent[1][0] - (node.width || 0), extent[1][1] - (node.height || 0)]];
+    return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
 }
 function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0, 0], onError) {
     const clampedNodeExtent = clampNodeExtent(node, node.extent || nodeExtent);
@@ -199,15 +241,17 @@ function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0
             : parentPos;
     }
     if (node.extent === 'parent' && !node.expandParent) {
-        if (node.parentNode && node.width && node.height) {
+        const nodeWidth = node.computed?.width;
+        const nodeHeight = node.computed?.height;
+        if (node.parentNode && nodeWidth && nodeHeight) {
             const currNodeOrigin = node.origin || nodeOrigin;
             currentExtent =
-                parentNode && isNumeric(parentNode.width) && isNumeric(parentNode.height)
+                parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
                     ? [
-                        [parentPos.x + node.width * currNodeOrigin[0], parentPos.y + node.height * currNodeOrigin[1]],
+                        [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
                         [
-                            parentPos.x + parentNode.width - node.width + node.width * currNodeOrigin[0],
-                            parentPos.y + parentNode.height - node.height + node.height * currNodeOrigin[1],
+                            parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
+                            parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
                         ],
                     ]
                     : currentExtent;
@@ -251,7 +295,12 @@ function getElementsToRemove({ nodesToRemove, edgesToRemove, nodes, edges, }) {
     const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
     const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
     const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
-    const matchingEdges = [...initialHitEdges, ...connectedEdges];
+    const matchingEdges = connectedEdges.reduce((res, edge) => {
+        if (!res.find((e) => e.id === edge.id)) {
+            res.push(edge);
+        }
+        return res;
+    }, initialHitEdges);
     return {
         matchingEdges,
         matchingNodes,
@@ -301,16 +350,16 @@ const nodeToRect = (node, nodeOrigin = [0, 0]) => {
     const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
     return {
         ...positionAbsolute,
-        width: node.width || 0,
-        height: node.height || 0,
+        width: node.computed?.width ?? node.width ?? 0,
+        height: node.computed?.height ?? node.height ?? 0,
     };
 };
 const nodeToBox = (node, nodeOrigin = [0, 0]) => {
     const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
     return {
         ...positionAbsolute,
-        x2: positionAbsolute.x + (node.width || 0),
-        y2: positionAbsolute.y + (node.height || 0),
+        x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
+        y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
     };
 };
 const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
@@ -406,12 +455,16 @@ const getEventPosition = (event, bounds) => {
         y: evtY - (bounds?.top ?? 0),
     };
 };
+// The handle bounds are calculated relative to the node element.
+// We store them in the internals object of the node in order to avoid
+// unnecessary recalculations.
 const getHandleBounds = (selector, nodeElement, zoom, nodeOrigin = [0, 0]) => {
     const handles = nodeElement.querySelectorAll(selector);
     if (!handles || !handles.length) {
         return null;
     }
     const handlesArray = Array.from(handles);
+    // @todo can't we use the node dimensions here?
     const nodeBounds = nodeElement.getBoundingClientRect();
     const nodeOffset = {
         x: nodeBounds.width * nodeOrigin[0],
@@ -501,14 +554,14 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY, }) {
     return [centerX, centerY, xOffset, yOffset];
 }
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
-function groupEdgesByZLevel(edges, nodes, elevateEdgesOnSelect = false) {
+function groupEdgesByZLevel(edges, nodeLookup, elevateEdgesOnSelect = false) {
     let maxLevel = -1;
     const levelLookup = edges.reduce((tree, edge) => {
         const hasZIndex = isNumeric(edge.zIndex);
         let z = hasZIndex ? edge.zIndex : 0;
         if (elevateEdgesOnSelect) {
-            const targetNode = nodes.find((n) => n.id === edge.target);
-            const sourceNode = nodes.find((n) => n.id === edge.source);
+            const targetNode = nodeLookup.get(edge.target);
+            const sourceNode = nodeLookup.get(edge.source);
             const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
             const selectedZIndex = Math.max(sourceNode?.[internalsSymbol]?.z || 0, targetNode?.[internalsSymbol]?.z || 0, 1000);
             z = (hasZIndex ? edge.zIndex : 0) + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
@@ -551,7 +604,7 @@ function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
     };
     return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
 }
-const getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
+const getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 const connectionExists = (edge, edges) => {
     return edges.some((el) => el.source === edge.source &&
         el.target === edge.target &&
@@ -576,6 +629,12 @@ const addEdgeBase = (edgeParams, edges) => {
     if (connectionExists(edge, edges)) {
         return edges;
     }
+    if (edge.sourceHandle === null) {
+        delete edge.sourceHandle;
+    }
+    if (edge.targetHandle === null) {
+        delete edge.targetHandle;
+    }
     return edges.concat(edge);
 };
 const updateEdgeBase = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
@@ -826,17 +885,17 @@ function toHandleBounds(handles) {
 }
 function getHandleDataByNode(node) {
     const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
-    const nodeWidth = node?.width || node?.size?.width;
-    const nodeHeight = node?.height || node?.size?.height;
+    const nodeWidth = node?.computed?.width || node?.width;
+    const nodeHeight = node?.computed?.height || node?.height;
     const isValid = handleBounds &&
         nodeWidth &&
         nodeHeight &&
-        typeof node?.positionAbsolute?.x !== 'undefined' &&
-        typeof node?.positionAbsolute?.y !== 'undefined';
+        typeof node?.computed?.positionAbsolute?.x !== 'undefined' &&
+        typeof node?.computed?.positionAbsolute?.y !== 'undefined';
     return [
         {
-            x: node?.positionAbsolute?.x || 0,
-            y: node?.positionAbsolute?.y || 0,
+            x: node?.computed?.positionAbsolute?.x || 0,
+            y: node?.computed?.positionAbsolute?.y || 0,
             width: nodeWidth || 0,
             height: nodeHeight || 0,
         },
@@ -916,18 +975,57 @@ function createMarkerIds(edges, { id, defaultColor }) {
         .sort((a, b) => a.id.localeCompare(b.id));
 }
 
-function updateAbsolutePositions(nodes, nodeOrigin = [0, 0], parentNodes) {
+function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+    let alignmentOffset = 0.5;
+    if (align === 'start') {
+        alignmentOffset = 0;
+    }
+    else if (align === 'end') {
+        alignmentOffset = 1;
+    }
+    // position === Position.Top
+    // we set the x any y position of the toolbar based on the nodes position
+    let pos = [
+        (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+        nodeRect.y * viewport.zoom + viewport.y - offset,
+    ];
+    // and than shift it based on the alignment. The shift values are in %.
+    let shift = [-100 * alignmentOffset, -100];
+    switch (position) {
+        case Position.Right:
+            pos = [
+                (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+            ];
+            shift = [0, -100 * alignmentOffset];
+            break;
+        case Position.Bottom:
+            pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+            shift[1] = 0;
+            break;
+        case Position.Left:
+            pos = [
+                nodeRect.x * viewport.zoom + viewport.x - offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+            ];
+            shift = [-100, -100 * alignmentOffset];
+            break;
+    }
+    return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
+
+function updateAbsolutePositions(nodes, nodeLookup, nodeOrigin = [0, 0], parentNodes) {
     return nodes.map((node) => {
-        if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
+        if (node.parentNode && !nodeLookup.has(node.parentNode)) {
             throw new Error(`Parent node ${node.parentNode} not found`);
         }
         if (node.parentNode || parentNodes?.[node.id]) {
-            const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
-            const { x, y, z } = calculateXYZPosition(node, nodes, {
+            const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : null;
+            const { x, y, z } = calculateXYZPosition(node, nodes, nodeLookup, {
                 ...node.position,
                 z: node[internalsSymbol]?.z ?? 0,
             }, parentNode?.origin || nodeOrigin);
-            node.positionAbsolute = {
+            node.computed.positionAbsolute = {
                 x,
                 y,
             };
@@ -939,21 +1037,25 @@ function updateAbsolutePositions(nodes, nodeOrigin = [0, 0], parentNodes) {
         return node;
     });
 }
-function updateNodes(nodes, storeNodes, options = {
+function updateNodes(nodes, nodeLookup, options = {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: true,
     defaults: {},
 }) {
+    const tmpLookup = new Map(nodeLookup);
+    nodeLookup.clear();
     const parentNodes = {};
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
     const nextNodes = nodes.map((n) => {
-        const currentStoreNode = storeNodes.find((storeNode) => n.id === storeNode.id);
+        const currentStoreNode = tmpLookup.get(n.id);
         const node = {
             ...options.defaults,
             ...n,
-            positionAbsolute: n.position,
-            width: n.width || currentStoreNode?.width,
-            height: n.height || currentStoreNode?.height,
+            computed: {
+                positionAbsolute: n.position,
+                width: n.computed?.width || currentStoreNode?.computed?.width,
+                height: n.computed?.height || currentStoreNode?.computed?.height,
+            },
         };
         const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
         const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
@@ -967,24 +1069,25 @@ function updateNodes(nodes, storeNodes, options = {
                 z,
             },
         });
+        nodeLookup.set(node.id, node);
         return node;
     });
-    const nodesWithPositions = updateAbsolutePositions(nextNodes, options.nodeOrigin, parentNodes);
+    const nodesWithPositions = updateAbsolutePositions(nextNodes, nodeLookup, options.nodeOrigin, parentNodes);
     return nodesWithPositions;
 }
-function calculateXYZPosition(node, nodes, result, nodeOrigin) {
+function calculateXYZPosition(node, nodes, nodeLookup, result, nodeOrigin) {
     if (!node.parentNode) {
         return result;
     }
-    const parentNode = nodes.find((n) => n.id === node.parentNode);
+    const parentNode = nodeLookup.get(node.parentNode);
     const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
-    return calculateXYZPosition(parentNode, nodes, {
+    return calculateXYZPosition(parentNode, nodes, nodeLookup, {
         x: (result.x ?? 0) + parentNodePosition.x,
         y: (result.y ?? 0) + parentNodePosition.y,
         z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
     }, parentNode.origin || nodeOrigin);
 }
-function updateNodeDimensions(updates, nodes, domNode, nodeOrigin, onUpdate) {
+function updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, onUpdate) {
     const viewportNode = domNode?.querySelector('.xyflow__viewport');
     if (!viewportNode) {
         return null;
@@ -992,17 +1095,20 @@ function updateNodeDimensions(updates, nodes, domNode, nodeOrigin, onUpdate) {
     const style = window.getComputedStyle(viewportNode);
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
     const nextNodes = nodes.map((node) => {
-        const update = updates.find((u) => u.id === node.id);
+        const update = updates.get(node.id);
         if (update) {
             const dimensions = getDimensions(update.nodeElement);
             const doUpdate = !!(dimensions.width &&
                 dimensions.height &&
-                (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate));
+                (node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate));
             if (doUpdate) {
                 onUpdate?.(node.id, dimensions);
-                return {
+                const newNode = {
                     ...node,
-                    ...dimensions,
+                    computed: {
+                        ...node.computed,
+                        ...dimensions,
+                    },
                     [internalsSymbol]: {
                         ...node[internalsSymbol],
                         handleBounds: {
@@ -1011,6 +1117,8 @@ function updateNodeDimensions(updates, nodes, domNode, nodeOrigin, onUpdate) {
                         },
                     },
                 };
+                nodeLookup.set(node.id, newNode);
+                return newNode;
             }
         }
         return node;
@@ -1033,6 +1141,21 @@ function panBy({ delta, panZoom, transform, translateExtent, width, height, }) {
         (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);
     return transformChanged;
 }
+function updateConnectionLookup(lookup, edges) {
+    lookup.clear();
+    edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
+        if (source && target) {
+            const sourceKey = `${source}-source-${sourceHandle}`;
+            const targetKey = `${target}-target-${targetHandle}`;
+            const prevSource = lookup.get(sourceKey) || new Map();
+            const prevTarget = lookup.get(targetKey) || new Map();
+            const connection = { source, target, sourceHandle, targetHandle };
+            lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+            lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+        }
+    });
+    return lookup;
+}
 
 function wrapSelectionDragFunc(selectionFunc) {
     return (event, _, nodes) => selectionFunc?.(event, nodes);
@@ -1070,10 +1193,9 @@ function getDragItems(nodes, nodesDraggable, mousePos, nodeId) {
         .map((n) => ({
         id: n.id,
         position: n.position || { x: 0, y: 0 },
-        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
         distance: {
-            x: mousePos.x - (n.positionAbsolute?.x ?? 0),
-            y: mousePos.y - (n.positionAbsolute?.y ?? 0),
+            x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
+            y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
         },
         delta: {
             x: 0,
@@ -1081,25 +1203,31 @@ function getDragItems(nodes, nodesDraggable, mousePos, nodeId) {
         },
         extent: n.extent,
         parentNode: n.parentNode,
-        width: n.width,
-        height: n.height,
         origin: n.origin,
         expandParent: n.expandParent,
+        computed: {
+            positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
+            width: n.computed?.width || 0,
+            height: n.computed?.height || 0,
+        },
     }));
 }
 // returns two params:
 // 1. the dragged node (or the first of the list, if we are dragging a node selection)
 // 2. array of selected nodes (for multi selections)
-function getEventHandlerParams({ nodeId, dragItems, nodes, }) {
-    const extentedDragItems = dragItems.map((n) => {
-        const node = nodes.find((node) => node.id === n.id);
+function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
+    const nodesFromDragItems = dragItems.map((n) => {
+        const node = nodeLookup.get(n.id);
         return {
             ...node,
             position: n.position,
-            positionAbsolute: n.positionAbsolute,
+            computed: {
+                ...n.computed,
+                positionAbsolute: n.computed.positionAbsolute,
+            },
         };
     });
-    return [nodeId ? extentedDragItems.find((n) => n.id === nodeId) : extentedDragItems[0], extentedDragItems];
+    return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId) : nodesFromDragItems[0], nodesFromDragItems];
 }
 
 function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
@@ -1115,7 +1243,7 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
         function updateNodes({ x, y }) {
-            const { nodes, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
+            const { nodes, nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
             lastPos = { x, y };
             let hasChange = false;
             let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
@@ -1135,16 +1263,18 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
                     [nodeExtent[1][0], nodeExtent[1][1]],
                 ];
                 if (dragItems.length > 1 && nodeExtent && !n.extent) {
-                    adjustedNodeExtent[0][0] = n.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-                    adjustedNodeExtent[1][0] = n.positionAbsolute.x + (n.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
-                    adjustedNodeExtent[0][1] = n.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-                    adjustedNodeExtent[1][1] = n.positionAbsolute.y + (n.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+                    adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
+                    adjustedNodeExtent[1][0] =
+                        n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+                    adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
+                    adjustedNodeExtent[1][1] =
+                        n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
                 }
                 const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
                 // we want to make sure that we only fire a change event when there is a change
                 hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
                 n.position = updatedPos.position;
-                n.positionAbsolute = updatedPos.positionAbsolute;
+                n.computed.positionAbsolute = updatedPos.positionAbsolute;
                 return n;
             });
             if (!hasChange) {
@@ -1152,11 +1282,11 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             }
             updateNodePositions(dragItems, true, true);
             const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
-            if (dragEvent) {
+            if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
-                    nodes,
+                    nodeLookup,
                 });
                 onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
                 onNodeOrSelectionDrag?.(dragEvent, currentNode, currentNodes);
@@ -1178,10 +1308,10 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             autoPanId = requestAnimationFrame(autoPan);
         }
         function startDrag(event) {
-            const { nodes, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
+            const { nodes, nodeLookup, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
             dragStarted = true;
             if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {
-                if (!nodes.find((n) => n.id === nodeId)?.selected) {
+                if (!nodeLookup.get(nodeId)?.selected) {
                     // we need to reset selected nodes when selectNodesOnDrag=false
                     unselectNodesAndEdges();
                 }
@@ -1193,11 +1323,11 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             lastPos = pointerPos;
             dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
             const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
-            if (dragItems) {
+            if (dragItems && (onDragStart || onNodeOrSelectionDragStart)) {
                 const [currentNode, currentNodes] = getEventHandlerParams({
                     nodeId,
                     dragItems,
-                    nodes,
+                    nodeLookup,
                 });
                 onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);
                 onNodeOrSelectionDragStart?.(event.sourceEvent, currentNode, currentNodes);
@@ -1244,16 +1374,18 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
             dragStarted = false;
             cancelAnimationFrame(autoPanId);
             if (dragItems) {
-                const { nodes, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
+                const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
                 const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
                 updateNodePositions(dragItems, false, false);
-                const [currentNode, currentNodes] = getEventHandlerParams({
-                    nodeId,
-                    dragItems,
-                    nodes,
-                });
-                onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);
-                onNodeOrSelectionDragStop?.(event.sourceEvent, currentNode, currentNodes);
+                if (onDragStop || onNodeOrSelectionDragStop) {
+                    const [currentNode, currentNodes] = getEventHandlerParams({
+                        nodeId,
+                        dragItems,
+                        nodeLookup,
+                    });
+                    onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);
+                    onNodeOrSelectionDragStop?.(event.sourceEvent, currentNode, currentNodes);
+                }
             }
         })
             .filter((event) => {
@@ -1283,8 +1415,8 @@ function getHandles(node, handleBounds, type, currentHandle) {
                 id: h.id || null,
                 type,
                 nodeId: node.id,
-                x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-                y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
+                x: (node.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+                y: (node.computed?.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
             });
         }
         return res;
@@ -1355,7 +1487,6 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
     return connectionStatus;
 }
 
-const nullConnection = { source: null, target: null, sourceHandle: null, targetHandle: null };
 const alwaysValid = () => true;
 let connectionStartHandle = null;
 function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
@@ -1440,7 +1571,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         if (!closestHandle && !isValid && !handleDomNode) {
             return resetRecentHandle(prevActiveHandle, lib);
         }
-        if (connection.source !== connection.target && handleDomNode) {
+        if (connection?.source !== connection?.target && handleDomNode) {
             resetRecentHandle(prevActiveHandle, lib);
             prevActiveHandle = handleDomNode;
             handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
@@ -1488,7 +1619,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
     const result = {
         handleDomNode: handleToCheck,
         isValid: false,
-        connection: nullConnection,
+        connection: null,
         endHandle: null,
     };
     if (handleToCheck) {
@@ -1497,6 +1628,9 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
         const handleId = handleToCheck.getAttribute('data-handleid');
         const connectable = handleToCheck.classList.contains('connectable');
         const connectableEnd = handleToCheck.classList.contains('connectableend');
+        if (!handleNodeId) {
+            return result;
+        }
         const connection = {
             source: isTarget ? handleNodeId : fromNodeId,
             sourceHandle: isTarget ? handleId : fromHandleId,
@@ -1919,4 +2053,4 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, groupEdgesByZLevel, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateEdgeBase, updateNodeDimensions, updateNodes };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, groupEdgesByZLevel, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions, updateNodes };

package/dist/esm/types/edges.d.ts

@@ -23,6 +23,9 @@ export type SmoothStepPathOptions = {
     offset?: number;
     borderRadius?: number;
 };
+export type StepPathOptions = {
+    offset?: number;
+};
 export type BezierPathOptions = {
     curvature?: number;
 };

package/dist/esm/types/edges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edges.d.ts","sourceRoot":"","sources":["../../src/types/edges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,MAAM,MAAM,QAAQ,CAAC,QAAQ,GAAG,GAAG,IAAI;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,QAAQ,SAAS,QAAQ,IAAI,IAAI,CAClE,QAAQ,EACR,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,CAC3F,CAAC;AAEF,oBAAY,kBAAkB;IAC5B,MAAM,YAAY;IAClB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AAEjD,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"edges.d.ts","sourceRoot":"","sources":["../../src/types/edges.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,MAAM,MAAM,QAAQ,CAAC,QAAQ,GAAG,GAAG,IAAI;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,QAAQ,SAAS,QAAQ,IAAI,IAAI,CAClE,QAAQ,EACR,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,CAC3F,CAAC;AAEF,oBAAY,kBAAkB;IAC5B,MAAM,YAAY;IAClB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AAEjD,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,WAAW,gBAAgB;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;CAC1B,CAAC"}