From 806c1dfa7725d956e912c75778f5e459bd03b9c9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 11:13:33 +0100 Subject: [PATCH 01/19] feat(core): add `nodes` option to `fitView` # What's changed? - Add `nodes` option to `fitView` - Allows `fitView` to only fit around a certain set of specified nodeIds --- packages/core/src/store/utils.ts | 6 +++++- packages/core/src/types/general.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index caf860af..d7944141 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -141,7 +141,11 @@ export function fitView(get: StoreApi['getState'], options: Inte if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { - const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + let nodes: Node[] = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + + if (options.nodes?.length) { + nodes = nodes.filter((n) => options.nodes?.includes(n.id)) + } const nodesInitialized = nodes.every((n) => n.width && n.height); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 4abfa405..3c1dd4a8 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -76,6 +76,7 @@ export type FitViewOptions = { minZoom?: number; maxZoom?: number; duration?: number; + nodes?: string[]; }; export type OnConnectStartParams = { From 23424ea6750f092210f83df17a00c89adb910d96 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 11:14:27 +0100 Subject: [PATCH 02/19] chore(changeset): add --- .changeset/witty-actors-clap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-actors-clap.md diff --git a/.changeset/witty-actors-clap.md b/.changeset/witty-actors-clap.md new file mode 100644 index 00000000..29fa7498 --- /dev/null +++ b/.changeset/witty-actors-clap.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Add `nodes` to fit view options to allow fitting view only around specified set of nodes From 3d65627de57249d976a74b744371788c62a5b304 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 14:02:46 +0100 Subject: [PATCH 03/19] chore(core): cleanup node filter fn --- packages/core/src/store/utils.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index d7944141..0023db71 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -141,11 +141,16 @@ export function fitView(get: StoreApi['getState'], options: Inte if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { - let nodes: Node[] = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + const nodes = getNodes().filter((n) => { + const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden); + let shouldInclude = true; - if (options.nodes?.length) { - nodes = nodes.filter((n) => options.nodes?.includes(n.id)) - } + if (options.nodes?.length) { + shouldInclude = options.nodes.includes(n.id); + } + + return isVisible && shouldInclude; + }); const nodesInitialized = nodes.every((n) => n.width && n.height); From 54509aa5629a7e11913bb29d74ee2f6c6ec9cc83 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:58:24 +0100 Subject: [PATCH 04/19] fix(core): avoid edge update if not using left mouse btn --- packages/core/src/components/Edges/wrapEdge.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index d53044f7..80a6be7d 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -89,6 +89,11 @@ export default (EdgeComponent: ComponentType) => { const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave); const handleEdgeUpdater = (event: React.MouseEvent, isSourceHandle: boolean) => { + // avoid triggering edge updater if mouse btn is not left + if (event.button !== 0) { + return; + } + const nodeId = isSourceHandle ? target : source; const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null; const handleType = isSourceHandle ? 'target' : 'source'; From 0d259b028558aab650546f3371a85f3bce45252f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:59:07 +0100 Subject: [PATCH 05/19] chore(changeset): add --- .changeset/gold-pans-appear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-pans-appear.md diff --git a/.changeset/gold-pans-appear.md b/.changeset/gold-pans-appear.md new file mode 100644 index 00000000..fd5b5c79 --- /dev/null +++ b/.changeset/gold-pans-appear.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Avoid triggering edge update if not using left mouse button From 64c7887a0ec210d5deef4823120fecd0eb71170b Mon Sep 17 00:00:00 2001 From: Totoro-moroku Date: Wed, 8 Feb 2023 21:57:41 +0900 Subject: [PATCH 06/19] typescript: fitView return type #2823 --- packages/core/src/types/general.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 4abfa405..d9808e57 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent }; export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent> }; -export type FitView = (fitViewOptions?: FitViewOptions) => void; +export type FitView = (fitViewOptions?: FitViewOptions) => boolean; export type Project = (position: XYPosition) => XYPosition; From c180527239ef6fbf76c40f1740b55055395c8d6a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:17:43 +0100 Subject: [PATCH 07/19] chore(fitview): cleanup --- packages/core/src/hooks/useViewportHelper.ts | 6 +-- packages/core/src/store/utils.ts | 44 ++++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index ef151aa3..522d6ac8 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow'; import { useStoreApi, useStore } from '../hooks/useStore'; import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph'; -import { fitView as fitViewStore } from '../store/utils'; +import { fitView } from '../store/utils'; import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -17,7 +17,7 @@ const initialViewportHelper: ViewportHelperFunctions = { getZoom: () => 1, setViewport: noop, getViewport: () => ({ x: 0, y: 0, zoom: 1 }), - fitView: noop, + fitView: () => false, setCenter: noop, fitBounds: noop, project: (position: XYPosition) => position, @@ -51,7 +51,7 @@ const useViewportHelper = (): ViewportHelperFunctions => { const [x, y, zoom] = store.getState().transform; return { x, y, zoom }; }, - fitView: (options) => fitViewStore(store.getState, options), + fitView: (options) => fitView(store.getState, options), setCenter: (x, y, options) => { const { width, height, maxZoom } = store.getState(); const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom; diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index caf860af..6be6bae7 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -138,35 +138,35 @@ export function fitView(get: StoreApi['getState'], options: Inte fitViewOnInit, nodeOrigin, } = get(); + const isInitialFitView = options.initial && !fitViewOnInitDone && fitViewOnInit; + const d3initialized = d3Zoom && d3Selection; - if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { - if (d3Zoom && d3Selection) { - const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + if (d3initialized && (isInitialFitView || !options.initial)) { + const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); - const nodesInitialized = nodes.every((n) => n.width && n.height); + const nodesInitialized = nodes.every((n) => n.width && n.height); - if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes, nodeOrigin); + if (nodes.length > 0 && nodesInitialized) { + const bounds = getRectOfNodes(nodes, nodeOrigin); - const [x, y, zoom] = getTransformForBounds( - bounds, - width, - height, - options.minZoom ?? minZoom, - options.maxZoom ?? maxZoom, - options.padding ?? 0.1 - ); + const [x, y, zoom] = getTransformForBounds( + bounds, + width, + height, + options.minZoom ?? minZoom, + options.maxZoom ?? maxZoom, + options.padding ?? 0.1 + ); - const nextTransform = zoomIdentity.translate(x, y).scale(zoom); + const nextTransform = zoomIdentity.translate(x, y).scale(zoom); - if (typeof options.duration === 'number' && options.duration > 0) { - d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform); - } else { - d3Zoom.transform(d3Selection, nextTransform); - } - - return true; + if (typeof options.duration === 'number' && options.duration > 0) { + d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform); + } else { + d3Zoom.transform(d3Selection, nextTransform); } + + return true; } } From f3de9335af6cd96cd77dc77f24a944eef85384e5 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:18:37 +0100 Subject: [PATCH 08/19] chore(changeset): add --- .changeset/perfect-meals-confess.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-meals-confess.md diff --git a/.changeset/perfect-meals-confess.md b/.changeset/perfect-meals-confess.md new file mode 100644 index 00000000..152ecf8a --- /dev/null +++ b/.changeset/perfect-meals-confess.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fitView: return type boolean From a501f9a6436d2d95e86b1dd3b98d8a788844dafa Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:42:22 +0100 Subject: [PATCH 09/19] refactor(fitview-nodes): cleanup --- .../vite-app/src/examples/Layouting/index.tsx | 53 ++++++++++--------- .../examples/Layouting/layouting.module.css | 7 --- packages/core/src/store/utils.ts | 7 ++- packages/core/src/types/general.ts | 2 +- 4 files changed, 32 insertions(+), 37 deletions(-) diff --git a/examples/vite-app/src/examples/Layouting/index.tsx b/examples/vite-app/src/examples/Layouting/index.tsx index 6e607551..9a9ed122 100644 --- a/examples/vite-app/src/examples/Layouting/index.tsx +++ b/examples/vite-app/src/examples/Layouting/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import ReactFlow, { Controls, ReactFlowProvider, @@ -10,6 +10,8 @@ import ReactFlow, { useEdgesState, MarkerType, EdgeMarker, + Panel, + useReactFlow, } from 'reactflow'; import dagre from 'dagre'; @@ -29,6 +31,7 @@ const nodeExtent: CoordinateExtent = [ const LayoutFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges); + const { fitView } = useReactFlow(); const onConnect = useCallback( (connection: Connection) => { @@ -85,31 +88,31 @@ const LayoutFlow = () => { return (
- - onLayout('TB')} - onNodesChange={onNodesChange} - onEdgesChange={onEdgesChange} - > - - -
- - - - -
- + onLayout('TB')} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChange} + > + + + + + + + + + +
); }; -export default LayoutFlow; +export default () => ( + + + +); diff --git a/examples/vite-app/src/examples/Layouting/layouting.module.css b/examples/vite-app/src/examples/Layouting/layouting.module.css index b22c5ad9..28a4b5e6 100644 --- a/examples/vite-app/src/examples/Layouting/layouting.module.css +++ b/examples/vite-app/src/examples/Layouting/layouting.module.css @@ -2,10 +2,3 @@ flex-grow: 1; position: relative; } - -.controls { - position: absolute; - right: 10px; - top: 10px; - z-index: 10; -} diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 9b5a4228..994fbf20 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -143,14 +143,13 @@ export function fitView(get: StoreApi['getState'], options: Inte if (d3initialized && (isInitialFitView || !options.initial)) { const nodes = getNodes().filter((n) => { - const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden); - let shouldInclude = true; + const isVisible = options.includeHiddenNodes ? n.width && n.height : !n.hidden; if (options.nodes?.length) { - shouldInclude = options.nodes.includes(n.id); + return isVisible && options.nodes.some((optionNode) => optionNode.id === n.id); } - return isVisible && shouldInclude; + return isVisible; }); const nodesInitialized = nodes.every((n) => n.width && n.height); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index bf9a779f..f628727e 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -76,7 +76,7 @@ export type FitViewOptions = { minZoom?: number; maxZoom?: number; duration?: number; - nodes?: string[]; + nodes?: (Partial & { id: Node['id'] })[]; }; export type OnConnectStartParams = { From 9bc76d19bb41cde4556e14a8a34538983fb73f30 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:03:11 +0100 Subject: [PATCH 10/19] fix(connections): fix connections with handles bigger than connec radius closes #2814 --- .../core/src/components/Handle/handler.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index caed0dd3..46cc64e9 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -67,6 +67,7 @@ export function handlePointerDown({ let autoPanStarted = false; let connection: Connection | null = null; let isValid = false; + let handleDomNode: Element | null = null; const handleLookup = getHandleLookup({ nodes: getNodes(), @@ -111,7 +112,7 @@ export function handlePointerDown({ autoPanStarted = true; } - const { handleDomNode, ...result } = isValidHandle( + const result = isValidHandle( event, prevClosestHandle, connectionMode, @@ -122,9 +123,13 @@ export function handlePointerDown({ doc ); + handleDomNode = result.handleDomNode; + connection = result.connection; + isValid = result.isValid; + setState({ connectionPosition: - prevClosestHandle && result.isValid + prevClosestHandle && isValid ? rendererPointToPoint( { x: prevClosestHandle.x, @@ -133,16 +138,13 @@ export function handlePointerDown({ transform ) : connectionPosition, - connectionStatus: getConnectionStatus(!!prevClosestHandle, result.isValid), + connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid), }); - if (!prevClosestHandle && !result.isValid) { + if (!prevClosestHandle && !isValid && !handleDomNode) { return resetRecentHandle(prevActiveHandle); } - connection = result.connection; - isValid = result.isValid; - if (connection.source !== connection.target && handleDomNode) { resetRecentHandle(prevActiveHandle); prevActiveHandle = handleDomNode; @@ -154,7 +156,7 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (prevClosestHandle && connection && isValid) { + if ((prevClosestHandle || handleDomNode) && connection && isValid) { onConnect?.(connection); } @@ -172,6 +174,7 @@ export function handlePointerDown({ autoPanStarted = false; isValid = false; connection = null; + handleDomNode = null; doc.removeEventListener('mousemove', onPointerMove as EventListener); doc.removeEventListener('mouseup', onPointerUp as EventListener); From 959b111448bba4686040473e46988be9e7befbe6 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:04:38 +0100 Subject: [PATCH 11/19] chore(changeset): add --- .changeset/four-dancers-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-dancers-call.md diff --git a/.changeset/four-dancers-call.md b/.changeset/four-dancers-call.md new file mode 100644 index 00000000..08058951 --- /dev/null +++ b/.changeset/four-dancers-call.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Fix: connections for handles with bigger handles than connection radius From 0dc307769f824d733cf2ce09faa35fe28bbdd595 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:16:24 +0100 Subject: [PATCH 12/19] refactor(safari): no user selection for edge label renderer --- packages/core/src/styles/init.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index 9cecc294..790dcaff 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -230,4 +230,5 @@ width: 100%; height: 100%; pointer-events: none; + user-select: none; } From 7e6f5be656bbf5297097d55b9f401587923e68c0 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:48:26 +0100 Subject: [PATCH 13/19] refactor(use-key-press): handle modifier keys + inputs --- packages/core/src/utils/index.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index f1021bfb..2d801d05 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -103,17 +103,12 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole // using composed path for handling shadow dom const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); // we want to be able to do a multi selection event if we are in an input field - if (event.ctrlKey || event.metaKey || event.shiftKey) { - return false; - } + const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey; // when an input field is focused we don't want to trigger deletion or movement of nodes - return ( - ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || - target?.hasAttribute('contenteditable') || - !!target?.closest('.nokey') - ); + return (isInput && !isModifierKey) || !!target?.closest('.nokey'); } export const isMouseEvent = ( From 021f5a9210f47a968e50446cd2f9dae1f97880a4 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:49:54 +0100 Subject: [PATCH 14/19] chore(changeset): add --- .changeset/witty-eagles-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-eagles-type.md diff --git a/.changeset/witty-eagles-type.md b/.changeset/witty-eagles-type.md new file mode 100644 index 00000000..36b86d8f --- /dev/null +++ b/.changeset/witty-eagles-type.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +refactor: use key press handle modifier keys + input From 0ad8333834c23a452a89c8601aaf9e4434dce7dd Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 15:33:57 +0100 Subject: [PATCH 15/19] chore(examples): cleanup --- examples/vite-app/package.json | 1 + .../src/examples/Backgrounds/index.tsx | 2 +- .../vite-app/src/examples/Basic/index.tsx | 4 +-- .../examples/CustomConnectionLine/index.tsx | 2 +- .../src/examples/CustomNode/index.tsx | 2 +- .../src/examples/DefaultNodes/index.tsx | 26 ++++++++++--------- .../src/examples/DragHandle/index.tsx | 2 +- .../src/examples/DragNDrop/Sidebar.tsx | 17 +++++------- .../vite-app/src/examples/DragNDrop/index.tsx | 2 +- .../src/examples/EdgeRenderer/index.tsx | 2 +- .../vite-app/src/examples/EdgeTypes/index.tsx | 5 +--- .../vite-app/src/examples/Edges/index.tsx | 2 +- .../vite-app/src/examples/Empty/index.tsx | 2 +- .../src/examples/FloatingEdges/index.tsx | 2 +- .../vite-app/src/examples/Hidden/index.tsx | 2 +- .../src/examples/Interaction/index.tsx | 2 +- .../vite-app/src/examples/Layouting/index.tsx | 3 +-- .../src/examples/MultiFlows/index.tsx | 2 +- .../src/examples/NestedNodes/index.tsx | 2 +- .../src/examples/NodeTypeChange/index.tsx | 3 +-- .../examples/NodeTypesObjectChange/index.tsx | 2 +- .../vite-app/src/examples/Overview/index.tsx | 2 +- .../vite-app/src/examples/Provider/index.tsx | 2 +- .../src/examples/SaveRestore/index.tsx | 3 ++- .../vite-app/src/examples/Stress/index.tsx | 2 +- .../vite-app/src/examples/Subflow/index.tsx | 3 +-- .../src/examples/TouchDevice/index.tsx | 2 +- .../src/examples/Undirectional/index.tsx | 11 ++++---- .../src/examples/UpdatableEdge/index.tsx | 10 +++---- .../src/examples/UpdateNode/index.tsx | 2 +- .../src/examples/UseReactFlow/index.tsx | 19 +++++++------- pnpm-lock.yaml | 8 ++++++ 32 files changed, 76 insertions(+), 75 deletions(-) diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 2fecdc49..7a87f510 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -25,6 +25,7 @@ }, "devDependencies": { "@cypress/skip-test": "^2.6.1", + "@types/dagre": "^0.7.48", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^3.0.1", diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx index bda36161..c7783b00 100644 --- a/examples/vite-app/src/examples/Backgrounds/index.tsx +++ b/examples/vite-app/src/examples/Backgrounds/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import ReactFlow, { Node, diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 67bbc0fd..970aac57 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent } from 'react'; +import { MouseEvent } from 'react'; import ReactFlow, { MiniMap, Background, @@ -8,7 +8,6 @@ import ReactFlow, { Node, Edge, useReactFlow, - NodeOrigin, } from 'reactflow'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); @@ -22,7 +21,6 @@ const initialNodes: Node[] = [ data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light', - draggable: false, }, { id: '2', diff --git a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx index e2cb53e8..669ec17b 100644 --- a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx +++ b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import ReactFlow, { Node, addEdge, diff --git a/examples/vite-app/src/examples/CustomNode/index.tsx b/examples/vite-app/src/examples/CustomNode/index.tsx index 92553087..27fab297 100644 --- a/examples/vite-app/src/examples/CustomNode/index.tsx +++ b/examples/vite-app/src/examples/CustomNode/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; +import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; import ReactFlow, { MiniMap, Controls, diff --git a/examples/vite-app/src/examples/DefaultNodes/index.tsx b/examples/vite-app/src/examples/DefaultNodes/index.tsx index 7590f8b9..affd4ce7 100644 --- a/examples/vite-app/src/examples/DefaultNodes/index.tsx +++ b/examples/vite-app/src/examples/DefaultNodes/index.tsx @@ -1,4 +1,12 @@ -import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; +import ReactFlow, { + useReactFlow, + Node, + Edge, + ReactFlowProvider, + Background, + BackgroundVariant, + Panel, +} from 'reactflow'; const defaultNodes: Node[] = [ { @@ -72,18 +80,12 @@ const DefaultNodes = () => { -
- - - + + + + -
+ ); }; diff --git a/examples/vite-app/src/examples/DragHandle/index.tsx b/examples/vite-app/src/examples/DragHandle/index.tsx index b0f87e94..8e6bbf98 100644 --- a/examples/vite-app/src/examples/DragHandle/index.tsx +++ b/examples/vite-app/src/examples/DragHandle/index.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent } from 'react'; +import { MouseEvent } from 'react'; import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; import DragHandleNode from './DragHandleNode'; diff --git a/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx b/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx index 76147544..fc1eec3b 100644 --- a/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx +++ b/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx @@ -1,4 +1,5 @@ -import React, { DragEvent } from 'react'; +import { DragEvent } from 'react'; + import styles from './dnd.module.css'; const onDragStart = (event: DragEvent, nodeType: string) => { @@ -9,25 +10,19 @@ const onDragStart = (event: DragEvent, nodeType: string) => { const Sidebar = () => { return (