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

Merge branch 'main' of github.com:jackfishwick/react-flow into jackfishwick-main

Browse Source
This commit is contained in:
moklick
2022-12-08 18:32:33 +01:00
parent 7c51a61f10 2f767408ca
commit badacf763b
17 changed files with 503 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+30 -15
View File
@@ -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<
@@ -44,6 +43,10 @@ const FlowRenderer = ({
onMoveStart,
onMoveEnd,
selectionKeyCode,
selectBoxOnDrag,
selectBoxMode,
onSelectionStart,
onSelectionEnd,
multiSelectionKeyCode,
zoomActivationKeyCode,
elementsSelectable,
@@ -68,6 +71,8 @@ const FlowRenderer = ({
const nodesSelectionActive = useStore(selector);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true);
useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
const onClick = (event: MouseEvent) => {
@@ -76,7 +81,13 @@ const FlowRenderer = ({
store.setState({ nodesSelectionActive: false });
};
const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined;
const onContextMenu = (event: MouseEvent) => {
if (panOnDrag === 'RightClick') {
event.preventDefault();
} else {
onPaneContextMenu?.(event);
}
};
const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined;
return (
@@ -84,7 +95,7 @@ const FlowRenderer = ({
onMove={onMove}
onMoveStart={onMoveStart}
onMoveEnd={onMoveEnd}
selectionKeyPressed={selectionKeyPressed}
onPaneContextMenu={onPaneContextMenu}
elementsSelectable={elementsSelectable}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
@@ -92,7 +103,7 @@ const FlowRenderer = ({
panOnScrollSpeed={panOnScrollSpeed}
panOnScrollMode={panOnScrollMode}
zoomOnDoubleClick={zoomOnDoubleClick}
panOnDrag={panOnDrag}
panOnDrag={!selectionKeyPressed && panOnDrag}
defaultViewport={defaultViewport}
translateExtent={translateExtent}
minZoom={minZoom}
@@ -102,23 +113,27 @@ const FlowRenderer = ({
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
>
{children}
<UserSelection selectionKeyPressed={selectionKeyPressed} />
{nodesSelectionActive && (
<NodesSelection
onSelectionContextMenu={onSelectionContextMenu}
noPanClassName={noPanClassName}
disableKeyboardA11y={disableKeyboardA11y}
/>
)}
<Pane
<UserSelection
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onClick={onClick}
onMouseEnter={onPaneMouseEnter}
onMouseMove={onPaneMouseMove}
onMouseLeave={onPaneMouseLeave}
onContextMenu={onContextMenu}
onWheel={onWheel}
/>
isSelectionMode={!!isSelectionMode}
selectBoxMode={selectBoxMode}
>
{children}
{nodesSelectionActive && (
<NodesSelection
onSelectionContextMenu={onSelectionContextMenu}
noPanClassName={noPanClassName}
disableKeyboardA11y={disableKeyboardA11y}
/>
)}
</UserSelection>
</ZoomPane>
);
};
packages/core/src/container/GraphView/index.tsx
+8
View File
@@ -51,11 +51,15 @@ const GraphView = ({
onNodeMouseLeave,
onNodeContextMenu,
onSelectionContextMenu,
onSelectionStart,
onSelectionEnd,
connectionLineType,
connectionLineStyle,
connectionLineComponent,
connectionLineContainerStyle,
selectionKeyCode,
selectBoxOnDrag,
selectBoxMode,
multiSelectionKeyCode,
zoomActivationKeyCode,
deleteKeyCode,
@@ -110,6 +114,10 @@ const GraphView = ({
onPaneScroll={onPaneScroll}
deleteKeyCode={deleteKeyCode}
selectionKeyCode={selectionKeyCode}
selectBoxOnDrag={selectBoxOnDrag}
selectBoxMode={selectBoxMode}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
multiSelectionKeyCode={multiSelectionKeyCode}
zoomActivationKeyCode={zoomActivationKeyCode}
elementsSelectable={elementsSelectable}
packages/core/src/container/ReactFlow/index.tsx
+8
View File
@@ -92,6 +92,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onSelectionDrag,
onSelectionDragStop,
onSelectionContextMenu,
onSelectionStart,
onSelectionEnd,
connectionMode = ConnectionMode.Strict,
connectionLineType = ConnectionLineType.Bezier,
connectionLineStyle,
@@ -99,6 +101,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
connectionLineContainerStyle,
deleteKeyCode = 'Backspace',
selectionKeyCode = 'Shift',
selectBoxOnDrag = false,
selectBoxMode = 'Contained',
multiSelectionKeyCode = 'Meta',
zoomActivationKeyCode = 'Meta',
snapToGrid = false,
@@ -193,6 +197,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
connectionLineComponent={connectionLineComponent}
connectionLineContainerStyle={connectionLineContainerStyle}
selectionKeyCode={selectionKeyCode}
selectBoxOnDrag={selectBoxOnDrag}
selectBoxMode={selectBoxMode}
deleteKeyCode={deleteKeyCode}
multiSelectionKeyCode={multiSelectionKeyCode}
zoomActivationKeyCode={zoomActivationKeyCode}
@@ -217,6 +223,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
+45 -12
View File
@@ -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;
@@ -34,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,
@@ -62,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);
@@ -94,7 +101,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;
@@ -138,6 +145,7 @@ const ZoomPane = ({
}
}
}, [
userSelectionActive,
panOnScroll,
panOnScrollMode,
d3Selection,
@@ -151,9 +159,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();
@@ -165,10 +173,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 +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) {
@@ -242,7 +263,7 @@ const ZoomPane = ({
}
// during a selection we prevent all other interactions
if (selectionKeyPressed) {
if (userSelectionActive) {
return false;
}
@@ -275,18 +296,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,
]);