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

feat(nodes): move canvas when nodes are at the edge of the canvas #2753

Browse Source
This commit is contained in:
moklick
2023-01-16 18:23:20 +01:00
parent e413bceb19
commit 86f7a9a43d
4 changed files with 118 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/src/examples/Switch/index.tsx
+5 -2
View File
@@ -1,4 +1,4 @@
import React, { MouseEvent, useCallback } from 'react';
import { MouseEvent, useCallback } from 'react';
import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
@@ -35,7 +35,7 @@ const nodesA: Node[] = [
];
const edgesA: Edge[] = [
{ id: 'e1-2', source: '1a', target: '2a', ariaLabel: null },
{ id: 'e1-2', source: '1a', target: '2a', ariaLabel: undefined },
{ id: 'e1-3', source: '1a', target: '3a' },
];
@@ -83,6 +83,8 @@ const edgesB: Edge[] = [
{ id: 'e4b', source: 'inputb', target: '4b' },
];
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node.position);
const BasicFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
@@ -99,6 +101,7 @@ const BasicFlow = () => {
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
disableKeyboardA11y
onNodeDrag={onNodeDrag}
>
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
<button
packages/core/src/components/Handle/handler.ts
+1 -13
View File
@@ -1,7 +1,7 @@
import type { MouseEvent as ReactMouseEvent } from 'react';
import { StoreApi } from 'zustand';
import { clamp, getHostForElement } from '../../utils';
import { clamp, getHostForElement, getVelocity } from '../../utils';
import { ConnectionMode } from '../../types';
import type { OnConnect, Connection, HandleType, ReactFlowState, XYPosition } from '../../types';
@@ -75,18 +75,6 @@ function resetRecentHandle(hoveredHandle: Element): void {
hoveredHandle?.classList.remove('react-flow__handle-connecting');
}
// returns a number between 0 and 1 that represents the velocity of the movement
// when the mouse is close to the edge of the canvas
function getVelocity(value: number, min: number, max: number): number {
if (value < min) {
return clamp(Math.abs(value - min), 1, 100) / 100;
} else if (value > max) {
return -clamp(Math.abs(value - max), 1, 100) / 100;
}
return 0;
}
export function handleMouseDown({
event,
handleId,
packages/core/src/hooks/useDrag/index.ts
+100 -53
View File
@@ -7,7 +7,8 @@ import { useStoreApi } from '../../hooks/useStore';
import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
import { handleNodeClick } from '../../components/Nodes/utils';
import useGetPointerPosition from '../useGetPointerPosition';
import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent } from '../../types';
import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
import { getVelocity } from '../../utils';
export type UseDragData = { dx: number; dy: number };
@@ -38,6 +39,11 @@ function useDrag({
const store = useStoreApi();
const dragItems = useRef<NodeDragItem[]>();
const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
const requestAnimationFrameId = useRef(0);
const containerBounds = useRef<DOMRect | null>(null);
const centerPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const dragEvent = useRef<MouseEvent | null>(null);
const animationFrameStarted = useRef(false);
const getPointerPosition = useGetPointerPosition();
@@ -45,6 +51,79 @@ function useDrag({
if (nodeRef?.current) {
const selection = select(nodeRef.current);
const updateNodes = ({ x, y }: XYPosition) => {
const {
nodeInternals,
onNodeDrag,
onSelectionDrag,
updateNodePositions,
nodeExtent,
snapGrid,
snapToGrid,
nodeOrigin,
} = store.getState();
lastPos.current = { x, y };
let hasChange = false;
dragItems.current = dragItems.current!.map((n) => {
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
if (snapToGrid) {
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
}
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;
}
updateNodePositions(dragItems.current, true, true);
setDragging(true);
const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
if (onDrag && dragEvent.current) {
const [currentNode, nodes] = getEventHandlerParams({
nodeId,
dragItems: dragItems.current,
nodeInternals,
});
onDrag(dragEvent.current as MouseEvent, currentNode, nodes);
}
};
const updateViewport = (): void => {
if (!containerBounds.current) {
return;
}
const xMovement = getVelocity(centerPosition.current.x, 35, containerBounds.current.width - 35) * 20;
const yMovement = getVelocity(centerPosition.current.y, 35, containerBounds.current.height - 35) * 20;
if (xMovement !== 0 || yMovement !== 0) {
lastPos.current.x = (lastPos.current.x ?? 0) + xMovement * -1;
lastPos.current.y = (lastPos.current.y ?? 0) + yMovement * -1;
updateNodes(lastPos.current as XYPosition);
store.getState().movePane({ x: xMovement, y: yMovement });
}
requestAnimationFrameId.current = requestAnimationFrame(updateViewport);
};
if (disabled) {
selection.on('.drag', null);
} else {
@@ -56,6 +135,7 @@ function useDrag({
unselectNodesAndEdges,
onNodeDragStart,
onSelectionDragStart,
domNode,
} = store.getState();
const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
@@ -86,72 +166,39 @@ function useDrag({
});
onStart(event.sourceEvent as MouseEvent, currentNode, nodes);
}
containerBounds.current = domNode?.getBoundingClientRect() || null;
centerPosition.current = {
x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
};
})
.on('drag', (event: UseDragEvent) => {
const {
updateNodePositions,
nodeInternals,
nodeExtent,
onNodeDrag,
onSelectionDrag,
snapGrid,
snapToGrid,
nodeOrigin,
} = store.getState();
const pointerPos = getPointerPosition(event);
if (!animationFrameStarted.current) {
animationFrameStarted.current = true;
updateViewport();
}
// skip events without movement
if (
(lastPos.current.x !== pointerPos.xSnapped || lastPos.current.y !== pointerPos.ySnapped) &&
dragItems.current
) {
lastPos.current = {
x: pointerPos.xSnapped,
y: pointerPos.ySnapped,
dragEvent.current = event.sourceEvent as MouseEvent;
centerPosition.current = {
x: event.sourceEvent.clientX - (containerBounds.current?.left ?? 0),
y: event.sourceEvent.clientY - (containerBounds.current?.top ?? 0),
};
let hasChange = false;
dragItems.current = dragItems.current.map((n) => {
const nextPosition = { x: pointerPos.x - n.distance.x, y: pointerPos.y - n.distance.y };
if (snapToGrid) {
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
}
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);
setDragging(true);
if (onDrag) {
const [currentNode, nodes] = getEventHandlerParams({
nodeId,
dragItems: dragItems.current,
nodeInternals,
});
onDrag(event.sourceEvent as MouseEvent, currentNode, nodes);
}
updateNodes(pointerPos);
}
})
.on('end', (event: UseDragEvent) => {
setDragging(false);
animationFrameStarted.current = false;
cancelAnimationFrame(requestAnimationFrameId.current);
if (dragItems.current) {
const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();
const onStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
packages/core/src/utils/index.ts
+12
View File
@@ -14,6 +14,18 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
y: clamp(position.y, extent[0][1], extent[1][1]),
});
// returns a number between 0 and 1 that represents the velocity of the movement
// when the mouse is close to the edge of the canvas
export const getVelocity = (value: number, min: number, max: number): number => {
if (value < min) {
return clamp(Math.abs(value - min), 1, 100) / 100;
} else if (value > max) {
return -clamp(Math.abs(value - max), 1, 100) / 100;
}
return 0;
};
export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
(element.getRootNode?.() as Document | ShadowRoot) || window?.document;