alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2662 from wbkd/feat/figma-controls

Browse Source 
Feat: figma controls
This commit is contained in:
Moritz Klack
2022-12-13 11:40:25 +01:00
committed by GitHub
parent 4d5e2ac3a6 9ba39ae49f
commit fd7b1af7b0
21 changed files with 491 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/cypress/e2e/basic.cy.ts
+7 -7
View File
@@ -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 })
examples/vite-app/cypress/e2e/controls.cy.ts
+1 -1
View File
@@ -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 })
examples/vite-app/cypress/e2e/empty.cy.ts
+3 -3
View File
@@ -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 });
examples/vite-app/cypress/e2e/figma.cy.ts
+51
View File
@@ -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 {};
examples/vite-app/cypress/e2e/interaction.cy.ts
+12 -1
View File
@@ -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 });
});
examples/vite-app/cypress/e2e/minimap.cy.ts
+6 -7
View File
@@ -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 })
examples/vite-app/cypress/support/commands.ts
+12 -10
View File
@@ -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 {};
examples/vite-app/src/App/index.tsx
+6
View File
@@ -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',
examples/vite-app/src/examples/Figma/index.tsx
+36
View File
@@ -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 (
<ReactFlow
defaultNodes={initialNodes}
defaultEdges={initialEdges}
selectionOnDrag
selectionMode={SelectionMode.Partial}
panOnDrag="RightClick"
panOnScroll
zoomActivationKeyCode="Meta"
multiSelectionKeyCode={MULTI_SELECT_KEY}
fitView
selectNodesOnDrag={false}
>
<Background variant={BackgroundVariant.Cross} />
</ReactFlow>
);
};
export default BasicFlow;
examples/vite-app/src/examples/NodeResizer/index.tsx
+1 -1
View File
@@ -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';
packages/core/src/components/UserSelection/SelectionBox.tsx
+30
View File
@@ -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 (
<div
className="react-flow__selection react-flow__container"
style={{
width: userSelectionRect.width,
height: userSelectionRect.height,
transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
}}
/>
);
}
export default SelectionBox;
packages/core/src/components/UserSelection/index.tsx
+193 -122
View File
@@ -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<HTMLDivElement | null>
): 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<HTMLDivElement | null>(null);
const store = useStoreApi();
const prevSelectedNodesCount = useRef<number>(0);
const prevSelectedEdgesCount = useRef<number>(0);
const containerBounds = useRef<DOMRect>();
const { userSelectionActive, elementsSelectable, paneDragging } = useStore(selector, shallow);
const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
const store = useStoreApi();
const prevSelectedNodesCount = useRef<number>(0);
const prevSelectedEdgesCount = useRef<number>(0);
const containerBounds = useRef<DOMRect>();
const [userSelectionRect, setUserSelectionRect] = useState<SelectionRect>(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 (
<div
className="react-flow__selectionpane react-flow__container"
onMouseDown={onMouseDown}
onMouseMove={onMouseMove}
onMouseUp={onMouseUp}
onMouseLeave={onMouseLeave}
>
{userSelectionRect.draw && (
<div
className="react-flow__selection react-flow__container"
style={{
width: userSelectionRect.width,
height: userSelectionRect.height,
transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
}}
/>
)}
</div>
);
});
resetUserSelection();
onSelectionEnd?.(event);
};
const onMouseLeave = (event: ReactMouseEvent) => {
if (userSelectionActive) {
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
onSelectionEnd?.(event);
}
resetUserSelection();
};
const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
return (
<div
className={cc([
'react-flow__pane',
'react-flow__container',
{ dragging: paneDragging, selection: isSelecting },
])}
onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
onContextMenu={wrapHandler(onContextMenu, container)}
onWheel={wrapHandler(onWheel, container)}
onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onMouseDown={hasActiveSelection ? onMouseDown : undefined}
onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
onMouseUp={hasActiveSelection ? onMouseUp : undefined}
onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
ref={container}
style={containerStyle}
>
{children}
<SelectionBox />
</div>
);
}
);
UserSelection.displayName = 'UserSelection';
packages/core/src/container/FlowRenderer/Pane.tsx
-34
View File
@@ -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<FlowRendererProps, 'onClick' | 'onContextMenu' | 'onWheel'> & {
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 (
<div
className={cc(['react-flow__pane', { dragging }])}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseMove={onMouseMove}
onMouseLeave={onMouseLeave}
onContextMenu={onContextMenu}
onWheel={onWheel}
style={containerStyle}
/>
);
}
export default Pane;
packages/core/src/container/FlowRenderer/index.tsx
+36 -33
View File
@@ -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 (
<ZoomPane
onMove={onMove}
onMoveStart={onMoveStart}
onMoveEnd={onMoveEnd}
selectionKeyPressed={selectionKeyPressed}
onPaneContextMenu={onPaneContextMenu}
elementsSelectable={elementsSelectable}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
@@ -92,7 +90,7 @@ const FlowRenderer = ({
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
zoomOnDoubleClick={zoomOnDoubleClick}
panOnDrag={panOnDrag}
panOnDrag={!selectionKeyPressed && panOnDrag}
defaultViewport={defaultViewport}
translateExtent={translateExtent}
minZoom={minZoom}
@@ -102,23 +100,28 @@ const FlowRenderer = ({
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
>
{children}
<UserSelection selectionKeyPressed={selectionKeyPressed} />
{nodesSelectionActive && (
<NodesSelection
onSelectionContextMenu={onSelectionContextMenu}
noPanClassName={noPanClassName}
disableKeyboardA11y={disableKeyboardA11y}
/>
)}
<Pane
onClick={onClick}
onMouseEnter={onPaneMouseEnter}
onMouseMove={onPaneMouseMove}
onMouseLeave={onPaneMouseLeave}
onContextMenu={onContextMenu}
onWheel={onWheel}
/>
<UserSelection
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onPaneClick={onPaneClick}
onPaneMouseEnter={onPaneMouseEnter}
onPaneMouseMove={onPaneMouseMove}
onPaneMouseLeave={onPaneMouseLeave}
onPaneContextMenu={onPaneContextMenu}
onPaneScroll={onPaneScroll}
panOnDrag={panOnDrag}
isSelecting={!!isSelecting}
selectionMode={selectionMode}
>
{children}
{nodesSelectionActive && (
<NodesSelection
onSelectionContextMenu={onSelectionContextMenu}
noPanClassName={noPanClassName}
disableKeyboardA11y={disableKeyboardA11y}
/>
)}
</UserSelection>
</ZoomPane>
);
};
packages/core/src/container/GraphView/index.tsx
+10
View File
@@ -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}
packages/core/src/container/ReactFlow/index.tsx
+11 -1
View File
@@ -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<ReactFlowRefType, ReactFlowProps>(
onSelectionDrag,
onSelectionDragStop,
onSelectionContextMenu,
onSelectionStart,
onSelectionEnd,
connectionMode = ConnectionMode.Strict,
connectionLineType = ConnectionLineType.Bezier,
connectionLineStyle,
@@ -99,6 +101,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
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<ReactFlowRefType, ReactFlowProps>(
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<ReactFlowRefType, ReactFlowProps>(
onPaneScroll={onPaneScroll}
onPaneContextMenu={onPaneContextMenu}
onSelectionContextMenu={onSelectionContextMenu}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onEdgeUpdate={onEdgeUpdate}
onEdgeContextMenu={onEdgeContextMenu}
onEdgeDoubleClick={onEdgeDoubleClick}
packages/core/src/container/ZoomPane/index.tsx
+50 -14
View File
@@ -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<ReturnType<typeof setTimeout>>();
const store = useStoreApi();
const isZoomingOrPanning = useRef(false);
const hasMouseMoved = useRef(false);
const zoomPane = useRef<HTMLDivElement>(null);
const prevTransform = useRef<Viewport>({ 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<HTMLDivElement, any>) => {
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,
]);
packages/core/src/store/initialState.ts
+1
View File
@@ -26,6 +26,7 @@ const initialState: ReactFlowStore = {
nodeExtent: infiniteExtent,
nodesSelectionActive: false,
userSelectionActive: false,
userSelectionRect: null,
connectionNodeId: null,
connectionHandleId: null,
connectionHandleType: 'source',
packages/core/src/styles/init.css
+6 -2
View File
@@ -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,
packages/core/src/types/component-props.ts
+7 -1
View File
@@ -35,6 +35,7 @@ import type {
NodeOrigin,
EdgeMouseHandler,
HandleType,
SelectionMode,
} from '.';
export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
@@ -68,6 +69,8 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
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<HTMLDivElement> & {
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<HTMLDivElement> & {
initNodeOrigin?: NodeOrigin;
elementsSelectable?: boolean;
selectNodesOnDrag?: boolean;
panOnDrag?: boolean;
panOnDrag?: boolean | 'RightClick';
minZoom?: number;
maxZoom?: number;
defaultViewport?: Viewport;
packages/core/src/types/general.ts
+12 -1
View File
@@ -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<HTMLDivElement, null, SubjectPosition>;
export enum SelectionMode {
Partial = 'partial',
Full = 'full',
}
export type SelectionRect = Rect & {
startX: number;
startY: number;
};