From 021e4daca598db119e5c6a5b251448711a0e21ef Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 20 Sep 2022 14:50:26 +0300 Subject: [PATCH 01/43] feat(store): cancel connection method added --- src/store/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/store/index.ts b/src/store/index.ts index cb8b9502..bbb24cfe 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -233,6 +233,11 @@ const createStore = () => nodeInternals: new Map(nodeInternals), }); }, + cancelConnection: () => + set({ + connectionNodeId: initialState.connectionNodeId, + connectionHandleId: initialState.connectionHandleId, + }), reset: () => set({ ...initialState }), })); From 90418e36fa56f72360f61ceab390f91269a9f8ef Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 27 Sep 2022 16:00:02 +0200 Subject: [PATCH 02/43] chore(edges): cleanup types --- .../core/src/components/Edges/BezierEdge.tsx | 41 ++++++------------- .../src/components/Edges/SimpleBezierEdge.tsx | 29 ++++--------- .../src/components/Edges/SmoothStepEdge.tsx | 6 +-- .../src/components/Edges/StraightEdge.tsx | 8 ++-- packages/core/src/components/Edges/utils.ts | 2 +- 5 files changed, 28 insertions(+), 58 deletions(-) diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index 377350a0..11ad64b1 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; -import { BezierEdgeProps, Position } from '../../types'; + import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; +import { BezierEdgeProps, Position } from '../../types'; export interface GetBezierPathParams { sourceX: number; @@ -25,40 +26,22 @@ interface GetControlWithCurvatureParams { function calculateControlOffset(distance: number, curvature: number): number { if (distance >= 0) { return 0.5 * distance; - } else { - return curvature * 25 * Math.sqrt(-distance); } + + return curvature * 25 * Math.sqrt(-distance); } function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] { - let ctX: number, ctY: number; switch (pos) { case Position.Left: - { - ctX = x1 - calculateControlOffset(x1 - x2, c); - ctY = y1; - } - break; + return [x1 - calculateControlOffset(x1 - x2, c), y1]; case Position.Right: - { - ctX = x1 + calculateControlOffset(x2 - x1, c); - ctY = y1; - } - break; + return [x1 + calculateControlOffset(x2 - x1, c), y1]; case Position.Top: - { - ctX = x1; - ctY = y1 - calculateControlOffset(y1 - y2, c); - } - break; + return [x1, y1 - calculateControlOffset(y1 - y2, c)]; case Position.Bottom: - { - ctX = x1; - ctY = y1 + calculateControlOffset(y2 - y1, c); - } - break; + return [x1, y1 + calculateControlOffset(y2 - y1, c)]; } - return [ctX, ctY]; } export function getBezierPath({ @@ -69,7 +52,7 @@ export function getBezierPath({ targetY, targetPosition = Position.Top, curvature = 0.25, -}: GetBezierPathParams): [string, number, number, number, number] { +}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControlWithCurvature({ pos: sourcePosition, x1: sourceX, @@ -86,7 +69,7 @@ export function getBezierPath({ y2: sourceY, c: curvature, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -99,8 +82,8 @@ export function getBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index cf19595f..3082d9ce 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -21,24 +21,11 @@ interface GetControlParams { } function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] { - let ctX: number, ctY: number; - switch (pos) { - case Position.Left: - case Position.Right: - { - ctX = 0.5 * (x1 + x2); - ctY = y1; - } - break; - case Position.Top: - case Position.Bottom: - { - ctX = x1; - ctY = 0.5 * (y1 + y2); - } - break; + if (pos === Position.Left || pos === Position.Right) { + return [0.5 * (x1 + x2), y1]; } - return [ctX, ctY]; + + return [x1, 0.5 * (y1 + y2)]; } export function getSimpleBezierPath({ @@ -48,7 +35,7 @@ export function getSimpleBezierPath({ targetX, targetY, targetPosition = Position.Top, -}: GetSimpleBezierPathParams): [string, number, number, number, number] { +}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControl({ pos: sourcePosition, x1: sourceX, @@ -63,7 +50,7 @@ export function getSimpleBezierPath({ x2: sourceX, y2: sourceY, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -76,8 +63,8 @@ export function getSimpleBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index 0e03932c..476cc0b0 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import { SmoothStepEdgeProps, Position, XYPosition } from '../../types'; import BaseEdge from './BaseEdge'; -import { getSimpleEdgeCenter } from './utils'; +import { getEdgeCenter } from './utils'; export interface GetSmoothStepPathParams { sourceX: number; @@ -72,7 +72,7 @@ function getPoints({ let points: XYPosition[] = []; let centerX, centerY; - const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({ + const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({ sourceX: source.x, sourceY: source.y, targetX: target.x, @@ -170,7 +170,7 @@ export function getSmoothStepPath({ centerX, centerY, offset = 20, -}: GetSmoothStepPathParams): [string, number, number, number, number] { +}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, diff --git a/packages/core/src/components/Edges/StraightEdge.tsx b/packages/core/src/components/Edges/StraightEdge.tsx index bbd0fa22..af6e1c8b 100644 --- a/packages/core/src/components/Edges/StraightEdge.tsx +++ b/packages/core/src/components/Edges/StraightEdge.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import BaseEdge from './BaseEdge'; import { EdgeProps } from '../../types'; -import { getSimpleEdgeCenter } from './utils'; +import { getEdgeCenter } from './utils'; export type GetStraightPathParams = { sourceX: number; @@ -16,15 +16,15 @@ export function getStraightPath({ sourceY, targetX, targetY, -}: GetStraightPathParams): [string, number, number, number, number] { - const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({ +}: GetStraightPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { + const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({ sourceX, sourceY, targetX, targetY, }); - return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, centerX, centerY, offsetX, offsetY]; + return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY]; } const StraightEdge = memo( diff --git a/packages/core/src/components/Edges/utils.ts b/packages/core/src/components/Edges/utils.ts index 5b111997..8c6c1ef1 100644 --- a/packages/core/src/components/Edges/utils.ts +++ b/packages/core/src/components/Edges/utils.ts @@ -28,7 +28,7 @@ export function getMouseHandler( } // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) -export function getSimpleEdgeCenter({ +export function getEdgeCenter({ sourceX, sourceY, targetX, From 7542275ccc089472c7946793b92c1552ccf028af Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 27 Sep 2022 16:09:32 +0200 Subject: [PATCH 03/43] refactor(edge-label): prevent junpming --- examples/vite-app/src/examples/EdgeRouting/index.tsx | 2 +- packages/core/src/components/Edges/EdgeText.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/vite-app/src/examples/EdgeRouting/index.tsx b/examples/vite-app/src/examples/EdgeRouting/index.tsx index 3d37b43b..4d7f20e6 100644 --- a/examples/vite-app/src/examples/EdgeRouting/index.tsx +++ b/examples/vite-app/src/examples/EdgeRouting/index.tsx @@ -107,7 +107,7 @@ const edges: Edge[] = [ const defaultEdgeOptions = { label: 'Edge Label', - type: 'default', + type: 'smoothstep', markerEnd: { type: MarkerType.ArrowClosed, }, diff --git a/packages/core/src/components/Edges/EdgeText.tsx b/packages/core/src/components/Edges/EdgeText.tsx index 9134d66f..78974281 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/core/src/components/Edges/EdgeText.tsx @@ -41,6 +41,7 @@ const EdgeText: FC> = ({ {labelShowBg && ( From 4ba0d8dbeeae4faff199746108fc328122da6c27 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 28 Sep 2022 10:33:01 +0200 Subject: [PATCH 04/43] chore(packages): bump versions --- packages/background/package.json | 2 +- packages/controls/package.json | 2 +- packages/core/package.json | 2 +- packages/minimap/package.json | 2 +- packages/reactflow/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/background/package.json b/packages/background/package.json index 90c1db07..f6179a74 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.0-next.6", + "version": "11.0.0-next.7", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/package.json b/packages/controls/package.json index dc810a23..109f307d 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.0-next.6", + "version": "11.0.0-next.7", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/package.json b/packages/core/package.json index 4a36b469..b272d35c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.0.0-next.6", + "version": "11.0.0-next.7", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 063cac5f..3adb4e43 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.0-next.6", + "version": "11.0.0-next.7", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 73f8806a..e635a156 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.0.0-next.12", + "version": "11.0.0-next.13", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 6fb3552e2d5f9405830a9f206cec5a70d580d4b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 28 Sep 2022 11:05:53 +0200 Subject: [PATCH 05/43] Update README.md --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index be3dcc70..1bdc2527 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,13 @@ A highly customizable React component for building interactive graphs and node-b - **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) - **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) -## Commercial Usage / Attribution +## Commercial Usage -React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq). +**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on [our website]([https://pro.reactflow.dev/pricing](https://pro.reactflow.dev/pricing)) or through [Github Sponsors]([https://github.com/sponsors/wbkd](https://github.com/sponsors/wbkd)). + +You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). ## Installation From 43bb29fa53cabdd26bea61c5965c0d456b8d309e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 28 Sep 2022 11:08:44 +0200 Subject: [PATCH 06/43] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1bdc2527..dcd94b32 100644 --- a/README.md +++ b/README.md @@ -80,12 +80,12 @@ pnpm test ## Maintainers -React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us: +React Flow is the full-time project of Moritz and Christopher of [webkid](https://webkid.io/), based in Berlin. If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://pro.reactflow.dev/contact) or by joining the [React Flow Discord Server](https://discord.gg/Bqt6xrs). -- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) -- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) +- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) +- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) -You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs). +Any support you provide goes directly towards the development and maintenance of React Flow, allowing us to continue to operate as an independent company, working on what we think is best for React Flow as an open-source library. ## Community Packages From cb411bd9911d44ae916c7a9c0ef2facd9391c33d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 28 Sep 2022 11:12:34 +0200 Subject: [PATCH 07/43] Update README.md --- README.md | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index dcd94b32..9e4dd5fd 100644 --- a/README.md +++ b/README.md @@ -41,14 +41,36 @@ The easiest way to get the latest version of React Flow is to install it via npm npm install reactflow ``` -## Quick Start +## Quickstart -This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). +This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and the full [API reference](https://reactflow.dev/docs/api/react-flow-props). ```jsx -import ReactFlow, { MiniMap, Controls } from 'reactflow'; +import { useCallback } from 'react'; +import ReactFlow, { + MiniMap, + Controls, + Background, + useNodesState, + useEdgesState, + addEdge, +} from 'reactflow'; + +import 'reactflow/dist/style.css'; + +const initialNodes = [ + { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, + { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, +]; + +const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; + +function Flow() { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); -function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { return ( + ); } From 95a0c1db85c9b2558ff0d09868fc9f6119ad11c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 28 Sep 2022 12:42:04 +0200 Subject: [PATCH 08/43] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e4dd5fd..0d0aaeef 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ A highly customizable React component for building interactive graphs and node-b **Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on [our website]([https://pro.reactflow.dev/pricing](https://pro.reactflow.dev/pricing)) or through [Github Sponsors]([https://github.com/sponsors/wbkd](https://github.com/sponsors/wbkd)). +**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). From 0f5f9d14e5208d364c7a6c1eb6c4a10273f83bb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 28 Sep 2022 12:44:17 +0200 Subject: [PATCH 09/43] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0d0aaeef..fb6b7384 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ A highly customizable React component for building interactive graphs and node-based editors. -[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) +[🚀 Getting Started](https://reactflow.dev/docs/quickstart/) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev) From 414f9132174c6a159b1b0b5e9dec39a85b1671c5 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 28 Sep 2022 15:26:40 +0200 Subject: [PATCH 10/43] chore(packages): bump versions --- examples/vite-app/package.json | 2 +- packages/background/CHANGELOG.md | 35 ++++++++++++++++++++++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 35 ++++++++++++++++++++++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 30 +++++++++++++++++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 36 +++++++++++++++++++++++++++ packages/minimap/package.json | 2 +- packages/reactflow/CHANGELOG.md | 42 ++++++++++++++++++++++++++++++++ packages/reactflow/package.json | 2 +- 11 files changed, 184 insertions(+), 6 deletions(-) create mode 100644 packages/background/CHANGELOG.md create mode 100644 packages/controls/CHANGELOG.md create mode 100644 packages/core/CHANGELOG.md create mode 100644 packages/minimap/CHANGELOG.md create mode 100644 packages/reactflow/CHANGELOG.md diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index da15fb97..a4e6eab8 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -1,7 +1,7 @@ { "name": "@reactflow/examples", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "scripts": { "dev": "vite --port 3000 --open", diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md new file mode 100644 index 00000000..7c79626b --- /dev/null +++ b/packages/background/CHANGELOG.md @@ -0,0 +1,35 @@ +# @reactflow/background + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/background/package.json b/packages/background/package.json index f6179a74..2e883352 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.0-next.7", + "version": "11.0.0", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md new file mode 100644 index 00000000..7e95ab8a --- /dev/null +++ b/packages/controls/CHANGELOG.md @@ -0,0 +1,35 @@ +# @reactflow/controls + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/controls/package.json b/packages/controls/package.json index 109f307d..53bec0a6 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.0-next.7", + "version": "11.0.0", "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 new file mode 100644 index 00000000..06967953 --- /dev/null +++ b/packages/core/CHANGELOG.md @@ -0,0 +1,30 @@ +# @reactflow/core + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap diff --git a/packages/core/package.json b/packages/core/package.json index b272d35c..d6b3c102 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.0.0-next.7", + "version": "11.0.0", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md new file mode 100644 index 00000000..cf08eb09 --- /dev/null +++ b/packages/minimap/CHANGELOG.md @@ -0,0 +1,36 @@ +# @reactflow/minimap + +## 11.0.0 + +### Major Changes + +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.0.0 diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 3adb4e43..d0210b51 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.0-next.7", + "version": "11.0.0", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md new file mode 100644 index 00000000..2cff2539 --- /dev/null +++ b/packages/reactflow/CHANGELOG.md @@ -0,0 +1,42 @@ +# reactflow + +## 11.0.0 + +Finally it's here! A new version that comes with lots of improvements and the new package name `reactflow`. +From now on you can install it via `npm install reactflow`. + +## Major Changes + +- Importing CSS via `reactflow/dist/style.css` is mandatory +- **Better [Accessibility](/docs/guides/accessibility)** + - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard. + - `aria-` default attributes for all elements and controllable via `ariaLabel` options + - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop +- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact +- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145 +- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184 +- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting. +- **New background pattern**: `BackgroundVariant.Cross` variant +- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component +- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component +- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node +- **Deletable option** for Nodes and edges +- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave` +- **Edge `pathOptions`** for `smoothstep` and `default` edges +- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning +- **Pane moveable** with middle mouse button +- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false) +- **[``](/docs/api/edges/base-edge) component** that makes it easier to build custom edges +- **[Separately installable packages](/docs/overview/packages/)** + - @reactflow/core + - @reactflow/background + - @reactflow/controls + - @reactflow/minimap + +### Patch Changes + +- Updated dependencies: + - @reactflow/background@11.0.0 + - @reactflow/controls@11.0.0 + - @reactflow/core@11.0.0 + - @reactflow/minimap@11.0.0 diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index e635a156..8a411979 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.0.0-next.13", + "version": "11.0.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 25d88893a2f8eb879bd31402c696770df7298771 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Sep 2022 19:00:56 +0200 Subject: [PATCH 11/43] chore(turbo): use globalEnv --- turbo.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/turbo.json b/turbo.json index ada06cd2..bc32f9df 100644 --- a/turbo.json +++ b/turbo.json @@ -2,7 +2,7 @@ "$schema": "https://turborepo.org/schema.json", "pipeline": { "build": { - "dependsOn": ["^build", "typecheck", "lint"], + "dependsOn": ["^build"], "outputs": ["dist/**"] }, "dev": { @@ -20,5 +20,5 @@ "outputs": [] } }, - "globalDependencies": ["$NODE_ENV"] + "globalEnv": ["NODE_ENV"] } From a3147dc4b8c2df33af4b56cd7c11fe577c132599 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 13:01:42 +0200 Subject: [PATCH 12/43] refactor(nodes): make nopan class overwritable --- packages/core/src/components/Nodes/wrapNode.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 8ebb50f9..19e7faa9 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -151,13 +151,16 @@ export default (NodeComponent: ComponentType) => { className={cc([ 'react-flow__node', `react-flow__node-${type}`, + { + // this is overwritable by passing `nopan` as a class name + [noPanClassName]: isDraggable, + }, className, { selected, selectable: isSelectable, parent: isParent, dragging, - [noPanClassName]: isDraggable, }, ])} ref={nodeRef} From d00faa6b3e77388bfd655d4c02e9a5375bc515e4 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 13:50:15 +0200 Subject: [PATCH 13/43] chore(cs): add changeset --- .changeset/twelve-rats-prove.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/twelve-rats-prove.md diff --git a/.changeset/twelve-rats-prove.md b/.changeset/twelve-rats-prove.md new file mode 100644 index 00000000..3fb60c62 --- /dev/null +++ b/.changeset/twelve-rats-prove.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Make nopan class name overwritable with class name option From be6590a5d6ba4937a38174b5c91c4e4c9f3b01a2 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 14:31:34 +0200 Subject: [PATCH 14/43] feat(nodes-edges): add nodesFocusable, edgesFocusable, cleanup keyboard controls --- .../vite-app/src/examples/Basic/index.tsx | 2 +- .../core/src/components/Edges/wrapEdge.tsx | 10 +++--- .../core/src/components/Nodes/wrapNode.tsx | 36 +++++++++++++------ .../src/components/StoreUpdater/index.tsx | 6 ++++ .../core/src/container/EdgeRenderer/index.tsx | 5 ++- .../core/src/container/NodeRenderer/index.tsx | 9 ++++- .../core/src/container/ReactFlow/index.tsx | 4 +++ .../core/src/hooks/useUpdateNodePositions.ts | 16 +++++---- packages/core/src/store/initialState.ts | 2 ++ packages/core/src/types/component-props.ts | 2 ++ packages/core/src/types/edges.ts | 3 +- packages/core/src/types/general.ts | 2 ++ packages/core/src/types/nodes.ts | 2 ++ 13 files changed, 73 insertions(+), 26 deletions(-) diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 37c5d010..b59e21b3 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -92,7 +92,7 @@ const BasicFlow = () => { defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} > - + diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 4ce63466..35d7b133 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -51,7 +51,7 @@ export default (EdgeComponent: ComponentType) => { markerStart, rfId, ariaLabel, - disableKeyboardA11y, + isFocusable, pathOptions, interactionWidth, }: WrapEdgeProps): JSX.Element | null => { @@ -158,12 +158,12 @@ export default (EdgeComponent: ComponentType) => { onMouseEnter={onEdgeMouseEnter} onMouseMove={onEdgeMouseMove} onMouseLeave={onEdgeMouseLeave} - onKeyDown={disableKeyboardA11y ? undefined : onKeyDown} - tabIndex={disableKeyboardA11y ? undefined : 0} - role={disableKeyboardA11y ? undefined : 'button'} + onKeyDown={isFocusable ? onKeyDown : undefined} + tabIndex={isFocusable ? 0 : undefined} + role={isFocusable ? 'button' : undefined} data-testid={`rf__edge-${id}`} aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`} - aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_EDGE_DESC_KEY}-${rfId}`} + aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined} ref={edgeRef} > {!updating && ( diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 19e7faa9..76d53d19 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -11,10 +11,10 @@ import { NodeProps, WrapNodeProps, XYPosition } from '../../types'; import { elementSelectionKeys } from '../../utils'; export const arrowKeyDiffs: Record = { - ArrowUp: { x: 0, y: -10 }, - ArrowDown: { x: 0, y: 10 }, - ArrowLeft: { x: -10, y: 0 }, - ArrowRight: { x: 10, y: 0 }, + ArrowUp: { x: 0, y: -1 }, + ArrowDown: { x: 0, y: 1 }, + ArrowLeft: { x: -1, y: 0 }, + ArrowRight: { x: 1, y: 0 }, }; export default (NodeComponent: ComponentType) => { @@ -38,6 +38,7 @@ export default (NodeComponent: ComponentType) => { isDraggable, isSelectable, isConnectable, + isFocusable, selectNodesOnDrag, sourcePosition, targetPosition, @@ -82,6 +83,7 @@ export default (NodeComponent: ComponentType) => { }; const onKeyDown = (event: KeyboardEvent) => { + const { snapGrid, snapToGrid } = store.getState(); if (elementSelectionKeys.includes(event.key) && isSelectable) { const unselect = event.key === 'Escape'; if (unselect) { @@ -92,14 +94,28 @@ export default (NodeComponent: ComponentType) => { store, unselect, }); - } else if (selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) { + } else if ( + !disableKeyboardA11y && + isDraggable && + selected && + Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key) + ) { store.setState({ - ariaLiveMessage: `Moved selected node ten pixels ${event.key + ariaLiveMessage: `Moved selected node ${event.key .replace('Arrow', '') .toLowerCase()}. New position, x: ${~~xPos}, y: ${~~yPos}`, }); - updatePositions(arrowKeyDiffs[event.key]); + // by default a node moves 5px on each key press, or 20px if shift is pressed + // if snap grid is enabled, we use that for the velocity. + const xVelo = snapToGrid ? snapGrid[0] : 5; + const yVelo = snapToGrid ? snapGrid[1] : 5; + const factor = event.shiftKey ? 4 : 1; + + updatePositions({ + x: arrowKeyDiffs[event.key].x * xVelo * factor, + y: arrowKeyDiffs[event.key].y * yVelo * factor, + }); } }; @@ -179,9 +195,9 @@ export default (NodeComponent: ComponentType) => { onContextMenu={onContextMenuHandler} onClick={onSelectNodeHandler} onDoubleClick={onDoubleClickHandler} - onKeyDown={disableKeyboardA11y ? undefined : onKeyDown} - tabIndex={disableKeyboardA11y ? undefined : 0} - role={disableKeyboardA11y ? undefined : 'button'} + onKeyDown={isFocusable ? onKeyDown : undefined} + tabIndex={isFocusable ? 0 : undefined} + role={isFocusable ? 'button' : undefined} aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`} aria-label={ariaLabel} > diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 1c0db13a..aae2e2fc 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -18,6 +18,8 @@ type StoreUpdaterProps = Pick< | 'onClickConnectEnd' | 'nodesDraggable' | 'nodesConnectable' + | 'nodesFocusable' + | 'edgesFocusable' | 'minZoom' | 'maxZoom' | 'nodeExtent' @@ -89,6 +91,8 @@ const StoreUpdater = ({ onClickConnectEnd, nodesDraggable, nodesConnectable, + nodesFocusable, + edgesFocusable, minZoom, maxZoom, nodeExtent, @@ -145,6 +149,8 @@ const StoreUpdater = ({ useDirectStoreUpdater('onClickConnectEnd', onClickConnectEnd, store.setState); useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState); useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState); + useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState); + useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState); useDirectStoreUpdater('snapGrid', snapGrid, store.setState); diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 1ce6b4a2..93b7adaa 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -46,6 +46,7 @@ const selector = (s: ReactFlowState) => ({ connectionNodeId: s.connectionNodeId, connectionHandleType: s.connectionHandleType, nodesConnectable: s.nodesConnectable, + edgesFocusable: s.edgesFocusable, elementsSelectable: s.elementsSelectable, width: s.width, height: s.height, @@ -58,6 +59,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { connectionNodeId, connectionHandleType, nodesConnectable, + edgesFocusable, elementsSelectable, width, height, @@ -119,6 +121,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle || null); const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; + const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); if (!sourceHandle || !targetHandle) { devWarn( @@ -181,7 +184,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { onEdgeUpdateEnd={props.onEdgeUpdateEnd} rfId={props.rfId} ariaLabel={edge.ariaLabel} - disableKeyboardA11y={props.disableKeyboardA11y} + isFocusable={isFocusable} pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined} interactionWidth={edge.interactionWidth} /> diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index c9b4190f..b576ff69 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -31,12 +31,16 @@ type NodeRendererProps = Pick< const selector = (s: ReactFlowState) => ({ nodesDraggable: s.nodesDraggable, nodesConnectable: s.nodesConnectable, + nodesFocusable: s.nodesFocusable, elementsSelectable: s.elementsSelectable, updateNodeDimensions: s.updateNodeDimensions, }); const NodeRenderer = (props: NodeRendererProps) => { - const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow); + const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions } = useStore( + selector, + shallow + ); const nodes = useVisibleNodes(props.onlyRenderVisibleElements); const resizeObserverRef = useRef(); @@ -82,6 +86,8 @@ const NodeRenderer = (props: NodeRendererProps) => { const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined')); const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined')); const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined')); + const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined')); + const clampedPosition = props.nodeExtent ? clampPosition(node.positionAbsolute, props.nodeExtent) : node.positionAbsolute; @@ -122,6 +128,7 @@ const NodeRenderer = (props: NodeRendererProps) => { isDraggable={isDraggable} isSelectable={isSelectable} isConnectable={isConnectable} + isFocusable={isFocusable} resizeObserver={resizeObserver} dragHandle={node.dragHandle} zIndex={node[internalsSymbol]?.z ?? 0} diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index bda960ec..bd493eec 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -108,7 +108,9 @@ const ReactFlow = forwardRef( selectNodesOnDrag = true, nodesDraggable, nodesConnectable, + nodesFocusable, nodeOrigin = initNodeOrigin, + edgesFocusable, elementsSelectable, defaultViewport = initDefaultViewport, minZoom = 0.5, @@ -245,6 +247,8 @@ const ReactFlow = forwardRef( onClickConnectEnd={onClickConnectEnd} nodesDraggable={nodesDraggable} nodesConnectable={nodesConnectable} + nodesFocusable={nodesFocusable} + edgesFocusable={edgesFocusable} elementsSelectable={elementsSelectable} minZoom={minZoom} maxZoom={maxZoom} diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index a77d50a0..8a303e06 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -9,17 +9,19 @@ function useUpdateNodePositions() { const store = useStoreApi(); const updatePositions = useCallback((positionDiff: XYPosition) => { - const { nodeInternals, nodeExtent, updateNodePositions } = store.getState(); + const { nodeInternals, nodeExtent, updateNodePositions, snapToGrid, snapGrid } = store.getState(); const selectedNodes = Array.from(nodeInternals.values()).filter((n) => n.selected); const nodeUpdates = selectedNodes.map((n) => { if (n.positionAbsolute) { - const updatedPos = calcNextPosition( - n, - { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y }, - nodeInternals, - nodeExtent - ); + const nextPosition = { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y }; + + if (snapToGrid) { + nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]); + nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]); + } + + const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent); n.position = updatedPos.position; n.positionAbsolute = updatedPos.positionAbsolute; diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index b84946ef..ce08a40d 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -40,6 +40,8 @@ const initialState: ReactFlowStore = { nodesDraggable: true, nodesConnectable: true, + nodesFocusable: true, + edgesFocusable: true, elementsSelectable: true, fitViewOnInit: false, fitViewOnInitDone: false, diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index c763343e..7a10340b 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -92,7 +92,9 @@ export interface ReactFlowProps extends HTMLAttributes { onlyRenderVisibleElements?: boolean; nodesDraggable?: boolean; nodesConnectable?: boolean; + nodesFocusable?: boolean; nodeOrigin?: NodeOrigin; + edgesFocusable?: boolean; initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 2332dae9..71863196 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -33,6 +33,7 @@ type DefaultEdge = { zIndex?: number; ariaLabel?: string; interactionWidth?: number; + focusable?: boolean; }; export type SmoothStepPathOptions = { @@ -132,7 +133,7 @@ export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandl onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; rfId?: string; - disableKeyboardA11y: boolean; + isFocusable: boolean; pathOptions?: BezierPathOptions | SmoothStepPathOptions; }; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index ba645b43..6b4422fb 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -167,6 +167,8 @@ export type ReactFlowStore = { nodesDraggable: boolean; nodesConnectable: boolean; + nodesFocusable: boolean; + edgesFocusable: boolean; elementsSelectable: boolean; multiSelectionActive: boolean; diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts index bcb884fa..a1473f71 100644 --- a/packages/core/src/types/nodes.ts +++ b/packages/core/src/types/nodes.ts @@ -31,6 +31,7 @@ export interface Node { expandParent?: boolean; positionAbsolute?: XYPosition; ariaLabel?: string; + focusable?: boolean; // only used internally [internalsSymbol]?: { @@ -73,6 +74,7 @@ export interface WrapNodeProps { initialized: boolean; isSelectable: boolean; isDraggable: boolean; + isFocusable: boolean; selectNodesOnDrag: boolean; onClick?: NodeMouseHandler; onDoubleClick?: NodeMouseHandler; From c98092ef2c98d57d8aedf8e0de261d89208e325b Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 14:32:31 +0200 Subject: [PATCH 15/43] chore(bg): gap=20 by default --- packages/background/src/Background.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index 7fc52cae..7f300565 100644 --- a/packages/background/src/Background.tsx +++ b/packages/background/src/Background.tsx @@ -22,7 +22,7 @@ const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId function Background({ variant = BackgroundVariant.Dots, - gap = 25, + gap = 20, // only used for dots and cross size, // only used for lines and cross From def11008d88749fec40e6fcba8bc41eea2511bab Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 14:33:06 +0200 Subject: [PATCH 16/43] chore(cs): add changesets --- .changeset/great-ladybugs-sell.md | 5 +++++ .changeset/long-glasses-protect.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/great-ladybugs-sell.md create mode 100644 .changeset/long-glasses-protect.md diff --git a/.changeset/great-ladybugs-sell.md b/.changeset/great-ladybugs-sell.md new file mode 100644 index 00000000..baadddd5 --- /dev/null +++ b/.changeset/great-ladybugs-sell.md @@ -0,0 +1,5 @@ +--- +'@reactflow/background': patch +--- + +default gap = 20 diff --git a/.changeset/long-glasses-protect.md b/.changeset/long-glasses-protect.md new file mode 100644 index 00000000..3ab758c2 --- /dev/null +++ b/.changeset/long-glasses-protect.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': minor +--- + +New props: nodesFocusable and edgesFocusable From eb16c0d42533ebe4daf74d38ba3af791bc3443fb Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 3 Oct 2022 14:47:25 +0200 Subject: [PATCH 17/43] chore(packages): bump versions --- .changeset/great-ladybugs-sell.md | 5 ----- .changeset/long-glasses-protect.md | 5 ----- .changeset/twelve-rats-prove.md | 5 ----- examples/vite-app/package.json | 2 +- packages/background/CHANGELOG.md | 9 +++++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 10 ++++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 8 +++++++- packages/minimap/package.json | 2 +- packages/reactflow/CHANGELOG.md | 18 +++++++++++++++++- packages/reactflow/package.json | 2 +- 14 files changed, 56 insertions(+), 23 deletions(-) delete mode 100644 .changeset/great-ladybugs-sell.md delete mode 100644 .changeset/long-glasses-protect.md delete mode 100644 .changeset/twelve-rats-prove.md diff --git a/.changeset/great-ladybugs-sell.md b/.changeset/great-ladybugs-sell.md deleted file mode 100644 index baadddd5..00000000 --- a/.changeset/great-ladybugs-sell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/background': patch ---- - -default gap = 20 diff --git a/.changeset/long-glasses-protect.md b/.changeset/long-glasses-protect.md deleted file mode 100644 index 3ab758c2..00000000 --- a/.changeset/long-glasses-protect.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': minor ---- - -New props: nodesFocusable and edgesFocusable diff --git a/.changeset/twelve-rats-prove.md b/.changeset/twelve-rats-prove.md deleted file mode 100644 index 3fb60c62..00000000 --- a/.changeset/twelve-rats-prove.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -Make nopan class name overwritable with class name option diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index a4e6eab8..67f9d7aa 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -1,7 +1,7 @@ { "name": "@reactflow/examples", "private": true, - "version": "0.0.1", + "version": "0.0.2", "type": "module", "scripts": { "dev": "vite --port 3000 --open", diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 7c79626b..b19289e6 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/background +## 11.0.1 + +### Patch Changes + +- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - default gap = 20 + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + ## 11.0.0 ### Major Changes diff --git a/packages/background/package.json b/packages/background/package.json index 2e883352..b9a1b184 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.0", + "version": "11.0.1", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 7e95ab8a..646ec99c 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.0.1 + +### Patch Changes + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + ## 11.0.0 ### Major Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 53bec0a6..283a310f 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.0", + "version": "11.0.1", "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 06967953..e862ed66 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,15 @@ # @reactflow/core +## 11.1.0 + +### Minor Changes + +- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - New props: nodesFocusable and edgesFocusable + +### Patch Changes + +- [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4) Thanks [@moklick](https://github.com/moklick)! - Make nopan class name overwritable with class name option + ## 11.0.0 ### Major Changes diff --git a/packages/core/package.json b/packages/core/package.json index d6b3c102..6b261a76 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.0.0", + "version": "11.1.0", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index cf08eb09..eb44ff49 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/minimap +## 11.0.1 + +### Patch Changes + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/core@11.1.0 + ## 11.0.0 ### Major Changes @@ -29,7 +36,6 @@ - @reactflow/controls - @reactflow/minimap - ### Patch Changes - Updated dependencies: diff --git a/packages/minimap/package.json b/packages/minimap/package.json index d0210b51..341d53e8 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.0", + "version": "11.0.1", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 2cff2539..3fa8bed1 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,9 +1,25 @@ # reactflow +## 11.1.0 + +### Minor Changes + +- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - New props: nodesFocusable and edgesFocusable + +### Patch Changes + +- [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4) Thanks [@moklick](https://github.com/moklick)! - Make nopan class name overwritable with class name option + +- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]: + - @reactflow/background@11.0.1 + - @reactflow/core@11.1.0 + - @reactflow/controls@11.0.1 + - @reactflow/minimap@11.0.1 + ## 11.0.0 Finally it's here! A new version that comes with lots of improvements and the new package name `reactflow`. -From now on you can install it via `npm install reactflow`. +From now on you can install it via `npm install reactflow`. ## Major Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 8a411979..895157e1 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.0.0", + "version": "11.1.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From ab9e340b7b301fb7c84e42422c51c5c78fd3c3a7 Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 4 Oct 2022 14:24:57 +0200 Subject: [PATCH 18/43] feat(examples): added an example for cancelling the connection --- examples/vite-app/package.json | 1 + examples/vite-app/src/App/index.tsx | 5 ++ .../CancelConnection/Timer.module.css | 18 ++++++ .../src/examples/CancelConnection/Timer.tsx | 21 +++++++ .../src/examples/CancelConnection/data.ts | 34 +++++++++++ .../CancelConnection/hooks/useCountdown.ts | 35 +++++++++++ .../src/examples/CancelConnection/index.tsx | 59 +++++++++++++++++++ packages/core/src/types/general.ts | 1 + pnpm-lock.yaml | 2 + 9 files changed, 176 insertions(+) create mode 100644 examples/vite-app/src/examples/CancelConnection/Timer.module.css create mode 100644 examples/vite-app/src/examples/CancelConnection/Timer.tsx create mode 100644 examples/vite-app/src/examples/CancelConnection/data.ts create mode 100644 examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts create mode 100644 examples/vite-app/src/examples/CancelConnection/index.tsx diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index a4e6eab8..cf31055e 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -13,6 +13,7 @@ "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'" }, "dependencies": { + "classcat": "^5.0.3", "dagre": "^0.8.5", "localforage": "^1.10.0", "react": "^18.2.0", diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 67e46e55..4e6342cc 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -35,6 +35,7 @@ import UseReactFlow from '../examples/UseReactFlow'; import Validation from '../examples/Validation'; import UseKeyPress from '../examples/UseKeyPress'; import EdgeRouting from '../examples/EdgeRouting'; +import CancelConnection from '../examples/CancelConnection'; const routes = [ { @@ -173,6 +174,10 @@ const routes = [ path: '/use-key-press', component: UseKeyPress, }, + { + path: '/cancel-connection', + component: CancelConnection + } ]; const Header = () => { diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.module.css b/examples/vite-app/src/examples/CancelConnection/Timer.module.css new file mode 100644 index 00000000..be36108e --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/Timer.module.css @@ -0,0 +1,18 @@ +.Timer { + position: absolute; + bottom: 0; + transition-duration: 0.3s; + left: 50%; + transform: translate(-50%, 100%); + font-size: 1.5rem; + z-index: 999; + background-color: white; + padding: 0.5rem 1rem; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); +} + +.Timer.show { + transform: translate(-50%, 0%) translateY(-10px); +} \ No newline at end of file diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.tsx b/examples/vite-app/src/examples/CancelConnection/Timer.tsx new file mode 100644 index 00000000..5c09ec44 --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/Timer.tsx @@ -0,0 +1,21 @@ +import cc from 'classcat'; +import styles from './Timer.module.css'; + +interface Props { + remaining: number; + show: boolean; +} + +export default function Timer({ + remaining, + show, +}: Props) { + return ( +
+ Connection will be canceled in {remaining} seconds +
+ ) +} \ No newline at end of file diff --git a/examples/vite-app/src/examples/CancelConnection/data.ts b/examples/vite-app/src/examples/CancelConnection/data.ts new file mode 100644 index 00000000..821b79fe --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/data.ts @@ -0,0 +1,34 @@ +import { Edge, Node } from 'reactflow'; + +export const initialNodes: Node[] = [ + { + id: '1', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + }, + { + id: '2', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + }, + { + id: '3', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + }, +]; + +export const initialEdges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, +]; diff --git a/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts b/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts new file mode 100644 index 00000000..eee7aec4 --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/hooks/useCountdown.ts @@ -0,0 +1,35 @@ +import { useRef, useState } from 'react'; + +const useCountdown = (callback: () => void) => { + const interval = useRef(); + const [remaining, setRemaining] = useState(0); + + const start = (duration: number) => { + setRemaining(duration); + + interval.current = setInterval(() => { + setRemaining((prev) => { + if (prev === 1) { + clearInterval(interval.current); + callback(); + } + + return prev - 1; + }); + }, 1000); + }; + + const stop = () => { + clearInterval(interval.current); + setRemaining(0); + }; + + return { + start, + remaining, + stop, + counting: remaining > 0, + }; +}; + +export default useCountdown; diff --git a/examples/vite-app/src/examples/CancelConnection/index.tsx b/examples/vite-app/src/examples/CancelConnection/index.tsx new file mode 100644 index 00000000..845f3213 --- /dev/null +++ b/examples/vite-app/src/examples/CancelConnection/index.tsx @@ -0,0 +1,59 @@ +import ReactFlow, { + Background, + MiniMap, + addEdge, + ReactFlowProvider, + Connection, + Edge, + useNodesState, + useEdgesState, + OnConnectStart, + OnConnectEnd, + useStore, +} from 'reactflow'; + +import useCountdown from './hooks/useCountdown'; +import { initialEdges, initialNodes } from './data'; +import Timer from './Timer'; + +const CancelConnection = () => { + const [nodes, _, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + const cancelConnection = useStore(state => state.cancelConnection) + + // Cancels connection after 5 seconds + const countdown = useCountdown(() => cancelConnection()); + const onConnectStart: OnConnectStart = () => countdown.start(5); + const onConnectEnd: OnConnectEnd = () => countdown.stop(); + + const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + + return ( + <> + + + + + + + ); +} + +export default () => ( + + + +); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index ba645b43..77dea3a5 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -222,6 +222,7 @@ export type ReactFlowActions = { setMaxZoom: (maxZoom: number) => void; setTranslateExtent: (translateExtent: CoordinateExtent) => void; setNodeExtent: (nodeExtent: CoordinateExtent) => void; + cancelConnection: () => void; reset: () => void; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 113cb1b0..26177a37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,7 @@ importers: '@types/react': ^18.0.17 '@types/react-dom': ^18.0.6 '@vitejs/plugin-react': ^2.1.0 + classcat: ^5.0.3 cypress: ^10.6.0 cypress-real-events: ^1.7.1 dagre: ^0.8.5 @@ -72,6 +73,7 @@ importers: typescript: ^4.8.3 vite: ^3.1.0 dependencies: + classcat: registry.npmjs.org/classcat/5.0.4 dagre: registry.npmjs.org/dagre/0.8.5 localforage: registry.npmjs.org/localforage/1.10.0 react: registry.npmjs.org/react/18.2.0 From 3d8621ba2fcde77167996450caeb01baca5f45e7 Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 4 Oct 2022 15:30:12 +0200 Subject: [PATCH 19/43] chore(cancelConnection-example): added more style --- .../CancelConnection/Timer.module.css | 19 ++++++++++++++++--- .../src/examples/CancelConnection/Timer.tsx | 7 +++++++ .../src/examples/CancelConnection/index.tsx | 5 ++++- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.module.css b/examples/vite-app/src/examples/CancelConnection/Timer.module.css index be36108e..8daee29d 100644 --- a/examples/vite-app/src/examples/CancelConnection/Timer.module.css +++ b/examples/vite-app/src/examples/CancelConnection/Timer.module.css @@ -6,13 +6,26 @@ transform: translate(-50%, 100%); font-size: 1.5rem; z-index: 999; - background-color: white; - padding: 0.5rem 1rem; + background: linear-gradient(#fff, #fff, #f5f5f5); + padding: 0.8rem 1.5rem; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); } .Timer.show { - transform: translate(-50%, 0%) translateY(-10px); + transform: translate(-50%, 0%) translateY(-15px); +} + +.progress { + display: none; + position: absolute; + bottom: 0; + left: 0; + height: 5px; + background: linear-gradient(to right, #42df96, #16dfed); +} + +.Timer.show .progress { + display: block; } \ No newline at end of file diff --git a/examples/vite-app/src/examples/CancelConnection/Timer.tsx b/examples/vite-app/src/examples/CancelConnection/Timer.tsx index 5c09ec44..b46cf23e 100644 --- a/examples/vite-app/src/examples/CancelConnection/Timer.tsx +++ b/examples/vite-app/src/examples/CancelConnection/Timer.tsx @@ -2,19 +2,26 @@ import cc from 'classcat'; import styles from './Timer.module.css'; interface Props { + duration: number; remaining: number; show: boolean; } export default function Timer({ + duration, remaining, show, }: Props) { + const percentage = 100 - (remaining / duration) * 100; + return (
+
Connection will be canceled in {remaining} seconds
) diff --git a/examples/vite-app/src/examples/CancelConnection/index.tsx b/examples/vite-app/src/examples/CancelConnection/index.tsx index 845f3213..689ededf 100644 --- a/examples/vite-app/src/examples/CancelConnection/index.tsx +++ b/examples/vite-app/src/examples/CancelConnection/index.tsx @@ -16,6 +16,8 @@ import useCountdown from './hooks/useCountdown'; import { initialEdges, initialNodes } from './data'; import Timer from './Timer'; +const CANCEL_AFTER = 5; // seconds + const CancelConnection = () => { const [nodes, _, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); @@ -23,7 +25,7 @@ const CancelConnection = () => { // Cancels connection after 5 seconds const countdown = useCountdown(() => cancelConnection()); - const onConnectStart: OnConnectStart = () => countdown.start(5); + const onConnectStart: OnConnectStart = () => countdown.start(CANCEL_AFTER); const onConnectEnd: OnConnectEnd = () => countdown.stop(); const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); @@ -31,6 +33,7 @@ const CancelConnection = () => { return ( <> From 0afaf550a447c2eecc93e464b980e78822c8ade6 Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 4 Oct 2022 15:47:29 +0200 Subject: [PATCH 20/43] chore(examples): title corrected --- examples/vite-app/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vite-app/index.html b/examples/vite-app/index.html index e0d1c840..f1cba741 100644 --- a/examples/vite-app/index.html +++ b/examples/vite-app/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + React Flow Examples
From a743b2ef3610cc1f2e4dabedf2e3d886e7e9b21c Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 4 Oct 2022 16:07:00 +0200 Subject: [PATCH 21/43] feat(examples): title set based on example --- examples/vite-app/src/App/index.tsx | 61 ++++++++++++++++++++++++++--- 1 file changed, 55 insertions(+), 6 deletions(-) diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 67e46e55..31626d01 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent } from 'react'; +import { useEffect, useState } from 'react'; import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import Basic from '../examples/Basic'; @@ -36,159 +36,208 @@ import Validation from '../examples/Validation'; import UseKeyPress from '../examples/UseKeyPress'; import EdgeRouting from '../examples/EdgeRouting'; -const routes = [ +interface IRoute { + name: string; + path: string; + component: React.ComponentType; +} + +const routes: IRoute[] = [ { + name: 'Basic', path: '/', component: Basic, }, { + name: 'Backgrounds', path: '/backgrounds', component: Backgrounds, }, { + name: 'Controlled/Uncontrolled', path: '/controlled-uncontrolled', component: ControlledUncontrolled, }, { + name: 'Custom Connection Line', path: '/custom-connectionline', component: CustomConnectionLine, }, { + name: 'Custom Node', path: '/custom-node', component: CustomNode, }, { + name: 'Default Nodes', path: '/default-nodes', component: DefaultNodes, }, { + name: 'Drag Handle', path: '/draghandle', component: DragHandle, }, { + name: 'Drag and Drop', path: '/dragndrop', component: DragNDrop, }, { + name: 'Edges', path: '/edges', component: Edges, }, { + name: 'Edge Types', path: '/edge-types', component: EdgeTypes, }, { + name: 'Edge Routing', path: '/edge-routing', component: EdgeRouting, }, { + name: 'Empty', path: '/empty', component: Empty, }, { + name: 'Floating Edges', path: '/floating-edges', component: FloatingEdges, }, { + name: 'Hidden', path: '/hidden', component: Hidden, }, { + name: 'Interaction', path: '/interaction', component: Interaction, }, { + name: 'Layouting', path: '/layouting', component: Layouting, }, { + name: 'Multi Flows', path: '/multiflows', component: MultiFlows, }, { + name: 'Nested Nodes', path: '/nested-nodes', component: NestedNodes, }, { + name: 'Node Type Change', path: '/nodetype-change', component: NodeTypeChange, }, { + name: 'nodeTypes Object Change', path: '/nodetypesobject-change', component: NodeTypesObjectChange, }, { + name: 'Overview', path: '/overview', component: Overview, }, { + name: 'Provider', path: '/provider', component: Provider, }, { + name: 'Save/Restore', path: '/save-restore', component: SaveRestore, }, { + name: 'Stress', path: '/stress', component: Stress, }, { + name: 'Subflow', path: '/subflow', component: Subflow, }, { + name: 'Switch Flow', path: '/switch', component: SwitchFlow, }, { + name: 'Touch Device', path: '/touch-device', component: TouchDevice, }, { + name: 'Undirectional', path: '/undirectional', component: Undirectional, }, { + name: 'Updatable Edge', path: '/updatable-edge', component: UpdatableEdge, }, { + name: 'Update Node', path: '/update-node', component: UpdateNode, }, { + name: 'useReactFlow', path: '/usereactflow', component: UseReactFlow, }, { + name: 'useUpdateNodeInternals', path: '/useupdatenodeinternals', component: UseUpdateNodeInternals, }, { + name: 'Validation', path: '/validation', component: Validation, }, { + name: 'useKeyPress', path: '/use-key-press', component: UseKeyPress, }, ]; const Header = () => { - const navigate = useNavigate(); const location = useLocation(); - const onChange = (event: ChangeEvent) => navigate(event.target.value); + const navigate = useNavigate(); + const [currentPath, setCurrentPath] = useState(location.pathname); + + useEffect(() => { + const name = routes.find((route) => route.path === currentPath)?.name; + document.title = `React Flow Examples${name ? ' - ' + name : ''}`; + navigate(currentPath) + }, [currentPath]); return (
React Flow Dev - setCurrentPath(event.target.value)} + > {routes.map((route) => ( ))} From e019a8de132a4cf9d2ee07684379c4cab6163c87 Mon Sep 17 00:00:00 2001 From: Alireza Sheikholmolouki Date: Tue, 4 Oct 2022 16:23:26 +0200 Subject: [PATCH 22/43] fix(examples): extra react imports removed --- examples/vite-app/src/examples/ControlledUncontrolled/index.tsx | 1 - examples/vite-app/src/examples/DefaultNodes/index.tsx | 1 - examples/vite-app/src/examples/EdgeRouting/index.tsx | 1 - examples/vite-app/src/examples/Provider/Sidebar.tsx | 1 - examples/vite-app/src/examples/UseKeyPress/index.tsx | 1 - 5 files changed, 5 deletions(-) diff --git a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx index 0f31a279..1d6ed299 100644 --- a/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx +++ b/examples/vite-app/src/examples/ControlledUncontrolled/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { useReactFlow, Node, diff --git a/examples/vite-app/src/examples/DefaultNodes/index.tsx b/examples/vite-app/src/examples/DefaultNodes/index.tsx index ad623c2f..7590f8b9 100644 --- a/examples/vite-app/src/examples/DefaultNodes/index.tsx +++ b/examples/vite-app/src/examples/DefaultNodes/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; const defaultNodes: Node[] = [ diff --git a/examples/vite-app/src/examples/EdgeRouting/index.tsx b/examples/vite-app/src/examples/EdgeRouting/index.tsx index 4d7f20e6..37bdb5cb 100644 --- a/examples/vite-app/src/examples/EdgeRouting/index.tsx +++ b/examples/vite-app/src/examples/EdgeRouting/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow'; const nodes: Node[] = [ diff --git a/examples/vite-app/src/examples/Provider/Sidebar.tsx b/examples/vite-app/src/examples/Provider/Sidebar.tsx index c1f5221c..145ac718 100644 --- a/examples/vite-app/src/examples/Provider/Sidebar.tsx +++ b/examples/vite-app/src/examples/Provider/Sidebar.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useStore, useStoreApi } from 'reactflow'; import styles from './provider.module.css'; diff --git a/examples/vite-app/src/examples/UseKeyPress/index.tsx b/examples/vite-app/src/examples/UseKeyPress/index.tsx index b2e8900d..e95ae9bc 100644 --- a/examples/vite-app/src/examples/UseKeyPress/index.tsx +++ b/examples/vite-app/src/examples/UseKeyPress/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useKeyPress } from 'reactflow'; const UseKeyPressComponent = () => { From 5d350942d33ded626b3387206f0b0dee368efdfb Mon Sep 17 00:00:00 2001 From: Wenchen Li <9028430+neo@users.noreply.github.com> Date: Thu, 6 Oct 2022 11:00:54 -0400 Subject: [PATCH 23/43] Add css files as sideEffects According to about tree shaking, css files should be considered as side effects: https://webpack.js.org/guides/tree-shaking/#:~:text=**/*.css.-,Tip,-Note%20that%20any --- packages/reactflow/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 895157e1..37379aac 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -17,7 +17,7 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": false, + "sideEffects": ["*.css"], "license": "MIT", "repository": { "type": "git", From 4aa742f6f2696a88aa8bba7ed5e0ba743544c946 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 8 Oct 2022 17:11:40 +0200 Subject: [PATCH 24/43] chore(examples): add cancel connection --- examples/vite-app/src/App/index.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index fabbd853..0ec2a021 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -54,6 +54,11 @@ const routes: IRoute[] = [ path: '/backgrounds', component: Backgrounds, }, + { + name: 'Cancel Connection', + path: '/cancel-connection', + component: CancelConnection, + }, { name: 'Controlled/Uncontrolled', path: '/controlled-uncontrolled', @@ -214,21 +219,17 @@ const routes: IRoute[] = [ path: '/use-key-press', component: UseKeyPress, }, - { - path: '/cancel-connection', - component: CancelConnection - } ]; const Header = () => { const location = useLocation(); const navigate = useNavigate(); const [currentPath, setCurrentPath] = useState(location.pathname); - + useEffect(() => { const name = routes.find((route) => route.path === currentPath)?.name; document.title = `React Flow Examples${name ? ' - ' + name : ''}`; - navigate(currentPath) + navigate(currentPath); }, [currentPath]); return ( @@ -236,10 +237,7 @@ const Header = () => { React Flow Dev - setCurrentPath(event.target.value)}> {routes.map((route) => (
); From 9d335028cfe4aaa4167fea64b24e668c576623c2 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 10 Oct 2022 11:30:53 +0200 Subject: [PATCH 30/43] chore(changesets): add --- .changeset/fifty-guests-search.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fifty-guests-search.md diff --git a/.changeset/fifty-guests-search.md b/.changeset/fifty-guests-search.md new file mode 100644 index 00000000..4f7580c1 --- /dev/null +++ b/.changeset/fifty-guests-search.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fix aria descriptions From c44413d816604ae2d6ad81ed227c3dfde1a7bd8a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 10 Oct 2022 11:40:25 +0200 Subject: [PATCH 31/43] chore(panel): dont break user selection above panel --- packages/core/src/components/Panel/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/Panel/index.tsx b/packages/core/src/components/Panel/index.tsx index 2f68f134..756caca6 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/core/src/components/Panel/index.tsx @@ -1,18 +1,26 @@ import { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; -import { PanelPosition } from '../../types'; +import { PanelPosition, ReactFlowState } from '../../types'; +import { useStore } from '../../hooks/useStore'; export type PanelProps = HTMLAttributes & { position: PanelPosition; children: ReactNode; }; -function Panel({ position, children, className, ...rest }: PanelProps) { +const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all'); + +function Panel({ position, children, className, style, ...rest }: PanelProps) { + const pointerEvents = useStore(selector); const positionClasses = `${position}`.split('-'); return ( -
+
{children}
); From f68b66172a537ebd8aae0188ed4b701074d41933 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 10 Oct 2022 11:46:44 +0200 Subject: [PATCH 32/43] chore(changesets): add --- .changeset/odd-cups-sin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/odd-cups-sin.md diff --git a/.changeset/odd-cups-sin.md b/.changeset/odd-cups-sin.md new file mode 100644 index 00000000..7b0b9a83 --- /dev/null +++ b/.changeset/odd-cups-sin.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +dont break user selection over panel From 1dc875ed2bee1bb6142f64c78bea7cf7bf489fd7 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 10 Oct 2022 11:51:54 +0200 Subject: [PATCH 33/43] chore(deps): update --- package.json | 4 +- pnpm-lock.yaml | 324 +++++++++++++++++++++++++++---------------------- 2 files changed, 182 insertions(+), 146 deletions(-) diff --git a/package.json b/package.json index f3e84001..e5463ced 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "clean": "pnpm -r --parallel exec rimraf dist .turbo" }, "devDependencies": { - "@changesets/changelog-github": "^0.4.6", - "@changesets/cli": "^2.24.3", + "@changesets/changelog-github": "^0.4.7", + "@changesets/cli": "^2.25.0", "@preconstruct/cli": "^2.2.1", "@typescript-eslint/eslint-plugin": "latest", "@typescript-eslint/parser": "latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26177a37..78749f21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,8 +4,8 @@ importers: .: specifiers: - '@changesets/changelog-github': ^0.4.6 - '@changesets/cli': ^2.24.3 + '@changesets/changelog-github': ^0.4.7 + '@changesets/cli': ^2.25.0 '@preconstruct/cli': ^2.2.1 '@typescript-eslint/eslint-plugin': latest '@typescript-eslint/parser': latest @@ -29,18 +29,18 @@ importers: turbo: ^1.5.3 typescript: ^4.8.3 devDependencies: - '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.6 - '@changesets/cli': registry.npmjs.org/@changesets/cli/2.24.4 + '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 + '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 - '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4 + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16 concurrently: registry.npmjs.org/concurrently/7.4.0 cypress: registry.npmjs.org/cypress/10.7.0 eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu - eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1 + eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1 postcss: registry.npmjs.org/postcss/8.4.16 postcss-cli: registry.npmjs.org/postcss-cli/10.0.0_postcss@8.4.16 postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.16 @@ -626,16 +626,16 @@ packages: to-fast-properties: registry.npmjs.org/to-fast-properties/2.0.0 dev: true - registry.npmjs.org/@changesets/apply-release-plan/6.1.0: - resolution: {integrity: sha512-fMNBUAEc013qaA4KUVjdwgYMmKrf5Mlgf6o+f97MJVNzVnikwpWY47Lc3YR1jhC874Fonn5MkjkWK9DAZsdQ5g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.0.tgz} + registry.npmjs.org/@changesets/apply-release-plan/6.1.1: + resolution: {integrity: sha512-LaQiP/Wf0zMVR0HNrLQAjz3rsNsr0d/RlnP6Ef4oi8VafOwnY1EoWdK4kssuUJGgNgDyHpomS50dm8CU3D7k7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.1.tgz} name: '@changesets/apply-release-plan' - version: 6.1.0 + version: 6.1.1 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 '@changesets/get-version-range-type': registry.npmjs.org/@changesets/get-version-range-type/0.3.2 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 detect-indent: registry.npmjs.org/detect-indent/6.1.0 fs-extra: registry.npmjs.org/fs-extra/7.0.1 @@ -646,59 +646,59 @@ packages: semver: registry.npmjs.org/semver/5.7.1 dev: true - registry.npmjs.org/@changesets/assemble-release-plan/5.2.1: - resolution: {integrity: sha512-d6ckasOWlKF9Mzs82jhl6TKSCgVvfLoUK1ERySrTg2TQJdrVUteZue6uEIYUTA7SgMu67UOSwol6R9yj1nTdjw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.1.tgz} + registry.npmjs.org/@changesets/assemble-release-plan/5.2.2: + resolution: {integrity: sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz} name: '@changesets/assemble-release-plan' - version: 5.2.1 + version: 5.2.2 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 semver: registry.npmjs.org/semver/5.7.1 dev: true - registry.npmjs.org/@changesets/changelog-git/0.1.12: - resolution: {integrity: sha512-Xv2CPjTBmwjl8l4ZyQ3xrsXZMq8WafPUpEonDpTmcb24XY8keVzt7ZSCJuDz035EiqrjmDKDhODoQ6XiHudlig==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.12.tgz} + registry.npmjs.org/@changesets/changelog-git/0.1.13: + resolution: {integrity: sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.1.13.tgz} name: '@changesets/changelog-git' - version: 0.1.12 + version: 0.1.13 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 dev: true - registry.npmjs.org/@changesets/changelog-github/0.4.6: - resolution: {integrity: sha512-ahR/+o3OPodzfG9kucEMU/tEtBgwy6QoJiWi1sDBPme8n3WjT6pBlbhqNYpWAJKilomwfjBGY0MTUTs6r9d1RQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.6.tgz} + registry.npmjs.org/@changesets/changelog-github/0.4.7: + resolution: {integrity: sha512-UUG5sKwShs5ha1GFnayUpZNcDGWoY7F5XxhOEHS62sDPOtoHQZsG3j1nC5RxZ3M1URHA321cwVZHeXgu99Y3ew==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.7.tgz} name: '@changesets/changelog-github' - version: 0.4.6 + version: 0.4.7 dependencies: '@changesets/get-github-info': registry.npmjs.org/@changesets/get-github-info/0.5.1 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 dotenv: registry.npmjs.org/dotenv/8.6.0 transitivePeerDependencies: - encoding dev: true - registry.npmjs.org/@changesets/cli/2.24.4: - resolution: {integrity: sha512-87JSwMv38zS3QW3062jXZYLsCNRtA08wa7vt3VnMmkGLfUMn2TTSfD+eSGVnKPJ/ycDCvAcCDnrv/B+gSX5KVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.24.4.tgz} + registry.npmjs.org/@changesets/cli/2.25.0: + resolution: {integrity: sha512-Svu5KD2enurVHGEEzCRlaojrHjVYgF9srmMP9VQSy9c1TspX6C9lDPpulsSNIjYY9BuU/oiWpjBgR7RI9eQiAA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/cli/-/cli-2.25.0.tgz} name: '@changesets/cli' - version: 2.24.4 + version: 2.25.0 hasBin: true dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.0 - '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1 - '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.12 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 + '@changesets/apply-release-plan': registry.npmjs.org/@changesets/apply-release-plan/6.1.1 + '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2 + '@changesets/changelog-git': registry.npmjs.org/@changesets/changelog-git/0.1.13 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 - '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.14 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 + '@changesets/get-release-plan': registry.npmjs.org/@changesets/get-release-plan/3.0.15 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12 - '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 - '@changesets/write': registry.npmjs.org/@changesets/write/0.2.0 + '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13 + '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 + '@changesets/write': registry.npmjs.org/@changesets/write/0.2.1 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 '@types/is-ci': registry.npmjs.org/@types/is-ci/3.0.0 '@types/semver': registry.npmjs.org/@types/semver/6.2.3 @@ -720,15 +720,15 @@ packages: tty-table: registry.npmjs.org/tty-table/4.1.6 dev: true - registry.npmjs.org/@changesets/config/2.1.1: - resolution: {integrity: sha512-nSRINMqHpdtBpNVT9Eh9HtmLhOwOTAeSbaqKM5pRmGfsvyaROTBXV84ujF9UsWNlV71YxFbxTbeZnwXSGQlyTw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.1.1.tgz} + registry.npmjs.org/@changesets/config/2.2.0: + resolution: {integrity: sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/config/-/config-2.2.0.tgz} name: '@changesets/config' - version: 2.1.1 + version: 2.2.0 dependencies: '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.3 + '@changesets/get-dependents-graph': registry.npmjs.org/@changesets/get-dependents-graph/1.3.4 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 fs-extra: registry.npmjs.org/fs-extra/7.0.1 micromatch: registry.npmjs.org/micromatch/4.0.5 @@ -742,12 +742,12 @@ packages: extendable-error: registry.npmjs.org/extendable-error/0.1.7 dev: true - registry.npmjs.org/@changesets/get-dependents-graph/1.3.3: - resolution: {integrity: sha512-h4fHEIt6X+zbxdcznt1e8QD7xgsXRAXd2qzLlyxoRDFSa6SxJrDAUyh7ZUNdhjBU4Byvp4+6acVWVgzmTy4UNQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.3.tgz} + registry.npmjs.org/@changesets/get-dependents-graph/1.3.4: + resolution: {integrity: sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz} name: '@changesets/get-dependents-graph' - version: 1.3.3 + version: 1.3.4 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 chalk: registry.npmjs.org/chalk/2.4.2 fs-extra: registry.npmjs.org/fs-extra/7.0.1 @@ -765,17 +765,17 @@ packages: - encoding dev: true - registry.npmjs.org/@changesets/get-release-plan/3.0.14: - resolution: {integrity: sha512-xzSfeyIOvUnbqMuQXVKTYUizreWQfICwoQpvEHoePVbERLocc1tPo5lzR7dmVCFcaA/DcnbP6mxyioeq+JuzSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.14.tgz} + registry.npmjs.org/@changesets/get-release-plan/3.0.15: + resolution: {integrity: sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz} name: '@changesets/get-release-plan' - version: 3.0.14 + version: 3.0.15 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.1 - '@changesets/config': registry.npmjs.org/@changesets/config/2.1.1 - '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.12 - '@changesets/read': registry.npmjs.org/@changesets/read/0.5.7 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/assemble-release-plan': registry.npmjs.org/@changesets/assemble-release-plan/5.2.2 + '@changesets/config': registry.npmjs.org/@changesets/config/2.2.0 + '@changesets/pre': registry.npmjs.org/@changesets/pre/1.0.13 + '@changesets/read': registry.npmjs.org/@changesets/read/0.5.8 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 dev: true @@ -785,14 +785,14 @@ packages: version: 0.3.2 dev: true - registry.npmjs.org/@changesets/git/1.4.1: - resolution: {integrity: sha512-GWwRXEqBsQ3nEYcyvY/u2xUK86EKAevSoKV/IhELoZ13caZ1A1TSak/71vyKILtzuLnFPk5mepP5HjBxr7lZ9Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.4.1.tgz} + registry.npmjs.org/@changesets/git/1.5.0: + resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/git/-/git-1.5.0.tgz} name: '@changesets/git' - version: 1.4.1 + version: 1.5.0 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 is-subdir: registry.npmjs.org/is-subdir/1.2.0 spawndamnit: registry.npmjs.org/spawndamnit/2.0.0 @@ -806,37 +806,37 @@ packages: chalk: registry.npmjs.org/chalk/2.4.2 dev: true - registry.npmjs.org/@changesets/parse/0.3.14: - resolution: {integrity: sha512-SWnNVyC9vz61ueTbuxvA6b4HXcSx2iaWr2VEa37lPg1Vw+cEyQp7lOB219P7uow1xFfdtIEEsxbzXnqLAAaY8w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.14.tgz} + registry.npmjs.org/@changesets/parse/0.3.15: + resolution: {integrity: sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/parse/-/parse-0.3.15.tgz} name: '@changesets/parse' - version: 0.3.14 + version: 0.3.15 dependencies: - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 js-yaml: registry.npmjs.org/js-yaml/3.14.1 dev: true - registry.npmjs.org/@changesets/pre/1.0.12: - resolution: {integrity: sha512-RFzWYBZx56MtgMesXjxx7ymyI829/rcIw/41hvz3VJPnY8mDscN7RJyYu7Xm7vts2Fcd+SRcO0T/Ws3I1/6J7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.12.tgz} + registry.npmjs.org/@changesets/pre/1.0.13: + resolution: {integrity: sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/pre/-/pre-1.0.13.tgz} name: '@changesets/pre' - version: 1.0.12 + version: 1.0.13 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@changesets/errors': registry.npmjs.org/@changesets/errors/0.1.4 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 '@manypkg/get-packages': registry.npmjs.org/@manypkg/get-packages/1.1.3 fs-extra: registry.npmjs.org/fs-extra/7.0.1 dev: true - registry.npmjs.org/@changesets/read/0.5.7: - resolution: {integrity: sha512-Iteg0ccTPpkJ+qFzY97k7qqdVE5Kz30TqPo9GibpBk2g8tcLFUqf+Qd0iXPLcyhUZpPL1U6Hia1gINHNKIKx4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.7.tgz} + registry.npmjs.org/@changesets/read/0.5.8: + resolution: {integrity: sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/read/-/read-0.5.8.tgz} name: '@changesets/read' - version: 0.5.7 + version: 0.5.8 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/git': registry.npmjs.org/@changesets/git/1.4.1 + '@changesets/git': registry.npmjs.org/@changesets/git/1.5.0 '@changesets/logger': registry.npmjs.org/@changesets/logger/0.0.5 - '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.14 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/parse': registry.npmjs.org/@changesets/parse/0.3.15 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 chalk: registry.npmjs.org/chalk/2.4.2 fs-extra: registry.npmjs.org/fs-extra/7.0.1 p-filter: registry.npmjs.org/p-filter/2.1.0 @@ -848,19 +848,19 @@ packages: version: 4.1.0 dev: true - registry.npmjs.org/@changesets/types/5.1.0: - resolution: {integrity: sha512-uUByGATZCdaPkaO9JkBsgGDjEvHyY2Sb0e/J23+cwxBi5h0fxpLF/HObggO/Fw8T2nxK6zDfJbPsdQt5RwYFJA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.1.0.tgz} + registry.npmjs.org/@changesets/types/5.2.0: + resolution: {integrity: sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/types/-/types-5.2.0.tgz} name: '@changesets/types' - version: 5.1.0 + version: 5.2.0 dev: true - registry.npmjs.org/@changesets/write/0.2.0: - resolution: {integrity: sha512-iKHqGYXZvneRzRfvEBpPqKfpGELOEOEP63MKdM/SdSRon40rsUijkTmsGCHT1ueLi3iJPZPmYuZJvjjKrMzumA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.0.tgz} + registry.npmjs.org/@changesets/write/0.2.1: + resolution: {integrity: sha512-KUd49nt2fnYdGixIqTi1yVE1nAoZYUMdtB3jBfp77IMqjZ65hrmZE5HdccDlTeClZN0420ffpnfET3zzeY8pdw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@changesets/write/-/write-0.2.1.tgz} name: '@changesets/write' - version: 0.2.0 + version: 0.2.1 dependencies: '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 - '@changesets/types': registry.npmjs.org/@changesets/types/5.1.0 + '@changesets/types': registry.npmjs.org/@changesets/types/5.2.0 fs-extra: registry.npmjs.org/fs-extra/7.0.1 human-id: registry.npmjs.org/human-id/1.0.2 prettier: registry.npmjs.org/prettier/2.7.1 @@ -1704,11 +1704,11 @@ packages: dev: true optional: true - registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry: - resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.38.0 + registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4: + resolution: {integrity: sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0 name: '@typescript-eslint/eslint-plugin' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -1718,26 +1718,26 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 ignore: registry.npmjs.org/ignore/5.2.0 regexpp: registry.npmjs.org/regexpp/3.2.0 - semver: registry.npmjs.org/semver/7.3.7 + semver: registry.npmjs.org/semver/7.3.8 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 typescript: registry.npmjs.org/typescript/4.8.3 transitivePeerDependencies: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/parser/5.38.0 + registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/parser/5.39.0 name: '@typescript-eslint/parser' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -1746,9 +1746,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 typescript: registry.npmjs.org/typescript/4.8.3 @@ -1756,21 +1756,21 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0: - resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0: + resolution: {integrity: sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz} name: '@typescript-eslint/scope-manager' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 dev: true - registry.npmjs.org/@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/type-utils/5.38.0 + registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/type-utils/5.39.0 name: '@typescript-eslint/type-utils' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -1779,8 +1779,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 @@ -1789,18 +1789,18 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/types/5.38.0: - resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/types/5.39.0: + resolution: {integrity: sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz} name: '@typescript-eslint/types' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3: - resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0 + registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3: + resolution: {integrity: sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0 name: '@typescript-eslint/typescript-estree' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -1808,31 +1808,31 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 debug: registry.npmjs.org/debug/4.3.4 globby: registry.npmjs.org/globby/11.1.0 is-glob: registry.npmjs.org/is-glob/4.0.3 - semver: registry.npmjs.org/semver/7.3.7 + semver: registry.npmjs.org/semver/7.3.8 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 typescript: registry.npmjs.org/typescript/4.8.3 transitivePeerDependencies: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha: - resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.38.0.tgz} - id: registry.npmjs.org/@typescript-eslint/utils/5.38.0 + registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha: + resolution: {integrity: sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.39.0.tgz} + id: registry.npmjs.org/@typescript-eslint/utils/5.39.0 name: '@typescript-eslint/utils' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.38.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 eslint: registry.npmjs.org/eslint/8.23.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1 @@ -1841,13 +1841,13 @@ packages: - typescript dev: true - registry.npmjs.org/@typescript-eslint/visitor-keys/5.38.0: - resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz} + registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0: + resolution: {integrity: sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz} name: '@typescript-eslint/visitor-keys' - version: 5.38.0 + version: 5.39.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.38.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 dev: true @@ -1991,7 +1991,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3 is-string: registry.npmjs.org/is-string/1.0.7 dev: true @@ -2011,7 +2011,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0 dev: true @@ -2023,7 +2023,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 es-shim-unscopables: registry.npmjs.org/es-shim-unscopables/1.0.0 dev: true @@ -3003,10 +3003,10 @@ packages: is-arrayish: registry.npmjs.org/is-arrayish/0.2.1 dev: true - registry.npmjs.org/es-abstract/1.20.3: - resolution: {integrity: sha512-AyrnaKVpMzljIdwjzrj+LxGmj8ik2LckwXacHqrJJ/jxz6dDDBcZ7I7nlHM0FvEW8MfbWJwOd+yT2XzYW49Frw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.3.tgz} + registry.npmjs.org/es-abstract/1.20.4: + resolution: {integrity: sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz} name: es-abstract - version: 1.20.3 + version: 1.20.4 engines: {node: '>= 0.4'} dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 @@ -3396,6 +3396,32 @@ packages: string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7 dev: true + registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1: + resolution: {integrity: sha512-vrVJwusIw4L99lyfXjtCw8HWdloajsiYslMavogrBe2Gl8gr95TJsJnOMRasN4b4N24I3XuJf6aAV6MhyGmjqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.9.tgz} + id: registry.npmjs.org/eslint-plugin-react/7.31.9 + name: eslint-plugin-react + version: 7.31.9 + engines: {node: '>=4'} + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + dependencies: + array-includes: registry.npmjs.org/array-includes/3.1.5 + array.prototype.flatmap: registry.npmjs.org/array.prototype.flatmap/1.3.0 + doctrine: registry.npmjs.org/doctrine/2.1.0 + eslint: registry.npmjs.org/eslint/8.23.1 + estraverse: registry.npmjs.org/estraverse/5.3.0 + jsx-ast-utils: registry.npmjs.org/jsx-ast-utils/3.3.3 + minimatch: registry.npmjs.org/minimatch/3.1.2 + object.entries: registry.npmjs.org/object.entries/1.1.5 + object.fromentries: registry.npmjs.org/object.fromentries/2.0.5 + object.hasown: registry.npmjs.org/object.hasown/1.1.1 + object.values: registry.npmjs.org/object.values/1.1.5 + prop-types: registry.npmjs.org/prop-types/15.8.1 + resolve: registry.npmjs.org/resolve/2.0.0-next.4 + semver: registry.npmjs.org/semver/6.3.0 + string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7 + dev: true + registry.npmjs.org/eslint-plugin-turbo/0.0.4_eslint@8.23.1: resolution: {integrity: sha512-dfmYE/iPvoJInQq+5E/0mj140y/rYwKtzZkn3uVK8+nvwC5zmWKQ6ehMWrL4bYBkGzSgpOndZM+jOXhPQ2m8Cg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.4.tgz} id: registry.npmjs.org/eslint-plugin-turbo/0.0.4 @@ -3945,7 +3971,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 functions-have-names: registry.npmjs.org/functions-have-names/1.2.3 dev: true @@ -5275,7 +5301,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.fromentries/2.0.5: @@ -5286,7 +5312,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.hasown/1.1.1: @@ -5295,7 +5321,7 @@ packages: version: 1.1.1 dependencies: define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/object.values/1.1.5: @@ -5306,7 +5332,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/once/1.4.0: @@ -6197,6 +6223,16 @@ packages: lru-cache: registry.npmjs.org/lru-cache/6.0.0 dev: true + registry.npmjs.org/semver/7.3.8: + resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/semver/-/semver-7.3.8.tgz} + name: semver + version: 7.3.8 + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: registry.npmjs.org/lru-cache/6.0.0 + dev: true + registry.npmjs.org/serialize-javascript/4.0.0: resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz} name: serialize-javascript @@ -6474,7 +6510,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 get-intrinsic: registry.npmjs.org/get-intrinsic/1.1.3 has-symbols: registry.npmjs.org/has-symbols/1.0.3 internal-slot: registry.npmjs.org/internal-slot/1.0.3 @@ -6489,7 +6525,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/string.prototype.trimstart/1.0.5: @@ -6499,7 +6535,7 @@ packages: dependencies: call-bind: registry.npmjs.org/call-bind/1.0.2 define-properties: registry.npmjs.org/define-properties/1.1.4 - es-abstract: registry.npmjs.org/es-abstract/1.20.3 + es-abstract: registry.npmjs.org/es-abstract/1.20.4 dev: true registry.npmjs.org/strip-ansi/6.0.1: From cc33fc89dd50cc230db078a625af55bb352bad6a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 10 Oct 2022 12:57:17 +0200 Subject: [PATCH 34/43] chore(packages): bump versions --- .changeset/fifty-guests-search.md | 5 ----- .changeset/odd-cups-sin.md | 5 ----- .changeset/orange-pugs-wonder.md | 9 --------- .changeset/smooth-rabbits-own.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 | 9 +++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 7 +++++++ packages/minimap/package.json | 2 +- packages/reactflow/CHANGELOG.md | 15 +++++++++++++++ packages/reactflow/package.json | 6 ++++-- 14 files changed, 53 insertions(+), 30 deletions(-) delete mode 100644 .changeset/fifty-guests-search.md delete mode 100644 .changeset/odd-cups-sin.md delete mode 100644 .changeset/orange-pugs-wonder.md delete mode 100644 .changeset/smooth-rabbits-own.md diff --git a/.changeset/fifty-guests-search.md b/.changeset/fifty-guests-search.md deleted file mode 100644 index 4f7580c1..00000000 --- a/.changeset/fifty-guests-search.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -fix aria descriptions diff --git a/.changeset/odd-cups-sin.md b/.changeset/odd-cups-sin.md deleted file mode 100644 index 7b0b9a83..00000000 --- a/.changeset/odd-cups-sin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -dont break user selection over panel diff --git a/.changeset/orange-pugs-wonder.md b/.changeset/orange-pugs-wonder.md deleted file mode 100644 index 57168afd..00000000 --- a/.changeset/orange-pugs-wonder.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'@reactflow/background': patch -'@reactflow/controls': patch -'@reactflow/core': patch -'@reactflow/minimap': patch -'reactflow': patch ---- - -add \*.css to side effects diff --git a/.changeset/smooth-rabbits-own.md b/.changeset/smooth-rabbits-own.md deleted file mode 100644 index 4e85067a..00000000 --- a/.changeset/smooth-rabbits-own.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -repair useOnSelectionChange hook diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index b19289e6..6c17862e 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/background +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + ## 11.0.1 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 74525d08..b29b68f0 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.1", + "version": "11.0.2", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 646ec99c..3c9cadfe 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + ## 11.0.1 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index a9a50868..41ba2490 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.1", + "version": "11.0.2", "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 e862ed66..bab69527 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/core +## 11.1.1 + +### Patch Changes + +- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel +- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true +- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484 +- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects + ## 11.1.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index fff315e7..e6550696 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.1.0", + "version": "11.1.1", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index eb44ff49..06d473cf 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/minimap +## 11.0.2 + +### Patch Changes + +- Updated dependencies: + - @reactflow/core@11.1.1 + ## 11.0.1 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index a62da8da..7b1a2f39 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.1", + "version": "11.0.2", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 3fa8bed1..375db7f4 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,20 @@ # reactflow +## 11.1.1 + +### Patch Changes + +- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel +- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true +- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484 +- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects + +- Updated dependencies: + - @reactflow/background@11.0.2 + - @reactflow/core@11.1.1 + - @reactflow/controls@11.0.2 + - @reactflow/minimap@11.0.2 + ## 11.1.0 ### Minor Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 37379aac..99e4e07a 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.1.0", + "version": "11.1.1", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", @@ -17,7 +17,9 @@ "main": "dist/umd/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", - "sideEffects": ["*.css"], + "sideEffects": [ + "*.css" + ], "license": "MIT", "repository": { "type": "git", From a6d34705c4dc5c92af508b26869682aec89f161d Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Tue, 11 Oct 2022 11:44:27 +0200 Subject: [PATCH 35/43] docs(readme): update --- packages/reactflow/README.md | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/reactflow/README.md b/packages/reactflow/README.md index ed58927b..c41f2e7e 100644 --- a/packages/reactflow/README.md +++ b/packages/reactflow/README.md @@ -24,11 +24,13 @@ A highly customizable React component for building interactive graphs and node-b - **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) - **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) -## Commercial Usage / Attribution +## Commercial Usage -React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +**Are you using React Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟 -You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq). +**Are you using React Flow at your organization and making money from it?** Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the [React Flow Pro website](https://pro.reactflow.dev) or through [Github Sponsors](https://github.com/sponsors/wbkd). + +You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/info). ## Installation @@ -43,9 +45,31 @@ npm install reactflow This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the [website](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). ```jsx -import ReactFlow, { MiniMap, Controls } from 'reactflow'; +import { useCallback } from 'react'; +import ReactFlow, { + MiniMap, + Controls, + Background, + useNodesState, + useEdgesState, + addEdge, +} from 'reactflow'; + +import 'reactflow/dist/style.css'; + +const initialNodes = [ + { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, + { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, +]; + +const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; + +function Flow() { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); -function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { return ( + ); } From 7d93d4e46be3412bf54358ca6a500feb9866a410 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 19 Oct 2022 16:43:49 +0200 Subject: [PATCH 36/43] chore(rf-props): pass id to wrapper closes #2510 --- packages/core/src/container/ReactFlow/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index f540cdf5..1628d677 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -156,13 +156,14 @@ const ReactFlow = forwardRef( elevateEdgesOnSelect = false, disableKeyboardA11y = false, style, - id = '1', + id, ...rest }, ref ) => { const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped; const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; + const rfId = id || '1'; return (
( ref={ref} className={cc(['react-flow', className])} data-testid="rf__wrapper" + id={id} > ( noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} elevateEdgesOnSelect={elevateEdgesOnSelect} - rfId={id} + rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} nodeOrigin={nodeOrigin} nodeExtent={nodeExtent} @@ -273,12 +275,12 @@ const ReactFlow = forwardRef( onSelectionDragStop={onSelectionDragStop} noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} - id={id} + id={rfId} /> {children} - +
); From 0feb847b767fb3f4aab2bfa343758e9e568a7f23 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 19 Oct 2022 16:46:36 +0200 Subject: [PATCH 37/43] chore(types): pro options acc optional closes #2492 --- 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 9d3437c0..5587fec7 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -242,6 +242,6 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void; export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; export type ProOptions = { - account: string; + account?: string; hideAttribution: boolean; }; From 74cacd29cbc2fb175c1f290b2c2a4a60d090b546 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 19 Oct 2022 16:58:36 +0200 Subject: [PATCH 38/43] chore(rfId): cleanup id handling --- packages/background/src/Background.tsx | 8 ++++---- packages/core/src/components/StoreUpdater/index.tsx | 7 +++---- packages/core/src/container/ReactFlow/index.tsx | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx index 7f300565..22283001 100644 --- a/packages/background/src/Background.tsx +++ b/packages/background/src/Background.tsx @@ -18,7 +18,7 @@ const defaultSize = { [BackgroundVariant.Cross]: 6, }; -const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId }); +const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` }); function Background({ variant = BackgroundVariant.Dots, @@ -32,7 +32,7 @@ function Background({ className, }: BackgroundProps) { const ref = useRef(null); - const { transform, rfId } = useStore(selector, shallow); + const { transform, patternId } = useStore(selector, shallow); const patternColor = color || defaultColor[variant]; const patternSize = size || defaultSize[variant]; const isDots = variant === BackgroundVariant.Dots; @@ -61,7 +61,7 @@ function Background({ ref={ref} > )} - + ); } diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index aae2e2fc..2b39cb8a 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -44,8 +44,7 @@ type StoreUpdaterProps = Pick< | 'onSelectionDragStop' | 'noPanClassName' | 'nodeOrigin' - | 'id' ->; +> & { rfId: string }; const selector = (s: ReactFlowState) => ({ setNodes: s.setNodes, @@ -117,7 +116,7 @@ const StoreUpdater = ({ onSelectionDragStop, noPanClassName, nodeOrigin, - id, + rfId, }: StoreUpdaterProps) => { const { setNodes, @@ -169,7 +168,7 @@ const StoreUpdater = ({ useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState); useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState); useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState); - useDirectStoreUpdater('rfId', id, store.setState); + useDirectStoreUpdater('rfId', rfId, store.setState); useStoreUpdater(nodes, setNodes); useStoreUpdater(edges, setEdges); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 1628d677..0d5af4ba 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -275,7 +275,7 @@ const ReactFlow = forwardRef( onSelectionDragStop={onSelectionDragStop} noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} - id={rfId} + rfId={rfId} /> {children} From 7b1dc1b18c476451abb73b3f84a3b3308e2eb596 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 21 Oct 2022 11:35:56 +0200 Subject: [PATCH 39/43] chore(types): cleanup --- packages/background/src/types.ts | 4 +- packages/controls/src/ControlButton.tsx | 16 +- packages/controls/src/Controls.tsx | 8 +- packages/controls/src/types.ts | 8 +- .../src/components/A11yDescriptions/index.tsx | 2 +- .../core/src/components/Attribution/index.tsx | 2 +- .../src/components/ConnectionLine/index.tsx | 3 +- .../core/src/components/Edges/BaseEdge.tsx | 2 +- .../core/src/components/Edges/BezierEdge.tsx | 3 +- .../core/src/components/Edges/EdgeAnchor.tsx | 2 +- .../core/src/components/Edges/EdgeText.tsx | 3 +- .../src/components/Edges/SimpleBezierEdge.tsx | 4 +- .../src/components/Edges/SmoothStepEdge.tsx | 3 +- .../core/src/components/Edges/StepEdge.tsx | 2 +- .../src/components/Edges/StraightEdge.tsx | 2 +- packages/core/src/components/Edges/utils.ts | 2 +- .../core/src/components/Edges/wrapEdge.tsx | 5 +- .../core/src/components/Handle/handler.ts | 5 +- packages/core/src/components/Handle/index.tsx | 3 +- .../core/src/components/Nodes/DefaultNode.tsx | 3 +- .../core/src/components/Nodes/InputNode.tsx | 3 +- .../core/src/components/Nodes/OutputNode.tsx | 3 +- packages/core/src/components/Nodes/utils.ts | 3 +- .../core/src/components/Nodes/wrapNode.tsx | 5 +- .../src/components/NodesSelection/index.tsx | 5 +- packages/core/src/components/Panel/index.tsx | 4 +- .../components/ReactFlowProvider/index.tsx | 5 +- .../components/SelectionListener/index.tsx | 2 +- .../src/components/StoreUpdater/index.tsx | 2 +- .../src/components/UserSelection/index.tsx | 2 +- .../EdgeRenderer/MarkerDefinitions.tsx | 12 +- .../container/EdgeRenderer/MarkerSymbols.tsx | 4 +- .../core/src/container/EdgeRenderer/index.tsx | 58 ++++---- .../core/src/container/EdgeRenderer/utils.ts | 9 +- .../core/src/container/FlowRenderer/Pane.tsx | 2 +- .../core/src/container/FlowRenderer/index.tsx | 6 +- .../core/src/container/GraphView/index.tsx | 60 ++++---- .../core/src/container/NodeRenderer/index.tsx | 6 +- .../core/src/container/NodeRenderer/utils.ts | 4 +- .../core/src/container/ReactFlow/Wrapper.tsx | 2 +- .../core/src/container/ReactFlow/index.tsx | 24 ++- .../core/src/container/ReactFlow/utils.ts | 2 +- .../core/src/container/Viewport/index.tsx | 4 +- .../core/src/container/ZoomPane/index.tsx | 8 +- packages/core/src/hooks/useDrag/index.ts | 5 +- packages/core/src/hooks/useDrag/utils.ts | 4 +- packages/core/src/hooks/useEdges.ts | 2 +- .../core/src/hooks/useGlobalKeyHandler.ts | 2 +- packages/core/src/hooks/useKeyPress.ts | 2 +- packages/core/src/hooks/useNodes.ts | 2 +- packages/core/src/hooks/useNodesEdgesState.ts | 5 +- .../core/src/hooks/useNodesInitialized.ts | 2 +- packages/core/src/hooks/useOnInitHandler.ts | 2 +- packages/core/src/hooks/useReactFlow.ts | 2 +- packages/core/src/hooks/useResizeHandler.ts | 3 +- packages/core/src/hooks/useStore.ts | 5 +- .../core/src/hooks/useUpdateNodeInternals.ts | 2 +- .../core/src/hooks/useUpdateNodePositions.ts | 3 +- packages/core/src/hooks/useViewport.ts | 2 +- packages/core/src/hooks/useViewportHelper.ts | 2 +- packages/core/src/hooks/useVisibleEdges.ts | 2 +- packages/core/src/hooks/useVisibleNodes.ts | 3 +- packages/core/src/store/index.ts | 11 +- packages/core/src/store/initialState.ts | 3 +- packages/core/src/store/utils.ts | 4 +- packages/core/src/styles/index.ts | 2 +- packages/core/src/types/changes.ts | 6 +- packages/core/src/types/component-props.ts | 43 +++--- packages/core/src/types/edges.ts | 139 ++++++++---------- packages/core/src/types/general.ts | 20 +-- packages/core/src/types/handles.ts | 3 +- packages/core/src/types/instance.ts | 4 +- packages/core/src/types/nodes.ts | 101 ++++++------- packages/core/src/utils/changes.ts | 2 +- packages/core/src/utils/graph.ts | 2 +- packages/core/src/utils/index.ts | 2 +- packages/minimap/src/MiniMap.tsx | 5 +- packages/minimap/src/MiniMapNode.tsx | 3 +- packages/minimap/src/types.ts | 8 +- 79 files changed, 353 insertions(+), 372 deletions(-) diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts index f3b24898..6f9a7155 100644 --- a/packages/background/src/types.ts +++ b/packages/background/src/types.ts @@ -6,7 +6,7 @@ export enum BackgroundVariant { Cross = 'cross', } -export interface BackgroundProps { +export type BackgroundProps = { color?: string; className?: string; gap?: number | [number, number]; @@ -14,4 +14,4 @@ export interface BackgroundProps { lineWidth?: number; variant?: BackgroundVariant; style?: CSSProperties; -} +}; diff --git a/packages/controls/src/ControlButton.tsx b/packages/controls/src/ControlButton.tsx index 3d4f6f91..9952fde0 100644 --- a/packages/controls/src/ControlButton.tsx +++ b/packages/controls/src/ControlButton.tsx @@ -1,18 +1,10 @@ -import { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; -import { ControlButtonProps } from './types'; +import type { ControlButtonProps } from './types'; -const ControlButton: FC> = ({ - children, - className, - ...rest -}) => ( - ); diff --git a/packages/controls/src/Controls.tsx b/packages/controls/src/Controls.tsx index 11c50df4..e2c96162 100644 --- a/packages/controls/src/Controls.tsx +++ b/packages/controls/src/Controls.tsx @@ -1,6 +1,8 @@ -import { memo, FC, useEffect, useState, PropsWithChildren } from 'react'; +import { memo, useEffect, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; -import { useStore, useStoreApi, useReactFlow, ReactFlowState, Panel } from '@reactflow/core'; +import { useStore, useStoreApi, useReactFlow, Panel } from '@reactflow/core'; +import type { ReactFlowState } from '@reactflow/core'; import PlusIcon from './Icons/Plus'; import MinusIcon from './Icons/Minus'; @@ -9,7 +11,7 @@ import LockIcon from './Icons/Lock'; import UnlockIcon from './Icons/Unlock'; import ControlButton from './ControlButton'; -import { ControlProps } from './types'; +import type { ControlProps } from './types'; const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts index 20cfa433..3cfcad29 100644 --- a/packages/controls/src/types.ts +++ b/packages/controls/src/types.ts @@ -1,7 +1,7 @@ -import { ButtonHTMLAttributes, HTMLAttributes } from 'react'; -import { FitViewOptions, PanelPosition } from '@reactflow/core'; +import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'; +import type { FitViewOptions, PanelPosition } from '@reactflow/core'; -export interface ControlProps extends HTMLAttributes { +export type ControlProps = HTMLAttributes & { showZoom?: boolean; showFitView?: boolean; showInteractive?: boolean; @@ -11,6 +11,6 @@ export interface ControlProps extends HTMLAttributes { onFitView?: () => void; onInteractiveChange?: (interactiveStatus: boolean) => void; position?: PanelPosition; -} +}; export type ControlButtonProps = ButtonHTMLAttributes; diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/core/src/components/A11yDescriptions/index.tsx index a7e4a9cc..ae9c3a0b 100644 --- a/packages/core/src/components/A11yDescriptions/index.tsx +++ b/packages/core/src/components/A11yDescriptions/index.tsx @@ -1,6 +1,6 @@ import { CSSProperties } from 'react'; import { useStore } from '../../hooks/useStore'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const style: CSSProperties = { display: 'none' }; const ariaLiveStyle: CSSProperties = { diff --git a/packages/core/src/components/Attribution/index.tsx b/packages/core/src/components/Attribution/index.tsx index 61b2c408..ad4ed22b 100644 --- a/packages/core/src/components/Attribution/index.tsx +++ b/packages/core/src/components/Attribution/index.tsx @@ -1,5 +1,5 @@ import Panel from '../Panel'; -import { PanelPosition, ProOptions } from '../../types'; +import type { PanelPosition, ProOptions } from '../../types'; type AttributionProps = { proOptions?: ProOptions; diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index a8a38b21..767d16f3 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -4,9 +4,10 @@ import shallow from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; -import { ConnectionLineType, ConnectionLineComponent, HandleType, Position, ReactFlowStore } from '../../types'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; import { internalsSymbol } from '../../utils'; +import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types'; +import { Position, ConnectionLineType } from '../../types'; type ConnectionLineProps = { connectionNodeId: string; diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index 67c74c33..65a9cf37 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -1,5 +1,5 @@ import EdgeText from './EdgeText'; -import { BaseEdgeProps } from '../../types'; +import type { BaseEdgeProps } from '../../types'; const BaseEdge = ({ path, diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index 11ad64b1..d7a02534 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -2,7 +2,8 @@ import { memo } from 'react'; import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; -import { BezierEdgeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { BezierEdgeProps } from '../../types'; export interface GetBezierPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/EdgeAnchor.tsx b/packages/core/src/components/Edges/EdgeAnchor.tsx index a88ed364..baf83cdd 100644 --- a/packages/core/src/components/Edges/EdgeAnchor.tsx +++ b/packages/core/src/components/Edges/EdgeAnchor.tsx @@ -1,4 +1,4 @@ -import { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; +import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react'; import cc from 'classcat'; import { Position } from '../../types'; diff --git a/packages/core/src/components/Edges/EdgeText.tsx b/packages/core/src/components/Edges/EdgeText.tsx index 78974281..10a17be5 100644 --- a/packages/core/src/components/Edges/EdgeText.tsx +++ b/packages/core/src/components/Edges/EdgeText.tsx @@ -1,4 +1,5 @@ -import { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react'; +import { memo, useRef, useState, useEffect } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import cc from 'classcat'; import { EdgeTextProps, Rect } from '../../types'; diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index 3082d9ce..e549be58 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -1,7 +1,9 @@ import { memo } from 'react'; -import { EdgeProps, Position } from '../../types'; + import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; +import { Position } from '../../types'; +import type { EdgeProps } from '../../types'; export interface GetSimpleBezierPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index 476cc0b0..e61f8e46 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -1,8 +1,9 @@ import { memo } from 'react'; -import { SmoothStepEdgeProps, Position, XYPosition } from '../../types'; import BaseEdge from './BaseEdge'; import { getEdgeCenter } from './utils'; +import { Position } from '../../types'; +import type { SmoothStepEdgeProps, XYPosition } from '../../types'; export interface GetSmoothStepPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/StepEdge.tsx b/packages/core/src/components/Edges/StepEdge.tsx index fb2527c0..df2646a7 100644 --- a/packages/core/src/components/Edges/StepEdge.tsx +++ b/packages/core/src/components/Edges/StepEdge.tsx @@ -1,7 +1,7 @@ import { memo, useMemo } from 'react'; -import { SmoothStepEdgeProps } from '../../types'; import SmoothStepEdge from './SmoothStepEdge'; +import type { SmoothStepEdgeProps } from '../../types'; const StepEdge = memo((props: SmoothStepEdgeProps) => ( { if (typeof markerEndId !== 'undefined' && markerEndId) { diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 35d7b133..4ac3b139 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -1,4 +1,5 @@ -import { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react'; +import { memo, useState, useMemo, useRef } from 'react'; +import type { ComponentType, KeyboardEvent } from 'react'; import cc from 'classcat'; import { useStoreApi } from '../../hooks/useStore'; @@ -7,8 +8,8 @@ import { handleMouseDown } from '../Handle/handler'; import { EdgeAnchor } from './EdgeAnchor'; import { getMarkerId } from '../../utils/graph'; import { getMouseHandler } from './utils'; -import { EdgeProps, WrapEdgeProps, Connection } from '../../types'; import { elementSelectionKeys } from '../../utils'; +import type { EdgeProps, WrapEdgeProps, Connection } from '../../types'; export default (EdgeComponent: ComponentType) => { const EdgeWrapper = ({ diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index e8d58fc9..ff726d30 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -1,8 +1,9 @@ -import { MouseEvent as ReactMouseEvent } from 'react'; +import type { MouseEvent as ReactMouseEvent } from 'react'; import { StoreApi } from 'zustand'; import { getHostForElement } from '../../utils'; -import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types'; +import { ConnectionMode } from '../../types'; +import type { OnConnect, Connection, HandleType, ReactFlowState } from '../../types'; type ValidConnectionFunc = (connection: Connection) => boolean; diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index f4627d8a..c47035a9 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -4,10 +4,11 @@ import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; import NodeIdContext from '../../contexts/NodeIdContext'; -import { HandleProps, Connection, ReactFlowState, Position } from '../../types'; import { checkElementBelowIsValid, handleMouseDown } from './handler'; import { getHostForElement } from '../../utils'; import { addEdge } from '../../utils/graph'; +import { Position } from '../../types'; +import type { HandleProps, Connection, ReactFlowState } from '../../types'; const alwaysValid = () => true; diff --git a/packages/core/src/components/Nodes/DefaultNode.tsx b/packages/core/src/components/Nodes/DefaultNode.tsx index 50210c2e..99835a3c 100644 --- a/packages/core/src/components/Nodes/DefaultNode.tsx +++ b/packages/core/src/components/Nodes/DefaultNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const DefaultNode = ({ data, diff --git a/packages/core/src/components/Nodes/InputNode.tsx b/packages/core/src/components/Nodes/InputNode.tsx index 0038f9fe..e6983317 100644 --- a/packages/core/src/components/Nodes/InputNode.tsx +++ b/packages/core/src/components/Nodes/InputNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/OutputNode.tsx b/packages/core/src/components/Nodes/OutputNode.tsx index 0298e6eb..fdcb5add 100644 --- a/packages/core/src/components/Nodes/OutputNode.tsx +++ b/packages/core/src/components/Nodes/OutputNode.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; import Handle from '../../components/Handle'; -import { NodeProps, Position } from '../../types'; +import { Position } from '../../types'; +import type { NodeProps } from '../../types'; const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => ( <> diff --git a/packages/core/src/components/Nodes/utils.ts b/packages/core/src/components/Nodes/utils.ts index b3116139..dca9f297 100644 --- a/packages/core/src/components/Nodes/utils.ts +++ b/packages/core/src/components/Nodes/utils.ts @@ -1,8 +1,9 @@ import { MouseEvent } from 'react'; import { StoreApi } from 'zustand'; -import { HandleElement, Node, NodeOrigin, Position, ReactFlowState } from '../../types'; import { getDimensions } from '../../utils'; +import { Position } from '../../types'; +import type { HandleElement, Node, NodeOrigin, ReactFlowState } from '../../types'; export const getHandleBounds = ( selector: string, diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 76d53d19..afb1f761 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -1,4 +1,5 @@ -import { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react'; +import { useEffect, useRef, memo } from 'react'; +import type { ComponentType, MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; import { useStoreApi } from '../../hooks/useStore'; @@ -7,8 +8,8 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import useDrag from '../../hooks/useDrag'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; import { getMouseHandler, handleNodeClick } from './utils'; -import { NodeProps, WrapNodeProps, XYPosition } from '../../types'; import { elementSelectionKeys } from '../../utils'; +import type { NodeProps, WrapNodeProps, XYPosition } from '../../types'; export const arrowKeyDiffs: Record = { ArrowUp: { x: 0, y: -1 }, diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index 17b24805..5e75d5ed 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -3,16 +3,17 @@ * made a selection with on or several nodes */ -import { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react'; +import { memo, useRef, useEffect } from 'react'; +import type { MouseEvent, KeyboardEvent } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { Node, ReactFlowState } from '../../types'; import { getRectOfNodes } from '../../utils/graph'; import useDrag from '../../hooks/useDrag'; import { arrowKeyDiffs } from '../Nodes/wrapNode'; import useUpdateNodePositions from '../../hooks/useUpdateNodePositions'; +import type { Node, ReactFlowState } from '../../types'; export interface NodesSelectionProps { onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; diff --git a/packages/core/src/components/Panel/index.tsx b/packages/core/src/components/Panel/index.tsx index 756caca6..7228f1a7 100644 --- a/packages/core/src/components/Panel/index.tsx +++ b/packages/core/src/components/Panel/index.tsx @@ -1,8 +1,8 @@ -import { HTMLAttributes, ReactNode } from 'react'; +import type { HTMLAttributes, ReactNode } from 'react'; import cc from 'classcat'; -import { PanelPosition, ReactFlowState } from '../../types'; import { useStore } from '../../hooks/useStore'; +import type { PanelPosition, ReactFlowState } from '../../types'; export type PanelProps = HTMLAttributes & { position: PanelPosition; diff --git a/packages/core/src/components/ReactFlowProvider/index.tsx b/packages/core/src/components/ReactFlowProvider/index.tsx index 703c9c06..971041c1 100644 --- a/packages/core/src/components/ReactFlowProvider/index.tsx +++ b/packages/core/src/components/ReactFlowProvider/index.tsx @@ -1,9 +1,10 @@ -import { FC, PropsWithChildren, useRef } from 'react'; +import { useRef } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { StoreApi } from 'zustand'; import { Provider } from '../../contexts/RFStoreContext'; import { createRFStore } from '../../store'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const ReactFlowProvider: FC = ({ children }) => { const storeRef = useRef | null>(null); diff --git a/packages/core/src/components/SelectionListener/index.tsx b/packages/core/src/components/SelectionListener/index.tsx index 5655fc6f..6177f53d 100644 --- a/packages/core/src/components/SelectionListener/index.tsx +++ b/packages/core/src/components/SelectionListener/index.tsx @@ -1,8 +1,8 @@ import { memo, useEffect } from 'react'; import shallow from 'zustand/shallow'; -import { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types'; import { useStore, useStoreApi } from '../../hooks/useStore'; +import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types'; type SelectionListenerProps = { onSelectionChange?: OnSelectionChangeFunc; diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 2b39cb8a..2f98a453 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -3,7 +3,7 @@ import { StoreApi } from 'zustand'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; +import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; type StoreUpdaterProps = Pick< ReactFlowProps, diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 3809d579..142be18f 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -7,8 +7,8 @@ import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; -import { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; type SelectionRect = Rect & { startX: number; diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx index cfcba262..d718c65f 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,16 +1,18 @@ import { memo, useCallback } from 'react'; import { useStore } from '../../hooks/useStore'; -import { EdgeMarker, ReactFlowState } from '../../types'; import { getMarkerId } from '../../utils/graph'; import { useMarkerSymbol } from './MarkerSymbols'; -interface MarkerProps extends EdgeMarker { +import type { EdgeMarker, ReactFlowState } from '../../types'; + +type MarkerProps = EdgeMarker & { id: string; -} -interface MarkerDefinitionsProps { +}; + +type MarkerDefinitionsProps = { defaultColor: string; rfId?: string; -} +}; const Marker = ({ id, diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index b0a5757e..fbdd4972 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; -import { MarkerType, EdgeMarker } from '../../types'; + import { devWarn } from '../../utils'; +import { MarkerType } from '../../types'; +import type { EdgeMarker } from '../../types'; type SymbolProps = Omit; diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 93b7adaa..e07948ad 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -8,39 +8,39 @@ import ConnectionLine from '../../components/ConnectionLine/index'; import MarkerDefinitions from './MarkerDefinitions'; import { getEdgePositions, getHandle, getNodeData } from './utils'; -import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types'; import { GraphViewProps } from '../GraphView'; import { devWarn } from '../../utils'; +import { ConnectionMode, Position } from '../../types'; +import type { Edge, ReactFlowState } from '../../types'; -interface EdgeRendererProps - extends Pick< - GraphViewProps, - | 'edgeTypes' - | 'connectionLineType' - | 'connectionLineType' - | 'connectionLineStyle' - | 'connectionLineComponent' - | 'connectionLineContainerStyle' - | 'connectionLineContainerStyle' - | 'onEdgeClick' - | 'onEdgeDoubleClick' - | 'defaultMarkerColor' - | 'onlyRenderVisibleElements' - | 'onEdgeUpdate' - | 'onEdgeContextMenu' - | 'onEdgeMouseEnter' - | 'onEdgeMouseMove' - | 'onEdgeMouseLeave' - | 'onEdgeUpdateStart' - | 'onEdgeUpdateEnd' - | 'edgeUpdaterRadius' - | 'noPanClassName' - | 'elevateEdgesOnSelect' - | 'rfId' - | 'disableKeyboardA11y' - > { +type EdgeRendererProps = Pick< + GraphViewProps, + | 'edgeTypes' + | 'connectionLineType' + | 'connectionLineType' + | 'connectionLineStyle' + | 'connectionLineComponent' + | 'connectionLineContainerStyle' + | 'connectionLineContainerStyle' + | 'onEdgeClick' + | 'onEdgeDoubleClick' + | 'defaultMarkerColor' + | 'onlyRenderVisibleElements' + | 'onEdgeUpdate' + | 'onEdgeContextMenu' + | 'onEdgeMouseEnter' + | 'onEdgeMouseMove' + | 'onEdgeMouseLeave' + | 'onEdgeUpdateStart' + | 'onEdgeUpdateEnd' + | 'edgeUpdaterRadius' + | 'noPanClassName' + | 'elevateEdgesOnSelect' + | 'rfId' + | 'disableKeyboardA11y' +> & { elevateEdgesOnSelect: boolean; -} +}; const selector = (s: ReactFlowState) => ({ connectionNodeId: s.connectionNodeId, diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts index b458a2c3..eee01706 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/packages/core/src/container/EdgeRenderer/utils.ts @@ -1,19 +1,20 @@ -import { ComponentType } from 'react'; +import type { ComponentType } from 'react'; + import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; -import { +import { internalsSymbol, rectToBox } from '../../utils'; +import { Position } from '../../types'; +import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, HandleElement, NodeHandleBounds, Node, - Position, Rect, Transform, XYPosition, } from '../../types'; -import { internalsSymbol, rectToBox } from '../../utils'; export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped; diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx index 113945bf..60502182 100644 --- a/packages/core/src/container/FlowRenderer/Pane.tsx +++ b/packages/core/src/container/FlowRenderer/Pane.tsx @@ -1,4 +1,4 @@ -import { MouseEvent } from 'react'; +import type { MouseEvent } from 'react'; import cc from 'classcat'; import { useStore } from '../../hooks/useStore'; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 76accfbb..e3faed9c 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,4 +1,5 @@ -import { memo, ReactNode, WheelEvent, MouseEvent } from 'react'; +import { memo } from 'react'; +import type { ReactNode, WheelEvent, MouseEvent } from 'react'; import { useStore, useStoreApi } from '../../hooks/useStore'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; @@ -8,8 +9,7 @@ import ZoomPane from '../ZoomPane'; import UserSelection from '../../components/UserSelection'; import NodesSelection from '../../components/NodesSelection'; import Pane from './Pane'; - -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; export type FlowRendererProps = Omit< GraphViewProps, diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index e94698e7..690b66f6 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -5,39 +5,35 @@ import NodeRenderer from '../NodeRenderer'; import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; -import { - NodeTypesWrapped, - EdgeTypesWrapped, - ConnectionLineType, - KeyCode, - ReactFlowProps, - Viewport, - CoordinateExtent, - NodeOrigin, -} from '../../types'; +import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; -export interface GraphViewProps - extends Omit { - nodeTypes: NodeTypesWrapped; - edgeTypes: EdgeTypesWrapped; - selectionKeyCode: KeyCode | null; - deleteKeyCode: KeyCode | null; - multiSelectionKeyCode: KeyCode | null; - connectionLineType: ConnectionLineType; - onlyRenderVisibleElements: boolean; - translateExtent: CoordinateExtent; - minZoom: number; - maxZoom: number; - defaultMarkerColor: string; - selectNodesOnDrag: boolean; - noDragClassName: string; - noWheelClassName: string; - noPanClassName: string; - defaultViewport: Viewport; - rfId: string; - disableKeyboardA11y: boolean; - nodeOrigin: NodeOrigin; -} +export type GraphViewProps = Omit & + Required< + Pick< + ReactFlowProps, + | 'selectionKeyCode' + | 'deleteKeyCode' + | 'multiSelectionKeyCode' + | 'connectionLineType' + | 'onlyRenderVisibleElements' + | 'translateExtent' + | 'minZoom' + | 'maxZoom' + | 'defaultMarkerColor' + | 'selectNodesOnDrag' + | 'noDragClassName' + | 'noDragClassName' + | 'noWheelClassName' + | 'noPanClassName' + | 'defaultViewport' + | 'disableKeyboardA11y' + | 'nodeOrigin' + > + > & { + nodeTypes: NodeTypesWrapped; + edgeTypes: EdgeTypesWrapped; + rfId: string; + }; const GraphView = ({ nodeTypes, diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index b576ff69..70a62dfe 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -1,4 +1,5 @@ -import { memo, useMemo, ComponentType, useEffect, useRef } from 'react'; +import { memo, useMemo, useEffect, useRef } from 'react'; +import type { ComponentType } from 'react'; import shallow from 'zustand/shallow'; import useVisibleNodes from '../../hooks/useVisibleNodes'; @@ -6,8 +7,9 @@ import { useStore } from '../../hooks/useStore'; import { clampPosition, devWarn, internalsSymbol } from '../../utils'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; -import { Position, ReactFlowState, WrapNodeProps } from '../../types'; import { getPositionWithOrigin } from './utils'; +import { Position } from '../../types'; +import type { ReactFlowState, WrapNodeProps } from '../../types'; type NodeRendererProps = Pick< GraphViewProps, diff --git a/packages/core/src/container/NodeRenderer/utils.ts b/packages/core/src/container/NodeRenderer/utils.ts index 6893aeb9..ebac7413 100644 --- a/packages/core/src/container/NodeRenderer/utils.ts +++ b/packages/core/src/container/NodeRenderer/utils.ts @@ -1,12 +1,12 @@ -import { ComponentType } from 'react'; +import type { ComponentType } from 'react'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import wrapNode from '../../components/Nodes/wrapNode'; -import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types'; import { devWarn } from '../../utils'; +import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types'; export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped; diff --git a/packages/core/src/container/ReactFlow/Wrapper.tsx b/packages/core/src/container/ReactFlow/Wrapper.tsx index 77924393..297e3b49 100644 --- a/packages/core/src/container/ReactFlow/Wrapper.tsx +++ b/packages/core/src/container/ReactFlow/Wrapper.tsx @@ -1,4 +1,4 @@ -import { FC, PropsWithChildren } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { useStoreApi } from '../../hooks/useStore'; import ReactFlowProvider from '../../components/ReactFlowProvider'; diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 0d5af4ba..6cb99d33 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -1,4 +1,5 @@ -import { CSSProperties, forwardRef } from 'react'; +import { forwardRef } from 'react'; +import type { CSSProperties } from 'react'; import cc from 'classcat'; import Attribution from '../../components/Attribution'; @@ -9,27 +10,24 @@ import OutputNode from '../../components/Nodes/OutputNode'; import GroupNode from '../../components/Nodes/GroupNode'; import SelectionListener from '../../components/SelectionListener'; import StoreUpdater from '../../components/StoreUpdater'; - -import { - ConnectionLineType, - ConnectionMode, +import A11yDescriptions from '../../components/A11yDescriptions'; +import { createEdgeTypes } from '../EdgeRenderer/utils'; +import { createNodeTypes } from '../NodeRenderer/utils'; +import GraphView from '../GraphView'; +import Wrapper from './Wrapper'; +import { infiniteExtent } from '../../store/initialState'; +import { useNodeOrEdgeTypes } from './utils'; +import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types'; +import type { EdgeTypes, EdgeTypesWrapped, NodeOrigin, NodeTypes, NodeTypesWrapped, - PanOnScrollMode, ReactFlowProps, ReactFlowRefType, Viewport, } from '../../types'; -import { createEdgeTypes } from '../EdgeRenderer/utils'; -import GraphView from '../GraphView'; -import { createNodeTypes } from '../NodeRenderer/utils'; -import { useNodeOrEdgeTypes } from './utils'; -import Wrapper from './Wrapper'; -import A11yDescriptions from '../../components/A11yDescriptions'; -import { infiniteExtent } from '../../store/initialState'; const defaultNodeTypes: NodeTypes = { input: InputNode, diff --git a/packages/core/src/container/ReactFlow/utils.ts b/packages/core/src/container/ReactFlow/utils.ts index b85e75d6..4fc799a7 100644 --- a/packages/core/src/container/ReactFlow/utils.ts +++ b/packages/core/src/container/ReactFlow/utils.ts @@ -1,10 +1,10 @@ import { useMemo, useRef } from 'react'; import shallow from 'zustand/shallow'; -import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; import { devWarn } from '../../utils'; import { CreateEdgeTypes } from '../EdgeRenderer/utils'; import { CreateNodeTypes } from '../NodeRenderer/utils'; +import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types'; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped; export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped; diff --git a/packages/core/src/container/Viewport/index.tsx b/packages/core/src/container/Viewport/index.tsx index 3b474f82..64ed99d5 100644 --- a/packages/core/src/container/Viewport/index.tsx +++ b/packages/core/src/container/Viewport/index.tsx @@ -1,7 +1,7 @@ -import { ReactNode } from 'react'; +import type { ReactNode } from 'react'; import { useStore } from '../../hooks/useStore'; -import { ReactFlowState } from '../../types'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`; diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 67e4b8fd..cde4ec47 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useRef } from 'react'; -import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom'; +import { zoom, zoomIdentity } from 'd3-zoom'; +import type { D3ZoomEvent } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import shallow from 'zustand/shallow'; @@ -8,9 +9,10 @@ import { clamp } from '../../utils'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import { FlowRendererProps } from '../FlowRenderer'; import { containerStyle } from '../../styles'; -import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types'; +import type { FlowRendererProps } from '../FlowRenderer'; +import { PanOnScrollMode } from '../../types'; +import type { Viewport, ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< FlowRendererProps, diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index 08bdf6c3..319c1993 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -1,12 +1,13 @@ -import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from 'react'; +import { useEffect, useRef, useState, useCallback } from 'react'; +import type { RefObject, MouseEvent } from 'react'; import { drag } from 'd3-drag'; import { select } from 'd3-selection'; import type { D3DragEvent, SubjectPosition } from 'd3'; import { useStoreApi } from '../../hooks/useStore'; -import { NodeDragItem, Node, SelectionDragHandler } from '../../types'; import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils'; import { handleNodeClick } from '../../components/Nodes/utils'; +import type { NodeDragItem, Node, SelectionDragHandler } from '../../types'; export type UseDragEvent = D3DragEvent; export type UseDragData = { dx: number; dy: number }; diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index bf9cd294..be25f3c1 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -1,7 +1,7 @@ -import { RefObject } from 'react'; +import type { RefObject } from 'react'; -import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types'; import { clampPosition, devWarn } from '../../utils'; +import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types'; export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean { if (!node.parentNode) { diff --git a/packages/core/src/hooks/useEdges.ts b/packages/core/src/hooks/useEdges.ts index eee73eb0..78c0e36a 100644 --- a/packages/core/src/hooks/useEdges.ts +++ b/packages/core/src/hooks/useEdges.ts @@ -1,5 +1,5 @@ import { useStore } from '../hooks/useStore'; -import { Edge, ReactFlowState } from '../types'; +import type { Edge, ReactFlowState } from '../types'; const edgesSelector = (state: ReactFlowState) => state.edges; diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts index 151c9786..23cb2a7d 100644 --- a/packages/core/src/hooks/useGlobalKeyHandler.ts +++ b/packages/core/src/hooks/useGlobalKeyHandler.ts @@ -3,7 +3,7 @@ import { useEffect } from 'react'; import { useStoreApi } from '../hooks/useStore'; import useKeyPress from './useKeyPress'; import { getConnectedEdges } from '../utils/graph'; -import { KeyCode, NodeChange, Node } from '../types'; +import type { KeyCode, NodeChange, Node } from '../types'; interface HookParams { deleteKeyCode: KeyCode | null; diff --git a/packages/core/src/hooks/useKeyPress.ts b/packages/core/src/hooks/useKeyPress.ts index d2e77e8f..4273feaa 100644 --- a/packages/core/src/hooks/useKeyPress.ts +++ b/packages/core/src/hooks/useKeyPress.ts @@ -1,6 +1,6 @@ import { useState, useEffect, useRef, useMemo } from 'react'; -import { KeyCode } from '../types'; +import type { KeyCode } from '../types'; type Keys = Array; type PressedKeys = Set; diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 684becea..6a04942e 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,5 +1,5 @@ import { useStore } from '../hooks/useStore'; -import { Node, ReactFlowState } from '../types'; +import type { Node, ReactFlowState } from '../types'; const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values()); diff --git a/packages/core/src/hooks/useNodesEdgesState.ts b/packages/core/src/hooks/useNodesEdgesState.ts index 0ecbf611..31c16354 100644 --- a/packages/core/src/hooks/useNodesEdgesState.ts +++ b/packages/core/src/hooks/useNodesEdgesState.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useCallback, SetStateAction, Dispatch } from 'react'; +import { useState, useCallback } from 'react'; +import type { SetStateAction, Dispatch } from 'react'; import { applyNodeChanges, applyEdgeChanges } from '../utils/changes'; -import { Node, NodeChange, Edge, EdgeChange } from '../types'; +import type { Node, NodeChange, Edge, EdgeChange } from '../types'; type ApplyChanges = (changes: ChangesType[], items: ItemType[]) => ItemType[]; type OnChange = (changes: ChangesType[]) => void; diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts index 1f2b1f56..f0ac25d2 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -1,6 +1,6 @@ -import { ReactFlowState } from '../types'; import { internalsSymbol } from '../utils'; import { useStore } from './useStore'; +import type { ReactFlowState } from '../types'; const selector = (s: ReactFlowState) => { if (s.nodeInternals.size === 0) { diff --git a/packages/core/src/hooks/useOnInitHandler.ts b/packages/core/src/hooks/useOnInitHandler.ts index 8a3a119c..27de912b 100644 --- a/packages/core/src/hooks/useOnInitHandler.ts +++ b/packages/core/src/hooks/useOnInitHandler.ts @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; import useReactFlow from './useReactFlow'; -import { OnInit } from '../types'; +import type { OnInit } from '../types'; function useOnInitHandler(onInit: OnInit | undefined) { const rfInstance = useReactFlow(); diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts index ba826ddf..2cba0fae 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/core/src/hooks/useReactFlow.ts @@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'; import useViewportHelper from './useViewportHelper'; import { useStoreApi } from '../hooks/useStore'; -import { +import type { ReactFlowInstance, Instance, NodeAddChange, diff --git a/packages/core/src/hooks/useResizeHandler.ts b/packages/core/src/hooks/useResizeHandler.ts index 8635db38..d2ca3e63 100644 --- a/packages/core/src/hooks/useResizeHandler.ts +++ b/packages/core/src/hooks/useResizeHandler.ts @@ -1,4 +1,5 @@ -import { useEffect, MutableRefObject } from 'react'; +import { useEffect } from 'react'; +import type { MutableRefObject } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { devWarn, getDimensions } from '../utils'; diff --git a/packages/core/src/hooks/useStore.ts b/packages/core/src/hooks/useStore.ts index 3cdccb8a..bc0e605e 100644 --- a/packages/core/src/hooks/useStore.ts +++ b/packages/core/src/hooks/useStore.ts @@ -1,8 +1,9 @@ import { useContext, useMemo } from 'react'; -import { StoreApi, useStore as useZustandStore } from 'zustand'; +import { useStore as useZustandStore } from 'zustand'; +import type { StoreApi } from 'zustand'; import StoreContext from '../contexts/RFStoreContext'; -import { ReactFlowState } from '../types'; +import type { ReactFlowState } from '../types'; const errorMessage = '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100'; diff --git a/packages/core/src/hooks/useUpdateNodeInternals.ts b/packages/core/src/hooks/useUpdateNodeInternals.ts index dbd1a84d..849d76b6 100644 --- a/packages/core/src/hooks/useUpdateNodeInternals.ts +++ b/packages/core/src/hooks/useUpdateNodeInternals.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { useStoreApi } from '../hooks/useStore'; -import { UpdateNodeInternals } from '../types'; +import type { UpdateNodeInternals } from '../types'; function useUpdateNodeInternals(): UpdateNodeInternals { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index 8a303e06..eb5880e3 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -2,8 +2,7 @@ import { useCallback } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { calcNextPosition } from './useDrag/utils'; - -import { XYPosition } from '../types'; +import type { XYPosition } from '../types'; function useUpdateNodePositions() { const store = useStoreApi(); diff --git a/packages/core/src/hooks/useViewport.ts b/packages/core/src/hooks/useViewport.ts index 025040bd..c20e78b6 100644 --- a/packages/core/src/hooks/useViewport.ts +++ b/packages/core/src/hooks/useViewport.ts @@ -1,7 +1,7 @@ import shallow from 'zustand/shallow'; import { useStore } from '../hooks/useStore'; -import { Viewport, ReactFlowState } from '../types'; +import type { Viewport, ReactFlowState } from '../types'; const viewportSelector = (state: ReactFlowState) => ({ x: state.transform[0], diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index ea79f044..226d1a69 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -4,8 +4,8 @@ import shallow from 'zustand/shallow'; import { useStoreApi, useStore } from '../hooks/useStore'; import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph'; -import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; import { fitView as fitViewStore } from '../store/utils'; +import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; // eslint-disable-next-line @typescript-eslint/no-empty-function const noop = () => {}; diff --git a/packages/core/src/hooks/useVisibleEdges.ts b/packages/core/src/hooks/useVisibleEdges.ts index be3e7590..cbd673e5 100644 --- a/packages/core/src/hooks/useVisibleEdges.ts +++ b/packages/core/src/hooks/useVisibleEdges.ts @@ -2,8 +2,8 @@ import { useCallback } from 'react'; import { useStore } from '../hooks/useStore'; import { isEdgeVisible } from '../container/EdgeRenderer/utils'; -import { ReactFlowState, NodeInternals, Edge } from '../types'; import { internalsSymbol, isNumeric } from '../utils'; +import type { ReactFlowState, NodeInternals, Edge } from '../types'; const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }]; diff --git a/packages/core/src/hooks/useVisibleNodes.ts b/packages/core/src/hooks/useVisibleNodes.ts index ad81e3be..f74be159 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/core/src/hooks/useVisibleNodes.ts @@ -2,8 +2,7 @@ import { useCallback } from 'react'; import { useStore } from '../hooks/useStore'; import { getNodesInside } from '../utils/graph'; - -import { ReactFlowState } from '../types'; +import type { ReactFlowState } from '../types'; function useVisibleNodes(onlyRenderVisible: boolean) { const nodes = useStore( diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 5310992a..e09abbd7 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -1,8 +1,11 @@ import { createStore } from 'zustand'; import { clampPosition, getDimensions, internalsSymbol } from '../utils'; -import { applyNodeChanges } from '../utils/changes'; -import { +import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; +import { getHandleBounds } from '../components/Nodes/utils'; +import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils'; +import initialState from './initialState'; +import type { ReactFlowState, Node, Edge, @@ -15,10 +18,6 @@ import { NodeDragItem, UnselectNodesAndEdgesParams, } from '../types'; -import { getHandleBounds } from '../components/Nodes/utils'; -import { createSelectionChange, getSelectionChanges } from '../utils/changes'; -import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils'; -import initialState from './initialState'; const createRFStore = () => createStore((set, get) => ({ diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index ce08a40d..ab918e65 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -1,4 +1,5 @@ -import { CoordinateExtent, ReactFlowStore, ConnectionMode } from '../types'; +import { ConnectionMode } from '../types'; +import type { CoordinateExtent, ReactFlowStore } from '../types'; export const infiniteExtent: CoordinateExtent = [ [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 66078d19..f9a79ea1 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -1,9 +1,9 @@ import { zoomIdentity } from 'd3-zoom'; -import { StoreApi } from 'zustand'; +import type { StoreApi } from 'zustand'; import { internalsSymbol, isNumeric } from '../utils'; import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph'; -import { +import type { Edge, EdgeSelectionChange, Node, diff --git a/packages/core/src/styles/index.ts b/packages/core/src/styles/index.ts index e9f01264..91afb98c 100644 --- a/packages/core/src/styles/index.ts +++ b/packages/core/src/styles/index.ts @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import type { CSSProperties } from 'react'; export const containerStyle: CSSProperties = { position: 'absolute', diff --git a/packages/core/src/types/changes.ts b/packages/core/src/types/changes.ts index 2e3a22bc..b4395803 100644 --- a/packages/core/src/types/changes.ts +++ b/packages/core/src/types/changes.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { XYPosition, Dimensions } from './utils'; -import { Node } from './nodes'; -import { Edge } from './edges'; +import type { XYPosition, Dimensions } from './utils'; +import type { Node } from './nodes'; +import type { Edge } from './edges'; export type NodeDimensionChange = { id: string; diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 7a10340b..9b273641 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -1,6 +1,6 @@ -import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; +import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; -import { +import type { OnSelectionChangeFunc, NodeTypes, EdgeTypes, @@ -33,19 +33,17 @@ import { SelectionDragHandler, Viewport, NodeOrigin, + EdgeMouseHandler, + HandleType, } from '.'; -import { HandleType } from './handles'; -export interface ReactFlowProps extends HTMLAttributes { +export type ReactFlowProps = HTMLAttributes & { nodes?: Node[]; edges?: Edge[]; defaultNodes?: Node[]; defaultEdges?: Edge[]; defaultEdgeOptions?: DefaultEdgeOptions; - onNodesChange?: OnNodesChange; - onEdgesChange?: OnEdgesChange; onNodeClick?: NodeMouseHandler; - onEdgeClick?: (event: React.MouseEvent, node: Edge) => void; onNodeDoubleClick?: NodeMouseHandler; onNodeMouseEnter?: NodeMouseHandler; onNodeMouseMove?: NodeMouseHandler; @@ -54,8 +52,23 @@ export interface ReactFlowProps extends HTMLAttributes { onNodeDragStart?: NodeDragHandler; onNodeDrag?: NodeDragHandler; onNodeDragStop?: NodeDragHandler; + onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void; + onEdgeUpdate?: OnEdgeUpdateFunc; + onEdgeContextMenu?: EdgeMouseHandler; + onEdgeMouseEnter?: EdgeMouseHandler; + onEdgeMouseMove?: EdgeMouseHandler; + onEdgeMouseLeave?: EdgeMouseHandler; + onEdgeDoubleClick?: EdgeMouseHandler; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; + onNodesChange?: OnNodesChange; + onEdgesChange?: OnEdgesChange; onNodesDelete?: OnNodesDelete; onEdgesDelete?: OnEdgesDelete; + onSelectionDragStart?: SelectionDragHandler; + onSelectionDrag?: SelectionDragHandler; + onSelectionDragStop?: SelectionDragHandler; + onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; onConnect?: OnConnect; onConnectStart?: OnConnectStart; onConnectEnd?: OnConnectEnd; @@ -66,10 +79,6 @@ export interface ReactFlowProps extends HTMLAttributes { onMoveStart?: OnMoveStart; onMoveEnd?: OnMoveEnd; onSelectionChange?: OnSelectionChangeFunc; - onSelectionDragStart?: SelectionDragHandler; - onSelectionDrag?: SelectionDragHandler; - onSelectionDragStop?: SelectionDragHandler; - onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; onPaneScroll?: (event?: WheelEvent) => void; onPaneClick?: (event: ReactMouseEvent) => void; onPaneContextMenu?: (event: ReactMouseEvent) => void; @@ -78,11 +87,11 @@ export interface ReactFlowProps extends HTMLAttributes { onPaneMouseLeave?: (event: ReactMouseEvent) => void; nodeTypes?: NodeTypes; edgeTypes?: EdgeTypes; - connectionMode?: ConnectionMode; connectionLineType?: ConnectionLineType; connectionLineStyle?: CSSProperties; connectionLineComponent?: ConnectionLineComponent; connectionLineContainerStyle?: CSSProperties; + connectionMode?: ConnectionMode; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; @@ -112,14 +121,6 @@ export interface ReactFlowProps extends HTMLAttributes { panOnScrollSpeed?: number; panOnScrollMode?: PanOnScrollMode; zoomOnDoubleClick?: boolean; - onEdgeUpdate?: OnEdgeUpdateFunc; - onEdgeContextMenu?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseEnter?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; noDragClassName?: string; noWheelClassName?: string; @@ -131,6 +132,6 @@ export interface ReactFlowProps extends HTMLAttributes { proOptions?: ProOptions; elevateEdgesOnSelect?: boolean; disableKeyboardA11y?: boolean; -} +}; export type ReactFlowRefType = HTMLDivElement; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 71863196..7eb12816 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -1,9 +1,17 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react'; -import { Connection } from './general'; -import { HandleElement, HandleType } from './handles'; -import { Node } from './nodes'; -import { Position } from './utils'; +import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react'; + +import { Position } from '.'; +import type { Connection, HandleElement, HandleType, Node } from '.'; + +type EdgeLabelOptions = { + label?: string | ReactNode; + labelStyle?: CSSProperties; + labelShowBg?: boolean; + labelBgStyle?: CSSProperties; + labelBgPadding?: [number, number]; + labelBgBorderRadius?: number; +}; // interface for the user edge items type DefaultEdge = { @@ -13,12 +21,6 @@ type DefaultEdge = { target: string; sourceHandle?: string | null; targetHandle?: string | null; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; style?: CSSProperties; animated?: boolean; hidden?: boolean; @@ -34,7 +36,7 @@ type DefaultEdge = { ariaLabel?: string; interactionWidth?: number; focusable?: boolean; -}; +} & EdgeLabelOptions; export type SmoothStepPathOptions = { offset?: number; @@ -62,55 +64,7 @@ export type DefaultEdgeOptions = Omit< 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode' >; -// props that get passed to a custom edge -export type EdgeProps = { - id: string; - source: string; - target: string; - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; - selected?: boolean; - animated?: boolean; - sourcePosition: Position; - targetPosition: Position; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; - style?: CSSProperties; - data?: T; - sourceHandleId?: string | null; - targetHandleId?: string | null; - markerStart?: string; - markerEnd?: string; - // @TODO: how can we get better types for pathOptions? - pathOptions?: any; - interactionWidth?: number; -}; - -export type BaseEdgeProps = Pick< - EdgeProps, - | 'label' - | 'labelStyle' - | 'labelShowBg' - | 'labelBgStyle' - | 'labelBgPadding' - | 'labelBgBorderRadius' - | 'style' - | 'markerStart' - | 'markerEnd' - | 'interactionWidth' -> & { - labelX: number; - labelY: number; - path: string; -}; - -export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void; +export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void; export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandle'> & { onClick?: EdgeMouseHandler; @@ -130,30 +84,57 @@ export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandl onMouseMove?: EdgeMouseHandler; onMouseLeave?: EdgeMouseHandler; edgeUpdaterRadius?: number; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; rfId?: string; isFocusable: boolean; pathOptions?: BezierPathOptions | SmoothStepPathOptions; }; -export interface SmoothStepEdgeProps extends EdgeProps { - pathOptions?: SmoothStepPathOptions; -} +// props that get passed to a custom edge +export type EdgeProps = Pick< + Edge, + 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' +> & + Pick< + WrapEdgeProps, + | 'sourceX' + | 'sourceY' + | 'targetX' + | 'targetY' + | 'sourcePosition' + | 'targetPosition' + | 'sourceHandleId' + | 'targetHandleId' + | 'interactionWidth' + > & + EdgeLabelOptions & { + markerStart?: string; + markerEnd?: string; + // @TODO: how can we get better types for pathOptions? + pathOptions?: any; + }; -export interface BezierEdgeProps extends EdgeProps { +export type BaseEdgeProps = Pick & + EdgeLabelOptions & { + labelX: number; + labelY: number; + path: string; + }; + +export type SmoothStepEdgeProps = EdgeProps & { + pathOptions?: SmoothStepPathOptions; +}; + +export type BezierEdgeProps = EdgeProps & { pathOptions?: BezierPathOptions; -} -export interface EdgeTextProps extends HTMLAttributes { - x: number; - y: number; - label?: string | ReactNode; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; -} +}; + +export type EdgeTextProps = HTMLAttributes & + EdgeLabelOptions & { + x: number; + y: number; + }; export enum ConnectionLineType { Bezier = 'default', @@ -180,7 +161,7 @@ export type ConnectionLineComponent = ComponentType = (oldEdge: Edge, newConnection: Connection) => void; -export interface EdgeMarker { +export type EdgeMarker = { type: MarkerType; color?: string; width?: number; @@ -188,7 +169,7 @@ export interface EdgeMarker { markerUnits?: string; orient?: string; strokeWidth?: number; -} +}; export type EdgeMarkerType = string | EdgeMarker; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 5587fec7..b18f4d32 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; +import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; import type { Selection as D3Selection, ZoomBehavior } from 'd3'; -import { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; -import { NodeChange, EdgeChange } from './changes'; -import { +import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; +import type { NodeChange, EdgeChange } from './changes'; +import type { Node, NodeInternals, NodeDimensionUpdate, @@ -15,10 +15,10 @@ import { SelectionDragHandler, NodeOrigin, } from './nodes'; -import { Edge, EdgeProps, WrapEdgeProps } from './edges'; -import { HandleType, StartHandle } from './handles'; -import { DefaultEdgeOptions } from '.'; -import { ReactFlowInstance } from './instance'; +import type { Edge, EdgeProps, WrapEdgeProps } from './edges'; +import type { HandleType, StartHandle } from './handles'; +import type { DefaultEdgeOptions } from '.'; +import type { ReactFlowInstance } from './instance'; export type NodeTypes = { [key: string]: ComponentType }; export type NodeTypesWrapped = { [key: string]: MemoExoticComponent> }; @@ -115,7 +115,7 @@ export type UnselectNodesAndEdgesParams = { export type OnViewportChange = (viewport: Viewport) => void; -export interface ViewportHelperFunctions { +export type ViewportHelperFunctions = { zoomIn: ZoomInOut; zoomOut: ZoomInOut; zoomTo: ZoomTo; @@ -127,7 +127,7 @@ export interface ViewportHelperFunctions { fitBounds: FitBounds; project: Project; viewportInitialized: boolean; -} +}; export type ReactFlowStore = { rfId: string; diff --git a/packages/core/src/types/handles.ts b/packages/core/src/types/handles.ts index 37d1ea41..0850526c 100644 --- a/packages/core/src/types/handles.ts +++ b/packages/core/src/types/handles.ts @@ -1,5 +1,4 @@ -import { XYPosition, Position, Dimensions } from './utils'; -import { OnConnect, Connection } from './general'; +import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.'; export type HandleType = 'source' | 'target'; diff --git a/packages/core/src/types/instance.ts b/packages/core/src/types/instance.ts index f5fe2848..dab4299e 100644 --- a/packages/core/src/types/instance.ts +++ b/packages/core/src/types/instance.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-namespace */ -import { ViewportHelperFunctions, Viewport } from './general'; -import { Node } from './nodes'; -import { Edge } from './edges'; +import { ViewportHelperFunctions, Viewport, Node, Edge } from '.'; export type ReactFlowJsonObject = { nodes: Node[]; diff --git a/packages/core/src/types/nodes.ts b/packages/core/src/types/nodes.ts index a1473f71..39d8755c 100644 --- a/packages/core/src/types/nodes.ts +++ b/packages/core/src/types/nodes.ts @@ -1,20 +1,19 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; +import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import { XYPosition, Position, CoordinateExtent } from './utils'; -import { HandleElement } from './handles'; import { internalsSymbol } from '../utils'; +import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.'; // interface for the user node items -export interface Node { +export type Node = { id: string; position: XYPosition; data: T; type?: string; style?: CSSProperties; className?: string; - targetPosition?: Position; sourcePosition?: Position; + targetPosition?: Position; hidden?: boolean; selected?: boolean; dragging?: boolean; @@ -39,64 +38,50 @@ export interface Node { handleBounds?: NodeHandleBounds; isParent?: boolean; }; -} - -// props that get passed to a custom node -export interface NodeProps { - id: string; - type: string; - data: T; - selected: boolean; - isConnectable: boolean; - xPos: number; - yPos: number; - dragging: boolean; - zIndex: number; - targetPosition?: Position; - sourcePosition?: Position; - dragHandle?: string; -} +}; export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void; export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void; export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void; -export interface WrapNodeProps { - id: string; - type: string; - data: T; - selected: boolean; - isConnectable: boolean; - xPos: number; - yPos: number; - xPosOrigin: number; - yPosOrigin: number; - initialized: boolean; - isSelectable: boolean; - isDraggable: boolean; - isFocusable: boolean; - selectNodesOnDrag: boolean; - onClick?: NodeMouseHandler; - onDoubleClick?: NodeMouseHandler; - onMouseEnter?: NodeMouseHandler; - onMouseMove?: NodeMouseHandler; - onMouseLeave?: NodeMouseHandler; - onContextMenu?: NodeMouseHandler; - style?: CSSProperties; - className?: string; - sourcePosition: Position; - targetPosition: Position; - hidden?: boolean; - resizeObserver: ResizeObserver | null; - dragHandle?: string; - zIndex: number; - isParent: boolean; - noDragClassName: string; - noPanClassName: string; - rfId: string; - disableKeyboardA11y: boolean; - ariaLabel?: string; -} +export type WrapNodeProps = Pick< + Node, + 'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel' +> & + Required, 'selected' | 'type' | 'zIndex'>> & { + isConnectable: boolean; + xPos: number; + yPos: number; + xPosOrigin: number; + yPosOrigin: number; + initialized: boolean; + isSelectable: boolean; + isDraggable: boolean; + isFocusable: boolean; + selectNodesOnDrag: boolean; + onClick?: NodeMouseHandler; + onDoubleClick?: NodeMouseHandler; + onMouseEnter?: NodeMouseHandler; + onMouseMove?: NodeMouseHandler; + onMouseLeave?: NodeMouseHandler; + onContextMenu?: NodeMouseHandler; + resizeObserver: ResizeObserver | null; + isParent: boolean; + noDragClassName: string; + noPanClassName: string; + rfId: string; + disableKeyboardA11y: boolean; + }; + +// props that get passed to a custom node +export type NodeProps = Pick< + WrapNodeProps, + 'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex' +> & { + dragging: boolean; + targetPosition?: Position; + sourcePosition?: Position; +}; export type NodeHandleBounds = { source: HandleElement[] | null; diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts index a41a8f6c..897c1ffb 100644 --- a/packages/core/src/utils/changes.ts +++ b/packages/core/src/utils/changes.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { Node, Edge, EdgeChange, NodeChange } from '../types'; +import type { Node, Edge, EdgeChange, NodeChange } from '../types'; function handleParentExpand(res: any[], updateItem: any) { const parent = res.find((e) => e.id === updateItem.parentNode); diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index b6fece4e..b07db923 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -2,7 +2,7 @@ import type { Selection as D3Selection } from 'd3'; import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils'; -import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; +import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge => 'id' in element && 'source' in element && 'target' in element; diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index a27bbca0..c3afe773 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -1,4 +1,4 @@ -import { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types'; +import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types'; export const getDimensions = (node: HTMLDivElement): Dimensions => ({ width: node.offsetWidth, diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index a0ccd154..05cd8771 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -2,10 +2,11 @@ import { memo } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; -import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core'; +import { useStore, getRectOfNodes, getBoundsOfRects, Panel } from '@reactflow/core'; +import type { ReactFlowState, Rect } from '@reactflow/core'; import MiniMapNode from './MiniMapNode'; -import { MiniMapProps, GetMiniMapNodeAttribute } from './types'; +import type { MiniMapProps, GetMiniMapNodeAttribute } from './types'; declare const window: any; diff --git a/packages/minimap/src/MiniMapNode.tsx b/packages/minimap/src/MiniMapNode.tsx index 3ea3bd33..111c7ee0 100644 --- a/packages/minimap/src/MiniMapNode.tsx +++ b/packages/minimap/src/MiniMapNode.tsx @@ -1,4 +1,5 @@ -import { memo, CSSProperties } from 'react'; +import { memo } from 'react'; +import type { CSSProperties } from 'react'; import cc from 'classcat'; interface MiniMapNodeProps { diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts index 5f82824d..4fed29ba 100644 --- a/packages/minimap/src/types.ts +++ b/packages/minimap/src/types.ts @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { HTMLAttributes } from 'react'; -import { Node, PanelPosition } from '@reactflow/core'; +import type { HTMLAttributes } from 'react'; +import type { Node, PanelPosition } from '@reactflow/core'; export type GetMiniMapNodeAttribute = (node: Node) => string; -export interface MiniMapProps extends HTMLAttributes { +export type MiniMapProps = HTMLAttributes & { nodeColor?: string | GetMiniMapNodeAttribute; nodeStrokeColor?: string | GetMiniMapNodeAttribute; nodeClassName?: string | GetMiniMapNodeAttribute; @@ -12,4 +12,4 @@ export interface MiniMapProps extends HTMLAttributes Date: Fri, 21 Oct 2022 12:05:25 +0200 Subject: [PATCH 40/43] fix(onlyRenderVisibleElements): always render nodes with dragging=true closes #2444 --- packages/core/src/utils/graph.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index b07db923..123fd13e 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -188,7 +188,7 @@ export const getNodesInside = ( const area = (width || 0) * (height || 0); const isVisible = notInitialized || partiallyVisible || overlappingArea >= area; - if (isVisible) { + if (isVisible || node.dragging) { visibleNodes.push(node); } }); From be120ec951431d7d99ace634fbada56401c524f6 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 21 Oct 2022 12:12:02 +0200 Subject: [PATCH 41/43] chore(packages): bump versions --- packages/background/CHANGELOG.md | 9 +++++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 8 ++++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 9 +++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 8 ++++++++ packages/minimap/package.json | 2 +- packages/reactflow/CHANGELOG.md | 17 +++++++++++++++++ packages/reactflow/package.json | 2 +- 10 files changed, 56 insertions(+), 5 deletions(-) diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 6c17862e..55bb8b95 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/background +## 11.0.3 + +### Patch Changes + +- cleanup types +- cleanup rf id handling +- Updated dependencies: + - @reactflow/core@11.1.2 + ## 11.0.2 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index b29b68f0..12031de8 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.2", + "version": "11.0.3", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 3c9cadfe..1c2d37b1 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,13 @@ # @reactflow/controls +## 11.0.3 + +### Patch Changes + +- cleanup types +- Updated dependencies: + - @reactflow/core@11.1.2 + ## 11.0.2 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 41ba2490..e998486e 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.2", + "version": "11.0.3", "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 bab69527..bb040e21 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/core +## 11.1.2 + +### Patch Changes + +- make pro options acc type optional +- cleanup types +- fix rf id handling +- always render nodes when dragging=true + ## 11.1.1 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index e6550696..ea025613 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.1.1", + "version": "11.1.2", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index 06d473cf..4fd440ab 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,13 @@ # @reactflow/minimap +## 11.0.3 + +### Patch Changes + +- cleanup types +- Updated dependencies: + - @reactflow/core@11.1.2 + ## 11.0.2 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 7b1a2f39..527aab38 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.0.2", + "version": "11.0.3", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 375db7f4..4746fd88 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,22 @@ # reactflow +## 11.1.2 + +A little housekeeping release with some fixes and some cleanup for the types. + +### Patch Changes + +- make pro options acc type optional +- cleanup types +- fix rf id handling +- always render nodes when dragging=true + +- Updated dependencies: + - @reactflow/core@11.1.2 + - @reactflow/background@11.0.3 + - @reactflow/controls@11.0.3 + - @reactflow/minimap@11.0.3 + ## 11.1.1 ### Patch Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 99e4e07a..d26d4e28 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.1.1", + "version": "11.1.2", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 1e5ea41bda342d5235168b222b2e9b795d482e52 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 21 Oct 2022 12:20:23 +0200 Subject: [PATCH 42/43] fix(base-edge): dont apply animation to edge helper closes #2517 --- packages/core/src/components/Edges/BaseEdge.tsx | 10 +++++++++- packages/core/src/styles/init.css | 5 +++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index 65a9cf37..71106854 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -26,7 +26,15 @@ const BaseEdge = ({ markerEnd={markerEnd} markerStart={markerStart} /> - {interactionWidth && } + {interactionWidth && ( + + )} {label ? ( Date: Fri, 21 Oct 2022 12:22:31 +0200 Subject: [PATCH 43/43] chore(changelogs): update --- packages/core/CHANGELOG.md | 1 + packages/reactflow/CHANGELOG.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index bb040e21..7fb7463f 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -8,6 +8,7 @@ - cleanup types - fix rf id handling - always render nodes when dragging=true +- don't apply animations to helper edge ## 11.1.1 diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 4746fd88..a0d75bf3 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -2,7 +2,7 @@ ## 11.1.2 -A little housekeeping release with some fixes and some cleanup for the types. +Housekeeping release with some fixes and some cleanups for the types. ### Patch Changes @@ -10,7 +10,7 @@ A little housekeeping release with some fixes and some cleanup for the types. - cleanup types - fix rf id handling - always render nodes when dragging=true - +- don't apply animations to helper edge - Updated dependencies: - @reactflow/core@11.1.2 - @reactflow/background@11.0.3