diff --git a/examples/vite-app/cypress/e2e/basic.cy.ts b/examples/vite-app/cypress/e2e/basic.cy.ts index a08ca021..fd4c107a 100644 --- a/examples/vite-app/cypress/e2e/basic.cy.ts +++ b/examples/vite-app/cypress/e2e/basic.cy.ts @@ -50,9 +50,9 @@ describe('Basic Flow Rendering', () => { 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 }) + .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 }); @@ -70,9 +70,9 @@ describe('Basic Flow Rendering', () => { 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 }) + .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) @@ -140,7 +140,7 @@ describe('Basic Flow Rendering', () => { // 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/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/figma.cy.ts b/examples/vite-app/cypress/e2e/figma.cy.ts new file mode 100644 index 00000000..e3c8563f --- /dev/null +++ b/examples/vite-app/cypress/e2e/figma.cy.ts @@ -0,0 +1,51 @@ +describe('Figma Flow UI', () => { + before(() => { + cy.visit('/figma'); + }); + + it('renders a flow with three nodes', () => { + cy.get('.react-flow__renderer'); + 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/e2e/interaction.cy.ts b/examples/vite-app/cypress/e2e/interaction.cy.ts index 625ecc57..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__selectionpane').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 }); }); diff --git a/examples/vite-app/cypress/e2e/minimap.cy.ts b/examples/vite-app/cypress/e2e/minimap.cy.ts index 46a5a819..0f0464bd 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', () => { @@ -60,7 +59,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/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 {}; diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index bb68c028..33347757 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'; @@ -120,6 +121,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..0ac44198 --- /dev/null +++ b/examples/vite-app/src/examples/Figma/index.tsx @@ -0,0 +1,36 @@ +import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode, Viewport } from 'reactflow'; + +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 BasicFlow = () => { + 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/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 ddf8bd5f..f5dc551d 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -2,161 +2,232 @@ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift */ -import { memo, useState, useRef } 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 type { XYPosition, ReactFlowState, NodeChange, EdgeChange, Rect } from '../../types'; - -type SelectionRect = Rect & { - startX: number; - startY: number; - draw: boolean; -}; +import { SelectionMode } from '../../types'; +import type { XYPosition, ReactFlowState, NodeChange, EdgeChange } from '../../types'; type UserSelectionProps = { - selectionKeyPressed: boolean; + 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; }; -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, }; } +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, + paneDragging: s.paneDragging, }); -const initialRect: SelectionRect = { - startX: 0, - startY: 0, - x: 0, - y: 0, - width: 0, - height: 0, - draw: false, -}; +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); -const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { - const store = useStoreApi(); - const prevSelectedNodesCount = useRef(0); - const prevSelectedEdgesCount = useRef(0); - const containerBounds = useRef(); - const [userSelectionRect, setUserSelectionRect] = useState(initialRect); - const { userSelectionActive, elementsSelectable } = useStore(selector, shallow); + const resetUserSelection = () => { + store.setState({ userSelectionActive: false, userSelectionRect: null }); - const renderUserSelectionPane = userSelectionActive || selectionKeyPressed; - - if (!elementsSelectable || !renderUserSelectionPane) { - return null; - } - - const resetUserSelection = () => { - setUserSelectionRect(initialRect); - - store.setState({ userSelectionActive: false }); - - prevSelectedNodesCount.current = 0; - prevSelectedEdgesCount.current = 0; - }; - - const onMouseDown = (event: React.MouseEvent): void => { - 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, - draw: true, - }); - - store.setState({ userSelectionActive: true, nodesSelectionActive: false }); - }; - - const onMouseMove = (event: React.MouseEvent): void => { - if (!selectionKeyPressed || !userSelectionRect.draw || !containerBounds.current) { - return; - } - - 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), + prevSelectedNodesCount.current = 0; + prevSelectedEdgesCount.current = 0; }; - 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); + 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 => { + const { resetSelectedElements, domNode } = store.getState(); + if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !domNode) { + return; + } + + containerBounds.current = domNode.getBoundingClientRect(); + 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), + }; - if (prevSelectedNodesCount.current !== selectedNodeIds.length) { const nodes = getNodes(); - prevSelectedNodesCount.current = selectedNodeIds.length; - const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[]; - if (changes.length) { - onNodesChange?.(changes); + 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); + if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) { + prevSelectedEdgesCount.current = selectedEdgeIds.length; + const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[]; + if (changes.length) { + onEdgesChange?.(changes); + } } - } - setUserSelectionRect(nextUserSelectRect); - }; + store.setState({ + userSelectionRect: nextUserSelectRect, + }); + }; - const onMouseUp = () => { - store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - resetUserSelection(); - }; + 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); + } - const onMouseLeave = () => { - store.setState({ nodesSelectionActive: false }); - resetUserSelection(); - }; + store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }); - return ( -
- {userSelectionRect.draw && ( -
- )} -
- ); -}); + 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} + +
+ ); + } +); UserSelection.displayName = 'UserSelection'; diff --git a/packages/core/src/container/FlowRenderer/Pane.tsx b/packages/core/src/container/FlowRenderer/Pane.tsx deleted file mode 100644 index 60502182..00000000 --- a/packages/core/src/container/FlowRenderer/Pane.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import type { MouseEvent } from 'react'; -import cc from 'classcat'; - -import { useStore } from '../../hooks/useStore'; -import { containerStyle } from '../../styles'; -import type { ReactFlowState } from '../../types'; -import type { FlowRendererProps } from '.'; - -type PaneProps = Pick & { - 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 e3faed9c..37bd44d9 100644 --- a/packages/core/src/container/FlowRenderer/index.tsx +++ b/packages/core/src/container/FlowRenderer/index.tsx @@ -1,14 +1,13 @@ 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'; 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< @@ -44,7 +43,12 @@ const FlowRenderer = ({ onMoveStart, onMoveEnd, selectionKeyCode, + selectionOnDrag, + selectionMode, + onSelectionStart, + onSelectionEnd, multiSelectionKeyCode, + panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, @@ -53,7 +57,7 @@ const FlowRenderer = ({ panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, - panOnDrag, + panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, @@ -64,27 +68,21 @@ const FlowRenderer = ({ noPanClassName, disableKeyboardA11y, }: FlowRendererProps) => { - const store = useStoreApi(); 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 }); - const onClick = (event: MouseEvent) => { - onPaneClick?.(event); - store.getState().resetSelectedElements(); - store.setState({ nodesSelectionActive: false }); - }; - - const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined; - const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined; - return ( - {children} - - {nodesSelectionActive && ( - - )} - + + {children} + {nodesSelectionActive && ( + + )} + ); }; diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 3af02659..425d9180 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -51,12 +51,17 @@ const GraphView = ({ onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, + onSelectionStart, + onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, + selectionOnDrag, + selectionMode, multiSelectionKeyCode, + panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, @@ -110,7 +115,12 @@ const GraphView = ({ onPaneScroll={onPaneScroll} deleteKeyCode={deleteKeyCode} selectionKeyCode={selectionKeyCode} + selectionOnDrag={selectionOnDrag} + selectionMode={selectionMode} + 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 c2748fa5..6b9fbacc 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, @@ -92,6 +92,8 @@ const ReactFlow = forwardRef( onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, + onSelectionStart, + onSelectionEnd, connectionMode = ConnectionMode.Strict, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, @@ -99,6 +101,9 @@ const ReactFlow = forwardRef( connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', + selectionOnDrag = false, + selectionMode = SelectionMode.Full, + panActivationKeyCode = 'Space', multiSelectionKeyCode = 'Meta', zoomActivationKeyCode = 'Meta', snapToGrid = false, @@ -193,8 +198,11 @@ const ReactFlow = forwardRef( connectionLineComponent={connectionLineComponent} connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} + selectionOnDrag={selectionOnDrag} + selectionMode={selectionMode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} + panActivationKeyCode={panActivationKeyCode} zoomActivationKeyCode={zoomActivationKeyCode} onlyRenderVisibleElements={onlyRenderVisibleElements} selectNodesOnDrag={selectNodesOnDrag} @@ -217,6 +225,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/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx index 636ce5f0..9dcd946f 100644 --- a/packages/core/src/container/ZoomPane/index.tsx +++ b/packages/core/src/container/ZoomPane/index.tsx @@ -9,14 +9,20 @@ 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< FlowRendererProps, - 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y' -> & { selectionKeyPressed: boolean }; + | 'deleteKeyCode' + | 'selectionKeyCode' + | 'multiSelectionKeyCode' + | 'noDragClassName' + | 'disableKeyboardA11y' + | 'selectionOnDrag' +>; const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean => prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k; @@ -33,19 +39,20 @@ const selector = (s: ReactFlowState) => ({ d3Zoom: s.d3Zoom, d3Selection: s.d3Selection, d3ZoomHandler: s.d3ZoomHandler, + userSelectionActive: s.userSelectionActive, }); const ZoomPane = ({ onMove, onMoveStart, onMoveEnd, + onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, - selectionKeyPressed, elementsSelectable, panOnDrag = true, defaultViewport, @@ -61,9 +68,10 @@ 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 } = useStore(selector, shallow); + const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); useResizeHandler(zoomPane); @@ -73,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], @@ -95,7 +105,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; @@ -139,6 +149,7 @@ const ZoomPane = ({ } } }, [ + userSelectionActive, panOnScroll, panOnScrollMode, d3Selection, @@ -152,9 +163,9 @@ const ZoomPane = ({ useEffect(() => { if (d3Zoom) { - if (selectionKeyPressed && !isZoomingOrPanning.current) { + if (userSelectionActive && !isZoomingOrPanning.current) { d3Zoom.on('zoom', null); - } else if (!selectionKeyPressed) { + } else if (!userSelectionActive) { d3Zoom.on('zoom', (event: D3ZoomEvent) => { const { onViewportChange } = store.getState(); store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] }); @@ -165,10 +176,13 @@ const ZoomPane = ({ onViewportChange?.(flowTransform); onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform); } + if (panOnDrag === 'RightClick' && onPaneContextMenu) { + hasMouseMoved.current = true; + } }); } } - }, [selectionKeyPressed, d3Zoom, onMove]); + }, [userSelectionActive, d3Zoom, onMove, panOnDrag, onPaneContextMenu]); useEffect(() => { if (d3Zoom) { @@ -218,9 +232,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) { @@ -242,7 +266,7 @@ const ZoomPane = ({ } // during a selection we prevent all other interactions - if (selectionKeyPressed) { + if (userSelectionActive) { return false; } @@ -275,18 +299,30 @@ 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; }); } }, [ + userSelectionActive, d3Zoom, zoomOnScroll, zoomOnPinch, panOnScroll, zoomOnDoubleClick, panOnDrag, - selectionKeyPressed, elementsSelectable, zoomActivationKeyPressed, ]); 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/styles/init.css b/packages/core/src/styles/init.css index a500c17d..a621794f 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -11,6 +11,10 @@ z-index: 1; cursor: grab; + &.selection { + cursor: pointer; + } + &.dragging { cursor: grabbing; } @@ -26,8 +30,8 @@ z-index: 4; } -.react-flow__selectionpane { - z-index: 5; +.react-flow__selection { + z-index: 6; } .react-flow__nodesselection-rect:focus, diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index 9b273641..d0caf183 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 & { @@ -68,6 +69,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; @@ -94,6 +97,9 @@ export type ReactFlowProps = HTMLAttributes & { connectionMode?: ConnectionMode; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; + selectionOnDrag?: boolean; + selectionMode?: SelectionMode; + panActivationKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; @@ -107,7 +113,7 @@ export type ReactFlowProps = HTMLAttributes & { initNodeOrigin?: NodeOrigin; elementsSelectable?: boolean; selectNodesOnDrag?: boolean; - panOnDrag?: boolean; + panOnDrag?: boolean | 'RightClick'; minZoom?: number; maxZoom?: number; defaultViewport?: Viewport; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 0d40c38c..6bcd06fc 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, @@ -155,6 +155,7 @@ export type ReactFlowStore = { nodesSelectionActive: boolean; userSelectionActive: boolean; + userSelectionRect: SelectionRect | null; connectionNodeId: string | null; connectionHandleId: string | null; @@ -249,3 +250,13 @@ export type ProOptions = { }; export type UseDragEvent = D3DragEvent; + +export enum SelectionMode { + Partial = 'partial', + Full = 'full', +} + +export type SelectionRect = Rect & { + startX: number; + startY: number; +};