Merge branch 'next-release' into feat/fit-view-nodes-option

.changeset/gold-pans-appear.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+Avoid triggering edge update if not using left mouse button

.changeset/perfect-meals-confess.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fitView: return type boolean

packages/background/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/background
 
+## 11.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
 ## 11.1.6
 
 ### Patch Changes

packages/background/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/background",
-  "version": "11.1.6",
+  "version": "11.1.7",
   "description": "Background component with different variants for React Flow",
   "keywords": [
     "react",

packages/controls/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/controls
 
+## 11.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
 ## 11.1.6
 
 ### Patch Changes

packages/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/controls",
-  "version": "11.1.6",
+  "version": "11.1.7",
   "description": "Component to control the viewport of a React Flow instance",
   "keywords": [
     "react",

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reactflow/core
 
+## 11.5.4
+
+### Patch Changes
+
+- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius
+
 ## 11.5.3
 
 This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.
@@ -8,7 +14,7 @@ This release fixes some issues with the newly introduced connection radius featu
 
 - [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either
 - [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius
-- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius 
+- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius
 
 ## 11.5.2
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.5.3",
+  "version": "11.5.4",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",

packages/core/src/components/Edges/wrapEdge.tsx

@@ -89,6 +89,11 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave);
 
     const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
+      // avoid triggering edge updater if mouse btn is not left
+      if (event.button !== 0) {
+        return;
+      }
+
       const nodeId = isSourceHandle ? target : source;
       const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
       const handleType = isSourceHandle ? 'target' : 'source';

packages/core/src/components/Handle/handler.ts

@@ -154,7 +154,7 @@ export function handlePointerDown({
   }
 
   function onPointerUp(event: MouseEvent | TouchEvent) {
-    if (connection && isValid) {
+    if (prevClosestHandle && connection && isValid) {
       onConnect?.(connection);
     }
 

packages/core/src/hooks/useViewportHelper.ts

@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { fitView as fitViewStore } from '../store/utils';
+import { fitView } from '../store/utils';
 import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -17,7 +17,7 @@ const initialViewportHelper: ViewportHelperFunctions = {
   getZoom: () => 1,
   setViewport: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  fitView: noop,
+  fitView: () => false,
   setCenter: noop,
   fitBounds: noop,
   project: (position: XYPosition) => position,
@@ -51,7 +51,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           const [x, y, zoom] = store.getState().transform;
           return { x, y, zoom };
         },
-        fitView: (options) => fitViewStore(store.getState, options),
+        fitView: (options) => fitView(store.getState, options),
         setCenter: (x, y, options) => {
           const { width, height, maxZoom } = store.getState();
           const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;

packages/core/src/store/utils.ts

@@ -138,44 +138,44 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
     fitViewOnInit,
     nodeOrigin,
   } = get();
+  const isInitialFitView = options.initial && !fitViewOnInitDone && fitViewOnInit;
+  const d3initialized = d3Zoom && d3Selection;
 
-  if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
-    if (d3Zoom && d3Selection) {
-      const nodes = getNodes().filter((n) => {
-        const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden);
-        let shouldInclude = true;
+  if (d3initialized && (isInitialFitView || !options.initial)) {
+    const nodes = getNodes().filter((n) => {
+      const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden);
+      let shouldInclude = true;
 
-        if (options.nodes?.length) {
-          shouldInclude = options.nodes.includes(n.id);
-        }
-
-        return isVisible && shouldInclude;
-      });
-
-      const nodesInitialized = nodes.every((n) => n.width && n.height);
-
-      if (nodes.length > 0 && nodesInitialized) {
-        const bounds = getRectOfNodes(nodes, nodeOrigin);
-
-        const [x, y, zoom] = getTransformForBounds(
-          bounds,
-          width,
-          height,
-          options.minZoom ?? minZoom,
-          options.maxZoom ?? maxZoom,
-          options.padding ?? 0.1
-        );
-
-        const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
-
-        if (typeof options.duration === 'number' && options.duration > 0) {
-          d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
-        } else {
-          d3Zoom.transform(d3Selection, nextTransform);
-        }
-
-        return true;
+      if (options.nodes?.length) {
+        shouldInclude = options.nodes.includes(n.id);
       }
+
+      return isVisible && shouldInclude;
+    });
+
+    const nodesInitialized = nodes.every((n) => n.width && n.height);
+
+    if (nodes.length > 0 && nodesInitialized) {
+      const bounds = getRectOfNodes(nodes, nodeOrigin);
+
+      const [x, y, zoom] = getTransformForBounds(
+        bounds,
+        width,
+        height,
+        options.minZoom ?? minZoom,
+        options.maxZoom ?? maxZoom,
+        options.padding ?? 0.1
+      );
+
+      const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
+
+      if (typeof options.duration === 'number' && options.duration > 0) {
+        d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
+      } else {
+        d3Zoom.transform(d3Selection, nextTransform);
+      }
+
+      return true;
     }
   }
 

packages/core/src/types/general.ts

@@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentTyp
 export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
 export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
 
-export type FitView = (fitViewOptions?: FitViewOptions) => void;
+export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
 
 export type Project = (position: XYPosition) => XYPosition;
 

packages/minimap/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/minimap
 
+## 11.3.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
 ## 11.3.6
 
 ### Patch Changes

packages/minimap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/minimap",
-  "version": "11.3.6",
+  "version": "11.3.7",
   "description": "Minimap component for React Flow.",
   "keywords": [
     "react",

packages/node-toolbar/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @reactflow/node-toolbar
 
+## 1.1.7
+
+### Patch Changes
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+
 ## 1.1.6
 
 ### Patch Changes

packages/node-toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/node-toolbar",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A toolbar component for React Flow that can be attached to a node.",
   "keywords": [
     "react",

packages/reactflow/CHANGELOG.md

@@ -1,5 +1,18 @@
 # reactflow
 
+## 11.5.5
+
+### Patch Changes
+
+- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius
+
+- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
+  - @reactflow/core@11.5.4
+  - @reactflow/background@11.1.7
+  - @reactflow/controls@11.1.7
+  - @reactflow/minimap@11.3.7
+  - @reactflow/node-toolbar@1.1.7
+
 ## 11.5.4
 
 This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.
@@ -8,7 +21,7 @@ This release fixes some issues with the newly introduced connection radius featu
 
 - [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either
 - [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius
-- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius 
+- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius
 
 - Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
   - @reactflow/core@11.5.3

packages/reactflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow",
-  "version": "11.5.4",
+  "version": "11.5.5",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "keywords": [
     "react",