From 685ff76ee8033a70400b1116a44db225a5c94a57 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 14:25:04 +0100 Subject: [PATCH 01/63] feat: add a selectBoxOnDrag prop which allows select box to be triggered without an additional key press. --- .../core/src/container/FlowRenderer/index.tsx | 4 ++-- .../core/src/container/GraphView/index.tsx | 2 ++ .../core/src/container/ReactFlow/index.tsx | 2 ++ .../core/src/container/ZoomPane/index.tsx | 20 +++++++++++-------- packages/core/src/types/component-props.ts | 1 + 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index e3faed9c..fda81982 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -44,6 +44,7 @@ const FlowRenderer = ({ onMoveStart, onMoveEnd, selectionKeyCode, + selectBoxOnDrag, multiSelectionKeyCode, zoomActivationKeyCode, elementsSelectable, @@ -84,7 +85,6 @@ const FlowRenderer = ({ onMove={onMove} onMoveStart={onMoveStart} onMoveEnd={onMoveEnd} - selectionKeyPressed={selectionKeyPressed} elementsSelectable={elementsSelectable} zoomOnScroll={zoomOnScroll} zoomOnPinch={zoomOnPinch} @@ -103,7 +103,7 @@ const FlowRenderer = ({ noPanClassName={noPanClassName} > {children} - + {nodesSelectionActive && ( ( connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', + selectBoxOnDrag = false, multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -193,6 +194,7 @@ const ReactFlow = forwardRef( connectionLineComponent={connectionLineComponent} connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} + selectBoxOnDrag={selectBoxOnDrag} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index a5783a7a..fce3a35f 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -16,8 +16,13 @@ import type { Viewport, ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< FlowRendererProps, - 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y' -> & { selectionKeyPressed: boolean }; + | 'deleteKeyCode' + | 'selectionKeyCode' + | 'multiSelectionKeyCode' + | 'noDragClassName' + | 'disableKeyboardA11y' + | 'selectBoxOnDrag' +>; const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean => prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k; @@ -46,7 +51,6 @@ const ZoomPane = ({ panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, - selectionKeyPressed, elementsSelectable, panOnDrag = true, defaultViewport, @@ -151,9 +155,9 @@ const ZoomPane = ({ useEffect(() => { if (d3Zoom) { - if (selectionKeyPressed && !isZoomingOrPanning.current) { + if (store.getState().userSelectionActive && !isZoomingOrPanning.current) { d3Zoom.on('zoom', null); - } else if (!selectionKeyPressed) { + } else if (!store.getState().userSelectionActive) { d3Zoom.on('zoom', (event: D3ZoomEvent) => { const { onViewportChange } = store.getState(); @@ -168,7 +172,7 @@ const ZoomPane = ({ }); } } - }, [selectionKeyPressed, d3Zoom, onMove]); + }, [store, d3Zoom, onMove]); useEffect(() => { if (d3Zoom) { @@ -238,7 +242,7 @@ const ZoomPane = ({ } // during a selection we prevent all other interactions - if (selectionKeyPressed) { + if (store.getState().userSelectionActive) { return false; } @@ -276,13 +280,13 @@ const ZoomPane = ({ }); } }, [ + store, d3Zoom, zoomOnScroll, zoomOnPinch, panOnScroll, zoomOnDoubleClick, panOnDrag, - selectionKeyPressed, elementsSelectable, zoomActivationKeyPressed, ]); diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 9b273641..456122ce 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -94,6 +94,7 @@ export type ReactFlowProps = HTMLAttributes & { connectionMode?: ConnectionMode; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; + selectBoxOnDrag?: boolean; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; From 33e730d7b4a6030bbdd8bb6a72054e017f77714b Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 14:55:49 +0100 Subject: [PATCH 02/63] bug fix: make sure we actually update event handlers when selection begins. --- packages/core/src/container/ZoomPane/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index fce3a35f..c3ec9198 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -39,6 +39,7 @@ const selector = (s: ReactFlowState) => ({ d3Zoom: s.d3Zoom, d3Selection: s.d3Selection, d3ZoomHandler: s.d3ZoomHandler, + userSelectionActive: s.userSelectionActive, }); const ZoomPane = ({ @@ -68,7 +69,7 @@ const ZoomPane = ({ const isZoomingOrPanning = useRef(false); const zoomPane = useRef(null); const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); - const { d3Zoom, d3Selection, d3ZoomHandler } = useStore(selector, shallow); + const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); useResizeHandler(zoomPane); @@ -155,9 +156,9 @@ const ZoomPane = ({ useEffect(() => { if (d3Zoom) { - if (store.getState().userSelectionActive && !isZoomingOrPanning.current) { + if (userSelectionActive && !isZoomingOrPanning.current) { d3Zoom.on('zoom', null); - } else if (!store.getState().userSelectionActive) { + } else if (!userSelectionActive) { d3Zoom.on('zoom', (event: D3ZoomEvent) => { const { onViewportChange } = store.getState(); @@ -172,7 +173,7 @@ const ZoomPane = ({ }); } } - }, [store, d3Zoom, onMove]); + }, [userSelectionActive, d3Zoom, onMove]); useEffect(() => { if (d3Zoom) { @@ -242,7 +243,7 @@ const ZoomPane = ({ } // during a selection we prevent all other interactions - if (store.getState().userSelectionActive) { + if (userSelectionActive) { return false; } @@ -280,7 +281,7 @@ const ZoomPane = ({ }); } }, [ - store, + userSelectionActive, d3Zoom, zoomOnScroll, zoomOnPinch, From 707ee19875b35bec410ed93b3863a64396aa4459 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 15:02:40 +0100 Subject: [PATCH 03/63] feat: block pan on scroll if we are making a selection. --- packages/core/src/container/ZoomPane/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index c3ec9198..c8050821 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -99,7 +99,7 @@ const ZoomPane = ({ useEffect(() => { if (d3Selection && d3Zoom) { - if (panOnScroll && !zoomActivationKeyPressed) { + if (panOnScroll && !zoomActivationKeyPressed && !userSelectionActive) { d3Selection.on('wheel.zoom', (event: any) => { if (isWrappedWithClass(event, noWheelClassName)) { return false; @@ -143,6 +143,7 @@ const ZoomPane = ({ } } }, [ + userSelectionActive, panOnScroll, panOnScrollMode, d3Selection, From da08e69e789af3e6f698d06e3a63139ac555d6a4 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 15:35:28 +0100 Subject: [PATCH 04/63] feat: condense user selection into pane. --- .../src/components/UserSelection/index.tsx | 16 +++++++++---- .../core/src/container/FlowRenderer/index.tsx | 23 ++++++++++--------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index cbf1e830..b39f10ab 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -18,6 +18,10 @@ type SelectionRect = Rect & { type UserSelectionProps = { selectionKeyPressed: boolean; + onClick?: (e: React.MouseEvent) => void; + onContextMenu?: (e: React.MouseEvent) => void; + onWheel?: (e: React.WheelEvent) => void; + children: React.ReactNode; }; function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XYPosition { @@ -42,7 +46,7 @@ const initialRect: SelectionRect = { draw: false, }; -const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { +const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { const store = useStoreApi(); const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); @@ -80,8 +84,6 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { y: mousePos.y, draw: true, }); - - store.setState({ userSelectionActive: true, nodesSelectionActive: false }); }; const onMouseMove = (event: React.MouseEvent): void => { @@ -89,6 +91,8 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { return; } + store.setState({ userSelectionActive: true, nodesSelectionActive: false }); + const mousePos = getMousePosition(event, containerBounds.current!); const startX = userSelectionRect.startX ?? 0; const startY = userSelectionRect.startY ?? 0; @@ -138,12 +142,16 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { return (
+ {children} {userSelectionRect.draw && (
- {children} - - {nodesSelectionActive && ( - - )} - + selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)} + > + {children} + {nodesSelectionActive && ( + + )} + ); }; From 45c407755f184c877739e45fed3fc0b5abee5535 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 16:06:24 +0100 Subject: [PATCH 05/63] feat: only click when not moved. --- packages/core/src/components/UserSelection/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index b39f10ab..65cb1d2d 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -130,8 +130,13 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe setUserSelectionRect(nextUserSelectRect); }; - const onMouseUp = () => { + const onMouseUp = (event: React.MouseEvent) => { store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + + if (!store.getState().userSelectionActive) { + onClick?.(event); + } + resetUserSelection(); }; @@ -147,7 +152,6 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} - onClick={onClick} onContextMenu={onContextMenu} onWheel={onWheel} > From 55811169da88ed740aef1fb2d854dc5065e0de80 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Fri, 23 Sep 2022 19:24:14 +0100 Subject: [PATCH 06/63] feat: handle selection mode properly. Up z-index for selection box. --- .../core/src/components/Nodes/wrapNode.tsx | 2 + .../src/components/UserSelection/index.tsx | 64 ++++++++----------- .../core/src/container/FlowRenderer/index.tsx | 6 +- packages/core/src/styles/init.css | 4 ++ 4 files changed, 38 insertions(+), 38 deletions(-) diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index afb1f761..1150c85d 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -81,6 +81,8 @@ export default (NodeComponent: ComponentType) => { const node = store.getState().nodeInternals.get(id)!; onClick(event, { ...node }); } + + event.stopPropagation(); }; const onKeyDown = (event: KeyboardEvent) => { diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 65cb1d2d..d0aed2da 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -13,7 +13,6 @@ import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '. type SelectionRect = Rect & { startX: number; startY: number; - draw: boolean; }; type UserSelectionProps = { @@ -36,32 +35,16 @@ const selector = (s: ReactFlowState) => ({ elementsSelectable: s.elementsSelectable, }); -const initialRect: SelectionRect = { - startX: 0, - startY: 0, - x: 0, - y: 0, - width: 0, - height: 0, - draw: false, -}; - const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { const store = useStoreApi(); const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); const containerBounds = useRef(); - const [userSelectionRect, setUserSelectionRect] = useState(initialRect); + const [userSelectionRect, setUserSelectionRect] = useState(null); const { userSelectionActive, elementsSelectable } = useStore(selector, shallow); - const renderUserSelectionPane = userSelectionActive || selectionKeyPressed; - - if (!elementsSelectable || !renderUserSelectionPane) { - return null; - } - const resetUserSelection = () => { - setUserSelectionRect(initialRect); + setUserSelectionRect(null); store.setState({ userSelectionActive: false }); @@ -70,6 +53,10 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe }; const onMouseDown = (event: React.MouseEvent): void => { + if (!elementsSelectable || !selectionKeyPressed || event.button !== 0) { + return; + } + const reactFlowNode = (event.target as Element).closest('.react-flow')!; containerBounds.current = reactFlowNode.getBoundingClientRect(); @@ -82,12 +69,11 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe startY: mousePos.y, x: mousePos.x, y: mousePos.y, - draw: true, }); }; const onMouseMove = (event: React.MouseEvent): void => { - if (!selectionKeyPressed || !userSelectionRect.draw || !containerBounds.current) { + if (!selectionKeyPressed || !containerBounds.current || !userSelectionRect) { return; } @@ -103,6 +89,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe y: mousePos.y < startY ? mousePos.y : startY, width: Math.abs(mousePos.x - startX), height: Math.abs(mousePos.y - startY), + draw: true, }; const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); @@ -130,13 +117,9 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe setUserSelectionRect(nextUserSelectRect); }; - const onMouseUp = (event: React.MouseEvent) => { + const onMouseUp = () => { store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - if (!store.getState().userSelectionActive) { - onClick?.(event); - } - resetUserSelection(); }; @@ -145,18 +128,27 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe resetUserSelection(); }; + const eventHandlers = + elementsSelectable && (selectionKeyPressed || userSelectionActive) + ? { + onClick, + onContextMenu, + onWheel, + onMouseDown, + onMouseMove, + onMouseUp, + onMouseLeave, + } + : { + onClick, + onContextMenu, + onWheel, + }; + return ( -
+
{children} - {userSelectionRect.draw && ( + {userSelectionActive && userSelectionRect && (
{ @@ -92,7 +94,7 @@ const FlowRenderer = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} - panOnDrag={panOnDrag} + panOnDrag={panOnDrag && !isSelectionMode} defaultViewport={defaultViewport} translateExtent={translateExtent} minZoom={minZoom} @@ -109,7 +111,7 @@ const FlowRenderer = ({ onMouseLeave={onPaneMouseLeave} onContextMenu={onContextMenu} onWheel={onWheel} - selectionKeyPressed={selectionKeyPressed || (selectBoxOnDrag && !panOnDrag)} + selectionKeyPressed={isSelectionMode} > {children} {nodesSelectionActive && ( diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index a500c17d..6f4c25e8 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -30,6 +30,10 @@ z-index: 5; } +.react-flow__selection { + z-index: 6; +} + .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible { outline: none; From 3169589fbc49fdd2d5e8175811844e44c38433fa Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 15:08:51 +0100 Subject: [PATCH 07/63] feat: make sure 'panOnDrag' overrides 'selectBoxOnDrag'. --- packages/core/src/components/UserSelection/index.tsx | 10 +++++----- packages/core/src/container/FlowRenderer/index.tsx | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index d0aed2da..e6435cd4 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -16,7 +16,7 @@ type SelectionRect = Rect & { }; type UserSelectionProps = { - selectionKeyPressed: boolean; + isSelectionMode: boolean; onClick?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void; onWheel?: (e: React.WheelEvent) => void; @@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({ elementsSelectable: s.elementsSelectable, }); -const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { +const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { const store = useStoreApi(); const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); @@ -53,7 +53,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe }; const onMouseDown = (event: React.MouseEvent): void => { - if (!elementsSelectable || !selectionKeyPressed || event.button !== 0) { + if (!elementsSelectable || !isSelectionMode || event.button !== 0) { return; } @@ -73,7 +73,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe }; const onMouseMove = (event: React.MouseEvent): void => { - if (!selectionKeyPressed || !containerBounds.current || !userSelectionRect) { + if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { return; } @@ -129,7 +129,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe }; const eventHandlers = - elementsSelectable && (selectionKeyPressed || userSelectionActive) + elementsSelectable && (isSelectionMode || userSelectionActive) ? { onClick, onContextMenu, diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 5adc4d48..372fe762 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -69,7 +69,7 @@ const FlowRenderer = ({ const nodesSelectionActive = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); - const isSelectionMode = selectionKeyPressed || selectBoxOnDrag; + const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && !panOnDrag); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -94,7 +94,7 @@ const FlowRenderer = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} - panOnDrag={panOnDrag && !isSelectionMode} + panOnDrag={panOnDrag} defaultViewport={defaultViewport} translateExtent={translateExtent} minZoom={minZoom} @@ -111,7 +111,7 @@ const FlowRenderer = ({ onMouseLeave={onPaneMouseLeave} onContextMenu={onContextMenu} onWheel={onWheel} - selectionKeyPressed={isSelectionMode} + isSelectionMode={isSelectionMode} > {children} {nodesSelectionActive && ( From 920136b807b786b58b58aa46f3459d4895315953 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 15:09:22 +0100 Subject: [PATCH 08/63] feat: add a Figma example. --- examples/vite-app/src/App/index.tsx | 6 ++ .../vite-app/src/examples/Figma/index.tsx | 97 +++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 examples/vite-app/src/examples/Figma/index.tsx diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 5b596f48..8e46f457 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -13,6 +13,7 @@ import Edges from '../examples/Edges'; import EdgeRenderer from '../examples/EdgeRenderer'; import EdgeTypes from '../examples/EdgeTypes'; import Empty from '../examples/Empty'; +import Figma from '../examples/Figma'; import FloatingEdges from '../examples/FloatingEdges'; import Hidden from '../examples/Hidden'; import Interaction from '../examples/Interaction'; @@ -119,6 +120,11 @@ const routes: IRoute[] = [ path: '/empty', component: Empty, }, + { + name: 'Figma', + path: '/figma', + component: Figma, + }, { name: 'Floating Edges', path: '/floating-edges', diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx new file mode 100644 index 00000000..3c19af29 --- /dev/null +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -0,0 +1,97 @@ +import ReactFlow, { + ReactFlowProvider, + Background, + BackgroundVariant, + Node, + Edge, + useReactFlow, + useKeyPress, +} from 'react-flow-renderer'; + +const MULTI_SELECT_KEY = ['Meta', 'Shift']; + +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' }, +]; + +const initialEdges: Edge[] = [ + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, +]; + +const defaultEdgeOptions = { zIndex: 0 }; + +const BasicFlow = () => { + const instance = useReactFlow(); + const spaceBarPressed = useKeyPress('Space'); + + const updatePos = () => { + instance.setNodes((nodes) => + nodes.map((node) => { + node.position = { + x: Math.random() * 400, + y: Math.random() * 400, + }; + + return node; + }) + ); + }; + + const logToObject = () => console.log(instance.toObject()); + const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 }); + + const toggleClassnames = () => { + instance.setNodes((nodes) => + nodes.map((node) => { + node.className = node.className === 'light' ? 'dark' : 'light'; + + return node; + }) + ); + }; + + return ( + + + +
+ + + + +
+ + ); +}; + +export default function App() { + return ( + + + + ); +} From b65cc1229de124b729b519e406b818f306a0127e Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 16:07:45 +0100 Subject: [PATCH 09/63] feat: add option for right click movement. --- packages/core/src/container/FlowRenderer/index.tsx | 10 ++++++++-- packages/core/src/container/ZoomPane/index.tsx | 14 +++++++++++++- packages/core/src/types/component-props.ts | 2 +- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 372fe762..8956bc0c 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -69,7 +69,7 @@ const FlowRenderer = ({ const nodesSelectionActive = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); - const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && !panOnDrag); + const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -79,7 +79,13 @@ const FlowRenderer = ({ store.setState({ nodesSelectionActive: false }); }; - const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined; + const onContextMenu = (event: MouseEvent) => { + onPaneContextMenu?.(event); + + if (panOnDrag === 'RightClick') { + event.preventDefault(); + } + }; const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined; return ( diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index c8050821..76547725 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -277,8 +277,20 @@ const ZoomPane = ({ return false; } + // if the pane is only movable using right clicks, prevent all other clicks + if ( + panOnDrag === 'RightClick' && + (event.type === 'mousedown' || event.type === 'touchstart') && + event.button !== 2 + ) { + return false; + } + + // We only allow right clicks if pan on drag is set to right click + const buttonAllowed = panOnDrag === 'RightClick' ? 1 !== event.button : !event.button || event.button <= 1; + // default filter for d3-zoom - return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1); + return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed; }); } }, [ diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 456122ce..9cf390a7 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -108,7 +108,7 @@ export type ReactFlowProps = HTMLAttributes & { initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; - panOnDrag?: boolean; + panOnDrag?: boolean | 'RightClick'; minZoom?: number; maxZoom?: number; defaultViewport?: Viewport; From 86a0d7b5bab1e2ce3d1617ca75a4a5f028434623 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 16:08:02 +0100 Subject: [PATCH 10/63] feat: update the example --- examples/vite-app/src/examples/Figma/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 3c19af29..8330b936 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -59,7 +59,7 @@ const BasicFlow = () => { defaultNodes={initialNodes} defaultEdges={initialEdges} selectBoxOnDrag - panOnDrag={spaceBarPressed} + panOnDrag={spaceBarPressed ? true : 'RightClick'} panOnScroll zoomActivationKeyCode={'Meta'} multiSelectionKeyCode={MULTI_SELECT_KEY} From 00282c2cb49353f80f41b1bc646ec2a37cbbd2cd Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 18:09:37 +0100 Subject: [PATCH 11/63] feat: only trigger a pane 'click' if there is no movement. --- packages/core/src/components/UserSelection/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index e6435cd4..fbcc9974 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -117,7 +117,13 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, setUserSelectionRect(nextUserSelectRect); }; - const onMouseUp = () => { + const onMouseUp = (event: React.MouseEvent) => { + // We only want to trigger click functions when in selection mode if + // the user did not move the mouse. + if (!userSelectionActive && userSelectionRect) { + onClick?.(event); + } + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); resetUserSelection(); @@ -131,7 +137,6 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, const eventHandlers = elementsSelectable && (isSelectionMode || userSelectionActive) ? { - onClick, onContextMenu, onWheel, onMouseDown, From 3969544fdfa20d8bdc7ba6e55a16e783140f984f Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Mon, 26 Sep 2022 18:21:32 +0100 Subject: [PATCH 12/63] feat: do not clear the selection when you mouse out. --- packages/core/src/components/UserSelection/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index fbcc9974..00c744f1 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -130,7 +130,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseLeave = () => { - store.setState({ nodesSelectionActive: false }); + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); resetUserSelection(); }; From e22938b49f6e61522671eb43155dd52b09fcb547 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 10:22:00 +0100 Subject: [PATCH 13/63] feat: do not remove node selection on leave. --- packages/core/src/components/UserSelection/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 00c744f1..ebf23348 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -130,7 +130,6 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseLeave = () => { - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); resetUserSelection(); }; From a1c830c0865ac88bf88d8c441dae480f77b39e19 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 10:45:25 +0100 Subject: [PATCH 14/63] feat: make sure 'onPaneContextMenu' still works with panOnDrag = 'RightClick'. --- .../core/src/container/FlowRenderer/index.tsx | 5 +++-- .../core/src/container/ZoomPane/index.tsx | 19 +++++++++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 8956bc0c..887124cb 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -80,10 +80,10 @@ const FlowRenderer = ({ }; const onContextMenu = (event: MouseEvent) => { - onPaneContextMenu?.(event); - if (panOnDrag === 'RightClick') { event.preventDefault(); + } else { + onPaneContextMenu?.(event); } }; const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined; @@ -93,6 +93,7 @@ const FlowRenderer = ({ onMove={onMove} onMoveStart={onMoveStart} onMoveEnd={onMoveEnd} + onPaneContextMenu={onPaneContextMenu} elementsSelectable={elementsSelectable} zoomOnScroll={zoomOnScroll} zoomOnPinch={zoomOnPinch} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 76547725..5179f104 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -46,6 +46,7 @@ const ZoomPane = ({ onMove, onMoveStart, onMoveEnd, + onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, @@ -67,6 +68,7 @@ const ZoomPane = ({ const timerId = useRef>(); const store = useStoreApi(); const isZoomingOrPanning = useRef(false); + const hasMouseMoved = useRef(false); const zoomPane = useRef(null); const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); @@ -171,10 +173,13 @@ const ZoomPane = ({ onViewportChange?.(flowTransform); onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform); } + if (panOnDrag === 'RightClick' && onPaneContextMenu) { + hasMouseMoved.current = true; + } }); } } - }, [userSelectionActive, d3Zoom, onMove]); + }, [userSelectionActive, d3Zoom, onMove, panOnDrag, onPaneContextMenu]); useEffect(() => { if (d3Zoom) { @@ -224,9 +229,19 @@ const ZoomPane = ({ panOnScroll ? 150 : 0 ); } + + if ( + panOnDrag === 'RightClick' && + onPaneContextMenu && + !hasMouseMoved.current && + event.sourceEvent?.button === 2 + ) { + onPaneContextMenu(event.sourceEvent); + } + hasMouseMoved.current = false; }); } - }, [d3Zoom, onMoveEnd, panOnScroll]); + }, [d3Zoom, onMoveEnd, panOnScroll, panOnDrag, onPaneContextMenu]); useEffect(() => { if (d3Zoom) { From b47824393174f324e20bc07cadda8a0e4707f5f4 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 10:46:17 +0100 Subject: [PATCH 15/63] chore: add onPaneContextMenu to figma example. --- examples/vite-app/src/examples/Figma/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 8330b936..e1365ec4 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -24,6 +24,8 @@ const initialEdges: Edge[] = [ const defaultEdgeOptions = { zIndex: 0 }; +const logEvent = (e: any) => console.log(e); + const BasicFlow = () => { const instance = useReactFlow(); const spaceBarPressed = useKeyPress('Space'); @@ -61,6 +63,7 @@ const BasicFlow = () => { selectBoxOnDrag panOnDrag={spaceBarPressed ? true : 'RightClick'} panOnScroll + onPaneContextMenu={logEvent} zoomActivationKeyCode={'Meta'} multiSelectionKeyCode={MULTI_SELECT_KEY} className="react-flow-basic-example" From a2eff8f834fc2509b2de684ed594406501acc38b Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 11:02:29 +0100 Subject: [PATCH 16/63] feat: clear selection when starting new selection. --- packages/core/src/components/UserSelection/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index ebf23348..fc9ab9fc 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -57,6 +57,8 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, return; } + store.getState().resetSelectedElements(); + const reactFlowNode = (event.target as Element).closest('.react-flow')!; containerBounds.current = reactFlowNode.getBoundingClientRect(); From 45dfcfd4eebc5bf2b2ceafbda1bdb2f1428e61c4 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 11:10:34 +0100 Subject: [PATCH 17/63] feat: don't ignore user selection on mouse leave as we may have selected nodes. --- packages/core/src/components/UserSelection/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index fc9ab9fc..0c0e871a 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -132,6 +132,9 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseLeave = () => { + if (userSelectionActive) { + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + } resetUserSelection(); }; From f0baf6472542ac7fb2016976b99c3b5da1043e53 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 15:03:02 +0100 Subject: [PATCH 18/63] bug fix: only handle mouse events that were targeted at the selection pane. --- .../core/src/components/Nodes/wrapNode.tsx | 2 - .../src/components/UserSelection/index.tsx | 45 ++++++++++++++----- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 1150c85d..afb1f761 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -81,8 +81,6 @@ export default (NodeComponent: ComponentType) => { const node = store.getState().nodeInternals.get(id)!; onClick(event, { ...node }); } - - event.stopPropagation(); }; const onKeyDown = (event: KeyboardEvent) => { diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 0c0e871a..152e7115 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -15,6 +15,8 @@ type SelectionRect = Rect & { startY: number; }; +type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEventHandler | undefined }; + type UserSelectionProps = { isSelectionMode: boolean; onClick?: (e: React.MouseEvent) => void; @@ -30,12 +32,31 @@ function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XY }; } +const wrapHandler = ( + handler: React.MouseEventHandler | undefined, + containerRef: React.MutableRefObject +): React.MouseEventHandler => { + return (event: React.MouseEvent) => { + if (event.target !== containerRef.current) { + return; + } + handler?.(event); + }; +}; + +const wrapHandlers = ( + handlers: EventHandlers, + containerRef: React.MutableRefObject +): EventHandlers => + Object.keys(handlers).reduce((hls, key) => ({ ...hls, [key]: wrapHandler(handlers[key], containerRef) }), {}); + const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, elementsSelectable: s.elementsSelectable, }); const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { + const container = useRef(null); const store = useStoreApi(); const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); @@ -53,7 +74,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseDown = (event: React.MouseEvent): void => { - if (!elementsSelectable || !isSelectionMode || event.button !== 0) { + if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) { return; } @@ -75,7 +96,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseMove = (event: React.MouseEvent): void => { - if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { + if (!isSelectionMode || !containerBounds.current || !userSelectionRect || event.target !== container.current) { return; } @@ -122,7 +143,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, const onMouseUp = (event: React.MouseEvent) => { // We only want to trigger click functions when in selection mode if // the user did not move the mouse. - if (!userSelectionActive && userSelectionRect) { + if (!userSelectionActive && userSelectionRect && event.target === container.current) { onClick?.(event); } @@ -141,21 +162,23 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, const eventHandlers = elementsSelectable && (isSelectionMode || userSelectionActive) ? { - onContextMenu, - onWheel, + ...wrapHandlers({ onContextMenu, onWheel }, container), onMouseDown, onMouseMove, onMouseUp, onMouseLeave, } - : { - onClick, - onContextMenu, - onWheel, - }; + : wrapHandlers( + { + onClick, + onContextMenu, + onWheel, + }, + container + ); return ( -
+
{children} {userSelectionActive && userSelectionRect && (
Date: Tue, 27 Sep 2022 15:03:24 +0100 Subject: [PATCH 19/63] bug fix: do not panOnDrag if the selection button is pressed. --- packages/core/src/container/FlowRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 887124cb..ae501b46 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -101,7 +101,7 @@ const FlowRenderer = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} - panOnDrag={panOnDrag} + panOnDrag={panOnDrag && !selectionKeyPressed} defaultViewport={defaultViewport} translateExtent={translateExtent} minZoom={minZoom} From 3c94b22ac1c73209d396958f910dac64fa997d25 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 15:22:56 +0100 Subject: [PATCH 20/63] bug fix: fix not panning on selection button press. --- packages/core/src/container/FlowRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index ae501b46..d203033b 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -101,7 +101,7 @@ const FlowRenderer = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} - panOnDrag={panOnDrag && !selectionKeyPressed} + panOnDrag={!selectionKeyPressed && panOnDrag} defaultViewport={defaultViewport} translateExtent={translateExtent} minZoom={minZoom} From 44097c15c99ebbb03b20171082a2b5884c6dc987 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Tue, 27 Sep 2022 18:28:53 +0100 Subject: [PATCH 21/63] tests: start fixing cypress tests. --- examples/vite-app/cypress/e2e/basic.cy.ts | 222 +++++++++--------- examples/vite-app/cypress/e2e/controls.cy.ts | 2 +- examples/vite-app/cypress/e2e/empty.cy.ts | 6 +- .../vite-app/cypress/e2e/interaction.cy.ts | 2 +- examples/vite-app/cypress/e2e/minimap.cy.ts | 2 +- .../src/components/UserSelection/index.tsx | 2 +- packages/core/src/styles/init.css | 2 +- 7 files changed, 119 insertions(+), 119 deletions(-) diff --git a/examples/vite-app/cypress/e2e/basic.cy.ts b/examples/vite-app/cypress/e2e/basic.cy.ts index a08ca021..3aa5406d 100644 --- a/examples/vite-app/cypress/e2e/basic.cy.ts +++ b/examples/vite-app/cypress/e2e/basic.cy.ts @@ -11,86 +11,86 @@ describe('Basic Flow Rendering', () => { cy.get('.react-flow__node').children('.react-flow__handle'); }); - it('renders a grid', () => { - cy.get('.react-flow__background'); - }); + // it('renders a grid', () => { + // cy.get('.react-flow__background'); + // }); - it('selects two nodes by clicks', () => { - cy.get('body').type('{cmd}', { release: false }); - cy.get('.react-flow__node:first') - .click() - .should('have.class', 'selected') - .get('.react-flow__node:last') - .click() - .should('have.class', 'selected') - .get('.react-flow__node:first') - .should('have.class', 'selected'); - cy.get('body').type('{cmd}', { release: true }); - }); + // it('selects two nodes by clicks', () => { + // cy.get('body').type('{cmd}', { release: false }); + // cy.get('.react-flow__node:first') + // .click() + // .should('have.class', 'selected') + // .get('.react-flow__node:last') + // .click() + // .should('have.class', 'selected') + // .get('.react-flow__node:first') + // .should('have.class', 'selected'); + // cy.get('body').type('{cmd}', { release: true }); + // }); - it('selects a node by click', () => { - cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected'); - }); + // it('selects a node by click', () => { + // cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected'); + // }); - it('deselects node', () => { - cy.get('.react-flow__renderer').click('bottomLeft'); - cy.get('.react-flow__node:first').should('not.have.class', 'selected'); - }); + // it('deselects node', () => { + // cy.get('.react-flow__renderer').click('bottomLeft'); + // cy.get('.react-flow__node:first').should('not.have.class', 'selected'); + // }); - it('selects an edge by click', () => { - cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); - }); + // it('selects an edge by click', () => { + // cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); + // }); - it('deselects edge', () => { - cy.get('.react-flow__renderer').click('bottomLeft'); - cy.get('.react-flow__edge:first').should('not.have.class', 'selected'); - }); + // it('deselects edge', () => { + // cy.get('.react-flow__renderer').click('bottomLeft'); + // cy.get('.react-flow__edge:first').should('not.have.class', 'selected'); + // }); - it('selects one node with a selection', () => { - cy.get('body') - .type('{shift}', { release: false }) - .wait(50) - .get('.react-flow__selectionpane') - .trigger('mousedown', 1000, 50, { which: 1, force: true }) - .trigger('mousemove', 1, 400, { which: 1 }) - .wait(50) - .trigger('mouseup', 1, 200, { force: true }); + // it('selects one node with a selection', () => { + // cy.get('body') + // .type('{shift}', { release: false }) + // .wait(50) + // .get('.react-flow__pane') + // .trigger('mousedown', 1000, 50, { button: 0, force: true }) + // .trigger('mousemove', 1, 400, { button: 0 }) + // .wait(50) + // .trigger('mouseup', 1, 200, { force: true }); - cy.wait(100); + // cy.wait(100); - cy.get('.react-flow__node').eq(1).should('have.class', 'selected'); + // cy.get('.react-flow__node').eq(1).should('have.class', 'selected'); - cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected'); + // cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected'); - cy.get('.react-flow__nodesselection-rect'); + // cy.get('.react-flow__nodesselection-rect'); - cy.get('body').type('{shift}', { release: true, force: true }); - }); + // cy.get('body').type('{shift}', { release: true, force: true }); + // }); - it('selects all nodes', () => { - cy.get('body') - .type('{shift}', { release: false }) - .get('.react-flow__selectionpane') - .trigger('mousedown', 'topRight', { which: 1, force: true }) - .trigger('mousemove', 'bottomLeft', { which: 1 }) - .wait(50) - .trigger('mouseup', 'bottomLeft', { force: true }) - .wait(50) - .get('.react-flow__node') - .should('have.class', 'selected') - .get('.react-flow__nodesselection-rect'); + // it('selects all nodes', () => { + // cy.get('body') + // .type('{shift}', { release: false }) + // .get('.react-flow__pane') + // .trigger('mousedown', 'topRight', { button: 0, force: true }) + // .trigger('mousemove', 'bottomLeft', { button: 0 }) + // .wait(50) + // .trigger('mouseup', 'bottomLeft', { force: true }) + // .wait(50) + // .get('.react-flow__node') + // .should('have.class', 'selected') + // .get('.react-flow__nodesselection-rect'); - cy.get('body').type('{shift}', { release: true }); - }); + // cy.get('body').type('{shift}', { release: true }); + // }); - it('removes selection', () => { - cy.get('.react-flow__renderer').click('bottomLeft'); - cy.get('.react-flow__nodesselection-rect').should('not.exist'); - }); + // it('removes selection', () => { + // cy.get('.react-flow__renderer').click('bottomLeft'); + // cy.get('.react-flow__nodesselection-rect').should('not.exist'); + // }); - it('selects an edge', () => { - cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); - }); + // it('selects an edge', () => { + // cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); + // }); it('drags a node', () => { const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform'); @@ -109,59 +109,59 @@ describe('Basic Flow Rendering', () => { // cy.get('.react-flow__edge').should('have.length', 1); // }); - it('connects nodes', () => { - cy.get('.react-flow__node') - .contains('Node 3') - .find('.react-flow__handle.source') - .trigger('mousedown', { button: 0 }); + // it('connects nodes', () => { + // cy.get('.react-flow__node') + // .contains('Node 3') + // .find('.react-flow__handle.source') + // .trigger('mousedown', { button: 0 }); - cy.get('.react-flow__node') - .contains('Node 4') - .find('.react-flow__handle.target') - .trigger('mousemove', { force: true }) - .wait(50) - .trigger('mouseup', { force: true }); + // cy.get('.react-flow__node') + // .contains('Node 4') + // .find('.react-flow__handle.target') + // .trigger('mousemove', { force: true }) + // .wait(50) + // .trigger('mouseup', { force: true }); - cy.get('.react-flow__edge').should('have.length', 3); - }); - - // @TODO: why does this fail since react18? - // it('removes an edge', () => { - // cy.get('.react-flow__edge:first').click(); - // cy.get('body').type('{backspace}'); - - // cy.get('.react-flow__edge').should('have.length', 1); + // cy.get('.react-flow__edge').should('have.length', 3); // }); - it('drags the pane', () => { - const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform'); + // // @TODO: why does this fail since react18? + // // it('removes an edge', () => { + // // cy.get('.react-flow__edge:first').click(); + // // cy.get('body').type('{backspace}'); - // for d3 we have to pass the window to the event - // https://github.com/cypress-io/cypress/issues/3441 - cy.window().then((win) => { - cy.get('.react-flow__pane') - .trigger('mousedown', 'topLeft', { which: 1, view: win }) - .trigger('mousemove', 'bottomLeft') - .wait(50) - .trigger('mouseup', { force: true, view: win }) - .then(() => { - const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform'); - expect(styleBeforeDrag).to.not.equal(styleAfterDrag); - }); - }); - }); + // // cy.get('.react-flow__edge').should('have.length', 1); + // // }); - it('zooms the pane', () => { - const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform'); + // it('drags the pane', () => { + // const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform'); - cy.get('.react-flow__pane') - .trigger('wheel', 'topLeft', { deltaY: -200 }) - .wait(50) - .then(() => { - const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform'); - expect(styleBeforeZoom).to.not.equal(styleAfterZoom); - }); - }); + // // for d3 we have to pass the window to the event + // // https://github.com/cypress-io/cypress/issues/3441 + // cy.window().then((win) => { + // cy.get('.react-flow__pane') + // .trigger('mousedown', 'topLeft', { button: 0, view: win }) + // .trigger('mousemove', 'bottomLeft') + // .wait(50) + // .trigger('mouseup', { force: true, view: win }) + // .then(() => { + // const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform'); + // expect(styleBeforeDrag).to.not.equal(styleAfterDrag); + // }); + // }); + // }); + + // it('zooms the pane', () => { + // const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform'); + + // cy.get('.react-flow__pane') + // .trigger('wheel', 'topLeft', { deltaY: -200 }) + // .wait(50) + // .then(() => { + // const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform'); + // expect(styleBeforeZoom).to.not.equal(styleAfterZoom); + // }); + // }); }); export {}; diff --git a/examples/vite-app/cypress/e2e/controls.cy.ts b/examples/vite-app/cypress/e2e/controls.cy.ts index 74548f56..07d0548e 100644 --- a/examples/vite-app/cypress/e2e/controls.cy.ts +++ b/examples/vite-app/cypress/e2e/controls.cy.ts @@ -37,7 +37,7 @@ describe('Controls Testing', () => { // https://github.com/cypress-io/cypress/issues/3441 cy.window().then((win) => { cy.get('.react-flow__renderer') - .trigger('mousedown', 'topLeft', { which: 1, view: win }) + .trigger('mousedown', 'topLeft', { button: 0, view: win }) .trigger('mousemove', 10, 400) .wait(50) .trigger('mouseup', 10, 400, { force: true, view: win }) diff --git a/examples/vite-app/cypress/e2e/empty.cy.ts b/examples/vite-app/cypress/e2e/empty.cy.ts index 5f25dcaf..74cba86d 100644 --- a/examples/vite-app/cypress/e2e/empty.cy.ts +++ b/examples/vite-app/cypress/e2e/empty.cy.ts @@ -14,9 +14,9 @@ describe('Empty Flow Rendering', () => { cy.get('body') .type('{shift}', { release: false }) .wait(50) - .get('.react-flow__selectionpane') - .trigger('mousedown', 400, 50, { which: 1, force: true }) - .trigger('mousemove', 200, 200, { which: 1 }) + .get('.react-flow__pane') + .trigger('mousedown', 400, 50, { button: 0, force: true }) + .trigger('mousemove', 200, 200, { button: 0 }) .wait(50) .trigger('mouseup', 200, 200, { force: true }); diff --git a/examples/vite-app/cypress/e2e/interaction.cy.ts b/examples/vite-app/cypress/e2e/interaction.cy.ts index 625ecc57..edfe6f11 100644 --- a/examples/vite-app/cypress/e2e/interaction.cy.ts +++ b/examples/vite-app/cypress/e2e/interaction.cy.ts @@ -35,7 +35,7 @@ describe('Interaction Flow Rendering', () => { }); it('tries to do a selection', () => { - cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist'); + cy.get('body').type('{shift}', { release: false }).get('.react-flow__pane').should('not.exist'); cy.get('body').type('{shift}', { release: true }); }); diff --git a/examples/vite-app/cypress/e2e/minimap.cy.ts b/examples/vite-app/cypress/e2e/minimap.cy.ts index d6cb7d46..e6f4e3eb 100644 --- a/examples/vite-app/cypress/e2e/minimap.cy.ts +++ b/examples/vite-app/cypress/e2e/minimap.cy.ts @@ -57,7 +57,7 @@ describe('Minimap Testing', () => { // https://github.com/cypress-io/cypress/issues/3441 cy.window().then((win) => { cy.get('.react-flow__pane') - .trigger('mousedown', 'topLeft', { which: 1, view: win }) + .trigger('mousedown', 'topLeft', { button: 0, view: win }) .trigger('mousemove', 'bottomLeft') .wait(50) .trigger('mouseup', { force: true, view: win }) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 152e7115..44deca7c 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -178,7 +178,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, ); return ( -
+
{children} {userSelectionActive && userSelectionRect && (
Date: Wed, 28 Sep 2022 10:55:10 +0100 Subject: [PATCH 22/63] tests: fix basics cypress test. --- examples/vite-app/cypress/e2e/basic.cy.ts | 222 +++++++++++----------- 1 file changed, 111 insertions(+), 111 deletions(-) diff --git a/examples/vite-app/cypress/e2e/basic.cy.ts b/examples/vite-app/cypress/e2e/basic.cy.ts index 3aa5406d..fd4c107a 100644 --- a/examples/vite-app/cypress/e2e/basic.cy.ts +++ b/examples/vite-app/cypress/e2e/basic.cy.ts @@ -11,86 +11,86 @@ describe('Basic Flow Rendering', () => { cy.get('.react-flow__node').children('.react-flow__handle'); }); - // it('renders a grid', () => { - // cy.get('.react-flow__background'); - // }); + it('renders a grid', () => { + cy.get('.react-flow__background'); + }); - // it('selects two nodes by clicks', () => { - // cy.get('body').type('{cmd}', { release: false }); - // cy.get('.react-flow__node:first') - // .click() - // .should('have.class', 'selected') - // .get('.react-flow__node:last') - // .click() - // .should('have.class', 'selected') - // .get('.react-flow__node:first') - // .should('have.class', 'selected'); - // cy.get('body').type('{cmd}', { release: true }); - // }); + it('selects two nodes by clicks', () => { + cy.get('body').type('{cmd}', { release: false }); + cy.get('.react-flow__node:first') + .click() + .should('have.class', 'selected') + .get('.react-flow__node:last') + .click() + .should('have.class', 'selected') + .get('.react-flow__node:first') + .should('have.class', 'selected'); + cy.get('body').type('{cmd}', { release: true }); + }); - // it('selects a node by click', () => { - // cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected'); - // }); + it('selects a node by click', () => { + cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected'); + }); - // it('deselects node', () => { - // cy.get('.react-flow__renderer').click('bottomLeft'); - // cy.get('.react-flow__node:first').should('not.have.class', 'selected'); - // }); + it('deselects node', () => { + cy.get('.react-flow__renderer').click('bottomLeft'); + cy.get('.react-flow__node:first').should('not.have.class', 'selected'); + }); - // it('selects an edge by click', () => { - // cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); - // }); + it('selects an edge by click', () => { + cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); + }); - // it('deselects edge', () => { - // cy.get('.react-flow__renderer').click('bottomLeft'); - // cy.get('.react-flow__edge:first').should('not.have.class', 'selected'); - // }); + it('deselects edge', () => { + cy.get('.react-flow__renderer').click('bottomLeft'); + cy.get('.react-flow__edge:first').should('not.have.class', 'selected'); + }); - // it('selects one node with a selection', () => { - // cy.get('body') - // .type('{shift}', { release: false }) - // .wait(50) - // .get('.react-flow__pane') - // .trigger('mousedown', 1000, 50, { button: 0, force: true }) - // .trigger('mousemove', 1, 400, { button: 0 }) - // .wait(50) - // .trigger('mouseup', 1, 200, { force: true }); + it('selects one node with a selection', () => { + cy.get('body') + .type('{shift}', { release: false }) + .wait(50) + .get('.react-flow__pane') + .trigger('mousedown', 1000, 50, { button: 0, force: true }) + .trigger('mousemove', 1, 400, { button: 0 }) + .wait(50) + .trigger('mouseup', 1, 200, { force: true }); - // cy.wait(100); + cy.wait(100); - // cy.get('.react-flow__node').eq(1).should('have.class', 'selected'); + cy.get('.react-flow__node').eq(1).should('have.class', 'selected'); - // cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected'); + cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected'); - // cy.get('.react-flow__nodesselection-rect'); + cy.get('.react-flow__nodesselection-rect'); - // cy.get('body').type('{shift}', { release: true, force: true }); - // }); + cy.get('body').type('{shift}', { release: true, force: true }); + }); - // it('selects all nodes', () => { - // cy.get('body') - // .type('{shift}', { release: false }) - // .get('.react-flow__pane') - // .trigger('mousedown', 'topRight', { button: 0, force: true }) - // .trigger('mousemove', 'bottomLeft', { button: 0 }) - // .wait(50) - // .trigger('mouseup', 'bottomLeft', { force: true }) - // .wait(50) - // .get('.react-flow__node') - // .should('have.class', 'selected') - // .get('.react-flow__nodesselection-rect'); + it('selects all nodes', () => { + cy.get('body') + .type('{shift}', { release: false }) + .get('.react-flow__pane') + .trigger('mousedown', 'topRight', { button: 0, force: true }) + .trigger('mousemove', 'bottomLeft', { button: 0 }) + .wait(50) + .trigger('mouseup', 'bottomLeft', { force: true }) + .wait(50) + .get('.react-flow__node') + .should('have.class', 'selected') + .get('.react-flow__nodesselection-rect'); - // cy.get('body').type('{shift}', { release: true }); - // }); + cy.get('body').type('{shift}', { release: true }); + }); - // it('removes selection', () => { - // cy.get('.react-flow__renderer').click('bottomLeft'); - // cy.get('.react-flow__nodesselection-rect').should('not.exist'); - // }); + it('removes selection', () => { + cy.get('.react-flow__renderer').click('bottomLeft'); + cy.get('.react-flow__nodesselection-rect').should('not.exist'); + }); - // it('selects an edge', () => { - // cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); - // }); + it('selects an edge', () => { + cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); + }); it('drags a node', () => { const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform'); @@ -109,59 +109,59 @@ describe('Basic Flow Rendering', () => { // cy.get('.react-flow__edge').should('have.length', 1); // }); - // it('connects nodes', () => { - // cy.get('.react-flow__node') - // .contains('Node 3') - // .find('.react-flow__handle.source') - // .trigger('mousedown', { button: 0 }); + it('connects nodes', () => { + cy.get('.react-flow__node') + .contains('Node 3') + .find('.react-flow__handle.source') + .trigger('mousedown', { button: 0 }); - // cy.get('.react-flow__node') - // .contains('Node 4') - // .find('.react-flow__handle.target') - // .trigger('mousemove', { force: true }) - // .wait(50) - // .trigger('mouseup', { force: true }); + cy.get('.react-flow__node') + .contains('Node 4') + .find('.react-flow__handle.target') + .trigger('mousemove', { force: true }) + .wait(50) + .trigger('mouseup', { force: true }); - // cy.get('.react-flow__edge').should('have.length', 3); + cy.get('.react-flow__edge').should('have.length', 3); + }); + + // @TODO: why does this fail since react18? + // it('removes an edge', () => { + // cy.get('.react-flow__edge:first').click(); + // cy.get('body').type('{backspace}'); + + // cy.get('.react-flow__edge').should('have.length', 1); // }); - // // @TODO: why does this fail since react18? - // // it('removes an edge', () => { - // // cy.get('.react-flow__edge:first').click(); - // // cy.get('body').type('{backspace}'); + it('drags the pane', () => { + const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform'); - // // cy.get('.react-flow__edge').should('have.length', 1); - // // }); + // for d3 we have to pass the window to the event + // https://github.com/cypress-io/cypress/issues/3441 + cy.window().then((win) => { + cy.get('.react-flow__pane') + .trigger('mousedown', 'topLeft', { button: 0, view: win }) + .trigger('mousemove', 'bottomLeft') + .wait(50) + .trigger('mouseup', { force: true, view: win }) + .then(() => { + const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform'); + expect(styleBeforeDrag).to.not.equal(styleAfterDrag); + }); + }); + }); - // it('drags the pane', () => { - // const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform'); + it('zooms the pane', () => { + const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform'); - // // for d3 we have to pass the window to the event - // // https://github.com/cypress-io/cypress/issues/3441 - // cy.window().then((win) => { - // cy.get('.react-flow__pane') - // .trigger('mousedown', 'topLeft', { button: 0, view: win }) - // .trigger('mousemove', 'bottomLeft') - // .wait(50) - // .trigger('mouseup', { force: true, view: win }) - // .then(() => { - // const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform'); - // expect(styleBeforeDrag).to.not.equal(styleAfterDrag); - // }); - // }); - // }); - - // it('zooms the pane', () => { - // const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform'); - - // cy.get('.react-flow__pane') - // .trigger('wheel', 'topLeft', { deltaY: -200 }) - // .wait(50) - // .then(() => { - // const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform'); - // expect(styleBeforeZoom).to.not.equal(styleAfterZoom); - // }); - // }); + cy.get('.react-flow__pane') + .trigger('wheel', 'topLeft', { deltaY: -200 }) + .wait(50) + .then(() => { + const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform'); + expect(styleBeforeZoom).to.not.equal(styleAfterZoom); + }); + }); }); export {}; From 42309fbf0b10f6f1e5322fa003b1016efcb2e201 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 11:24:32 +0100 Subject: [PATCH 23/63] tests: fix interaction test. --- examples/vite-app/cypress/e2e/interaction.cy.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/examples/vite-app/cypress/e2e/interaction.cy.ts b/examples/vite-app/cypress/e2e/interaction.cy.ts index edfe6f11..1ad4bf2a 100644 --- a/examples/vite-app/cypress/e2e/interaction.cy.ts +++ b/examples/vite-app/cypress/e2e/interaction.cy.ts @@ -35,7 +35,18 @@ describe('Interaction Flow Rendering', () => { }); it('tries to do a selection', () => { - cy.get('body').type('{shift}', { release: false }).get('.react-flow__pane').should('not.exist'); + cy.get('body') + .type('{shift}', { release: false }) + .wait(50) + .get('.react-flow__pane') + .trigger('mousedown', 1000, 50, { button: 0, force: true }) + .trigger('mousemove', 1, 400, { button: 0 }) + .wait(50) + .get('.react-flow__selection') + .should('not.exist'); + + cy.get('.react-flow__pane').trigger('mouseup', 1, 200, { force: true }); + cy.get('body').type('{shift}', { release: true }); }); From 27a746bf57a4483208c4a2ad69b8c7506554f524 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 11:31:39 +0100 Subject: [PATCH 24/63] tests: fix minimap test. --- examples/vite-app/cypress/e2e/minimap.cy.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/examples/vite-app/cypress/e2e/minimap.cy.ts b/examples/vite-app/cypress/e2e/minimap.cy.ts index e6f4e3eb..bda3639a 100644 --- a/examples/vite-app/cypress/e2e/minimap.cy.ts +++ b/examples/vite-app/cypress/e2e/minimap.cy.ts @@ -9,13 +9,12 @@ describe('Minimap Testing', () => { }); it('has same number of nodes as the pane', () => { - const paneNodes = Cypress.$('.react-flow__node').length; + cy.get('.react-flow__minimap-node').then(() => { + const paneNodes = Cypress.$('.react-flow__node').length; + const minimapNodes = Cypress.$('.react-flow__minimap-node').length; - cy.wait(200); - - const minimapNodes = Cypress.$('.react-flow__minimap-node').length; - - expect(paneNodes).equal(minimapNodes); + expect(paneNodes).equal(minimapNodes); + }); }); it('changes zoom level', () => { From 6fe85b2cbec7305215df467cfcf57e9c2888bb72 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 14:21:59 +0100 Subject: [PATCH 25/63] bug fix: handle all mouse move events not just ones on the target. --- packages/core/src/components/UserSelection/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 44deca7c..781ca37d 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -96,7 +96,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, }; const onMouseMove = (event: React.MouseEvent): void => { - if (!isSelectionMode || !containerBounds.current || !userSelectionRect || event.target !== container.current) { + if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { return; } From 4e874b90a8d9a1dc948871402dfff56e1dd6f00f Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 14:44:54 +0100 Subject: [PATCH 26/63] feat: select overlapping nodes, even if not fully within box. --- packages/core/src/components/UserSelection/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 781ca37d..8e691175 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -117,7 +117,7 @@ const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); const nodes = Array.from(nodeInternals.values()); - const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin); + const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, true, true, nodeOrigin); const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); const selectedNodeIds = selectedNodes.map((n) => n.id); From 1de6de1f96f9186080177413b6fcd6ca58d4b2de Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 15:01:16 +0100 Subject: [PATCH 27/63] feat: add events for when selection starts and ends. --- .../src/components/UserSelection/index.tsx | 263 ++++++++++-------- .../core/src/container/FlowRenderer/index.tsx | 4 + .../core/src/container/ReactFlow/index.tsx | 4 + packages/core/src/types/component-props.ts | 2 + 4 files changed, 150 insertions(+), 123 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 8e691175..693ba368 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -19,6 +19,8 @@ type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEvent type UserSelectionProps = { isSelectionMode: boolean; + onSelectionStart?: (e: React.MouseEvent) => void; + onSelectionEnd?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void; onWheel?: (e: React.WheelEvent) => void; @@ -55,144 +57,159 @@ const selector = (s: ReactFlowState) => ({ elementsSelectable: s.elementsSelectable, }); -const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => { - const container = useRef(null); - const store = useStoreApi(); - const prevSelectedNodesCount = useRef(0); - const prevSelectedEdgesCount = useRef(0); - const containerBounds = useRef(); - const [userSelectionRect, setUserSelectionRect] = useState(null); - const { userSelectionActive, elementsSelectable } = useStore(selector, shallow); +const UserSelection = memo( + ({ + isSelectionMode, + onSelectionStart, + onSelectionEnd, + onClick, + onContextMenu, + onWheel, + children, + }: UserSelectionProps) => { + const container = useRef(null); + const store = useStoreApi(); + const prevSelectedNodesCount = useRef(0); + const prevSelectedEdgesCount = useRef(0); + const containerBounds = useRef(); + const [userSelectionRect, setUserSelectionRect] = useState(null); + const { userSelectionActive, elementsSelectable } = useStore(selector, shallow); - const resetUserSelection = () => { - setUserSelectionRect(null); + const resetUserSelection = () => { + setUserSelectionRect(null); - store.setState({ userSelectionActive: false }); + store.setState({ userSelectionActive: false }); - prevSelectedNodesCount.current = 0; - prevSelectedEdgesCount.current = 0; - }; - - const onMouseDown = (event: React.MouseEvent): void => { - if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) { - return; - } - - store.getState().resetSelectedElements(); - - const reactFlowNode = (event.target as Element).closest('.react-flow')!; - containerBounds.current = reactFlowNode.getBoundingClientRect(); - - const mousePos = getMousePosition(event, containerBounds.current!); - - setUserSelectionRect({ - width: 0, - height: 0, - startX: mousePos.x, - startY: mousePos.y, - x: mousePos.x, - y: mousePos.y, - }); - }; - - const onMouseMove = (event: React.MouseEvent): void => { - if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { - return; - } - - store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - - const mousePos = getMousePosition(event, containerBounds.current!); - const startX = userSelectionRect.startX ?? 0; - const startY = userSelectionRect.startY ?? 0; - - const nextUserSelectRect = { - ...userSelectionRect, - x: mousePos.x < startX ? mousePos.x : startX, - y: mousePos.y < startY ? mousePos.y : startY, - width: Math.abs(mousePos.x - startX), - height: Math.abs(mousePos.y - startY), - draw: true, + prevSelectedNodesCount.current = 0; + prevSelectedEdgesCount.current = 0; }; - const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); - const nodes = Array.from(nodeInternals.values()); - const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, true, true, nodeOrigin); - const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); - const selectedNodeIds = selectedNodes.map((n) => n.id); - - if (prevSelectedNodesCount.current !== selectedNodeIds.length) { - prevSelectedNodesCount.current = selectedNodeIds.length; - const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; - if (changes.length) { - onNodesChange?.(changes); + const onMouseDown = (event: React.MouseEvent): void => { + if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) { + return; } - } - if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) { - prevSelectedEdgesCount.current = selectedEdgeIds.length; - const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[]; - if (changes.length) { - onEdgesChange?.(changes); + store.getState().resetSelectedElements(); + + const reactFlowNode = (event.target as Element).closest('.react-flow')!; + containerBounds.current = reactFlowNode.getBoundingClientRect(); + + const mousePos = getMousePosition(event, containerBounds.current!); + + setUserSelectionRect({ + width: 0, + height: 0, + startX: mousePos.x, + startY: mousePos.y, + x: mousePos.x, + y: mousePos.y, + }); + + onSelectionStart?.(event); + }; + + const onMouseMove = (event: React.MouseEvent): void => { + if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { + return; } - } - setUserSelectionRect(nextUserSelectRect); - }; + store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - const onMouseUp = (event: React.MouseEvent) => { - // We only want to trigger click functions when in selection mode if - // the user did not move the mouse. - if (!userSelectionActive && userSelectionRect && event.target === container.current) { - onClick?.(event); - } + const mousePos = getMousePosition(event, containerBounds.current!); + const startX = userSelectionRect.startX ?? 0; + const startY = userSelectionRect.startY ?? 0; - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + const nextUserSelectRect = { + ...userSelectionRect, + x: mousePos.x < startX ? mousePos.x : startX, + y: mousePos.y < startY ? mousePos.y : startY, + width: Math.abs(mousePos.x - startX), + height: Math.abs(mousePos.y - startY), + draw: true, + }; - resetUserSelection(); - }; + const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); + const nodes = Array.from(nodeInternals.values()); + const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, true, true, nodeOrigin); + const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); + const selectedNodeIds = selectedNodes.map((n) => n.id); - const onMouseLeave = () => { - if (userSelectionActive) { - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - } - resetUserSelection(); - }; - - const eventHandlers = - elementsSelectable && (isSelectionMode || userSelectionActive) - ? { - ...wrapHandlers({ onContextMenu, onWheel }, container), - onMouseDown, - onMouseMove, - onMouseUp, - onMouseLeave, + if (prevSelectedNodesCount.current !== selectedNodeIds.length) { + prevSelectedNodesCount.current = selectedNodeIds.length; + const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; + if (changes.length) { + onNodesChange?.(changes); } - : wrapHandlers( - { - onClick, - onContextMenu, - onWheel, - }, - container - ); + } - return ( -
- {children} - {userSelectionActive && userSelectionRect && ( -
- )} -
- ); -}); + if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) { + prevSelectedEdgesCount.current = selectedEdgeIds.length; + const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[]; + if (changes.length) { + onEdgesChange?.(changes); + } + } + + setUserSelectionRect(nextUserSelectRect); + }; + + const onMouseUp = (event: React.MouseEvent) => { + // We only want to trigger click functions when in selection mode if + // the user did not move the mouse. + if (!userSelectionActive && userSelectionRect && event.target === container.current) { + onClick?.(event); + } + + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + + resetUserSelection(); + + onSelectionEnd?.(event); + }; + + const onMouseLeave = (event: React.MouseEvent) => { + if (userSelectionActive) { + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + onSelectionEnd?.(event); + } + resetUserSelection(); + }; + + const eventHandlers = + elementsSelectable && (isSelectionMode || userSelectionActive) + ? { + ...wrapHandlers({ onContextMenu, onWheel }, container), + onMouseDown, + onMouseMove, + onMouseUp, + onMouseLeave, + } + : wrapHandlers( + { + onClick, + onContextMenu, + onWheel, + }, + container + ); + + return ( +
+ {children} + {userSelectionActive && userSelectionRect && ( +
+ )} +
+ ); + } +); UserSelection.displayName = 'UserSelection'; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index d203033b..a5853a09 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -45,6 +45,8 @@ const FlowRenderer = ({ onMoveEnd, selectionKeyCode, selectBoxOnDrag, + onSelectionStart, + onSelectionEnd, multiSelectionKeyCode, zoomActivationKeyCode, elementsSelectable, @@ -112,6 +114,8 @@ const FlowRenderer = ({ noPanClassName={noPanClassName} > ( onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, + onSelectionStart, + onSelectionEnd, connectionMode = ConnectionMode.Strict, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, @@ -219,6 +221,8 @@ const ReactFlow = forwardRef( onPaneScroll={onPaneScroll} onPaneContextMenu={onPaneContextMenu} onSelectionContextMenu={onSelectionContextMenu} + onSelectionStart={onSelectionStart} + onSelectionEnd={onSelectionEnd} onEdgeUpdate={onEdgeUpdate} onEdgeContextMenu={onEdgeContextMenu} onEdgeDoubleClick={onEdgeDoubleClick} diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 9cf390a7..27498ba0 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -68,6 +68,8 @@ export type ReactFlowProps = HTMLAttributes & { onSelectionDragStart?: SelectionDragHandler; onSelectionDrag?: SelectionDragHandler; onSelectionDragStop?: SelectionDragHandler; + onSelectionStart?: (event: ReactMouseEvent) => void; + onSelectionEnd?: (event: ReactMouseEvent) => void; onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void; onConnect?: OnConnect; onConnectStart?: OnConnectStart; From f25c7fe8a231ac741ebaf999e7e34d08852759d6 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 15:07:24 +0100 Subject: [PATCH 28/63] feat: pass through onSelectionStart in GraphView. --- packages/core/src/container/GraphView/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 4017810d..54733d12 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -51,6 +51,8 @@ const GraphView = ({ onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, + onSelectionStart, + onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, @@ -112,6 +114,8 @@ const GraphView = ({ deleteKeyCode={deleteKeyCode} selectionKeyCode={selectionKeyCode} selectBoxOnDrag={selectBoxOnDrag} + onSelectionStart={onSelectionStart} + onSelectionEnd={onSelectionEnd} multiSelectionKeyCode={multiSelectionKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} elementsSelectable={elementsSelectable} From 09ebd0c84a9521819b4a45501226bb61b638449c Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 16:20:57 +0100 Subject: [PATCH 29/63] feat: allow customisation of how the select box works. --- .../core/src/components/UserSelection/index.tsx | 13 +++++++++++-- packages/core/src/container/FlowRenderer/index.tsx | 2 ++ packages/core/src/container/GraphView/index.tsx | 2 ++ packages/core/src/container/ReactFlow/index.tsx | 2 ++ packages/core/src/types/component-props.ts | 1 + 5 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 693ba368..fa2fdc4f 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -8,7 +8,7 @@ import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; -import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect, ReactFlowProps } from '../../types'; type SelectionRect = Rect & { startX: number; @@ -19,6 +19,7 @@ type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEvent type UserSelectionProps = { isSelectionMode: boolean; + selectBoxMode?: ReactFlowProps['selectBoxMode']; onSelectionStart?: (e: React.MouseEvent) => void; onSelectionEnd?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent) => void; @@ -60,6 +61,7 @@ const selector = (s: ReactFlowState) => ({ const UserSelection = memo( ({ isSelectionMode, + selectBoxMode = 'Contained', onSelectionStart, onSelectionEnd, onClick, @@ -130,7 +132,14 @@ const UserSelection = memo( const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); const nodes = Array.from(nodeInternals.values()); - const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, true, true, nodeOrigin); + const selectedNodes = getNodesInside( + nodeInternals, + nextUserSelectRect, + transform, + selectBoxMode === 'Overlap', + true, + nodeOrigin + ); const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); const selectedNodeIds = selectedNodes.map((n) => n.id); diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index a5853a09..de1f3dd5 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -45,6 +45,7 @@ const FlowRenderer = ({ onMoveEnd, selectionKeyCode, selectBoxOnDrag, + selectBoxMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, @@ -123,6 +124,7 @@ const FlowRenderer = ({ onContextMenu={onContextMenu} onWheel={onWheel} isSelectionMode={isSelectionMode} + selectBoxMode={selectBoxMode} > {children} {nodesSelectionActive && ( diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 54733d12..a0cedc43 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -59,6 +59,7 @@ const GraphView = ({ connectionLineContainerStyle, selectionKeyCode, selectBoxOnDrag, + selectBoxMode, multiSelectionKeyCode, zoomActivationKeyCode, deleteKeyCode, @@ -114,6 +115,7 @@ const GraphView = ({ deleteKeyCode={deleteKeyCode} selectionKeyCode={selectionKeyCode} selectBoxOnDrag={selectBoxOnDrag} + selectBoxMode={selectBoxMode} onSelectionStart={onSelectionStart} onSelectionEnd={onSelectionEnd} multiSelectionKeyCode={multiSelectionKeyCode} diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index ca9aefbb..46e6971c 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -102,6 +102,7 @@ const ReactFlow = forwardRef( deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectBoxOnDrag = false, + selectBoxMode = 'Contained', multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -197,6 +198,7 @@ const ReactFlow = forwardRef( connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} selectBoxOnDrag={selectBoxOnDrag} + selectBoxMode={selectBoxMode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 27498ba0..a96f006e 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -97,6 +97,7 @@ export type ReactFlowProps = HTMLAttributes & { deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; selectBoxOnDrag?: boolean; + selectBoxMode?: 'Overlap' | 'Contained'; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; From 5a192e0068dcec70e2f2da7a769a410c2ecf0ddd Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 16:21:34 +0100 Subject: [PATCH 30/63] chore: add select box mode to figma example. --- examples/vite-app/src/examples/Figma/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index e1365ec4..59d887ad 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -61,6 +61,7 @@ const BasicFlow = () => { defaultNodes={initialNodes} defaultEdges={initialEdges} selectBoxOnDrag + selectBoxMode="Overlap" panOnDrag={spaceBarPressed ? true : 'RightClick'} panOnScroll onPaneContextMenu={logEvent} From 35bc158adebd13eea2745ef0d33d3ba58953a2c8 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 17:06:28 +0100 Subject: [PATCH 31/63] bug fix: fixes post rebase. --- examples/vite-app/src/examples/Figma/index.tsx | 2 +- packages/core/src/components/UserSelection/index.tsx | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 59d887ad..12b867fe 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -6,7 +6,7 @@ import ReactFlow, { Edge, useReactFlow, useKeyPress, -} from 'react-flow-renderer'; +} from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index fa2fdc4f..bfd8adda 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -25,6 +25,9 @@ type UserSelectionProps = { onClick?: (e: React.MouseEvent) => void; onContextMenu?: (e: React.MouseEvent) => void; onWheel?: (e: React.WheelEvent) => void; + onMouseEnter?: (e: React.MouseEvent) => void; + onMouseMove?: (e: React.MouseEvent) => void; + onMouseLeave?: (e: React.MouseEvent) => void; children: React.ReactNode; }; @@ -67,6 +70,9 @@ const UserSelection = memo( onClick, onContextMenu, onWheel, + onMouseEnter: onPaneMouseEnter, + onMouseMove: onPaneMouseMove, + onMouseLeave: onPaneMouseLeave, children, }: UserSelectionProps) => { const container = useRef(null); @@ -198,6 +204,9 @@ const UserSelection = memo( onClick, onContextMenu, onWheel, + onMouseEnter: onPaneMouseEnter, + onMouseMove: onPaneMouseMove, + onMouseLeave: onPaneMouseLeave, }, container ); From 64c84917615442a5a11741c706d881b1cdb03c65 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 17:14:13 +0100 Subject: [PATCH 32/63] bug fix: more post rebase fixes. --- .../src/components/UserSelection/index.tsx | 12 +++++-- .../core/src/container/FlowRenderer/Pane.tsx | 34 ------------------- .../core/src/container/FlowRenderer/index.tsx | 1 - 3 files changed, 10 insertions(+), 37 deletions(-) delete mode 100644 packages/core/src/container/FlowRenderer/Pane.tsx diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index bfd8adda..b16c7299 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -4,7 +4,9 @@ import { memo, useState, useRef } from 'react'; import shallow from 'zustand/shallow'; +import cc from 'classcat'; +import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; @@ -59,6 +61,7 @@ const wrapHandlers = ( const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, elementsSelectable: s.elementsSelectable, + paneDragging: s.paneDragging, }); const UserSelection = memo( @@ -81,7 +84,7 @@ const UserSelection = memo( const prevSelectedEdgesCount = useRef(0); const containerBounds = useRef(); const [userSelectionRect, setUserSelectionRect] = useState(null); - const { userSelectionActive, elementsSelectable } = useStore(selector, shallow); + const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow); const resetUserSelection = () => { setUserSelectionRect(null); @@ -212,7 +215,12 @@ const UserSelection = memo( ); return ( -
+
{children} {userSelectionActive && userSelectionRect && (
& { - onMouseEnter?: (event: MouseEvent) => void; - onMouseMove?: (event: MouseEvent) => void; - onMouseLeave?: (event: MouseEvent) => void; -}; - -const selector = (s: ReactFlowState) => s.paneDragging; - -function Pane({ onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onWheel }: PaneProps) { - const dragging = useStore(selector); - - return ( -
- ); -} - -export default Pane; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index de1f3dd5..84abdb23 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -8,7 +8,6 @@ import { GraphViewProps } from '../GraphView'; import ZoomPane from '../ZoomPane'; import UserSelection from '../../components/UserSelection'; import NodesSelection from '../../components/NodesSelection'; -import Pane from './Pane'; import type { ReactFlowState } from '../../types'; export type FlowRendererProps = Omit< From a8e414e4a2d37e7556b398650a6fec0def0be067 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Wed, 28 Sep 2022 17:23:36 +0100 Subject: [PATCH 33/63] feat: display the pointer when in selection mode. --- packages/core/src/components/UserSelection/index.tsx | 7 +++++-- packages/core/src/styles/init.css | 4 ++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index b16c7299..38d5a5ba 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -136,7 +136,6 @@ const UserSelection = memo( y: mousePos.y < startY ? mousePos.y : startY, width: Math.abs(mousePos.x - startX), height: Math.abs(mousePos.y - startY), - draw: true, }; const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); @@ -216,7 +215,11 @@ const UserSelection = memo( return (
Date: Sat, 22 Oct 2022 09:49:33 +0100 Subject: [PATCH 34/63] tests: add tests for the new features. --- examples/vite-app/cypress/e2e/figma.cy.ts | 52 +++++++++++++++++++ examples/vite-app/cypress/support/commands.ts | 22 ++++---- 2 files changed, 64 insertions(+), 10 deletions(-) create mode 100644 examples/vite-app/cypress/e2e/figma.cy.ts diff --git a/examples/vite-app/cypress/e2e/figma.cy.ts b/examples/vite-app/cypress/e2e/figma.cy.ts new file mode 100644 index 00000000..6d3ddfea --- /dev/null +++ b/examples/vite-app/cypress/e2e/figma.cy.ts @@ -0,0 +1,52 @@ +describe('Figma Flow UI', () => { + before(() => { + cy.visit('/figma'); + }); + + it('renders a flow with three nodes', () => { + cy.get('.react-flow__renderer'); + cy.get('.react-flow-basic-example'); // check if className prop works + cy.get('.react-flow__node').should('have.length', 4); + cy.get('.react-flow__edge').should('have.length', 2); + cy.get('.react-flow__node').children('.react-flow__handle'); + }); + + it('renders a grid', () => { + cy.get('.react-flow__background'); + }); + + it('selects all nodes by drag', () => { + cy.window().then((win) => { + cy.get('.react-flow__pane') + .trigger('mousedown', 'topLeft', { button: 0, view: win }) + .trigger('mousemove', 'bottomRight', { force: true }) + .wait(50) + .trigger('mouseup', { force: true, view: win }) + .then(() => { + cy.get('.react-flow__node').should('have.class', 'selected'); + }); + }); + }); + + it('removes selection', () => { + cy.get('.react-flow__pane').click('topLeft'); + cy.get('.react-flow__node').should('not.have.class', 'selected'); + }); + + it('drags using right click', () => { + cy.window().then((win) => { + cy.get('.react-flow__node:last').isWithinViewport(); + cy.get('.react-flow__pane') + .trigger('mousedown', 'center', { button: 2, view: win }) + .trigger('mousemove', 'bottom', { force: true }) + .wait(50) + .trigger('mouseup', { force: true, view: win }) + .then(() => { + cy.get('.react-flow__node').should('not.have.class', 'selected'); + cy.get('.react-flow__node:last').isOutsideViewport(); + }); + }); + }); +}); + +export {}; diff --git a/examples/vite-app/cypress/support/commands.ts b/examples/vite-app/cypress/support/commands.ts index 14302409..e138e4cf 100644 --- a/examples/vite-app/cypress/support/commands.ts +++ b/examples/vite-app/cypress/support/commands.ts @@ -36,23 +36,25 @@ Cypress.Commands.add('zoomPane', (wheelDelta: number) => Cypress.Commands.add('isWithinViewport', { prevSubject: true }, (subject) => { const rect = subject[0].getBoundingClientRect(); - expect(rect.top).to.be.within(0, window.innerHeight); - expect(rect.right).to.be.within(0, window.innerWidth); - expect(rect.bottom).to.be.within(0, window.innerHeight); - expect(rect.left).to.be.within(0, window.innerWidth); + return cy.window().then((window) => { + expect(rect.top).to.be.within(0, window.innerHeight); + expect(rect.right).to.be.within(0, window.innerWidth); + expect(rect.bottom).to.be.within(0, window.innerHeight); + expect(rect.left).to.be.within(0, window.innerWidth); - return subject; + return subject; + }); }); Cypress.Commands.add('isOutsideViewport', { prevSubject: true }, (subject) => { const rect = subject[0].getBoundingClientRect(); - expect(rect.top).not.to.be.within(0, window.innerHeight); - expect(rect.right).not.to.be.within(0, window.innerWidth); - expect(rect.bottom).not.to.be.within(0, window.innerHeight); - expect(rect.left).not.to.be.within(0, window.innerWidth); + return cy.window().then((window) => { + expect(window.innerHeight < rect.top || rect.bottom < 0 || window.innerWidth < rect.left || rect.right < 0).to.be + .true; - return subject; + return subject; + }); }); export {}; From 2f767408ca08ac047f3780e02f6b1ed4caf203f5 Mon Sep 17 00:00:00 2001 From: Jack Fishwick Date: Thu, 17 Nov 2022 13:39:38 +0000 Subject: [PATCH 35/63] chore: fix typing on 'isSelectionMode'. --- packages/core/src/container/FlowRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 84abdb23..bd31f0d1 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -122,7 +122,7 @@ const FlowRenderer = ({ onMouseLeave={onPaneMouseLeave} onContextMenu={onContextMenu} onWheel={onWheel} - isSelectionMode={isSelectionMode} + isSelectionMode={!!isSelectionMode} selectBoxMode={selectBoxMode} > {children} From b34ccd19e911765f5fde4a44888b05c35ddba1fa Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 13:44:25 +0100 Subject: [PATCH 36/63] refactor(nodes): only trigger drag event when change happened --- packages/core/src/hooks/useDrag/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index 3ab1d0bb..7f1228a9 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -108,6 +108,9 @@ function useDrag({ x: pointerPos.xSnapped, y: pointerPos.ySnapped, }; + + let hasChange = false; + dragItems.current = dragItems.current.map((n) => { const nextPosition = { x: pointerPos.x - n.distance.x, y: pointerPos.y - n.distance.y }; @@ -118,12 +121,20 @@ function useDrag({ const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin); + // we want to make sure that we only fire a change event when there is a changes + hasChange = + hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y; + n.position = updatedPos.position; n.positionAbsolute = updatedPos.positionAbsolute; return n; }); + if (!hasChange) { + return; + } + const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag); updateNodePositions(dragItems.current, true, true); From 23afb3abebdb42fad284f68bec164afac609563c Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 13:50:01 +0100 Subject: [PATCH 37/63] chore(changeset): add --- .changeset/swift-mayflies-wink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/swift-mayflies-wink.md diff --git a/.changeset/swift-mayflies-wink.md b/.changeset/swift-mayflies-wink.md new file mode 100644 index 00000000..96bbef36 --- /dev/null +++ b/.changeset/swift-mayflies-wink.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Only trigger drag event when change happened From 860af7caed2eb0a2b49e51d39a1e010c8f134c1d Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 17:02:55 +0100 Subject: [PATCH 38/63] fix(minimap): use translateExtent on pan --- .../core/src/container/ZoomPane/index.tsx | 20 +++++++++---------- packages/core/src/store/index.ts | 3 +-- packages/minimap/src/MiniMap.tsx | 10 ++++++++-- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index f94bbe58..636ce5f0 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -5,13 +5,12 @@ import type { D3ZoomEvent } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import shallow from 'zustand/shallow'; -import { clamp } from '../../utils'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; import type { FlowRendererProps } from '../FlowRenderer'; -import { PanOnScrollMode } from '../../types'; +import { CoordinateExtent, PanOnScrollMode } from '../../types'; import type { Viewport, ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< @@ -71,22 +70,24 @@ const ZoomPane = ({ useEffect(() => { if (zoomPane.current) { + const bbox = zoomPane.current.getBoundingClientRect(); const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent); const selection = select(zoomPane.current as Element).call(d3ZoomInstance); + const updatedTransform = zoomIdentity.translate(defaultViewport.x, defaultViewport.y).scale(defaultViewport.zoom); + const extent: CoordinateExtent = [ + [0, 0], + [bbox.width, bbox.height], + ]; - const clampedX = clamp(defaultViewport.x, translateExtent[0][0], translateExtent[1][0]); - const clampedY = clamp(defaultViewport.y, translateExtent[0][1], translateExtent[1][1]); - const clampedZoom = clamp(defaultViewport.zoom, minZoom, maxZoom); - const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom); - - d3ZoomInstance.transform(selection, updatedTransform); + const constrainedTransform = d3ZoomInstance.constrain()(updatedTransform, extent, translateExtent); + d3ZoomInstance.transform(selection, constrainedTransform); store.setState({ d3Zoom: d3ZoomInstance, d3Selection: selection, d3ZoomHandler: selection.on('wheel.zoom'), // we need to pass transform because zoom handler is not registered when we set the initial transform - transform: [clampedX, clampedY, clampedZoom], + transform: [constrainedTransform.x, constrainedTransform.y, constrainedTransform.k], domNode: zoomPane.current.closest('.react-flow') as HTMLDivElement, }); } @@ -156,7 +157,6 @@ const ZoomPane = ({ } else if (!selectionKeyPressed) { d3Zoom.on('zoom', (event: D3ZoomEvent) => { const { onViewportChange } = store.getState(); - store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] }); if (onMove || onViewportChange) { diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index bdb02137..51acb34d 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -209,8 +209,7 @@ const createRFStore = () => set({ maxZoom }); }, setTranslateExtent: (translateExtent: CoordinateExtent) => { - const { d3Zoom } = get(); - d3Zoom?.translateExtent(translateExtent); + get().d3Zoom?.translateExtent(translateExtent); set({ translateExtent }); }, diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index b1d4c555..c9634fd6 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -14,6 +14,7 @@ import { getBoundsOfRects, useStoreApi, getNodePositionWithOrigin, + CoordinateExtent, } from '@reactflow/core'; import type { ReactFlowState, Rect } from '@reactflow/core'; @@ -109,7 +110,7 @@ function MiniMap({ }; const panHandler = (event: D3ZoomEvent) => { - const { transform, d3Selection, d3Zoom } = store.getState(); + const { transform, d3Selection, d3Zoom, translateExtent, width, height } = store.getState(); if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) { return; @@ -120,10 +121,15 @@ function MiniMap({ x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]), y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]), }; + const extent: CoordinateExtent = [ + [0, 0], + [width, height], + ]; const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]); + const constrainedTransform = d3Zoom.constrain()(nextTransform, extent, translateExtent); - d3Zoom.transform(d3Selection, nextTransform); + d3Zoom.transform(d3Selection, constrainedTransform); }; const zoomAndPanHandler = zoom() From 4244bae25a36cb4904dc1fbba26e1c4d5d463cb9 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 17:04:18 +0100 Subject: [PATCH 39/63] chore(changeset): add --- .changeset/purple-mails-kneel.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/purple-mails-kneel.md diff --git a/.changeset/purple-mails-kneel.md b/.changeset/purple-mails-kneel.md new file mode 100644 index 00000000..f2da8f5a --- /dev/null +++ b/.changeset/purple-mails-kneel.md @@ -0,0 +1,6 @@ +--- +'@reactflow/core': patch +'@reactflow/minimap': patch +--- + +Use translateExtent correctly From c51ae89eeb7164cf64bec119f9b9d1336dded782 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 18:13:35 +0100 Subject: [PATCH 40/63] refactor(store): use getNodes function --- .../src/examples/EdgeRenderer/CustomEdge.tsx | 4 +-- .../src/examples/EdgeRenderer/CustomEdge2.tsx | 2 +- .../NodeToolbar/SelectedNodesToolbar.tsx | 3 +- .../src/examples/Provider/Sidebar.tsx | 17 +++++------ .../src/components/NodesSelection/index.tsx | 7 +++-- .../components/SelectionListener/index.tsx | 2 +- .../src/components/UserSelection/index.tsx | 4 +-- .../core/src/hooks/useGlobalKeyHandler.ts | 7 ++--- packages/core/src/hooks/useNodes.ts | 2 +- .../core/src/hooks/useNodesInitialized.ts | 2 +- packages/core/src/hooks/useReactFlow.ts | 29 +++++++++---------- .../core/src/hooks/useUpdateNodePositions.ts | 4 +-- packages/core/src/hooks/useVisibleNodes.ts | 2 +- packages/core/src/store/index.ts | 23 ++++++++------- packages/core/src/store/utils.ts | 6 ++-- packages/core/src/types/general.ts | 1 + packages/minimap/src/MiniMap.tsx | 2 +- packages/node-toolbar/src/NodeToolbar.tsx | 2 +- 18 files changed, 61 insertions(+), 58 deletions(-) diff --git a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx index f7a42270..05d893ca 100644 --- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx +++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx @@ -1,5 +1,5 @@ import { FC, MouseEvent } from 'react'; -import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore, ReactFlowStore } from 'reactflow'; +import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow'; const CustomEdge: FC = ({ id, @@ -14,7 +14,7 @@ const CustomEdge: FC = ({ data, }) => { const isConnectedNodeDragging = useStore((s) => - Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id)) + s.getNodes().find((n) => n.dragging && (target === n.id || source === n.id)) ); const [edgePath, labelX, labelY] = getBezierPath({ diff --git a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx index e0e8e794..ebdb1641 100644 --- a/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx +++ b/examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx @@ -14,7 +14,7 @@ const CustomEdge: FC = ({ data, }) => { const isConnectedNodeDragging = useStore((s) => - Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id)) + s.getNodes().find((n) => n.dragging && (target === n.id || source === n.id)) ); const [edgePath, labelX, labelY] = getBezierPath({ diff --git a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx index 349db385..fa1697ae 100644 --- a/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx @@ -1,7 +1,8 @@ import { NodeToolbar, ReactFlowState, useStore } from 'reactflow'; const selectedNodesSelector = (state: ReactFlowState) => - Array.from(state.nodeInternals.values()) + state + .getNodes() .filter((node) => node.selected) .map((node) => node.id); diff --git a/examples/vite-app/src/examples/Provider/Sidebar.tsx b/examples/vite-app/src/examples/Provider/Sidebar.tsx index 145ac718..a5205642 100644 --- a/examples/vite-app/src/examples/Provider/Sidebar.tsx +++ b/examples/vite-app/src/examples/Provider/Sidebar.tsx @@ -1,15 +1,16 @@ -import { useStore, useStoreApi } from 'reactflow'; +import { useReactFlow, useStore } from 'reactflow'; import styles from './provider.module.css'; const Sidebar = () => { - const store = useStoreApi(); - const nodeInternals = useStore((store) => store.nodeInternals); + const { setNodes } = useReactFlow(); + const nodeInfos = useStore((store) => + store.getNodes().map((n) => `Node ${n.id} - x: ${n.position.x.toFixed(2)}, y: ${n.position.y.toFixed(2)}`) + ); const transform = useStore((store) => store.transform); const selectAll = () => { - nodeInternals.forEach((node) => (node.selected = true)); - store.setState({ nodeInternals: new Map(nodeInternals) }); + setNodes((nodes) => nodes.map((n) => ({ ...n, selected: true }))); }; return ( @@ -22,10 +23,8 @@ const Sidebar = () => { [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
Nodes
- {Array.from(nodeInternals).map(([, node]) => ( -
- Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)} -
+ {nodeInfos.map((info, index) => ( +
{info}
))}
diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index ed841db6..cff39b5d 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -27,7 +27,7 @@ const selector = (s: ReactFlowState) => ({ }); const bboxSelector = (s: ReactFlowState) => { - const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected); + const selectedNodes = s.getNodes().filter((n) => n.selected); return getRectOfNodes(selectedNodes, s.nodeOrigin); }; @@ -55,7 +55,10 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar const onContextMenu = onSelectionContextMenu ? (event: MouseEvent) => { - const selectedNodes = Array.from(store.getState().nodeInternals.values()).filter((n) => n.selected); + const selectedNodes = store + .getState() + .getNodes() + .filter((n) => n.selected); onSelectionContextMenu(event, selectedNodes); } : undefined; diff --git a/packages/core/src/components/SelectionListener/index.tsx b/packages/core/src/components/SelectionListener/index.tsx index 6177f53d..14c104fb 100644 --- a/packages/core/src/components/SelectionListener/index.tsx +++ b/packages/core/src/components/SelectionListener/index.tsx @@ -9,7 +9,7 @@ type SelectionListenerProps = { }; const selector = (s: ReactFlowState) => ({ - selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected), + selectedNodes: s.getNodes().filter((n) => n.selected), selectedEdges: s.edges.filter((e) => e.selected), }); diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index cbf1e830..ddf8bd5f 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -101,13 +101,13 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { height: Math.abs(mousePos.y - startY), }; - const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); - const nodes = Array.from(nodeInternals.values()); + const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = store.getState(); const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin); const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); const selectedNodeIds = selectedNodes.map((n) => n.id); if (prevSelectedNodesCount.current !== selectedNodeIds.length) { + const nodes = getNodes(); prevSelectedNodesCount.current = selectedNodeIds.length; const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; if (changes.length) { diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts index f2b206e7..8665f6d0 100644 --- a/packages/core/src/hooks/useGlobalKeyHandler.ts +++ b/packages/core/src/hooks/useGlobalKeyHandler.ts @@ -18,11 +18,10 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => { useEffect(() => { if (deleteKeyPressed) { - const { nodeInternals, edges } = store.getState(); - const nodes = Array.from(nodeInternals.values()); - const selectedNodes = nodes.filter((node) => node.selected); + const { edges, getNodes } = store.getState(); + const selectedNodes = getNodes().filter((node) => node.selected); const selectedEdges = edges.filter((edge) => edge.selected); - deleteElements({nodes: selectedNodes, edges: selectedEdges}); + deleteElements({ nodes: selectedNodes, edges: selectedEdges }); store.setState({ nodesSelectionActive: false }); } }, [deleteKeyPressed]); diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 6a04942e..8681b4fd 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,7 +1,7 @@ import { useStore } from '../hooks/useStore'; import type { Node, ReactFlowState } from '../types'; -const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values()); +const nodesSelector = (state: ReactFlowState) => state.getNodes(); function useNodes(): Node[] { const nodes = useStore(nodesSelector); diff --git a/packages/core/src/hooks/useNodesInitialized.ts b/packages/core/src/hooks/useNodesInitialized.ts index f0ac25d2..45b14a33 100644 --- a/packages/core/src/hooks/useNodesInitialized.ts +++ b/packages/core/src/hooks/useNodesInitialized.ts @@ -7,7 +7,7 @@ const selector = (s: ReactFlowState) => { return false; } - return Array.from(s.nodeInternals.values()).every((n) => n[internalsSymbol]?.handleBounds !== undefined); + return s.getNodes().every((n) => n[internalsSymbol]?.handleBounds !== undefined); }; function useNodesInitialized(): boolean { diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts index 0801a772..32666212 100644 --- a/packages/core/src/hooks/useReactFlow.ts +++ b/packages/core/src/hooks/useReactFlow.ts @@ -24,14 +24,14 @@ export default function useReactFlow(): ReactFlo const store = useStoreApi(); const getNodes = useCallback>(() => { - const { nodeInternals } = store.getState(); - const nodes = Array.from(nodeInternals.values()); - return nodes.map((n) => ({ ...n })); + return store + .getState() + .getNodes() + .map((n) => ({ ...n })); }, []); const getNode = useCallback>((id) => { - const { nodeInternals } = store.getState(); - return nodeInternals.get(id); + return store.getState().nodeInternals.get(id); }, []); const getEdges = useCallback>(() => { @@ -45,8 +45,8 @@ export default function useReactFlow(): ReactFlo }, []); const setNodes = useCallback>((payload) => { - const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState(); - const nodes = Array.from(nodeInternals.values()); + const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState(); + const nodes = getNodes(); const nextNodes = typeof payload === 'function' ? payload(nodes) : payload; if (hasDefaultNodes) { @@ -77,10 +77,10 @@ export default function useReactFlow(): ReactFlo const addNodes = useCallback>((payload) => { const nodes = Array.isArray(payload) ? payload : [payload]; - const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState(); + const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState(); if (hasDefaultNodes) { - const currentNodes = Array.from(nodeInternals.values()); + const currentNodes = getNodes(); const nextNodes = [...currentNodes, ...nodes]; setNodes(nextNodes); } else if (onNodesChange) { @@ -102,11 +102,10 @@ export default function useReactFlow(): ReactFlo }, []); const toObject = useCallback>(() => { - const { nodeInternals, edges = [], transform } = store.getState(); - const nodes = Array.from(nodeInternals.values()); + const { getNodes, edges = [], transform } = store.getState(); const [x, y, zoom] = transform; return { - nodes: nodes.map((n) => ({ ...n })), + nodes: getNodes().map((n) => ({ ...n })), edges: edges.map((e) => ({ ...e })), viewport: { x, @@ -119,6 +118,7 @@ export default function useReactFlow(): ReactFlo const deleteElements = useCallback(({ nodes: nodesDeleted, edges: edgesDeleted }) => { const { nodeInternals, + getNodes, edges, hasDefaultNodes, hasDefaultEdges, @@ -127,10 +127,9 @@ export default function useReactFlow(): ReactFlo onNodesChange, onEdgesChange, } = store.getState(); - const nodes = Array.from(nodeInternals.values()); const nodeIds = (nodesDeleted || []).map((node) => node.id); const edgeIds = (edgesDeleted || []).map((edge) => edge.id); - const nodesToRemove = nodes.reduce((res, node) => { + const nodesToRemove = getNodes().reduce((res, node) => { const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode); const deletable = typeof node.deletable === 'boolean' ? node.deletable : true; if (deletable && (nodeIds.includes(node.id) || parentHit)) { @@ -219,7 +218,7 @@ export default function useReactFlow(): ReactFlo return []; } - return (nodes || Array.from(store.getState().nodeInternals.values())).filter((n) => { + return (nodes || store.getState().getNodes()).filter((n) => { if (!isRect && (n.id === node!.id || !n.positionAbsolute)) { return false; } diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index eb5880e3..56e55925 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -8,8 +8,8 @@ function useUpdateNodePositions() { const store = useStoreApi(); const updatePositions = useCallback((positionDiff: XYPosition) => { - const { nodeInternals, nodeExtent, updateNodePositions, snapToGrid, snapGrid } = store.getState(); - const selectedNodes = Array.from(nodeInternals.values()).filter((n) => n.selected); + const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid } = store.getState(); + const selectedNodes = getNodes().filter((n) => n.selected); const nodeUpdates = selectedNodes.map((n) => { if (n.positionAbsolute) { diff --git a/packages/core/src/hooks/useVisibleNodes.ts b/packages/core/src/hooks/useVisibleNodes.ts index f74be159..b076b126 100644 --- a/packages/core/src/hooks/useVisibleNodes.ts +++ b/packages/core/src/hooks/useVisibleNodes.ts @@ -10,7 +10,7 @@ function useVisibleNodes(onlyRenderVisible: boolean) { (s: ReactFlowState) => onlyRenderVisible ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true) - : Array.from(s.nodeInternals.values()), + : s.getNodes(), [onlyRenderVisible] ) ); diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index bdb02137..b593faff 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -27,6 +27,9 @@ const createRFStore = () => const { nodeInternals, nodeOrigin } = get(); set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) }); }, + getNodes: () => { + return Array.from(get().nodeInternals.values()); + }, setEdges: (edges: Edge[]) => { const { defaultEdgeOptions = {} } = get(); set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) }); @@ -125,11 +128,11 @@ const createRFStore = () => }, triggerNodeChanges: (changes: NodeChange[]) => { - const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get(); + const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes } = get(); if (changes?.length) { if (hasDefaultNodes) { - const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values())); + const nodes = applyNodeChanges(changes, getNodes()); const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin); set({ nodeInternals: nextNodeInternals }); } @@ -139,14 +142,14 @@ const createRFStore = () => }, addSelectedNodes: (selectedNodeIds: string[]) => { - const { multiSelectionActive, nodeInternals, edges } = get(); + const { multiSelectionActive, edges, getNodes } = get(); let changedNodes: NodeSelectionChange[]; let changedEdges: EdgeSelectionChange[] | null = null; if (multiSelectionActive) { changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[]; } else { - changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), selectedNodeIds); + changedNodes = getSelectionChanges(getNodes(), selectedNodeIds); changedEdges = getSelectionChanges(edges, []); } @@ -158,7 +161,7 @@ const createRFStore = () => }); }, addSelectedEdges: (selectedEdgeIds: string[]) => { - const { multiSelectionActive, edges, nodeInternals } = get(); + const { multiSelectionActive, edges, getNodes } = get(); let changedEdges: EdgeSelectionChange[]; let changedNodes: NodeSelectionChange[] | null = null; @@ -166,7 +169,7 @@ const createRFStore = () => changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[]; } else { changedEdges = getSelectionChanges(edges, selectedEdgeIds); - changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), []); + changedNodes = getSelectionChanges(getNodes(), []); } updateNodesAndEdgesSelections({ @@ -177,8 +180,8 @@ const createRFStore = () => }); }, unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => { - const { nodeInternals, edges: storeEdges } = get(); - const nodesToUnselect = nodes ? nodes : Array.from(nodeInternals.values()); + const { edges: storeEdges, getNodes } = get(); + const nodesToUnselect = nodes ? nodes : getNodes(); const edgesToUnselect = edges ? edges : storeEdges; const changedNodes = nodesToUnselect.map((n) => { @@ -215,8 +218,8 @@ const createRFStore = () => set({ translateExtent }); }, resetSelectedElements: () => { - const { nodeInternals, edges } = get(); - const nodes = Array.from(nodeInternals.values()); + const { edges, getNodes } = get(); + const nodes = getNodes(); const nodesToUnselect = nodes .filter((e) => e.selected) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 02a4516b..d0d976fc 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -120,7 +120,7 @@ type InternalFitViewOptions = { export function fitView(get: StoreApi['getState'], options: InternalFitViewOptions = {}) { const { - nodeInternals, + getNodes, width, height, minZoom, @@ -134,9 +134,7 @@ export function fitView(get: StoreApi['getState'], options: Inte if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { - const nodes = Array.from(nodeInternals.values()).filter((n) => - options.includeHiddenNodes ? n.width && n.height : !n.hidden - ); + const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); 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 472df101..0d40c38c 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -212,6 +212,7 @@ export type ReactFlowStore = { export type ReactFlowActions = { setNodes: (nodes: Node[]) => void; + getNodes: () => Node[]; setEdges: (edges: Edge[]) => void; setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void; updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void; diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index b1d4c555..ecce55aa 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -26,7 +26,7 @@ const defaultWidth = 200; const defaultHeight = 150; const selector = (s: ReactFlowState) => { - const nodes = Array.from(s.nodeInternals.values()); + const nodes = s.getNodes(); const viewBB: Rect = { x: -s.transform[0] / s.transform[2], y: -s.transform[1] / s.transform[2], diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index 5c6cbc86..aed9d860 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/node-toolbar/src/NodeToolbar.tsx @@ -31,7 +31,7 @@ const nodesEqualityFn = (a: Node[], b: Node[]) => { const storeSelector = (state: ReactFlowState) => ({ transform: state.transform, nodeOrigin: state.nodeOrigin, - selectedNodesCount: Array.from(state.nodeInternals.values()).filter((node) => node.selected).length, + selectedNodesCount: state.getNodes().filter((node) => node.selected).length, }); function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string { From 50032c3d953bd819d0afe48e4b61f77f987cc8d0 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 18:21:13 +0100 Subject: [PATCH 41/63] chore(changeset): add --- .changeset/happy-students-wink.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/happy-students-wink.md diff --git a/.changeset/happy-students-wink.md b/.changeset/happy-students-wink.md new file mode 100644 index 00000000..06ecf274 --- /dev/null +++ b/.changeset/happy-students-wink.md @@ -0,0 +1,7 @@ +--- +'@reactflow/core': patch +'@reactflow/minimap': patch +'@reactflow/node-toolbar': patch +--- + +use getNodes function From 57064ff09650c7ce313c6640c5feb86b6a3a7b62 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 21:08:45 +0100 Subject: [PATCH 42/63] refactor(figma-controls): update prop names and types --- .../vite-app/src/examples/Figma/index.tsx | 8 ++- .../src/components/UserSelection/index.tsx | 70 ++++++++++++------- .../core/src/container/FlowRenderer/index.tsx | 37 +++------- .../core/src/container/GraphView/index.tsx | 8 +-- .../core/src/container/ReactFlow/index.tsx | 10 +-- .../core/src/container/ZoomPane/index.tsx | 2 +- packages/core/src/types/component-props.ts | 5 +- packages/core/src/types/general.ts | 7 +- 8 files changed, 81 insertions(+), 66 deletions(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 12b867fe..bddc4e0b 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -6,6 +6,7 @@ import ReactFlow, { Edge, useReactFlow, useKeyPress, + SelectionMode, } from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; @@ -26,6 +27,8 @@ const defaultEdgeOptions = { zIndex: 0 }; const logEvent = (e: any) => console.log(e); +const onPaneClick = (e: any) => console.log('click pane', e); + const BasicFlow = () => { const instance = useReactFlow(); const spaceBarPressed = useKeyPress('Space'); @@ -60,8 +63,8 @@ const BasicFlow = () => { { className="react-flow-basic-example" minZoom={0.2} maxZoom={4} + onPaneClick={onPaneClick} fitView defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 38d5a5ba..85b56860 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -2,7 +2,7 @@ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift */ -import { memo, useState, useRef } from 'react'; +import { memo, useState, useRef, MouseEvent as ReactMouseEvent } from 'react'; import shallow from 'zustand/shallow'; import cc from 'classcat'; @@ -10,7 +10,8 @@ import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; -import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect, ReactFlowProps } from '../../types'; +import { SelectionMode } from '../../types'; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; type SelectionRect = Rect & { startX: number; @@ -21,19 +22,20 @@ type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEvent type UserSelectionProps = { isSelectionMode: boolean; - selectBoxMode?: ReactFlowProps['selectBoxMode']; - onSelectionStart?: (e: React.MouseEvent) => void; - onSelectionEnd?: (e: React.MouseEvent) => void; - onClick?: (e: React.MouseEvent) => void; - onContextMenu?: (e: React.MouseEvent) => void; - onWheel?: (e: React.WheelEvent) => void; - onMouseEnter?: (e: React.MouseEvent) => void; - onMouseMove?: (e: React.MouseEvent) => void; - onMouseLeave?: (e: React.MouseEvent) => void; + selectionMode?: SelectionMode; + panOnDrag?: boolean | 'RightClick'; + onSelectionStart?: (e: ReactMouseEvent) => void; + onSelectionEnd?: (e: ReactMouseEvent) => void; + onPaneClick?: (e: ReactMouseEvent) => void; + onPaneContextMenu?: (e: ReactMouseEvent) => void; + onPaneScroll?: (e: React.WheelEvent) => void; + onPaneMouseEnter?: (e: ReactMouseEvent) => void; + onPaneMouseMove?: (e: ReactMouseEvent) => void; + onPaneMouseLeave?: (e: ReactMouseEvent) => void; children: React.ReactNode; }; -function getMousePosition(event: React.MouseEvent, containerBounds: DOMRect): XYPosition { +function getMousePosition(event: ReactMouseEvent, containerBounds: DOMRect): XYPosition { return { x: event.clientX - containerBounds.left, y: event.clientY - containerBounds.top, @@ -44,7 +46,7 @@ const wrapHandler = ( handler: React.MouseEventHandler | undefined, containerRef: React.MutableRefObject ): React.MouseEventHandler => { - return (event: React.MouseEvent) => { + return (event: ReactMouseEvent) => { if (event.target !== containerRef.current) { return; } @@ -67,15 +69,16 @@ const selector = (s: ReactFlowState) => ({ const UserSelection = memo( ({ isSelectionMode, - selectBoxMode = 'Contained', + selectionMode = SelectionMode.Contained, + panOnDrag, onSelectionStart, onSelectionEnd, - onClick, - onContextMenu, - onWheel, - onMouseEnter: onPaneMouseEnter, - onMouseMove: onPaneMouseMove, - onMouseLeave: onPaneMouseLeave, + onPaneClick, + onPaneContextMenu, + onPaneScroll, + onPaneMouseEnter, + onPaneMouseMove, + onPaneMouseLeave, children, }: UserSelectionProps) => { const container = useRef(null); @@ -95,7 +98,24 @@ const UserSelection = memo( prevSelectedEdgesCount.current = 0; }; - const onMouseDown = (event: React.MouseEvent): void => { + const onClick = (event: ReactMouseEvent) => { + onPaneClick?.(event); + store.getState().resetSelectedElements(); + store.setState({ nodesSelectionActive: false }); + }; + + const onContextMenu = (event: ReactMouseEvent) => { + if (panOnDrag === 'RightClick') { + event.preventDefault(); + return; + } + + onPaneContextMenu?.(event); + }; + + const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined; + + const onMouseDown = (event: ReactMouseEvent): void => { if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) { return; } @@ -119,7 +139,7 @@ const UserSelection = memo( onSelectionStart?.(event); }; - const onMouseMove = (event: React.MouseEvent): void => { + const onMouseMove = (event: ReactMouseEvent): void => { if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { return; } @@ -144,7 +164,7 @@ const UserSelection = memo( nodeInternals, nextUserSelectRect, transform, - selectBoxMode === 'Overlap', + selectionMode === SelectionMode.Overlap, true, nodeOrigin ); @@ -170,7 +190,7 @@ const UserSelection = memo( setUserSelectionRect(nextUserSelectRect); }; - const onMouseUp = (event: React.MouseEvent) => { + const onMouseUp = (event: ReactMouseEvent) => { // We only want to trigger click functions when in selection mode if // the user did not move the mouse. if (!userSelectionActive && userSelectionRect && event.target === container.current) { @@ -184,7 +204,7 @@ const UserSelection = memo( onSelectionEnd?.(event); }; - const onMouseLeave = (event: React.MouseEvent) => { + const onMouseLeave = (event: ReactMouseEvent) => { if (userSelectionActive) { store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); onSelectionEnd?.(event); diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index bd31f0d1..1af8da7f 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -43,8 +43,8 @@ const FlowRenderer = ({ onMoveStart, onMoveEnd, selectionKeyCode, - selectBoxOnDrag, - selectBoxMode, + selectionOnDrag, + selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, @@ -67,29 +67,13 @@ const FlowRenderer = ({ noPanClassName, disableKeyboardA11y, }: FlowRendererProps) => { - const store = useStoreApi(); const nodesSelectionActive = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); - const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true); + const isSelectionMode = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); - const onClick = (event: MouseEvent) => { - onPaneClick?.(event); - store.getState().resetSelectedElements(); - store.setState({ nodesSelectionActive: false }); - }; - - const onContextMenu = (event: MouseEvent) => { - if (panOnDrag === 'RightClick') { - event.preventDefault(); - } else { - onPaneContextMenu?.(event); - } - }; - const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined; - return ( {children} {nodesSelectionActive && ( diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index a0cedc43..fac6cab9 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -58,8 +58,8 @@ const GraphView = ({ connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, - selectBoxOnDrag, - selectBoxMode, + selectionOnDrag, + selectionMode, multiSelectionKeyCode, zoomActivationKeyCode, deleteKeyCode, @@ -114,8 +114,8 @@ const GraphView = ({ onPaneScroll={onPaneScroll} deleteKeyCode={deleteKeyCode} selectionKeyCode={selectionKeyCode} - selectBoxOnDrag={selectBoxOnDrag} - selectBoxMode={selectBoxMode} + selectionOnDrag={selectionOnDrag} + selectionMode={selectionMode} onSelectionStart={onSelectionStart} onSelectionEnd={onSelectionEnd} multiSelectionKeyCode={multiSelectionKeyCode} diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 46e6971c..14cd4d39 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -17,7 +17,7 @@ import GraphView from '../GraphView'; import Wrapper from './Wrapper'; import { infiniteExtent } from '../../store/initialState'; import { useNodeOrEdgeTypes } from './utils'; -import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '../../types'; +import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../../types'; import type { EdgeTypes, EdgeTypesWrapped, @@ -101,8 +101,8 @@ const ReactFlow = forwardRef( connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', - selectBoxOnDrag = false, - selectBoxMode = 'Contained', + selectionOnDrag = false, + selectionMode = SelectionMode.Contained, multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -197,8 +197,8 @@ const ReactFlow = forwardRef( connectionLineComponent={connectionLineComponent} connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} - selectBoxOnDrag={selectBoxOnDrag} - selectBoxMode={selectBoxMode} + selectionOnDrag={selectionOnDrag} + selectionMode={selectionMode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 06feddd0..41d81b7a 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -21,7 +21,7 @@ type ZoomPaneProps = Omit< | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y' - | 'selectBoxOnDrag' + | 'selectionOnDrag' >; const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean => diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index a96f006e..551b98bb 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -35,6 +35,7 @@ import type { NodeOrigin, EdgeMouseHandler, HandleType, + SelectionMode, } from '.'; export type ReactFlowProps = HTMLAttributes & { @@ -96,8 +97,8 @@ export type ReactFlowProps = HTMLAttributes & { connectionMode?: ConnectionMode; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; - selectBoxOnDrag?: boolean; - selectBoxMode?: 'Overlap' | 'Contained'; + selectionOnDrag?: boolean; + selectionMode?: SelectionMode; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 472df101..ee1e9684 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -3,7 +3,7 @@ import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3'; import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; -import type { NodeChange, EdgeChange, NodePositionChange } from './changes'; +import type { NodeChange, EdgeChange } from './changes'; import type { Node, NodeInternals, @@ -248,3 +248,8 @@ export type ProOptions = { }; export type UseDragEvent = D3DragEvent; + +export enum SelectionMode { + Overlap = 'overlap', + Contained = 'contained', +} From 36e4e773ce434c2044569d333114e3fe8362716b Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 21:12:16 +0100 Subject: [PATCH 43/63] chore(flow-renderer): cleanup --- packages/core/src/container/FlowRenderer/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 1af8da7f..caaaa8a9 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; -import type { ReactNode, WheelEvent, MouseEvent } from 'react'; +import type { ReactNode } from 'react'; -import { useStore, useStoreApi } from '../../hooks/useStore'; +import { useStore } from '../../hooks/useStore'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; import useKeyPress from '../../hooks/useKeyPress'; import { GraphViewProps } from '../GraphView'; From 08faffacee05ca709536877bba6d41fb050a2dab Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 21:58:24 +0100 Subject: [PATCH 44/63] refactor(selection): improve performance --- .../components/UserSelection/SelectionBox.tsx | 30 +++++ .../src/components/UserSelection/index.tsx | 107 +++++++----------- packages/core/src/store/initialState.ts | 1 + packages/core/src/types/general.ts | 6 + 4 files changed, 78 insertions(+), 66 deletions(-) create mode 100644 packages/core/src/components/UserSelection/SelectionBox.tsx diff --git a/packages/core/src/components/UserSelection/SelectionBox.tsx b/packages/core/src/components/UserSelection/SelectionBox.tsx new file mode 100644 index 00000000..bfd63ea1 --- /dev/null +++ b/packages/core/src/components/UserSelection/SelectionBox.tsx @@ -0,0 +1,30 @@ +import shallow from 'zustand/shallow'; +import { useStore } from '../../hooks/useStore'; +import { ReactFlowState } from '../../types'; + +const selector = (s: ReactFlowState) => ({ + userSelectionActive: s.userSelectionActive, + userSelectionRect: s.userSelectionRect, +}); + +function SelectionBox() { + const { userSelectionActive, userSelectionRect } = useStore(selector, shallow); + const showSelectionBox = userSelectionActive && userSelectionRect; + + if (!showSelectionBox) { + return null; + } + + return ( +
+ ); +} + +export default SelectionBox; diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 9b380967..21d07a2c 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -2,23 +2,17 @@ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift */ -import { memo, useState, useRef, MouseEvent as ReactMouseEvent } from 'react'; +import { memo, useRef, MouseEvent as ReactMouseEvent } from 'react'; import shallow from 'zustand/shallow'; import cc from 'classcat'; +import SelectionBox from './SelectionBox'; import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; import { SelectionMode } from '../../types'; -import type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; - -type SelectionRect = Rect & { - startX: number; - startY: number; -}; - -type EventHandlers = { [key: string]: React.MouseEventHandler | React.WheelEventHandler | undefined }; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; type UserSelectionProps = { isSelectionMode: boolean; @@ -54,12 +48,6 @@ const wrapHandler = ( }; }; -const wrapHandlers = ( - handlers: EventHandlers, - containerRef: React.MutableRefObject -): EventHandlers => - Object.keys(handlers).reduce((hls, key) => ({ ...hls, [key]: wrapHandler(handlers[key], containerRef) }), {}); - const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, elementsSelectable: s.elementsSelectable, @@ -86,13 +74,10 @@ const UserSelection = memo( const prevSelectedNodesCount = useRef(0); const prevSelectedEdgesCount = useRef(0); const containerBounds = useRef(); - const [userSelectionRect, setUserSelectionRect] = useState(null); const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow); const resetUserSelection = () => { - setUserSelectionRect(null); - - store.setState({ userSelectionActive: false }); + store.setState({ userSelectionActive: false, userSelectionRect: null }); prevSelectedNodesCount.current = 0; prevSelectedEdgesCount.current = 0; @@ -116,30 +101,39 @@ const UserSelection = memo( const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined; const onMouseDown = (event: ReactMouseEvent): void => { - if (!elementsSelectable || !isSelectionMode || event.button !== 0 || event.target !== container.current) { + const { resetSelectedElements, domNode } = store.getState(); + if ( + !elementsSelectable || + !isSelectionMode || + event.button !== 0 || + event.target !== container.current || + !domNode + ) { return; } - store.getState().resetSelectedElements(); + containerBounds.current = domNode.getBoundingClientRect(); + const { x, y } = getMousePosition(event, containerBounds.current!); - const reactFlowNode = (event.target as Element).closest('.react-flow')!; - containerBounds.current = reactFlowNode.getBoundingClientRect(); + resetSelectedElements(); - const mousePos = getMousePosition(event, containerBounds.current!); - - setUserSelectionRect({ - width: 0, - height: 0, - startX: mousePos.x, - startY: mousePos.y, - x: mousePos.x, - y: mousePos.y, + store.setState({ + userSelectionRect: { + width: 0, + height: 0, + startX: x, + startY: y, + x, + y, + }, }); onSelectionStart?.(event); }; const onMouseMove = (event: ReactMouseEvent): void => { + const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = + store.getState(); if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { return; } @@ -158,7 +152,6 @@ const UserSelection = memo( height: Math.abs(mousePos.y - startY), }; - const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = store.getState(); const nodes = getNodes(); const selectedNodes = getNodesInside( nodeInternals, @@ -187,10 +180,13 @@ const UserSelection = memo( } } - setUserSelectionRect(nextUserSelectRect); + store.setState({ + userSelectionRect: nextUserSelectRect, + }); }; const onMouseUp = (event: ReactMouseEvent) => { + const { userSelectionRect } = store.getState(); // We only want to trigger click functions when in selection mode if // the user did not move the mouse. if (!userSelectionActive && userSelectionRect && event.target === container.current) { @@ -200,7 +196,6 @@ const UserSelection = memo( store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); resetUserSelection(); - onSelectionEnd?.(event); }; @@ -209,29 +204,11 @@ const UserSelection = memo( store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); onSelectionEnd?.(event); } + resetUserSelection(); }; - const eventHandlers = - elementsSelectable && (isSelectionMode || userSelectionActive) - ? { - ...wrapHandlers({ onContextMenu, onWheel }, container), - onMouseDown, - onMouseMove, - onMouseUp, - onMouseLeave, - } - : wrapHandlers( - { - onClick, - onContextMenu, - onWheel, - onMouseEnter: onPaneMouseEnter, - onMouseMove: onPaneMouseMove, - onMouseLeave: onPaneMouseLeave, - }, - container - ); + const hasActiveSelection = elementsSelectable && (isSelectionMode || userSelectionActive); return (
{children} - {userSelectionActive && userSelectionRect && ( -
- )} +
); } diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index ab918e65..6a92b777 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -26,6 +26,7 @@ const initialState: ReactFlowStore = { nodeExtent: infiniteExtent, nodesSelectionActive: false, userSelectionActive: false, + userSelectionRect: null, connectionNodeId: null, connectionHandleId: null, connectionHandleType: 'source', diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 52ded366..b083964f 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -155,6 +155,7 @@ export type ReactFlowStore = { nodesSelectionActive: boolean; userSelectionActive: boolean; + userSelectionRect: SelectionRect | null; connectionNodeId: string | null; connectionHandleId: string | null; @@ -254,3 +255,8 @@ export enum SelectionMode { Overlap = 'overlap', Contained = 'contained', } + +export type SelectionRect = Rect & { + startX: number; + startY: number; +}; From aaa0854c6210abdb66766f4b92fe949b30c19f2b Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 22:06:07 +0100 Subject: [PATCH 45/63] chore(figma-controls): rename props --- .../src/components/UserSelection/index.tsx | 18 ++++++------------ .../core/src/container/FlowRenderer/index.tsx | 5 ++--- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 21d07a2c..25ed3296 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -15,7 +15,7 @@ import { SelectionMode } from '../../types'; import type { XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; type UserSelectionProps = { - isSelectionMode: boolean; + isSelecting: boolean; selectionMode?: SelectionMode; panOnDrag?: boolean | 'RightClick'; onSelectionStart?: (e: ReactMouseEvent) => void; @@ -56,7 +56,7 @@ const selector = (s: ReactFlowState) => ({ const UserSelection = memo( ({ - isSelectionMode, + isSelecting, selectionMode = SelectionMode.Contained, panOnDrag, onSelectionStart, @@ -102,13 +102,7 @@ const UserSelection = memo( const onMouseDown = (event: ReactMouseEvent): void => { const { resetSelectedElements, domNode } = store.getState(); - if ( - !elementsSelectable || - !isSelectionMode || - event.button !== 0 || - event.target !== container.current || - !domNode - ) { + if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !domNode) { return; } @@ -134,7 +128,7 @@ const UserSelection = memo( const onMouseMove = (event: ReactMouseEvent): void => { const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = store.getState(); - if (!isSelectionMode || !containerBounds.current || !userSelectionRect) { + if (!isSelecting || !containerBounds.current || !userSelectionRect) { return; } @@ -208,14 +202,14 @@ const UserSelection = memo( resetUserSelection(); }; - const hasActiveSelection = elementsSelectable && (isSelectionMode || userSelectionActive); + const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive); return (
{ const nodesSelectionActive = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); - - const isSelectionMode = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); + const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -107,7 +106,7 @@ const FlowRenderer = ({ onPaneContextMenu={onPaneContextMenu} onPaneScroll={onPaneScroll} panOnDrag={panOnDrag} - isSelectionMode={!!isSelectionMode} + isSelecting={!!isSelecting} selectionMode={selectionMode} > {children} From d34ecbf802bbcc6a507033c4752c25de560b78cb Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 12 Dec 2022 16:19:06 +0100 Subject: [PATCH 46/63] refactor(selectionMode): rename options --- examples/vite-app/src/examples/Figma/index.tsx | 2 +- packages/core/src/components/UserSelection/index.tsx | 4 ++-- packages/core/src/container/ReactFlow/index.tsx | 2 +- packages/core/src/types/general.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index bddc4e0b..d6063dde 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -64,7 +64,7 @@ const BasicFlow = () => { defaultNodes={initialNodes} defaultEdges={initialEdges} selectionOnDrag - selectionMode={SelectionMode.Overlap} + selectionMode={SelectionMode.Partial} panOnDrag={spaceBarPressed ? true : 'RightClick'} panOnScroll onPaneContextMenu={logEvent} diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 25ed3296..f5dc551d 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -57,7 +57,7 @@ const selector = (s: ReactFlowState) => ({ const UserSelection = memo( ({ isSelecting, - selectionMode = SelectionMode.Contained, + selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, @@ -151,7 +151,7 @@ const UserSelection = memo( nodeInternals, nextUserSelectRect, transform, - selectionMode === SelectionMode.Overlap, + selectionMode === SelectionMode.Partial, true, nodeOrigin ); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 14cd4d39..183df8c0 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -102,7 +102,7 @@ const ReactFlow = forwardRef( deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, - selectionMode = SelectionMode.Contained, + selectionMode = SelectionMode.Full, multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index b083964f..6bcd06fc 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -252,8 +252,8 @@ export type ProOptions = { export type UseDragEvent = D3DragEvent; export enum SelectionMode { - Overlap = 'overlap', - Contained = 'contained', + Partial = 'partial', + Full = 'full', } export type SelectionRect = Rect & { From ee2f39f2fe249a86216aa478e9bceac565e0a2c5 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 12 Dec 2022 16:35:39 +0100 Subject: [PATCH 47/63] feat(props): add panActivationKeyCode --- .../vite-app/src/examples/Figma/index.tsx | 57 +------------------ .../core/src/container/FlowRenderer/index.tsx | 2 + .../core/src/container/GraphView/index.tsx | 2 + .../core/src/container/ReactFlow/index.tsx | 2 + .../core/src/container/ZoomPane/index.tsx | 5 +- packages/core/src/types/component-props.ts | 1 + 6 files changed, 13 insertions(+), 56 deletions(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index d6063dde..3ea30022 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -4,7 +4,6 @@ import ReactFlow, { BackgroundVariant, Node, Edge, - useReactFlow, useKeyPress, SelectionMode, } from 'reactflow'; @@ -23,42 +22,9 @@ const initialEdges: Edge[] = [ { id: 'e1-3', source: '1', target: '3' }, ]; -const defaultEdgeOptions = { zIndex: 0 }; - -const logEvent = (e: any) => console.log(e); - -const onPaneClick = (e: any) => console.log('click pane', e); - const BasicFlow = () => { - const instance = useReactFlow(); const spaceBarPressed = useKeyPress('Space'); - const updatePos = () => { - instance.setNodes((nodes) => - nodes.map((node) => { - node.position = { - x: Math.random() * 400, - y: Math.random() * 400, - }; - - return node; - }) - ); - }; - - const logToObject = () => console.log(instance.toObject()); - const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 }); - - const toggleClassnames = () => { - instance.setNodes((nodes) => - nodes.map((node) => { - node.className = node.className === 'light' ? 'dark' : 'light'; - - return node; - }) - ); - }; - return ( { selectionMode={SelectionMode.Partial} panOnDrag={spaceBarPressed ? true : 'RightClick'} panOnScroll - onPaneContextMenu={logEvent} - zoomActivationKeyCode={'Meta'} + zoomActivationKeyCode="Meta" multiSelectionKeyCode={MULTI_SELECT_KEY} - className="react-flow-basic-example" - minZoom={0.2} - maxZoom={4} - onPaneClick={onPaneClick} fitView - defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} > - - -
- - - - -
+ ); }; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 164d2adc..ae2d4a1d 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -48,6 +48,7 @@ const FlowRenderer = ({ onSelectionStart, onSelectionEnd, multiSelectionKeyCode, + panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, @@ -91,6 +92,7 @@ const FlowRenderer = ({ translateExtent={translateExtent} minZoom={minZoom} maxZoom={maxZoom} + panActivationKeyCode={panActivationKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} preventScrolling={preventScrolling} noWheelClassName={noWheelClassName} diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index fac6cab9..425d9180 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -61,6 +61,7 @@ const GraphView = ({ selectionOnDrag, selectionMode, multiSelectionKeyCode, + panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, @@ -119,6 +120,7 @@ const GraphView = ({ onSelectionStart={onSelectionStart} onSelectionEnd={onSelectionEnd} multiSelectionKeyCode={multiSelectionKeyCode} + panActivationKeyCode={panActivationKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} elementsSelectable={elementsSelectable} onMove={onMove} diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 183df8c0..6b9fbacc 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -103,6 +103,7 @@ const ReactFlow = forwardRef( selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, + panActivationKeyCode = 'Space', multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -201,6 +202,7 @@ const ReactFlow = forwardRef( selectionMode={selectionMode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} + panActivationKeyCode={panActivationKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} onlyRenderVisibleElements={onlyRenderVisibleElements} selectNodesOnDrag={selectNodesOnDrag} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 50d36458..3a476865 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -53,11 +53,12 @@ const ZoomPane = ({ panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, elementsSelectable, - panOnDrag = true, + panOnDrag: _panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, + panActivationKeyCode, zoomActivationKeyCode, preventScrolling = true, children, @@ -72,6 +73,8 @@ const ZoomPane = ({ const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); + const panActivationKeyPressed = useKeyPress(panActivationKeyCode); + const panOnDrag = _panOnDrag || panActivationKeyPressed; useResizeHandler(zoomPane); diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 551b98bb..d0caf183 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -99,6 +99,7 @@ export type ReactFlowProps = HTMLAttributes & { selectionKeyCode?: KeyCode | null; selectionOnDrag?: boolean; selectionMode?: SelectionMode; + panActivationKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; From 0a2529d26ee5826d2af771643b32b2c9f9623169 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 12 Dec 2022 16:52:31 +0100 Subject: [PATCH 48/63] chore(figma-controls): cleanup --- .../vite-app/src/examples/Figma/index.tsx | 22 +++---------------- .../src/examples/NodeResizer/index.tsx | 2 +- .../core/src/container/FlowRenderer/index.tsx | 6 +++-- .../core/src/container/ZoomPane/index.tsx | 5 +---- 4 files changed, 9 insertions(+), 26 deletions(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 3ea30022..c92a45a8 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -1,12 +1,4 @@ -import ReactFlow, { - ReactFlowProvider, - Background, - BackgroundVariant, - Node, - Edge, - useKeyPress, - SelectionMode, -} from 'reactflow'; +import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; @@ -23,15 +15,13 @@ const initialEdges: Edge[] = [ ]; const BasicFlow = () => { - const spaceBarPressed = useKeyPress('Space'); - return ( { ); }; -export default function App() { - return ( - - - - ); -} +export default BasicFlow; diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx index 683f9ab5..68afe5df 100644 --- a/examples/vite-app/src/examples/NodeResizer/index.tsx +++ b/examples/vite-app/src/examples/NodeResizer/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState, Panel } from 'reactflow'; import NodeResizerNode from './NodeResizerNode'; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index ae2d4a1d..37bd44d9 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -57,7 +57,7 @@ const FlowRenderer = ({ panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, - panOnDrag, + panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, @@ -70,6 +70,9 @@ const FlowRenderer = ({ }: FlowRendererProps) => { const nodesSelectionActive = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); + const panActivationKeyPressed = useKeyPress(panActivationKeyCode); + + const panOnDrag = panActivationKeyPressed || _panOnDrag; const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -92,7 +95,6 @@ const FlowRenderer = ({ translateExtent={translateExtent} minZoom={minZoom} maxZoom={maxZoom} - panActivationKeyCode={panActivationKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} preventScrolling={preventScrolling} noWheelClassName={noWheelClassName} diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 3a476865..50d36458 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -53,12 +53,11 @@ const ZoomPane = ({ panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, elementsSelectable, - panOnDrag: _panOnDrag = true, + panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, - panActivationKeyCode, zoomActivationKeyCode, preventScrolling = true, children, @@ -73,8 +72,6 @@ const ZoomPane = ({ const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); - const panActivationKeyPressed = useKeyPress(panActivationKeyCode); - const panOnDrag = _panOnDrag || panActivationKeyPressed; useResizeHandler(zoomPane); From 9ba39ae49f856a93366eb9b34d0fc6b6d0139cd7 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 12 Dec 2022 17:43:33 +0100 Subject: [PATCH 49/63] fix(defaultViewport): clamp invalid zoom values --- examples/vite-app/cypress/e2e/figma.cy.ts | 1 - examples/vite-app/src/examples/Figma/index.tsx | 2 +- packages/core/src/container/ZoomPane/index.tsx | 7 +++++-- packages/core/src/styles/init.css | 4 ---- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/examples/vite-app/cypress/e2e/figma.cy.ts b/examples/vite-app/cypress/e2e/figma.cy.ts index 6d3ddfea..e3c8563f 100644 --- a/examples/vite-app/cypress/e2e/figma.cy.ts +++ b/examples/vite-app/cypress/e2e/figma.cy.ts @@ -5,7 +5,6 @@ describe('Figma Flow UI', () => { it('renders a flow with three nodes', () => { cy.get('.react-flow__renderer'); - cy.get('.react-flow-basic-example'); // check if className prop works cy.get('.react-flow__node').should('have.length', 4); cy.get('.react-flow__edge').should('have.length', 2); cy.get('.react-flow__node').children('.react-flow__handle'); diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index c92a45a8..0ac44198 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; +import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode, Viewport } from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 50d36458..9dcd946f 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -9,8 +9,9 @@ import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; -import type { FlowRendererProps } from '../FlowRenderer'; +import { clamp } from '../../utils'; import { CoordinateExtent, PanOnScrollMode } from '../../types'; +import type { FlowRendererProps } from '../FlowRenderer'; import type { Viewport, ReactFlowState } from '../../types'; type ZoomPaneProps = Omit< @@ -80,7 +81,9 @@ const ZoomPane = ({ const bbox = zoomPane.current.getBoundingClientRect(); const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent); const selection = select(zoomPane.current as Element).call(d3ZoomInstance); - const updatedTransform = zoomIdentity.translate(defaultViewport.x, defaultViewport.y).scale(defaultViewport.zoom); + const updatedTransform = zoomIdentity + .translate(defaultViewport.x, defaultViewport.y) + .scale(clamp(defaultViewport.zoom, minZoom, maxZoom)); const extent: CoordinateExtent = [ [0, 0], [bbox.width, bbox.height], diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index 2a6caed2..a621794f 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -30,10 +30,6 @@ z-index: 4; } -.react-flow__pane { - z-index: 5; -} - .react-flow__selection { z-index: 6; } From baa8689ef629d22da4cbbef955e0c83d21df0493 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Dec 2022 17:06:09 +0100 Subject: [PATCH 50/63] chore(chnageset): add --- .changeset/nervous-oranges-study.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .changeset/nervous-oranges-study.md diff --git a/.changeset/nervous-oranges-study.md b/.changeset/nervous-oranges-study.md new file mode 100644 index 00000000..84b5bce0 --- /dev/null +++ b/.changeset/nervous-oranges-study.md @@ -0,0 +1,16 @@ +--- +'@reactflow/core': minor +'@reactflow/minimap': minor +'@reactflow/node-toolbar': minor +'reactflow': minor +--- + +## New Features + +New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + +1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) +2. `panOnDrag="RightClick"` option +3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) +4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it +5. `onSelectionStart` and `onSelectionEnd` events From 51fd6eb942d7af19185a27b4b616b7c34b5a4333 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Dec 2022 17:12:43 +0100 Subject: [PATCH 51/63] chore(changesets): cleanup --- .changeset/happy-students-wink.md | 3 ++- .changeset/purple-mails-kneel.md | 1 + .changeset/swift-mayflies-wink.md | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.changeset/happy-students-wink.md b/.changeset/happy-students-wink.md index 06ecf274..71f815ef 100644 --- a/.changeset/happy-students-wink.md +++ b/.changeset/happy-students-wink.md @@ -2,6 +2,7 @@ '@reactflow/core': patch '@reactflow/minimap': patch '@reactflow/node-toolbar': patch +'reactflow': patch --- -use getNodes function +Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. \ No newline at end of file diff --git a/.changeset/purple-mails-kneel.md b/.changeset/purple-mails-kneel.md index f2da8f5a..dfd983df 100644 --- a/.changeset/purple-mails-kneel.md +++ b/.changeset/purple-mails-kneel.md @@ -1,6 +1,7 @@ --- '@reactflow/core': patch '@reactflow/minimap': patch +'reactflow': patch --- Use translateExtent correctly diff --git a/.changeset/swift-mayflies-wink.md b/.changeset/swift-mayflies-wink.md index 96bbef36..48cf7ca6 100644 --- a/.changeset/swift-mayflies-wink.md +++ b/.changeset/swift-mayflies-wink.md @@ -1,5 +1,6 @@ --- '@reactflow/core': patch +'reactflow': patch --- Only trigger drag event when change happened From 0342cd475f1b79f2b744e737501f177e9c2a8e31 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Dec 2022 17:25:41 +0100 Subject: [PATCH 52/63] chore(changesets): enter prerelease mode and bump packages --- .changeset/pre.json | 23 +++++++++++++++++++++++ examples/vite-app/package.json | 2 +- packages/background/CHANGELOG.md | 7 +++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 22 ++++++++++++++++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 23 +++++++++++++++++++++++ packages/minimap/package.json | 2 +- packages/node-resizer/CHANGELOG.md | 7 +++++++ packages/node-resizer/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 21 +++++++++++++++++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 29 +++++++++++++++++++++++++++++ packages/reactflow/package.json | 2 +- 16 files changed, 147 insertions(+), 8 deletions(-) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..05ad7693 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,23 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@reactflow/examples": "0.0.0", + "@reactflow/background": "11.0.7", + "@reactflow/controls": "11.0.7", + "@reactflow/core": "11.3.2", + "@reactflow/minimap": "11.2.3", + "@reactflow/node-resizer": "1.1.0", + "@reactflow/node-toolbar": "1.0.2", + "reactflow": "11.3.3", + "@reactflow/eslint-config": "0.0.0", + "@reactflow/rollup-config": "0.0.0", + "@reactflow/tsconfig": "0.0.0" + }, + "changesets": [ + "happy-students-wink", + "nervous-oranges-study", + "purple-mails-kneel", + "swift-mayflies-wink" + ] +} diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 2a05d338..7e88c874 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -13,7 +13,7 @@ "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'" }, "dependencies": { - "@reactflow/node-resizer": "workspace:^1.0.0", + "@reactflow/node-resizer": "workspace:*", "classcat": "^5.0.3", "dagre": "^0.8.5", "localforage": "^1.10.0", diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index bdbef9c7..2d1a8dfb 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/background +## 11.0.8-next.0 + +### Patch Changes + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + ## 11.0.7 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 5011906c..4681fce4 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.7", + "version": "11.0.8-next.0", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 9df35ad9..d5bc65d7 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.0.8-next.0 + +### Patch Changes + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + ## 11.0.7 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 7458ee83..32b9ad72 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.7", + "version": "11.0.8-next.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 index b0b48f29..82d3678a 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,27 @@ # @reactflow/core +## 11.4.0-next.0 + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features + + New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + + 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) + 2. `panOnDrag="RightClick"` option + 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) + 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it + 5. `onSelectionStart` and `onSelectionEnd` events + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. + +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly + +- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) Thanks [@moklick](https://github.com/moklick)! - Only trigger drag event when change happened + ## 11.3.2 In this update we did some changes so that we could implement the new [``](https://reactflow.dev/docs/api/nodes/node-resizer/) component more smoothly. diff --git a/packages/core/package.json b/packages/core/package.json index 9bd0f67b..b8b5e6f5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.3.2", + "version": "11.4.0-next.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 a98b4072..a31d070a 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,28 @@ # @reactflow/minimap +## 11.3.0-next.0 + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features + + New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + + 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) + 2. `panOnDrag="RightClick"` option + 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) + 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it + 5. `onSelectionStart` and `onSelectionEnd` events + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. + +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + ## 11.2.3 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index ce4db650..b1c1982f 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.2.3", + "version": "11.3.0-next.0", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md index a996183c..ae55e7f8 100644 --- a/packages/node-resizer/CHANGELOG.md +++ b/packages/node-resizer/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/node-resizer +## 1.1.1-next.0 + +### Patch Changes + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + ## 1.1.0 ### Minor Changes diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 29b04048..115a339a 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-resizer", - "version": "1.1.0", + "version": "1.1.1-next.0", "description": "A helper component for resizing nodes.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 624d1510..566531d3 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,26 @@ # @reactflow/node-toolbar +## 1.1.0-next.0 + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features + + New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + + 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) + 2. `panOnDrag="RightClick"` option + 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) + 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it + 5. `onSelectionStart` and `onSelectionEnd` events + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + ## 1.0.2 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 2163d4ce..06425f6b 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.0.2", + "version": "1.1.0-next.0", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index dfeb78db..80afb302 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,34 @@ # reactflow +## 11.4.0-next.0 + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features + + New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + + 1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) + 2. `panOnDrag="RightClick"` option + 3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) + 4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it + 5. `onSelectionStart` and `onSelectionEnd` events + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. + +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly + +- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) Thanks [@moklick](https://github.com/moklick)! - Only trigger drag event when change happened + +- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0-next.0 + - @reactflow/minimap@11.3.0-next.0 + - @reactflow/node-toolbar@1.1.0-next.0 + - @reactflow/background@11.0.8-next.0 + - @reactflow/controls@11.0.8-next.0 + ## 11.3.3 In this update we did some changes so that we could implement the new [``](https://reactflow.dev/docs/api/nodes/node-resizer/) component (not part of the `reactflow` package!) more smoothly. diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index f1f3ecab..0dd47987 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.3.3", + "version": "11.4.0-next.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From e1145f35296b53843697ca6247c973a40982405f Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 10:47:57 +0100 Subject: [PATCH 53/63] fix(minimap): nodes outside of viewport clicakbel closes #2680 --- packages/minimap/src/MiniMap.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 480552ca..2aaf7334 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -202,6 +202,7 @@ function MiniMap({ fillRule="evenodd" stroke={maskStrokeColor} strokeWidth={maskStrokeWidth} + pointerEvents="none" /> From 2a7effd2918453b21d5aa40e6e28e266123eb7b1 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 10:54:40 +0100 Subject: [PATCH 54/63] fix(selection): do not select hidden nodes closes #2679 --- .../core/src/components/UserSelection/index.tsx | 15 +++++++++++---- packages/core/src/utils/graph.ts | 4 ++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index f5dc551d..87f801d0 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -102,12 +102,19 @@ const UserSelection = memo( const onMouseDown = (event: ReactMouseEvent): void => { const { resetSelectedElements, domNode } = store.getState(); - if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !domNode) { + containerBounds.current = domNode?.getBoundingClientRect(); + + if ( + !elementsSelectable || + !isSelecting || + event.button !== 0 || + event.target !== container.current || + !containerBounds.current + ) { return; } - containerBounds.current = domNode.getBoundingClientRect(); - const { x, y } = getMousePosition(event, containerBounds.current!); + const { x, y } = getMousePosition(event, containerBounds.current); resetSelectedElements(); @@ -134,7 +141,7 @@ const UserSelection = memo( store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - const mousePos = getMousePosition(event, containerBounds.current!); + const mousePos = getMousePosition(event, containerBounds.current); const startX = userSelectionRect.startX ?? 0; const startY = userSelectionRect.startY ?? 0; diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 9a3d4c42..846050f5 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -218,9 +218,9 @@ export const getNodesInside = ( const visibleNodes: Node[] = []; nodeInternals.forEach((node) => { - const { width, height, selectable = true } = node; + const { width, height, selectable = true, hidden = false } = node; - if (excludeNonSelectableNodes && !selectable) { + if ((excludeNonSelectableNodes && !selectable) || hidden) { return false; } From 72a4f4a5fbcc25d8e1f869d5d0fd3393b5847c35 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 11:06:24 +0100 Subject: [PATCH 55/63] refactor(key-handling): multi sleect when input focused closes #2650 --- packages/core/src/utils/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index f6e9d994..85220467 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -79,6 +79,12 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole // using composed path for handling shadow dom const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + // 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; + } + + // 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') || From dca41aaf0b5036b19ef5b3458a61aa01ef6db697 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 12:43:52 +0100 Subject: [PATCH 56/63] refactor(panOnDrag): boolean or numbers for configuration --- .../vite-app/src/examples/Figma/index.tsx | 12 ++++- .../src/components/UserSelection/index.tsx | 30 +++++++------ .../core/src/container/ZoomPane/index.tsx | 45 ++++++++++--------- packages/core/src/types/component-props.ts | 2 +- 4 files changed, 53 insertions(+), 36 deletions(-) diff --git a/examples/vite-app/src/examples/Figma/index.tsx b/examples/vite-app/src/examples/Figma/index.tsx index 0ac44198..e1e20dc7 100644 --- a/examples/vite-app/src/examples/Figma/index.tsx +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -1,4 +1,4 @@ -import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode, Viewport } from 'reactflow'; +import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow'; const MULTI_SELECT_KEY = ['Meta', 'Shift']; @@ -14,6 +14,13 @@ const initialEdges: Edge[] = [ { id: 'e1-3', source: '1', target: '3' }, ]; +const onPaneContextMenu = (e: any) => { + e.preventDefault(); + console.log('context menu'); +}; + +const panOnDrag = [1, 2]; + const BasicFlow = () => { return ( { defaultEdges={initialEdges} selectionOnDrag selectionMode={SelectionMode.Partial} - panOnDrag="RightClick" + panOnDrag={panOnDrag} panOnScroll zoomActivationKeyCode="Meta" multiSelectionKeyCode={MULTI_SELECT_KEY} + onPaneContextMenu={onPaneContextMenu} fitView selectNodesOnDrag={false} > diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 87f801d0..26ba621c 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -11,23 +11,27 @@ import { containerStyle } from '../../styles'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils/changes'; import { getConnectedEdges, getNodesInside } from '../../utils/graph'; -import { SelectionMode } from '../../types'; +import { ReactFlowProps, SelectionMode } from '../../types'; import type { XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; type UserSelectionProps = { isSelecting: boolean; - selectionMode?: SelectionMode; - panOnDrag?: boolean | 'RightClick'; - onSelectionStart?: (e: ReactMouseEvent) => void; - onSelectionEnd?: (e: ReactMouseEvent) => void; - onPaneClick?: (e: ReactMouseEvent) => void; - onPaneContextMenu?: (e: ReactMouseEvent) => void; - onPaneScroll?: (e: React.WheelEvent) => void; - onPaneMouseEnter?: (e: ReactMouseEvent) => void; - onPaneMouseMove?: (e: ReactMouseEvent) => void; - onPaneMouseLeave?: (e: ReactMouseEvent) => void; children: React.ReactNode; -}; +} & Partial< + Pick< + ReactFlowProps, + | 'selectionMode' + | 'panOnDrag' + | 'onSelectionStart' + | 'onSelectionEnd' + | 'onPaneClick' + | 'onPaneContextMenu' + | 'onPaneScroll' + | 'onPaneMouseEnter' + | 'onPaneMouseMove' + | 'onPaneMouseLeave' + > +>; function getMousePosition(event: ReactMouseEvent, containerBounds: DOMRect): XYPosition { return { @@ -90,7 +94,7 @@ const UserSelection = memo( }; const onContextMenu = (event: ReactMouseEvent) => { - if (panOnDrag === 'RightClick') { + if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) { event.preventDefault(); return; } diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 9dcd946f..2099d9a1 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -35,6 +35,9 @@ const eventToFlowTransform = (eventViewport: any): Viewport => ({ const isWrappedWithClass = (event: any, className: string | undefined) => event.target.closest(`.${className}`); +const isRightClickPan = (panOnDrag: FlowRendererProps['panOnDrag'], usedButton: number) => + usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2); + const selector = (s: ReactFlowState) => ({ d3Zoom: s.d3Zoom, d3Selection: s.d3Selection, @@ -68,7 +71,7 @@ const ZoomPane = ({ const timerId = useRef>(); const store = useStoreApi(); const isZoomingOrPanning = useRef(false); - const hasMouseMoved = useRef(false); + const zoomedWithRightMouseButton = useRef(false); const zoomPane = useRef(null); const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); @@ -170,15 +173,16 @@ const ZoomPane = ({ const { onViewportChange } = store.getState(); store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] }); + zoomedWithRightMouseButton.current = !!( + onPaneContextMenu && isRightClickPan(panOnDrag, event.sourceEvent?.button) + ); + if (onMove || onViewportChange) { const flowTransform = eventToFlowTransform(event.transform); onViewportChange?.(flowTransform); onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform); } - if (panOnDrag === 'RightClick' && onPaneContextMenu) { - hasMouseMoved.current = true; - } }); } } @@ -193,6 +197,7 @@ const ZoomPane = ({ const { onViewportChangeStart } = store.getState(); isZoomingOrPanning.current = true; + if (event.sourceEvent?.type === 'mousedown') { store.setState({ paneDragging: true }); } @@ -219,6 +224,15 @@ const ZoomPane = ({ isZoomingOrPanning.current = false; store.setState({ paneDragging: false }); + if ( + onPaneContextMenu && + isRightClickPan(panOnDrag, event.sourceEvent?.button) && + !zoomedWithRightMouseButton.current + ) { + onPaneContextMenu(event.sourceEvent); + } + zoomedWithRightMouseButton.current = false; + if ((onMoveEnd || onViewportChangeEnd) && viewChanged(prevTransform.current, event.transform)) { const flowTransform = eventToFlowTransform(event.transform); prevTransform.current = flowTransform; @@ -232,19 +246,9 @@ const ZoomPane = ({ panOnScroll ? 150 : 0 ); } - - if ( - panOnDrag === 'RightClick' && - onPaneContextMenu && - !hasMouseMoved.current && - event.sourceEvent?.button === 2 - ) { - onPaneContextMenu(event.sourceEvent); - } - hasMouseMoved.current = false; }); } - }, [d3Zoom, onMoveEnd, panOnScroll, panOnDrag, onPaneContextMenu]); + }, [d3Zoom, panOnScroll, panOnDrag, onMoveEnd, onPaneContextMenu]); useEffect(() => { if (d3Zoom) { @@ -299,17 +303,18 @@ const ZoomPane = ({ return false; } - // if the pane is only movable using right clicks, prevent all other clicks + // if the pane is only movable using allowed clicks if ( - panOnDrag === 'RightClick' && - (event.type === 'mousedown' || event.type === 'touchstart') && - event.button !== 2 + Array.isArray(panOnDrag) && + !panOnDrag.includes(event.button) && + (event.type === 'mousedown' || event.type === 'touchstart') ) { return false; } // We only allow right clicks if pan on drag is set to right click - const buttonAllowed = panOnDrag === 'RightClick' ? 1 !== event.button : !event.button || event.button <= 1; + const buttonAllowed = + (Array.isArray(panOnDrag) && panOnDrag.includes(event.button)) || !event.button || event.button <= 1; // default filter for d3-zoom return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed; diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index d0caf183..68b2cdab 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -113,7 +113,7 @@ export type ReactFlowProps = HTMLAttributes & { initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; - panOnDrag?: boolean | 'RightClick'; + panOnDrag?: boolean | number[]; minZoom?: number; maxZoom?: number; defaultViewport?: Viewport; From 7ef2910808aaaee029894363d52efc0c378a7654 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 12:48:16 +0100 Subject: [PATCH 57/63] chore(versions): bump --- .changeset/pre.json | 1 + .changeset/sharp-apes-repair.md | 14 ++++++++++++++ packages/background/CHANGELOG.md | 14 ++++++++++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 14 ++++++++++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 9 +++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 14 ++++++++++++++ packages/minimap/package.json | 2 +- packages/node-resizer/CHANGELOG.md | 14 ++++++++++++++ packages/node-resizer/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 14 ++++++++++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 18 ++++++++++++++++++ packages/reactflow/package.json | 2 +- 16 files changed, 119 insertions(+), 7 deletions(-) create mode 100644 .changeset/sharp-apes-repair.md diff --git a/.changeset/pre.json b/.changeset/pre.json index 05ad7693..6efd9161 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -18,6 +18,7 @@ "happy-students-wink", "nervous-oranges-study", "purple-mails-kneel", + "sharp-apes-repair", "swift-mayflies-wink" ] } diff --git a/.changeset/sharp-apes-repair.md b/.changeset/sharp-apes-repair.md new file mode 100644 index 00000000..e6a29ea8 --- /dev/null +++ b/.changeset/sharp-apes-repair.md @@ -0,0 +1,14 @@ +--- +'@reactflow/background': minor +'@reactflow/controls': minor +'@reactflow/core': minor +'@reactflow/minimap': minor +'@reactflow/node-resizer': minor +'@reactflow/node-toolbar': minor +'reactflow': minor +--- + +panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) +selection: do not include hidden nodes +minimap: fix onNodeClick for nodes outside the viewport +keys: allow multi select when input is focused \ No newline at end of file diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 2d1a8dfb..394b6af5 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,19 @@ # @reactflow/background +## 11.1.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/core@11.4.0-next.1 + ## 11.0.8-next.0 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 4681fce4..1e316d7e 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.0.8-next.0", + "version": "11.1.0-next.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 d5bc65d7..fd65fed8 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,19 @@ # @reactflow/controls +## 11.1.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/core@11.4.0-next.1 + ## 11.0.8-next.0 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 32b9ad72..808d202f 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.0.8-next.0", + "version": "11.1.0-next.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 82d3678a..1b2159b4 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/core +## 11.4.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + ## 11.4.0-next.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index b8b5e6f5..d33b412f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.4.0-next.0", + "version": "11.4.0-next.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 a31d070a..bc3b8612 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,19 @@ # @reactflow/minimap +## 11.3.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/core@11.4.0-next.1 + ## 11.3.0-next.0 ### Minor Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index b1c1982f..31c54962 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.0-next.0", + "version": "11.3.0-next.1", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md index ae55e7f8..01e76693 100644 --- a/packages/node-resizer/CHANGELOG.md +++ b/packages/node-resizer/CHANGELOG.md @@ -1,5 +1,19 @@ # @reactflow/node-resizer +## 1.2.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/core@11.4.0-next.1 + ## 1.1.1-next.0 ### Patch Changes diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 115a339a..8eec5622 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-resizer", - "version": "1.1.1-next.0", + "version": "1.2.0-next.1", "description": "A helper component for resizing nodes.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 566531d3..ca5493ac 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,19 @@ # @reactflow/node-toolbar +## 1.1.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/core@11.4.0-next.1 + ## 1.1.0-next.0 ### Minor Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 06425f6b..9e449822 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.0-next.0", + "version": "1.1.0-next.1", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 80afb302..e93bf3a7 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,23 @@ # reactflow +## 11.4.0-next.1 + +### Minor Changes + +- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + selection: do not include hidden nodes + minimap: fix onNodeClick for nodes outside the viewport + keys: allow multi select when input is focused + +### Patch Changes + +- Updated dependencies []: + - @reactflow/background@11.1.0-next.1 + - @reactflow/controls@11.1.0-next.1 + - @reactflow/core@11.4.0-next.1 + - @reactflow/minimap@11.3.0-next.1 + - @reactflow/node-toolbar@1.1.0-next.1 + ## 11.4.0-next.0 ### Minor Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 0dd47987..523a1d5e 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.4.0-next.0", + "version": "11.4.0-next.1", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From eaaf4f6d084913287048851df5a6c2ed796d9404 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 17:30:35 +0100 Subject: [PATCH 58/63] chore(base-edge): label coords optional --- packages/core/src/types/edges.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 7eb12816..92e10637 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -117,8 +117,8 @@ export type EdgeProps = Pick< export type BaseEdgeProps = Pick & EdgeLabelOptions & { - labelX: number; - labelY: number; + labelX?: number; + labelY?: number; path: string; }; From 3cc7bdcb5cfaba17697b30697d6b550b5ba67e75 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 15 Dec 2022 17:33:22 +0100 Subject: [PATCH 59/63] chore(base-edge): check labelX labelY --- packages/core/src/components/Edges/BaseEdge.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index 71106854..ad7adcd8 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/packages/core/src/components/Edges/BaseEdge.tsx @@ -1,5 +1,6 @@ import EdgeText from './EdgeText'; import type { BaseEdgeProps } from '../../types'; +import { isNumeric } from '../../utils'; const BaseEdge = ({ path, @@ -35,7 +36,7 @@ const BaseEdge = ({ className="react-flow__edge-interaction" /> )} - {label ? ( + {label && isNumeric(labelX) && isNumeric(labelY) ? ( Date: Thu, 15 Dec 2022 18:57:01 +0100 Subject: [PATCH 60/63] feat(nodes): add prop to disable automatic elevation of nodes on select --- examples/vite-app/src/examples/Basic/index.tsx | 4 +++- packages/core/src/components/StoreUpdater/index.tsx | 3 +++ packages/core/src/container/ReactFlow/index.tsx | 2 ++ packages/core/src/store/index.ts | 12 +++++++----- packages/core/src/store/initialState.ts | 1 + packages/core/src/store/utils.ts | 6 ++++-- packages/core/src/types/component-props.ts | 1 + packages/core/src/types/general.ts | 1 + 8 files changed, 22 insertions(+), 8 deletions(-) diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index dfba56ef..1197ef06 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -50,7 +50,7 @@ const initialEdges: Edge[] = [ const nodeOrigin: NodeOrigin = [0.5, 0.5]; -const defaultEdgeOptions = { zIndex: 0 }; +const defaultEdgeOptions = {}; const BasicFlow = () => { const instance = useReactFlow(); @@ -94,6 +94,8 @@ const BasicFlow = () => { fitView defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} + elevateEdgesOnSelect + elevateNodesOnSelect={false} // nodeOrigin={nodeOrigin} > diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 2f98a453..b784c5bd 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -44,6 +44,7 @@ type StoreUpdaterProps = Pick< | 'onSelectionDragStop' | 'noPanClassName' | 'nodeOrigin' + | 'elevateNodesOnSelect' > & { rfId: string }; const selector = (s: ReactFlowState) => ({ @@ -92,6 +93,7 @@ const StoreUpdater = ({ nodesConnectable, nodesFocusable, edgesFocusable, + elevateNodesOnSelect, minZoom, maxZoom, nodeExtent, @@ -151,6 +153,7 @@ const StoreUpdater = ({ useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState); useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); + useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState); useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState); useDirectStoreUpdater('snapGrid', snapGrid, store.setState); useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 6b9fbacc..0afc251d 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -157,6 +157,7 @@ const ReactFlow = forwardRef( attributionPosition, proOptions, defaultEdgeOptions, + elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, style, @@ -261,6 +262,7 @@ const ReactFlow = forwardRef( nodesFocusable={nodesFocusable} edgesFocusable={edgesFocusable} elementsSelectable={elementsSelectable} + elevateNodesOnSelect={elevateNodesOnSelect} minZoom={minZoom} maxZoom={maxZoom} nodeExtent={nodeExtent} diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 09bc66d2..5ff9bf05 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -24,8 +24,8 @@ const createRFStore = () => createStore((set, get) => ({ ...initialState, setNodes: (nodes: Node[]) => { - const { nodeInternals, nodeOrigin } = get(); - set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) }); + const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get(); + set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect) }); }, getNodes: () => { return Array.from(get().nodeInternals.values()); @@ -38,7 +38,9 @@ const createRFStore = () => const hasDefaultNodes = typeof nodes !== 'undefined'; const hasDefaultEdges = typeof edges !== 'undefined'; - const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map(), get().nodeOrigin) : new Map(); + const nodeInternals = hasDefaultNodes + ? createNodeInternals(nodes, new Map(), get().nodeOrigin, get().elevateNodesOnSelect) + : new Map(); const nextEdges = hasDefaultEdges ? edges : []; set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges }); @@ -128,12 +130,12 @@ const createRFStore = () => }, triggerNodeChanges: (changes: NodeChange[]) => { - const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes } = get(); + const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes, elevateNodesOnSelect } = get(); if (changes?.length) { if (hasDefaultNodes) { const nodes = applyNodeChanges(changes, getNodes()); - const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin); + const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect); set({ nodeInternals: nextNodeInternals }); } diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index 6a92b777..f8cc369d 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -45,6 +45,7 @@ const initialState: ReactFlowStore = { nodesFocusable: true, edgesFocusable: true, elementsSelectable: true, + elevateNodesOnSelect: true, fitViewOnInit: false, fitViewOnInitDone: false, fitViewOnInitOptions: undefined, diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index d0d976fc..0224e656 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -46,13 +46,15 @@ function calculateXYZPosition( export function createNodeInternals( nodes: Node[], nodeInternals: NodeInternals, - nodeOrigin: NodeOrigin + nodeOrigin: NodeOrigin, + elevateNodesOnSelect: boolean ): NodeInternals { const nextNodeInternals = new Map(); const parentNodes: ParentNodes = {}; + const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0; nodes.forEach((node) => { - const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1000 : 0); + const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0); const currInternals = nodeInternals.get(node.id); const internals: Node = { diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 68b2cdab..0441ecdf 100644 --- a/packages/core/src/types/component-props.ts +++ b/packages/core/src/types/component-props.ts @@ -136,6 +136,7 @@ export type ReactFlowProps = HTMLAttributes & { connectOnClick?: boolean; attributionPosition?: PanelPosition; proOptions?: ProOptions; + elevateNodesOnSelect?: boolean; elevateEdgesOnSelect?: boolean; disableKeyboardA11y?: boolean; }; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 6bcd06fc..9d60e839 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -171,6 +171,7 @@ export type ReactFlowStore = { nodesFocusable: boolean; edgesFocusable: boolean; elementsSelectable: boolean; + elevateNodesOnSelect: boolean; multiSelectionActive: boolean; From ab2ff3740618da48bd4350597e816c397f3d78ff Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 19 Dec 2022 10:58:11 +0100 Subject: [PATCH 61/63] chore(changeset): add --- .changeset/gorgeous-trees-double.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/gorgeous-trees-double.md diff --git a/.changeset/gorgeous-trees-double.md b/.changeset/gorgeous-trees-double.md new file mode 100644 index 00000000..3c0ba76e --- /dev/null +++ b/.changeset/gorgeous-trees-double.md @@ -0,0 +1,6 @@ +--- +'@reactflow/core': patch +'reactflow': patch +--- + +Add elevateNodesOnSelect prop From 43a16e61e6da422d67b5f14fbf89c10d1c144d10 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 19 Dec 2022 12:22:42 +0100 Subject: [PATCH 62/63] chore(selection): cleanup --- .../vite-app/src/examples/Subflow/index.tsx | 6 +- .../core/src/components/Nodes/wrapNode.tsx | 13 +- .../src/components/NodesSelection/index.tsx | 10 +- .../components/UserSelection/SelectionBox.tsx | 30 --- .../src/components/UserSelection/index.tsx | 252 ++---------------- .../core/src/container/FlowRenderer/index.tsx | 6 +- packages/core/src/container/Pane/index.tsx | 241 +++++++++++++++++ .../core/src/hooks/useUpdateNodePositions.ts | 15 +- 8 files changed, 288 insertions(+), 285 deletions(-) delete mode 100644 packages/core/src/components/UserSelection/SelectionBox.tsx create mode 100644 packages/core/src/container/Pane/index.tsx diff --git a/examples/vite-app/src/examples/Subflow/index.tsx b/examples/vite-app/src/examples/Subflow/index.tsx index 55aea018..db021f52 100644 --- a/examples/vite-app/src/examples/Subflow/index.tsx +++ b/examples/vite-app/src/examples/Subflow/index.tsx @@ -11,7 +11,7 @@ import ReactFlow, { Controls, MiniMap, Background, - NodeOrigin, + Panel, } from 'reactflow'; import DebugNode from './DebugNode'; @@ -211,7 +211,7 @@ const Subflow = () => { -
+ @@ -225,7 +225,7 @@ const Subflow = () => { toggleChildNodes -
+ ); }; diff --git a/packages/core/src/components/Nodes/wrapNode.tsx b/packages/core/src/components/Nodes/wrapNode.tsx index 70b36ddb..f56f117b 100644 --- a/packages/core/src/components/Nodes/wrapNode.tsx +++ b/packages/core/src/components/Nodes/wrapNode.tsx @@ -88,8 +88,6 @@ export default (NodeComponent: ComponentType) => { return; } - const { snapGrid, snapToGrid } = store.getState(); - if (elementSelectionKeys.includes(event.key) && isSelectable) { const unselect = event.key === 'Escape'; if (unselect) { @@ -112,15 +110,10 @@ export default (NodeComponent: ComponentType) => { .toLowerCase()}. New position, x: ${~~xPos}, y: ${~~yPos}`, }); - // 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, + x: arrowKeyDiffs[event.key].x, + y: arrowKeyDiffs[event.key].y, + isShiftPressed: event.shiftKey, }); } }; diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index cff39b5d..745a0550 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -41,7 +41,9 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar useEffect(() => { if (!disableKeyboardA11y) { - nodeRef.current?.focus(); + nodeRef.current?.focus({ + preventScroll: true, + }); } }, [disableKeyboardA11y]); @@ -65,7 +67,11 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar const onKeyDown = (event: KeyboardEvent) => { if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) { - updatePositions(arrowKeyDiffs[event.key]); + updatePositions({ + x: arrowKeyDiffs[event.key].x, + y: arrowKeyDiffs[event.key].y, + isShiftPressed: event.shiftKey, + }); } }; diff --git a/packages/core/src/components/UserSelection/SelectionBox.tsx b/packages/core/src/components/UserSelection/SelectionBox.tsx deleted file mode 100644 index bfd63ea1..00000000 --- a/packages/core/src/components/UserSelection/SelectionBox.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import shallow from 'zustand/shallow'; -import { useStore } from '../../hooks/useStore'; -import { ReactFlowState } from '../../types'; - -const selector = (s: ReactFlowState) => ({ - userSelectionActive: s.userSelectionActive, - userSelectionRect: s.userSelectionRect, -}); - -function SelectionBox() { - const { userSelectionActive, userSelectionRect } = useStore(selector, shallow); - const showSelectionBox = userSelectionActive && userSelectionRect; - - if (!showSelectionBox) { - return null; - } - - return ( -
- ); -} - -export default SelectionBox; diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 26ba621c..34d16a36 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -1,245 +1,31 @@ -/** - * The user selection rectangle gets displayed when a user drags the mouse while pressing shift - */ - -import { memo, useRef, MouseEvent as ReactMouseEvent } from 'react'; import shallow from 'zustand/shallow'; -import cc from 'classcat'; -import SelectionBox from './SelectionBox'; -import { containerStyle } from '../../styles'; -import { useStore, useStoreApi } from '../../hooks/useStore'; -import { getSelectionChanges } from '../../utils/changes'; -import { getConnectedEdges, getNodesInside } from '../../utils/graph'; -import { ReactFlowProps, SelectionMode } from '../../types'; -import type { XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; - -type UserSelectionProps = { - isSelecting: boolean; - children: React.ReactNode; -} & Partial< - Pick< - ReactFlowProps, - | 'selectionMode' - | 'panOnDrag' - | 'onSelectionStart' - | 'onSelectionEnd' - | 'onPaneClick' - | 'onPaneContextMenu' - | 'onPaneScroll' - | 'onPaneMouseEnter' - | 'onPaneMouseMove' - | 'onPaneMouseLeave' - > ->; - -function getMousePosition(event: ReactMouseEvent, containerBounds: DOMRect): XYPosition { - return { - x: event.clientX - containerBounds.left, - y: event.clientY - containerBounds.top, - }; -} - -const wrapHandler = ( - handler: React.MouseEventHandler | undefined, - containerRef: React.MutableRefObject -): React.MouseEventHandler => { - return (event: ReactMouseEvent) => { - if (event.target !== containerRef.current) { - return; - } - handler?.(event); - }; -}; +import { useStore } from '../../hooks/useStore'; +import type { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => ({ userSelectionActive: s.userSelectionActive, - elementsSelectable: s.elementsSelectable, - paneDragging: s.paneDragging, + userSelectionRect: s.userSelectionRect, }); -const UserSelection = memo( - ({ - isSelecting, - selectionMode = SelectionMode.Full, - panOnDrag, - onSelectionStart, - onSelectionEnd, - onPaneClick, - onPaneContextMenu, - onPaneScroll, - onPaneMouseEnter, - onPaneMouseMove, - onPaneMouseLeave, - children, - }: UserSelectionProps) => { - const container = useRef(null); - const store = useStoreApi(); - const prevSelectedNodesCount = useRef(0); - const prevSelectedEdgesCount = useRef(0); - const containerBounds = useRef(); - const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow); +function UserSelection() { + const { userSelectionActive, userSelectionRect } = useStore(selector, shallow); + const showSelectionBox = userSelectionActive && userSelectionRect; - const resetUserSelection = () => { - store.setState({ userSelectionActive: false, userSelectionRect: null }); - - prevSelectedNodesCount.current = 0; - prevSelectedEdgesCount.current = 0; - }; - - const onClick = (event: ReactMouseEvent) => { - onPaneClick?.(event); - store.getState().resetSelectedElements(); - store.setState({ nodesSelectionActive: false }); - }; - - const onContextMenu = (event: ReactMouseEvent) => { - if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) { - event.preventDefault(); - return; - } - - onPaneContextMenu?.(event); - }; - - const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined; - - const onMouseDown = (event: ReactMouseEvent): void => { - const { resetSelectedElements, domNode } = store.getState(); - containerBounds.current = domNode?.getBoundingClientRect(); - - if ( - !elementsSelectable || - !isSelecting || - event.button !== 0 || - event.target !== container.current || - !containerBounds.current - ) { - return; - } - - const { x, y } = getMousePosition(event, containerBounds.current); - - resetSelectedElements(); - - store.setState({ - userSelectionRect: { - width: 0, - height: 0, - startX: x, - startY: y, - x, - y, - }, - }); - - onSelectionStart?.(event); - }; - - const onMouseMove = (event: ReactMouseEvent): void => { - const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = - store.getState(); - if (!isSelecting || !containerBounds.current || !userSelectionRect) { - return; - } - - store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - - const mousePos = getMousePosition(event, containerBounds.current); - const startX = userSelectionRect.startX ?? 0; - const startY = userSelectionRect.startY ?? 0; - - const nextUserSelectRect = { - ...userSelectionRect, - x: mousePos.x < startX ? mousePos.x : startX, - y: mousePos.y < startY ? mousePos.y : startY, - width: Math.abs(mousePos.x - startX), - height: Math.abs(mousePos.y - startY), - }; - - const nodes = getNodes(); - const selectedNodes = getNodesInside( - nodeInternals, - nextUserSelectRect, - transform, - selectionMode === SelectionMode.Partial, - true, - nodeOrigin - ); - const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); - const selectedNodeIds = selectedNodes.map((n) => n.id); - - if (prevSelectedNodesCount.current !== selectedNodeIds.length) { - prevSelectedNodesCount.current = selectedNodeIds.length; - const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; - if (changes.length) { - onNodesChange?.(changes); - } - } - - if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) { - prevSelectedEdgesCount.current = selectedEdgeIds.length; - const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[]; - if (changes.length) { - onEdgesChange?.(changes); - } - } - - store.setState({ - userSelectionRect: nextUserSelectRect, - }); - }; - - const onMouseUp = (event: ReactMouseEvent) => { - const { userSelectionRect } = store.getState(); - // We only want to trigger click functions when in selection mode if - // the user did not move the mouse. - if (!userSelectionActive && userSelectionRect && event.target === container.current) { - onClick?.(event); - } - - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - - resetUserSelection(); - onSelectionEnd?.(event); - }; - - const onMouseLeave = (event: ReactMouseEvent) => { - if (userSelectionActive) { - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - onSelectionEnd?.(event); - } - - resetUserSelection(); - }; - - const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive); - - return ( -
- {children} - -
- ); + if (!showSelectionBox) { + return null; } -); -UserSelection.displayName = 'UserSelection'; + return ( +
+ ); +} export default UserSelection; diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx index 37bd44d9..a8e9dc69 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -6,7 +6,7 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; import useKeyPress from '../../hooks/useKeyPress'; import { GraphViewProps } from '../GraphView'; import ZoomPane from '../ZoomPane'; -import UserSelection from '../../components/UserSelection'; +import Pane from '../Pane'; import NodesSelection from '../../components/NodesSelection'; import type { ReactFlowState } from '../../types'; @@ -100,7 +100,7 @@ const FlowRenderer = ({ noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} > - )} - + ); }; diff --git a/packages/core/src/container/Pane/index.tsx b/packages/core/src/container/Pane/index.tsx new file mode 100644 index 00000000..755e0c04 --- /dev/null +++ b/packages/core/src/container/Pane/index.tsx @@ -0,0 +1,241 @@ +/** + * The user selection rectangle gets displayed when a user drags the mouse while pressing shift + */ + +import { memo, useRef, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; +import shallow from 'zustand/shallow'; +import cc from 'classcat'; + +import UserSelection from '../../components/UserSelection'; +import { containerStyle } from '../../styles'; +import { useStore, useStoreApi } from '../../hooks/useStore'; +import { getSelectionChanges } from '../../utils/changes'; +import { getConnectedEdges, getNodesInside } from '../../utils/graph'; +import { SelectionMode } from '../../types'; +import type { ReactFlowProps, XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; + +type PaneProps = { + isSelecting: boolean; + children: ReactNode; +} & Partial< + Pick< + ReactFlowProps, + | 'selectionMode' + | 'panOnDrag' + | 'onSelectionStart' + | 'onSelectionEnd' + | 'onPaneClick' + | 'onPaneContextMenu' + | 'onPaneScroll' + | 'onPaneMouseEnter' + | 'onPaneMouseMove' + | 'onPaneMouseLeave' + > +>; + +function getMousePosition(event: ReactMouseEvent, containerBounds: DOMRect): XYPosition { + return { + x: event.clientX - containerBounds.left, + y: event.clientY - containerBounds.top, + }; +} + +const wrapHandler = ( + handler: React.MouseEventHandler | undefined, + containerRef: React.MutableRefObject +): React.MouseEventHandler => { + return (event: ReactMouseEvent) => { + if (event.target !== containerRef.current) { + return; + } + handler?.(event); + }; +}; + +const selector = (s: ReactFlowState) => ({ + userSelectionActive: s.userSelectionActive, + elementsSelectable: s.elementsSelectable, + dragging: s.paneDragging, +}); + +const Pane = memo( + ({ + isSelecting, + selectionMode = SelectionMode.Full, + panOnDrag, + onSelectionStart, + onSelectionEnd, + onPaneClick, + onPaneContextMenu, + onPaneScroll, + onPaneMouseEnter, + onPaneMouseMove, + onPaneMouseLeave, + children, + }: PaneProps) => { + const container = useRef(null); + const store = useStoreApi(); + const prevSelectedNodesCount = useRef(0); + const prevSelectedEdgesCount = useRef(0); + const containerBounds = useRef(); + const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow); + + const resetUserSelection = () => { + store.setState({ userSelectionActive: false, userSelectionRect: null }); + + prevSelectedNodesCount.current = 0; + prevSelectedEdgesCount.current = 0; + }; + + const onClick = (event: ReactMouseEvent) => { + onPaneClick?.(event); + store.getState().resetSelectedElements(); + store.setState({ nodesSelectionActive: false }); + }; + + const onContextMenu = (event: ReactMouseEvent) => { + if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) { + event.preventDefault(); + return; + } + + onPaneContextMenu?.(event); + }; + + const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined; + + const onMouseDown = (event: ReactMouseEvent): void => { + const { resetSelectedElements, domNode } = store.getState(); + containerBounds.current = domNode?.getBoundingClientRect(); + + if ( + !elementsSelectable || + !isSelecting || + event.button !== 0 || + event.target !== container.current || + !containerBounds.current + ) { + return; + } + + const { x, y } = getMousePosition(event, containerBounds.current); + + resetSelectedElements(); + + store.setState({ + userSelectionRect: { + width: 0, + height: 0, + startX: x, + startY: y, + x, + y, + }, + }); + + onSelectionStart?.(event); + }; + + const onMouseMove = (event: ReactMouseEvent): void => { + const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = + store.getState(); + if (!isSelecting || !containerBounds.current || !userSelectionRect) { + return; + } + + store.setState({ userSelectionActive: true, nodesSelectionActive: false }); + + const mousePos = getMousePosition(event, containerBounds.current); + const startX = userSelectionRect.startX ?? 0; + const startY = userSelectionRect.startY ?? 0; + + const nextUserSelectRect = { + ...userSelectionRect, + x: mousePos.x < startX ? mousePos.x : startX, + y: mousePos.y < startY ? mousePos.y : startY, + width: Math.abs(mousePos.x - startX), + height: Math.abs(mousePos.y - startY), + }; + + const nodes = getNodes(); + const selectedNodes = getNodesInside( + nodeInternals, + nextUserSelectRect, + transform, + selectionMode === SelectionMode.Partial, + true, + nodeOrigin + ); + const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); + const selectedNodeIds = selectedNodes.map((n) => n.id); + + if (prevSelectedNodesCount.current !== selectedNodeIds.length) { + prevSelectedNodesCount.current = selectedNodeIds.length; + const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; + if (changes.length) { + onNodesChange?.(changes); + } + } + + if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) { + prevSelectedEdgesCount.current = selectedEdgeIds.length; + const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[]; + if (changes.length) { + onEdgesChange?.(changes); + } + } + + store.setState({ + userSelectionRect: nextUserSelectRect, + }); + }; + + const onMouseUp = (event: ReactMouseEvent) => { + const { userSelectionRect } = store.getState(); + // We only want to trigger click functions when in selection mode if + // the user did not move the mouse. + if (!userSelectionActive && userSelectionRect && event.target === container.current) { + onClick?.(event); + } + + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + + resetUserSelection(); + onSelectionEnd?.(event); + }; + + const onMouseLeave = (event: ReactMouseEvent) => { + if (userSelectionActive) { + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); + onSelectionEnd?.(event); + } + + resetUserSelection(); + }; + + const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive); + + return ( +
+ {children} + +
+ ); + } +); + +Pane.displayName = 'Pane'; + +export default Pane; diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index 56e55925..b20ea4d1 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -2,18 +2,25 @@ import { useCallback } from 'react'; import { useStoreApi } from '../hooks/useStore'; import { calcNextPosition } from './useDrag/utils'; -import type { XYPosition } from '../types'; function useUpdateNodePositions() { const store = useStoreApi(); - const updatePositions = useCallback((positionDiff: XYPosition) => { + const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => { const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid } = store.getState(); const selectedNodes = getNodes().filter((n) => n.selected); + // 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 = params.isShiftPressed ? 4 : 1; + + const positionDiffX = params.x * xVelo * factor; + const positionDiffY = params.y * yVelo * factor; const nodeUpdates = selectedNodes.map((n) => { if (n.positionAbsolute) { - const nextPosition = { x: n.positionAbsolute.x + positionDiff.x, y: n.positionAbsolute.y + positionDiff.y }; + const nextPosition = { x: n.positionAbsolute.x + positionDiffX, y: n.positionAbsolute.y + positionDiffY }; if (snapToGrid) { nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]); @@ -29,7 +36,7 @@ function useUpdateNodePositions() { return n; }); - updateNodePositions(nodeUpdates, true, true); + updateNodePositions(nodeUpdates, true, false); }, []); return updatePositions; From 1662f92e133986f91998099695ef09feb8aae0ee Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 19 Dec 2022 12:47:31 +0100 Subject: [PATCH 63/63] chore(packages): bump --- .changeset/gorgeous-trees-double.md | 6 ----- .changeset/happy-students-wink.md | 8 ------ .changeset/nervous-oranges-study.md | 16 ----------- .changeset/pre.json | 24 ----------------- .changeset/purple-mails-kneel.md | 7 ----- .changeset/sharp-apes-repair.md | 14 ---------- .changeset/swift-mayflies-wink.md | 6 ----- packages/background/CHANGELOG.md | 13 ++++++--- packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 13 ++++++--- packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 39 ++++++++++++++++++++++++--- packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 16 ++++++++--- packages/minimap/package.json | 2 +- packages/node-resizer/CHANGELOG.md | 13 ++++++--- packages/node-resizer/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 9 +++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 42 +++++++++++++++++++++++++++++ packages/reactflow/package.json | 2 +- 21 files changed, 137 insertions(+), 103 deletions(-) delete mode 100644 .changeset/gorgeous-trees-double.md delete mode 100644 .changeset/happy-students-wink.md delete mode 100644 .changeset/nervous-oranges-study.md delete mode 100644 .changeset/pre.json delete mode 100644 .changeset/purple-mails-kneel.md delete mode 100644 .changeset/sharp-apes-repair.md delete mode 100644 .changeset/swift-mayflies-wink.md diff --git a/.changeset/gorgeous-trees-double.md b/.changeset/gorgeous-trees-double.md deleted file mode 100644 index 3c0ba76e..00000000 --- a/.changeset/gorgeous-trees-double.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@reactflow/core': patch -'reactflow': patch ---- - -Add elevateNodesOnSelect prop diff --git a/.changeset/happy-students-wink.md b/.changeset/happy-students-wink.md deleted file mode 100644 index 71f815ef..00000000 --- a/.changeset/happy-students-wink.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@reactflow/core': patch -'@reactflow/minimap': patch -'@reactflow/node-toolbar': patch -'reactflow': patch ---- - -Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. \ No newline at end of file diff --git a/.changeset/nervous-oranges-study.md b/.changeset/nervous-oranges-study.md deleted file mode 100644 index 84b5bce0..00000000 --- a/.changeset/nervous-oranges-study.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -'@reactflow/core': minor -'@reactflow/minimap': minor -'@reactflow/node-toolbar': minor -'reactflow': minor ---- - -## New Features - -New props for the ReactFlow component to customize the controls of the viewport and the selection box better: - -1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`) -2. `panOnDrag="RightClick"` option -3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) -4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it -5. `onSelectionStart` and `onSelectionEnd` events diff --git a/.changeset/pre.json b/.changeset/pre.json deleted file mode 100644 index 6efd9161..00000000 --- a/.changeset/pre.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "mode": "pre", - "tag": "next", - "initialVersions": { - "@reactflow/examples": "0.0.0", - "@reactflow/background": "11.0.7", - "@reactflow/controls": "11.0.7", - "@reactflow/core": "11.3.2", - "@reactflow/minimap": "11.2.3", - "@reactflow/node-resizer": "1.1.0", - "@reactflow/node-toolbar": "1.0.2", - "reactflow": "11.3.3", - "@reactflow/eslint-config": "0.0.0", - "@reactflow/rollup-config": "0.0.0", - "@reactflow/tsconfig": "0.0.0" - }, - "changesets": [ - "happy-students-wink", - "nervous-oranges-study", - "purple-mails-kneel", - "sharp-apes-repair", - "swift-mayflies-wink" - ] -} diff --git a/.changeset/purple-mails-kneel.md b/.changeset/purple-mails-kneel.md deleted file mode 100644 index dfd983df..00000000 --- a/.changeset/purple-mails-kneel.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@reactflow/core': patch -'@reactflow/minimap': patch -'reactflow': patch ---- - -Use translateExtent correctly diff --git a/.changeset/sharp-apes-repair.md b/.changeset/sharp-apes-repair.md deleted file mode 100644 index e6a29ea8..00000000 --- a/.changeset/sharp-apes-repair.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -'@reactflow/background': minor -'@reactflow/controls': minor -'@reactflow/core': minor -'@reactflow/minimap': minor -'@reactflow/node-resizer': minor -'@reactflow/node-toolbar': minor -'reactflow': minor ---- - -panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) -selection: do not include hidden nodes -minimap: fix onNodeClick for nodes outside the viewport -keys: allow multi select when input is focused \ No newline at end of file diff --git a/.changeset/swift-mayflies-wink.md b/.changeset/swift-mayflies-wink.md deleted file mode 100644 index 48cf7ca6..00000000 --- a/.changeset/swift-mayflies-wink.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@reactflow/core': patch -'reactflow': patch ---- - -Only trigger drag event when change happened diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 394b6af5..dc6f8ceb 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,13 +1,20 @@ # @reactflow/background +## 11.1.0 + +### Patch Changes + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + ## 11.1.0-next.1 ### Minor Changes - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused +- selection: do not include hidden nodes +- minimap: fix onNodeClick for nodes outside the viewport +- keys: allow multi select when input is focused ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 1e316d7e..261af18e 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.0-next.1", + "version": "11.1.0", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index fd65fed8..733c57cf 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,13 +1,20 @@ # @reactflow/controls +## 11.1.0 + +### Patch Changes + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + ## 11.1.0-next.1 ### Minor Changes - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused +- selection: do not include hidden nodes +- minimap: fix onNodeClick for nodes outside the viewport +- keys: allow multi select when input is focused ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 808d202f..9253cf51 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.0-next.1", + "version": "11.1.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 index 1b2159b4..df1aca10 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,13 +1,46 @@ # @reactflow/core +## 11.4.0 + +## New Features + +New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + +1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false}` or `panOnDrag={[1, 2]}`) +2. `panOnDrag={[0, 1, 2]}` option to configure specific mouse buttons for panning +3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) +4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it +5. `onSelectionStart` and `onSelectionEnd` events +6. `elevateNodesOnSelect`: Defines if z-index should be increased when node is selected +7. New store function `getNodes`. You can now do `store.getState().getNodes()` instead of `Array.from(store.getNodes().nodeInternals.values())`. + +Thanks to @jackfishwick who helped a lot with the new panning and selection options. + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) + - Add new props to configure viewport controls (`selectionOnDrag`, `panActivationKeyCode`, ..) +- [#2661](https://github.com/wbkd/react-flow/pull/2661) [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654) + - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + - selection: do not include hidden nodes + - minimap: fix onNodeClick for nodes outside the viewport + - keys: allow multi select when input is focused + +### Patch Changes + +- [#2695](https://github.com/wbkd/react-flow/pull/2695) [`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff) - Add elevateNodesOnSelect prop +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly +- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) - Only trigger drag event when change happened + ## 11.4.0-next.1 ### Minor Changes - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused +- selection: do not include hidden nodes +- minimap: fix onNodeClick for nodes outside the viewport +- keys: allow multi select when input is focused ## 11.4.0-next.0 diff --git a/packages/core/package.json b/packages/core/package.json index d33b412f..e1a9ea14 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.4.0-next.1", + "version": "11.4.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 bc3b8612..b8a1cced 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,13 +1,23 @@ # @reactflow/minimap +## 11.3.0 + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + ## 11.3.0-next.1 ### Minor Changes - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused +- selection: do not include hidden nodes +- minimap: fix onNodeClick for nodes outside the viewport +- keys: allow multi select when input is focused ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 31c54962..239002d1 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.0-next.1", + "version": "11.3.0", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md index 01e76693..f0ff29d2 100644 --- a/packages/node-resizer/CHANGELOG.md +++ b/packages/node-resizer/CHANGELOG.md @@ -1,13 +1,20 @@ # @reactflow/node-resizer +## 1.2.0 + +### Patch Changes + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + ## 1.2.0-next.1 ### Minor Changes - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) - selection: do not include hidden nodes - minimap: fix onNodeClick for nodes outside the viewport - keys: allow multi select when input is focused +- selection: do not include hidden nodes +- minimap: fix onNodeClick for nodes outside the viewport +- keys: allow multi select when input is focused ### Patch Changes diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 8eec5622..d9a42e86 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-resizer", - "version": "1.2.0-next.1", + "version": "1.2.0", "description": "A helper component for resizing nodes.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index ca5493ac..49057c35 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/node-toolbar +## 1.1.0 + +### Patch Changes + +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + ## 1.1.0-next.1 ### Minor Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 9e449822..0b664881 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.0-next.1", + "version": "1.1.0", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index e93bf3a7..f6e6408f 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,47 @@ # reactflow +## 11.4.0 + +## 11.4.0 + +## New Features + +New props for the ReactFlow component to customize the controls of the viewport and the selection box better: + +1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false}` or `panOnDrag={[1, 2]}`) +2. `panOnDrag={[0, 1, 2]}` option to configure specific mouse buttons for panning +3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`) +4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it +5. `onSelectionStart` and `onSelectionEnd` events +6. `elevateNodesOnSelect`: Defines if z-index should be increased when node is selected +7. New store function `getNodes`. You can now do `store.getState().getNodes()` instead of `Array.from(store.getNodes().nodeInternals.values())`. + +Thanks to @jackfishwick who helped a lot with the new panning and selection options. + +### Minor Changes + +- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) + - Add new props to configure viewport controls (`selectionOnDrag`, `panActivationKeyCode`, ..) +- [#2661](https://github.com/wbkd/react-flow/pull/2661) [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654) + - panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button) + - selection: do not include hidden nodes + - minimap: fix onNodeClick for nodes outside the viewport + - keys: allow multi select when input is focused + +### Patch Changes + +- [#2695](https://github.com/wbkd/react-flow/pull/2695) [`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff) - Add elevateNodesOnSelect prop +- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore. +- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly +- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) - Only trigger drag event when change happened + +- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]: + - @reactflow/core@11.4.0 + - @reactflow/minimap@11.3.0 + - @reactflow/node-toolbar@1.1.0 + - @reactflow/background@11.1.0 + - @reactflow/controls@11.1.0 + ## 11.4.0-next.1 ### Minor Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 523a1d5e..f4c93b25 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.4.0-next.1", + "version": "11.4.0", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react",