@xyflow/system 0.0.9 → 0.0.11

package/dist/esm/index.mjs

@@ -102,23 +102,23 @@ 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,
     };
 };
-const getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
+const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
@@ -127,8 +127,8 @@ const getRectOfNodes = (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 +142,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,16 +169,16 @@ 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);
         }
         return isVisible;
     });
     if (filteredNodes.length > 0) {
-        const bounds = getRectOfNodes(filteredNodes, nodeOrigin);
-        const [x, y, zoom] = getTransformForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
-        panZoom.setViewport({ x, y, zoom }, { duration: options?.duration });
+        const bounds = getNodesBounds(filteredNodes, nodeOrigin);
+        const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
+        panZoom.setViewport(viewport, { duration: options?.duration });
         return true;
     }
     return false;
@@ -185,7 +187,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 +201,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 +255,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 +310,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)));
@@ -357,7 +366,7 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
         y: y * tScale + ty,
     };
 };
-const getTransformForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
+const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
     const xZoom = width / (bounds.width * (1 + padding));
     const yZoom = height / (bounds.height * (1 + padding));
     const zoom = Math.min(xZoom, yZoom);
@@ -366,7 +375,7 @@ const getTransformForBounds = (bounds, width, height, minZoom, maxZoom, padding)
     const boundsCenterY = bounds.y + bounds.height / 2;
     const x = width / 2 - boundsCenterX * clampedZoom;
     const y = height / 2 - boundsCenterY * clampedZoom;
-    return [x, y, clampedZoom];
+    return { x, y, zoom: clampedZoom };
 };
 const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
 
@@ -406,12 +415,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 +514,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);
@@ -826,17 +839,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 +929,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,7 +991,7 @@ 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: {},
@@ -947,13 +999,15 @@ function updateNodes(nodes, storeNodes, options = {
     const parentNodes = {};
     const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
     const nextNodes = nodes.map((n) => {
-        const currentStoreNode = storeNodes.find((storeNode) => n.id === storeNode.id);
+        const currentStoreNode = nodeLookup.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 +1021,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 +1047,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 +1069,8 @@ function updateNodeDimensions(updates, nodes, domNode, nodeOrigin, onUpdate) {
                         },
                     },
                 };
+                nodeLookup.set(node.id, newNode);
+                return newNode;
             }
         }
         return node;
@@ -1070,10 +1130,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 +1140,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,12 +1180,12 @@ 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 };
             if (dragItems.length > 1 && nodeExtent) {
-                const rect = getRectOfNodes(dragItems, nodeOrigin);
+                const rect = getNodesBounds(dragItems, nodeOrigin);
                 nodesBox = rectToBox(rect);
             }
             dragItems = dragItems.map((n) => {
@@ -1135,16 +1200,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 +1219,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 +1245,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 +1260,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 +1311,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 +1352,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;
@@ -1735,7 +1804,7 @@ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, pan
         }
         // if the target element is inside an element with the nopan class, we prevent panning
         if (isWrappedWithClass(event, noPanClassName) &&
-            ((!panOnScroll && event.type !== 'wheel') || (panOnScroll && event.type === 'wheel'))) {
+            (event.type !== 'wheel' || (panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed))) {
             return false;
         }
         if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
@@ -1919,4 +1988,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, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getRectOfNodes, getSmoothStepPath, getStraightPath, getTransformForBounds, 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, 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, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateEdgeBase, updateNodeDimensions, updateNodes };

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

@@ -103,4 +103,6 @@ export type UpdateConnection = (params: {
     connectionStartHandle: ConnectingHandle | null;
     connectionEndHandle: ConnectingHandle | null;
 }) => void;
+export type ColorModeClass = 'light' | 'dark';
+export type ColorMode = ColorModeClass | 'system';
 //# sourceMappingURL=general.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/types/general.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/types/general.ts"],"names":[],"mappings":"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"}

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

@@ -22,14 +22,14 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
     zIndex?: number;
     extent?: 'parent' | CoordinateExtent;
     expandParent?: boolean;
-    positionAbsolute?: XYPosition;
     ariaLabel?: string;
     focusable?: boolean;
     origin?: NodeOrigin;
     handles?: NodeHandle[];
-    size?: {
+    computed?: {
         width?: number;
         height?: number;
+        positionAbsolute?: XYPosition;
     };
     [internalsSymbol]?: {
         z?: number;
@@ -45,8 +45,9 @@ export type NodeProps<T = any> = {
     selected: NodeBase['selected'];
     isConnectable: NodeBase['connectable'];
     zIndex: NodeBase['zIndex'];
-    xPos: number;
-    yPos: number;
+    positionAbsolute: XYPosition;
+    width?: number;
+    height?: number;
     dragging: boolean;
     targetPosition?: Position;
     sourcePosition?: Position;
@@ -67,10 +68,12 @@ export type NodeBounds = XYPosition & {
 export type NodeDragItem = {
     id: string;
     position: XYPosition;
-    positionAbsolute: XYPosition;
     distance: XYPosition;
-    width?: number | null;
-    height?: number | null;
+    computed: {
+        width: number | null;
+        height: number | null;
+        positionAbsolute: XYPosition;
+    };
     extent?: 'parent' | CoordinateExtent;
     parentNode?: string;
     dragging?: boolean;
@@ -81,4 +84,5 @@ export type NodeOrigin = [number, number];
 export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[]) => void;
 export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;
 export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
+export type Align = 'center' | 'start' | 'end';
 //# sourceMappingURL=nodes.d.ts.map