diff --git a/.changeset/gold-pans-appear.md b/.changeset/gold-pans-appear.md new file mode 100644 index 00000000..fd5b5c79 --- /dev/null +++ b/.changeset/gold-pans-appear.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Avoid triggering edge update if not using left mouse button diff --git a/.changeset/perfect-meals-confess.md b/.changeset/perfect-meals-confess.md new file mode 100644 index 00000000..152ecf8a --- /dev/null +++ b/.changeset/perfect-meals-confess.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fitView: return type boolean diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 1f12e5b2..bbe4b76f 100644 --- a/packages/background/CHANGELOG.md +++ b/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 diff --git a/packages/background/package.json b/packages/background/package.json index e840a1ae..2a2b01ef 100644 --- a/packages/background/package.json +++ b/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", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index acf969a7..530d990b 100644 --- a/packages/controls/CHANGELOG.md +++ b/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 diff --git a/packages/controls/package.json b/packages/controls/package.json index dd8008f8..00abf604 100644 --- a/packages/controls/package.json +++ b/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", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 7f5e7d0b..23447822 100644 --- a/packages/core/CHANGELOG.md +++ b/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 diff --git a/packages/core/package.json b/packages/core/package.json index 9171521e..eaec3cc8 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index d53044f7..80a6be7d 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -89,6 +89,11 @@ export default (EdgeComponent: ComponentType) => { const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave); const handleEdgeUpdater = (event: React.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'; diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 9b8855a3..caed0dd3 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/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); } diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index ef151aa3..522d6ac8 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/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; diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 0023db71..9b5a4228 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -138,44 +138,44 @@ export function fitView(get: StoreApi['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; } } diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 3c1dd4a8..bf9a779f 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent }; export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent> }; -export type FitView = (fitViewOptions?: FitViewOptions) => void; +export type FitView = (fitViewOptions?: FitViewOptions) => boolean; export type Project = (position: XYPosition) => XYPosition; diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index f3b94881..c710e303 100644 --- a/packages/minimap/CHANGELOG.md +++ b/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 diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 08d9c59a..56f47a75 100644 --- a/packages/minimap/package.json +++ b/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", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 4c15ad33..030ddb6d 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/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 diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 3788fd33..e2fe31f3 100644 --- a/packages/node-toolbar/package.json +++ b/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", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 4201ed0b..4d6beef7 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/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 diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 593e37b1..c305313f 100644 --- a/packages/reactflow/package.json +++ b/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",