@xyflow/system 0.0.65 → 0.0.67

package/dist/esm/index.js

@@ -448,7 +448,7 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
     const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
     const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
     const origin = node.origin ?? nodeOrigin;
-    let extent = nodeExtent;
+    let extent = node.extent || nodeExtent;
     if (node.extent === 'parent' && !node.expandParent) {
         if (!parentNode) {
             onError?.('005', errorMessages['error005']());
@@ -1160,7 +1160,7 @@ const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y
  * With this function we try to mimic an orthogonal edge routing behaviour
  * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
  */
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, stepPosition, }) {
     const sourceDir = handleDirections[sourcePosition];
     const targetDir = handleDirections[targetPosition];
     const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
@@ -1176,7 +1176,7 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     let centerX, centerY;
     const sourceGapOffset = { x: 0, y: 0 };
     const targetGapOffset = { x: 0, y: 0 };
-    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+    const [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({
         sourceX: source.x,
         sourceY: source.y,
         targetX: target.x,
@@ -1184,8 +1184,16 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     });
     // opposite handle positions, default case
     if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-        centerX = center.x ?? defaultCenterX;
-        centerY = center.y ?? defaultCenterY;
+        if (dirAccessor === 'x') {
+            // Primary direction is horizontal, so stepPosition affects X coordinate
+            centerX = center.x ?? (sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition);
+            centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;
+        }
+        else {
+            // Primary direction is vertical, so stepPosition affects Y coordinate  
+            centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;
+            centerY = center.y ?? (sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition);
+        }
         /*
          *    --->
          *    |
@@ -1318,7 +1326,7 @@ function getBend(a, b, c, size) {
  * ```
  * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
-function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, stepPosition = 0.5, }) {
     const [points, labelX, labelY, offsetX, offsetY] = getPoints({
         source: { x: sourceX, y: sourceY },
         sourcePosition,
@@ -1326,6 +1334,7 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
         targetPosition,
         center: { x: centerX, y: centerY },
         offset,
+        stepPosition,
     });
     const path = points.reduce((res, p, i) => {
         let segment = '';
@@ -1955,6 +1964,25 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = true,
         nodesFromDragItems,
     ];
 }
+/**
+ * If a selection is being dragged we want to apply the same snap offset to all nodes in the selection.
+ * This function calculates the snap offset based on the first node in the selection.
+ */
+function calculateSnapOffset({ dragItems, snapGrid, x, y, }) {
+    const refDragItem = dragItems.values().next().value;
+    if (!refDragItem) {
+        return null;
+    }
+    const refPos = {
+        x: x - refDragItem.distance.x,
+        y: y - refDragItem.distance.y,
+    };
+    const refPosSnapped = snapPosition(refPos, snapGrid);
+    return {
+        x: refPosSnapped.x - refPos.x,
+        y: refPosSnapped.y - refPos.y,
+    };
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
@@ -1968,39 +1996,43 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     let d3Selection = null;
     let abortDrag = false; // prevents unintentional dragging on multitouch
     let nodePositionsChanged = false;
+    // we store the last drag event to be able to use it in the update function
+    let dragEvent = null;
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId, nodeClickDistance = 0, }) {
         d3Selection = select(domNode);
-        function updateNodes({ x, y }, dragEvent) {
+        function updateNodes({ x, y }) {
             const { 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.size > 1 && nodeExtent) {
-                const rect = getInternalNodesBounds(dragItems);
-                nodesBox = rectToBox(rect);
-            }
+            const isMultiDrag = dragItems.size > 1;
+            const nodesBox = isMultiDrag && nodeExtent ? rectToBox(getInternalNodesBounds(dragItems)) : null;
+            const multiDragSnapOffset = isMultiDrag && snapToGrid
+                ? calculateSnapOffset({
+                    dragItems,
+                    snapGrid,
+                    x,
+                    y,
+                })
+                : null;
             for (const [id, dragItem] of dragItems) {
+                /*
+                 * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
+                 */
                 if (!nodeLookup.has(id)) {
-                    /*
-                     * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
-                     * and we don't need to update it anymore
-                     */
                     continue;
                 }
                 let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
+                    nextPosition = multiDragSnapOffset
+                        ? {
+                            x: nextPosition.x + multiDragSnapOffset.x,
+                            y: nextPosition.y + multiDragSnapOffset.y,
+                        }
+                        : snapPosition(nextPosition, snapGrid);
                 }
-                /*
-                 * if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
-                 * based on its position so that the node stays at it's position relative to the selection.
-                 */
-                let adjustedNodeExtent = [
-                    [nodeExtent[0][0], nodeExtent[0][1]],
-                    [nodeExtent[1][0], nodeExtent[1][1]],
-                ];
-                if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
+                let adjustedNodeExtent = null;
+                if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
                     const { positionAbsolute } = dragItem.internals;
                     const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
                     const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
@@ -2015,7 +2047,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     nodeId: id,
                     nextPosition,
                     nodeLookup,
-                    nodeExtent: adjustedNodeExtent,
+                    nodeExtent: adjustedNodeExtent ? adjustedNodeExtent : nodeExtent,
                     nodeOrigin,
                     onError,
                 });
@@ -2057,7 +2089,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
                 lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
                 if (await panBy({ x: xMovement, y: yMovement })) {
-                    updateNodes(lastPos, null);
+                    updateNodes(lastPos);
                 }
             }
             autoPanId = requestAnimationFrame(autoPan);
@@ -2097,6 +2129,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             containerBounds = domNode?.getBoundingClientRect() || null;
             abortDrag = false;
             nodePositionsChanged = false;
+            dragEvent = event.sourceEvent;
             if (nodeDragThreshold === 0) {
                 startDrag(event);
             }
@@ -2107,6 +2140,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             .on('drag', (event) => {
             const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
+            dragEvent = event.sourceEvent;
             if ((event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||
                 // if user deletes a node while dragging, we need to abort the drag to prevent errors
                 (nodeId && !nodeLookup.has(nodeId))) {
@@ -2129,9 +2163,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             }
             // skip events without movement
             if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
-                // dragEvent = event.sourceEvent as MouseEvent;
                 mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-                updateNodes(pointerPos, event.sourceEvent);
+                updateNodes(pointerPos);
             }
         })
             .on('end', (event) => {
@@ -2274,14 +2307,13 @@ function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
 }
 
 const alwaysValid = () => true;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, handleDomNode, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
     let closestHandle;
     const { x, y } = getEventPosition(event);
-    const clickedHandle = doc?.elementFromPoint(x, y);
-    const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+    const handleType = getHandleType(edgeUpdaterType, handleDomNode);
     const containerBounds = domNode?.getBoundingClientRect();
     let connectionStarted = false;
     if (!containerBounds || !handleType) {
@@ -2295,7 +2327,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     let autoPanStarted = false;
     let connection = null;
     let isValid = false;
-    let handleDomNode = null;
+    let resultHandleDomNode = null;
     // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
     function autoPan() {
         if (!autoPanOnConnect || !containerBounds) {
@@ -2368,7 +2400,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             flowId,
             nodeLookup,
         });
-        handleDomNode = result.handleDomNode;
+        resultHandleDomNode = result.handleDomNode;
         connection = result.connection;
         isValid = isConnectionValid(!!closestHandle, result.isValid);
         const newConnection = {
@@ -2402,7 +2434,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     }
     function onPointerUp(event) {
         if (connectionStarted) {
-            if ((closestHandle || handleDomNode) && connection && isValid) {
+            if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
             }
             /*
@@ -2425,7 +2457,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         autoPanStarted = false;
         isValid = false;
         connection = null;
-        handleDomNode = null;
+        resultHandleDomNode = null;
         doc.removeEventListener('mousemove', onPointerMove);
         doc.removeEventListener('mouseup', onPointerUp);
         doc.removeEventListener('touchmove', onPointerMove);
@@ -2489,17 +2521,18 @@ const XYHandle = {
 
 function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
     const selection = select(domNode);
-    function update({ translateExtent, width, height, zoomStep = 10, pannable = true, zoomable = true, inversePan = false, }) {
+    function update({ translateExtent, width, height, zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const zoomHandler = (event) => {
-            const transform = getTransform();
             if (event.sourceEvent.type !== 'wheel' || !panZoom) {
                 return;
             }
+            const transform = getTransform();
+            const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1;
             const pinchDelta = -event.sourceEvent.deltaY *
                 (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
                 zoomStep;
-            const nextZoom = transform[2] * Math.pow(2, pinchDelta);
+            const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor);
             panZoom.scaleTo(nextZoom);
         };
         let panStart = [0, 0];

package/dist/esm/index.mjs

@@ -448,7 +448,7 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
     const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
     const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
     const origin = node.origin ?? nodeOrigin;
-    let extent = nodeExtent;
+    let extent = node.extent || nodeExtent;
     if (node.extent === 'parent' && !node.expandParent) {
         if (!parentNode) {
             onError?.('005', errorMessages['error005']());
@@ -1160,7 +1160,7 @@ const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y
  * With this function we try to mimic an orthogonal edge routing behaviour
  * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
  */
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, stepPosition, }) {
     const sourceDir = handleDirections[sourcePosition];
     const targetDir = handleDirections[targetPosition];
     const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
@@ -1176,7 +1176,7 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     let centerX, centerY;
     const sourceGapOffset = { x: 0, y: 0 };
     const targetGapOffset = { x: 0, y: 0 };
-    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+    const [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({
         sourceX: source.x,
         sourceY: source.y,
         targetX: target.x,
@@ -1184,8 +1184,16 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     });
     // opposite handle positions, default case
     if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-        centerX = center.x ?? defaultCenterX;
-        centerY = center.y ?? defaultCenterY;
+        if (dirAccessor === 'x') {
+            // Primary direction is horizontal, so stepPosition affects X coordinate
+            centerX = center.x ?? (sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition);
+            centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;
+        }
+        else {
+            // Primary direction is vertical, so stepPosition affects Y coordinate  
+            centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;
+            centerY = center.y ?? (sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition);
+        }
         /*
          *    --->
          *    |
@@ -1318,7 +1326,7 @@ function getBend(a, b, c, size) {
  * ```
  * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
-function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, stepPosition = 0.5, }) {
     const [points, labelX, labelY, offsetX, offsetY] = getPoints({
         source: { x: sourceX, y: sourceY },
         sourcePosition,
@@ -1326,6 +1334,7 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
         targetPosition,
         center: { x: centerX, y: centerY },
         offset,
+        stepPosition,
     });
     const path = points.reduce((res, p, i) => {
         let segment = '';
@@ -1955,6 +1964,25 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = true,
         nodesFromDragItems,
     ];
 }
+/**
+ * If a selection is being dragged we want to apply the same snap offset to all nodes in the selection.
+ * This function calculates the snap offset based on the first node in the selection.
+ */
+function calculateSnapOffset({ dragItems, snapGrid, x, y, }) {
+    const refDragItem = dragItems.values().next().value;
+    if (!refDragItem) {
+        return null;
+    }
+    const refPos = {
+        x: x - refDragItem.distance.x,
+        y: y - refDragItem.distance.y,
+    };
+    const refPosSnapped = snapPosition(refPos, snapGrid);
+    return {
+        x: refPosSnapped.x - refPos.x,
+        y: refPosSnapped.y - refPos.y,
+    };
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
@@ -1968,39 +1996,43 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     let d3Selection = null;
     let abortDrag = false; // prevents unintentional dragging on multitouch
     let nodePositionsChanged = false;
+    // we store the last drag event to be able to use it in the update function
+    let dragEvent = null;
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId, nodeClickDistance = 0, }) {
         d3Selection = select(domNode);
-        function updateNodes({ x, y }, dragEvent) {
+        function updateNodes({ x, y }) {
             const { 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.size > 1 && nodeExtent) {
-                const rect = getInternalNodesBounds(dragItems);
-                nodesBox = rectToBox(rect);
-            }
+            const isMultiDrag = dragItems.size > 1;
+            const nodesBox = isMultiDrag && nodeExtent ? rectToBox(getInternalNodesBounds(dragItems)) : null;
+            const multiDragSnapOffset = isMultiDrag && snapToGrid
+                ? calculateSnapOffset({
+                    dragItems,
+                    snapGrid,
+                    x,
+                    y,
+                })
+                : null;
             for (const [id, dragItem] of dragItems) {
+                /*
+                 * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
+                 */
                 if (!nodeLookup.has(id)) {
-                    /*
-                     * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
-                     * and we don't need to update it anymore
-                     */
                     continue;
                 }
                 let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
+                    nextPosition = multiDragSnapOffset
+                        ? {
+                            x: nextPosition.x + multiDragSnapOffset.x,
+                            y: nextPosition.y + multiDragSnapOffset.y,
+                        }
+                        : snapPosition(nextPosition, snapGrid);
                 }
-                /*
-                 * if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
-                 * based on its position so that the node stays at it's position relative to the selection.
-                 */
-                let adjustedNodeExtent = [
-                    [nodeExtent[0][0], nodeExtent[0][1]],
-                    [nodeExtent[1][0], nodeExtent[1][1]],
-                ];
-                if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
+                let adjustedNodeExtent = null;
+                if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
                     const { positionAbsolute } = dragItem.internals;
                     const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
                     const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
@@ -2015,7 +2047,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     nodeId: id,
                     nextPosition,
                     nodeLookup,
-                    nodeExtent: adjustedNodeExtent,
+                    nodeExtent: adjustedNodeExtent ? adjustedNodeExtent : nodeExtent,
                     nodeOrigin,
                     onError,
                 });
@@ -2057,7 +2089,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
                 lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
                 if (await panBy({ x: xMovement, y: yMovement })) {
-                    updateNodes(lastPos, null);
+                    updateNodes(lastPos);
                 }
             }
             autoPanId = requestAnimationFrame(autoPan);
@@ -2097,6 +2129,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             containerBounds = domNode?.getBoundingClientRect() || null;
             abortDrag = false;
             nodePositionsChanged = false;
+            dragEvent = event.sourceEvent;
             if (nodeDragThreshold === 0) {
                 startDrag(event);
             }
@@ -2107,6 +2140,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             .on('drag', (event) => {
             const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
+            dragEvent = event.sourceEvent;
             if ((event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||
                 // if user deletes a node while dragging, we need to abort the drag to prevent errors
                 (nodeId && !nodeLookup.has(nodeId))) {
@@ -2129,9 +2163,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             }
             // skip events without movement
             if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
-                // dragEvent = event.sourceEvent as MouseEvent;
                 mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-                updateNodes(pointerPos, event.sourceEvent);
+                updateNodes(pointerPos);
             }
         })
             .on('end', (event) => {
@@ -2274,14 +2307,13 @@ function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
 }
 
 const alwaysValid = () => true;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, handleDomNode, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
     let closestHandle;
     const { x, y } = getEventPosition(event);
-    const clickedHandle = doc?.elementFromPoint(x, y);
-    const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+    const handleType = getHandleType(edgeUpdaterType, handleDomNode);
     const containerBounds = domNode?.getBoundingClientRect();
     let connectionStarted = false;
     if (!containerBounds || !handleType) {
@@ -2295,7 +2327,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     let autoPanStarted = false;
     let connection = null;
     let isValid = false;
-    let handleDomNode = null;
+    let resultHandleDomNode = null;
     // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
     function autoPan() {
         if (!autoPanOnConnect || !containerBounds) {
@@ -2368,7 +2400,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             flowId,
             nodeLookup,
         });
-        handleDomNode = result.handleDomNode;
+        resultHandleDomNode = result.handleDomNode;
         connection = result.connection;
         isValid = isConnectionValid(!!closestHandle, result.isValid);
         const newConnection = {
@@ -2402,7 +2434,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     }
     function onPointerUp(event) {
         if (connectionStarted) {
-            if ((closestHandle || handleDomNode) && connection && isValid) {
+            if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
             }
             /*
@@ -2425,7 +2457,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         autoPanStarted = false;
         isValid = false;
         connection = null;
-        handleDomNode = null;
+        resultHandleDomNode = null;
         doc.removeEventListener('mousemove', onPointerMove);
         doc.removeEventListener('mouseup', onPointerUp);
         doc.removeEventListener('touchmove', onPointerMove);
@@ -2489,17 +2521,18 @@ const XYHandle = {
 
 function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
     const selection = select(domNode);
-    function update({ translateExtent, width, height, zoomStep = 10, pannable = true, zoomable = true, inversePan = false, }) {
+    function update({ translateExtent, width, height, zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const zoomHandler = (event) => {
-            const transform = getTransform();
             if (event.sourceEvent.type !== 'wheel' || !panZoom) {
                 return;
             }
+            const transform = getTransform();
+            const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1;
             const pinchDelta = -event.sourceEvent.deltaY *
                 (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
                 zoomStep;
-            const nextZoom = transform[2] * Math.pow(2, pinchDelta);
+            const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor);
             panZoom.scaleTo(nextZoom);
         };
         let panStart = [0, 0];

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

@@ -40,6 +40,7 @@ export type EdgeBase<EdgeData extends Record<string, unknown> = Record<string, u
 export type SmoothStepPathOptions = {
     offset?: number;
     borderRadius?: number;
+    stepPosition?: number;
 };
 export type StepPathOptions = {
     offset?: number;
@@ -76,8 +77,8 @@ export declare enum ConnectionLineType {
  * @public
  */
 export type EdgeMarker = {
-    type: MarkerType;
-    color?: string;
+    type: MarkerType | `${MarkerType}`;
+    color?: string | null;
     width?: number;
     height?: number;
     markerUnits?: string;

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

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

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

@@ -1,4 +1,7 @@
 import type { Position, IsValidConnection } from '.';
+/**
+ * @inline
+ */
 export type HandleType = 'source' | 'target';
 export type Handle = {
     id?: string | null;
@@ -14,14 +17,13 @@ export type HandleProps = {
     /**
      * Type of the handle.
      * @default "source"
-     * @example HandleType.Source, HandleType.Target
      */
     type: HandleType;
     /**
      * The position of the handle relative to the node. In a horizontal flow source handles are
      * typically `Position.Right` and in a vertical flow they are typically `Position.Top`.
      * @default Position.Top
-     * @example Position.TopLeft, Position.TopRight, Position.BottomLeft, Position.BottomRight
+     * @example Position.Top, Position.Right, Position.Bottom, Position.Left
      */
     position: Position;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"handles.d.ts","sourceRoot":"","sources":["../../src/types/handles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,GAAG,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,IAAI,EAAE,UAAU,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC"}
+{"version":3,"file":"handles.d.ts","sourceRoot":"","sources":["../../src/types/handles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,GAAG,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,IAAI,EAAE,UAAU,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC"}

package/dist/esm/utils/edges/smoothstep-edge.d.ts

@@ -24,6 +24,12 @@ export interface GetSmoothStepPathParams {
     centerY?: number;
     /** @default 20 */
     offset?: number;
+    /**
+     * Controls where the bend occurs along the path.
+     * 0 = at source, 1 = at target, 0.5 = midpoint
+     * @default 0.5
+     */
+    stepPosition?: number;
 }
 /**
  * The `getSmoothStepPath` util returns everything you need to render a stepped path
@@ -56,5 +62,5 @@ export interface GetSmoothStepPathParams {
  * ```
  * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
-export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, offset, }: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
+export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, offset, stepPosition, }: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 //# sourceMappingURL=smoothstep-edge.d.ts.map

package/dist/esm/utils/edges/smoothstep-edge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smoothstep-edge.d.ts","sourceRoot":"","sources":["../../../src/utils/edges/smoothstep-edge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAmB,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwLD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,EAC7B,YAAgB,EAChB,OAAO,EACP,OAAO,EACP,MAAW,GACZ,EAAE,uBAAuB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAyB5G"}
+{"version":3,"file":"smoothstep-edge.d.ts","sourceRoot":"","sources":["../../../src/utils/edges/smoothstep-edge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAmB,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,EAC7B,YAAgB,EAChB,OAAO,EACP,OAAO,EACP,MAAW,EACX,YAAkB,GACnB,EAAE,uBAAuB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CA0B5G"}

package/dist/esm/utils/marker.d.ts

@@ -2,7 +2,7 @@ import type { EdgeBase, EdgeMarkerType, MarkerProps } from '../types';
 export declare function getMarkerId(marker: EdgeMarkerType | undefined, id?: string | null): string;
 export declare function createMarkerIds(edges: EdgeBase[], { id, defaultColor, defaultMarkerStart, defaultMarkerEnd, }: {
     id?: string | null;
-    defaultColor?: string;
+    defaultColor?: string | null;
     defaultMarkerStart?: EdgeMarkerType;
     defaultMarkerEnd?: EdgeMarkerType;
 }): MarkerProps[];

package/dist/esm/utils/marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/utils/marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAc,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAElF,wBAAgB,WAAW,CAAC,MAAM,EAAE,cAAc,GAAG,SAAS,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAe1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,EACE,EAAE,EACF,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACjB,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC,iBAmBF"}
+{"version":3,"file":"marker.d.ts","sourceRoot":"","sources":["../../src/utils/marker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAc,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAElF,wBAAgB,WAAW,CAAC,MAAM,EAAE,cAAc,GAAG,SAAS,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAe1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,QAAQ,EAAE,EACjB,EACE,EAAE,EACF,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACjB,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC,iBAmBF"}