From 1d3126e4feee26f5983c213cb7b010ebc3ff1386 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 00:56:23 +0100 Subject: [PATCH 1/9] fix(core): check if `prevClosestHandle` exists in `onPointerUp` --- packages/core/src/components/Handle/handler.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 9b8855a3..a0c2e935 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -154,8 +154,10 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (connection && isValid) { - onConnect?.(connection); + if (prevClosestHandle) { + if (connection && isValid) { + onConnect?.(connection); + } } // it's important to get a fresh reference from the store here From 383a074aeae6dbec8437fa08c7c8d8240838a84e Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 00:57:49 +0100 Subject: [PATCH 2/9] chore(changeset): add --- .changeset/new-guests-attend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-guests-attend.md diff --git a/.changeset/new-guests-attend.md b/.changeset/new-guests-attend.md new file mode 100644 index 00000000..89d6660c --- /dev/null +++ b/.changeset/new-guests-attend.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius From 230106da73b8d235a76f2de9cd75fe9091bde921 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 6 Feb 2023 02:00:35 +0100 Subject: [PATCH 3/9] chore(connction-handler): cleanup --- packages/core/src/components/Handle/handler.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index a0c2e935..caed0dd3 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -154,10 +154,8 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (prevClosestHandle) { - if (connection && isValid) { - onConnect?.(connection); - } + if (prevClosestHandle && connection && isValid) { + onConnect?.(connection); } // it's important to get a fresh reference from the store here From a7a011f050fea71a59acb3d8e128aeb36ebea3fb Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 6 Feb 2023 02:02:57 +0100 Subject: [PATCH 4/9] chore(packages): bump --- .changeset/new-guests-attend.md | 5 ----- packages/background/CHANGELOG.md | 7 +++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 8 +++++++- packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 7 +++++++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 7 +++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 15 ++++++++++++++- packages/reactflow/package.json | 2 +- 13 files changed, 55 insertions(+), 13 deletions(-) delete mode 100644 .changeset/new-guests-attend.md diff --git a/.changeset/new-guests-attend.md b/.changeset/new-guests-attend.md deleted file mode 100644 index 89d6660c..00000000 --- a/.changeset/new-guests-attend.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius 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/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", From 54509aa5629a7e11913bb29d74ee2f6c6ec9cc83 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:58:24 +0100 Subject: [PATCH 5/9] fix(core): avoid edge update if not using left mouse btn --- packages/core/src/components/Edges/wrapEdge.tsx | 5 +++++ 1 file changed, 5 insertions(+) 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'; From 0d259b028558aab650546f3371a85f3bce45252f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:59:07 +0100 Subject: [PATCH 6/9] chore(changeset): add --- .changeset/gold-pans-appear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-pans-appear.md 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 From 64c7887a0ec210d5deef4823120fecd0eb71170b Mon Sep 17 00:00:00 2001 From: Totoro-moroku Date: Wed, 8 Feb 2023 21:57:41 +0900 Subject: [PATCH 7/9] typescript: fitView return type #2823 --- packages/core/src/types/general.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 4abfa405..d9808e57 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; From c180527239ef6fbf76c40f1740b55055395c8d6a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:17:43 +0100 Subject: [PATCH 8/9] chore(fitview): cleanup --- packages/core/src/hooks/useViewportHelper.ts | 6 +-- packages/core/src/store/utils.ts | 44 ++++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) 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 caf860af..6be6bae7 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -138,35 +138,35 @@ 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) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + if (d3initialized && (isInitialFitView || !options.initial)) { + const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); - const nodesInitialized = nodes.every((n) => n.width && n.height); + const nodesInitialized = nodes.every((n) => n.width && n.height); - if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes, nodeOrigin); + 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 [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); + 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 (typeof options.duration === 'number' && options.duration > 0) { + d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform); + } else { + d3Zoom.transform(d3Selection, nextTransform); } + + return true; } } From f3de9335af6cd96cd77dc77f24a944eef85384e5 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:18:37 +0100 Subject: [PATCH 9/9] chore(changeset): add --- .changeset/perfect-meals-confess.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-meals-confess.md 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