@xyflow/system 0.0.53 → 0.0.55

package/dist/esm/index.js

@@ -165,7 +165,7 @@ function getConnectionStatus(isValid) {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Test whether an object is useable as an Edge
+ * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
@@ -173,7 +173,7 @@ function getConnectionStatus(isValid) {
  */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 /**
- * Test whether an object is useable as a Node
+ * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
@@ -185,10 +185,10 @@ const isInternalNodeBase = (element) => 'id' in element && 'internals' in elemen
  * This util is used to tell you what nodes, if any, are connected to the given node
  * as the _target_ of an edge.
  * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the source is the given node.
  *
  * @example
  * ```ts
@@ -220,10 +220,10 @@ const getOutgoers = (node, nodes, edges) => {
  * This util is used to tell you what nodes, if any, are connected to the given node
  * as the _source_ of an edge.
  * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the target is the given node.
  *
  * @example
  * ```ts
@@ -267,9 +267,8 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * to calculate the correct transform to fit the given nodes in a viewport.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
- * @param nodes - Nodes to calculate the bounds for
- * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
- * @returns Bounding box enclosing all nodes
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
  *
  * @remarks This function was previously called `getRectOfNodes`
  *
@@ -297,7 +296,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  *const bounds = getNodesBounds(nodes);
  *```
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
         console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
     }
@@ -367,9 +366,9 @@ excludeNonSelectableNodes = false) => {
  * This utility filters an array of edges, keeping only those where either the source or target
  * node is present in the given array of nodes.
  * @public
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
+ * @param nodes - Nodes you want to get the connected edges for.
+ * @param edges - All edges.
+ * @returns Array of edges that connect any of the given nodes with each other.
  *
  * @example
  * ```js
@@ -703,16 +702,16 @@ function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
     };
 }
 /**
- * Returns a viewport that encloses the given bounds with optional padding.
+ * Returns a viewport that encloses the given bounds with padding.
  * @public
  * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
- * @param bounds - Bounds to fit inside viewport
- * @param width - Width of the viewport
- * @param height  - Height of the viewport
- * @param minZoom - Minimum zoom level of the resulting viewport
- * @param maxZoom - Maximum zoom level of the resulting viewport
- * @param padding - Optional padding around the bounds
- * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height  - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}.
  * @example
  * const { x, y, zoom } = getViewportForBounds(
  * { x: 0, y: 0, width: 100, height: 100},
@@ -884,14 +883,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * The `getBezierPath` util returns everything you need to render a bezier edge
  *between two nodes.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @param params.curvature - The curvature of the bezier edge
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -988,9 +988,9 @@ const connectionExists = (edge, edges) => {
 /**
  * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
+ * @param edgeParams - Either an `Edge` or a `Connection` you want to add.
+ * @param edges - The array of all current edges.
+ * @returns A new array of edges with the new edge added.
  *
  * @remarks If an edge with the same `target` and `source` already exists (and the same
  *`targetHandle` and `sourceHandle` if those are set), then this util won't add
@@ -1028,11 +1028,10 @@ const addEdge = (edgeParams, edges) => {
  *This searches your edge array for an edge with a matching `id` and updates its
  *properties with the connection you provide.
  * @public
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
+ * @param oldEdge - The edge you want to update.
+ * @param newConnection - The new connection you want to update the edge with.
+ * @param edges - The array of all current edges.
+ * @returns The updated edges array.
  *
  * @example
  * ```js
@@ -1066,11 +1065,16 @@ const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceI
 /**
  * Calculates the straight line path between two points.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1111,8 +1115,8 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
 };
 const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
 /*
- * ith this function we try to mimic a 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
+ * 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, }) {
     const sourceDir = handleDirections[sourcePosition];
@@ -1243,16 +1247,19 @@ function getBend(a, b, c, size) {
 }
 /**
  * The `getSmoothStepPath` util returns everything you need to render a stepped path
- *between two nodes. The `borderRadius` property can be used to choose how rounded
- *the corners of those steps are.
+ * between two nodes. The `borderRadius` property can be used to choose how rounded
+ * the corners of those steps are.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -2560,9 +2567,15 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
     return function (event, d) {
+        const isWheel = event.type === 'wheel';
         // we still want to enable pinch zooming even if preventScrolling is set to false
-        const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
-        if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
+        const preventZoom = !preventScrolling && isWheel && !event.ctrlKey;
+        const hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
+        // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+        if (event.ctrlKey && isWheel && hasNoWheelClass) {
+            event.preventDefault();
+        }
+        if (preventZoom || hasNoWheelClass) {
             return null;
         }
         event.preventDefault();
@@ -3275,7 +3288,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         })
             .on('end', (event) => {
             onResizeEnd?.(event, { ...prevValues });
-            onEnd?.();
+            onEnd?.({ ...prevValues });
         });
         selection.call(dragHandler);
     }

package/dist/esm/index.mjs

@@ -165,7 +165,7 @@ function getConnectionStatus(isValid) {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Test whether an object is useable as an Edge
+ * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
@@ -173,7 +173,7 @@ function getConnectionStatus(isValid) {
  */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 /**
- * Test whether an object is useable as a Node
+ * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
@@ -185,10 +185,10 @@ const isInternalNodeBase = (element) => 'id' in element && 'internals' in elemen
  * This util is used to tell you what nodes, if any, are connected to the given node
  * as the _target_ of an edge.
  * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the source is the given node.
  *
  * @example
  * ```ts
@@ -220,10 +220,10 @@ const getOutgoers = (node, nodes, edges) => {
  * This util is used to tell you what nodes, if any, are connected to the given node
  * as the _source_ of an edge.
  * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
+ * @param node - The node to get the connected nodes from.
+ * @param nodes - The array of all nodes.
+ * @param edges - The array of all edges.
+ * @returns An array of nodes that are connected over edges where the target is the given node.
  *
  * @example
  * ```ts
@@ -267,9 +267,8 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * to calculate the correct transform to fit the given nodes in a viewport.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
- * @param nodes - Nodes to calculate the bounds for
- * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
- * @returns Bounding box enclosing all nodes
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
  *
  * @remarks This function was previously called `getRectOfNodes`
  *
@@ -297,7 +296,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  *const bounds = getNodesBounds(nodes);
  *```
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
         console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
     }
@@ -367,9 +366,9 @@ excludeNonSelectableNodes = false) => {
  * This utility filters an array of edges, keeping only those where either the source or target
  * node is present in the given array of nodes.
  * @public
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
+ * @param nodes - Nodes you want to get the connected edges for.
+ * @param edges - All edges.
+ * @returns Array of edges that connect any of the given nodes with each other.
  *
  * @example
  * ```js
@@ -703,16 +702,16 @@ function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
     };
 }
 /**
- * Returns a viewport that encloses the given bounds with optional padding.
+ * Returns a viewport that encloses the given bounds with padding.
  * @public
  * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
- * @param bounds - Bounds to fit inside viewport
- * @param width - Width of the viewport
- * @param height  - Height of the viewport
- * @param minZoom - Minimum zoom level of the resulting viewport
- * @param maxZoom - Maximum zoom level of the resulting viewport
- * @param padding - Optional padding around the bounds
- * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height  - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}.
  * @example
  * const { x, y, zoom } = getViewportForBounds(
  * { x: 0, y: 0, width: 100, height: 100},
@@ -884,14 +883,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * The `getBezierPath` util returns everything you need to render a bezier edge
  *between two nodes.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @param params.curvature - The curvature of the bezier edge
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -988,9 +988,9 @@ const connectionExists = (edge, edges) => {
 /**
  * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
+ * @param edgeParams - Either an `Edge` or a `Connection` you want to add.
+ * @param edges - The array of all current edges.
+ * @returns A new array of edges with the new edge added.
  *
  * @remarks If an edge with the same `target` and `source` already exists (and the same
  *`targetHandle` and `sourceHandle` if those are set), then this util won't add
@@ -1028,11 +1028,10 @@ const addEdge = (edgeParams, edges) => {
  *This searches your edge array for an edge with a matching `id` and updates its
  *properties with the connection you provide.
  * @public
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
+ * @param oldEdge - The edge you want to update.
+ * @param newConnection - The new connection you want to update the edge with.
+ * @param edges - The array of all current edges.
+ * @returns The updated edges array.
  *
  * @example
  * ```js
@@ -1066,11 +1065,16 @@ const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceI
 /**
  * Calculates the straight line path between two points.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1111,8 +1115,8 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
 };
 const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
 /*
- * ith this function we try to mimic a 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
+ * 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, }) {
     const sourceDir = handleDirections[sourcePosition];
@@ -1243,16 +1247,19 @@ function getBend(a, b, c, size) {
 }
 /**
  * The `getSmoothStepPath` util returns everything you need to render a stepped path
- *between two nodes. The `borderRadius` property can be used to choose how rounded
- *the corners of those steps are.
+ * between two nodes. The `borderRadius` property can be used to choose how rounded
+ * the corners of those steps are.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -2560,9 +2567,15 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
     return function (event, d) {
+        const isWheel = event.type === 'wheel';
         // we still want to enable pinch zooming even if preventScrolling is set to false
-        const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
-        if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
+        const preventZoom = !preventScrolling && isWheel && !event.ctrlKey;
+        const hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
+        // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+        if (event.ctrlKey && isWheel && hasNoWheelClass) {
+            event.preventDefault();
+        }
+        if (preventZoom || hasNoWheelClass) {
             return null;
         }
         event.preventDefault();
@@ -3275,7 +3288,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         })
             .on('end', (event) => {
             onResizeEnd?.(event, { ...prevValues });
-            onEnd?.();
+            onEnd?.({ ...prevValues });
         });
         selection.call(dragHandler);
     }

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

@@ -1,43 +1,40 @@
 import { Position } from './utils';
 export type EdgeBase<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = {
-    /** Unique id of an edge */
+    /** Unique id of an edge. */
     id: string;
-    /** Type of an edge defined in edgeTypes */
+    /** Type of edge defined in `edgeTypes`. */
     type?: EdgeType;
-    /** Id of source node */
+    /** Id of source node. */
     source: string;
-    /** Id of target node */
+    /** Id of target node. */
     target: string;
-    /**
-     * Id of source handle
-     * only needed if there are multiple handles per node
-     */
+    /** Id of source handle, only needed if there are multiple handles per node. */
     sourceHandle?: string | null;
-    /**
-     * Id of target handle
-     * only needed if there are multiple handles per node
-     */
+    /** Id of target handle, only needed if there are multiple handles per node. */
     targetHandle?: string | null;
     animated?: boolean;
     hidden?: boolean;
     deletable?: boolean;
     selectable?: boolean;
-    /** Arbitrary data passed to an edge */
+    /** Arbitrary data passed to an edge. */
     data?: EdgeData;
     selected?: boolean;
     /**
-     * Set the marker on the beginning of an edge
+     * Set the marker on the beginning of an edge.
      * @example 'arrow', 'arrowclosed' or custom marker
      */
     markerStart?: EdgeMarkerType;
     /**
-     * Set the marker on the end of an edge
+     * Set the marker on the end of an edge.
      * @example 'arrow', 'arrowclosed' or custom marker
      */
     markerEnd?: EdgeMarkerType;
     zIndex?: number;
     ariaLabel?: string;
-    /** Padding around the edge where interaction is still possible */
+    /**
+     * ReactFlow renders an invisible path around each edge to make them easier to click or tap on.
+     * This property sets the width of that invisible path.
+     */
     interactionWidth?: number;
 };
 export type SmoothStepPathOptions = {

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/general.d.ts

@@ -25,9 +25,13 @@ export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => Promise<bo
  * @public
  */
 export type Connection = {
+    /** The id of the node this connection originates from. */
     source: string;
+    /** The id of the node this connection terminates at. */
     target: string;
+    /** When not `null`, the id of the handle on the source node that this connection originates from. */
     sourceHandle: string | null;
+    /** When not `null`, the id of the handle on the target node that this connection terminates at. */
     targetHandle: string | null;
 };
 /**
@@ -184,15 +188,28 @@ export type NoConnection = {
     toNode: null;
 };
 export type ConnectionInProgress<NodeType extends InternalNodeBase = InternalNodeBase> = {
+    /** Indicates whether a connection is currently in progress. */
     inProgress: true;
+    /**
+     * If an ongoing connection is above a handle or inside the connection radius, this will be `true`
+     * or `false`, otherwise `null`.
+     */
     isValid: boolean | null;
+    /** Returns the xy start position or `null` if no connection is in progress. */
     from: XYPosition;
+    /** Returns the start handle or `null` if no connection is in progress. */
     fromHandle: Handle;
+    /** Returns the side (called position) of the start handle or `null` if no connection is in progress. */
     fromPosition: Position;
+    /** Returns the start node or `null` if no connection is in progress. */
     fromNode: NodeType;
+    /** Returns the xy end position or `null` if no connection is in progress. */
     to: XYPosition;
+    /** Returns the end handle or `null` if no connection is in progress. */
     toHandle: Handle | null;
+    /** Returns the side (called position) of the end handle or `null` if no connection is in progress. */
     toPosition: Position;
+    /** Returns the end node or `null` if no connection is in progress. */
     toNode: NodeType | null;
 };
 /**