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

Merge pull request #3928 from xyflow/fix-node-drag

Browse Source 
Fire node drag events also when dragging selection
This commit is contained in:
Moritz Klack
2024-02-20 15:02:08 +01:00
committed by GitHub
parent 20e2d3d2ce d19d5fc1d3
commit c904f5c485
2 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/react/src/examples/Basic/index.tsx
View File

@@ -13,10 +13,13 @@ import {
OnNodeDrag,
} from '@xyflow/react';
const onNodeDrag: OnNodeDrag = (_, node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
const onNodeDragStart = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const printSelectionEvent = (name: string) => (_: MouseEvent, nodes: Node[]) => console.log(name, nodes);
const initialNodes: Node[] = [
{
id: '1',
@@ -113,7 +116,11 @@ const BasicFlow = () => {
defaultEdges={initialEdges}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onSelectionDragStart={printSelectionEvent('selection drag start')}
onSelectionDrag={printSelectionEvent('selection drag')}
onSelectionDragStop={printSelectionEvent('selection drag stop')}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}

45
packages/system/src/xydrag/XYDrag.ts
View File

@@ -93,7 +93,6 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
let dragItems: NodeDragItem[] = [];
let autoPanStarted = false;
let mousePosition: XYPosition = { x: 0, y: 0 };
let dragEvent: MouseEvent | null = null;
let containerBounds: DOMRect | null = null;
let dragStarted = false;
@@ -101,7 +100,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
// public functions
function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
function updateNodes({ x, y }: XYPosition) {
function updateNodes({ x, y }: XYPosition, dragEvent: MouseEvent | null) {
const {
nodeLookup,
nodeExtent,
@@ -171,16 +170,21 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
updateNodePositions(dragItems, true);
const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
if (dragEvent && (onDrag || onNodeDrag || (!nodeId && onSelectionDrag))) {
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodeLookup,
});
onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
onNodeDrag?.(dragEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
_onSelectionDrag(dragEvent, currentNode, currentNodes);
}
}
}
@@ -198,7 +202,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
if (panBy({ x: xMovement, y: yMovement })) {
updateNodes(lastPos as XYPosition);
updateNodes(lastPos as XYPosition, null);
}
}
autoPanId = requestAnimationFrame(autoPan);
@@ -236,16 +240,20 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
lastPos = pointerPos;
dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
if (dragItems.length > 0 && (onDragStart || onNodeOrSelectionDragStart)) {
if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodeLookup,
});
onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
onNodeDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
_onSelectionDragStart(event.sourceEvent as MouseEvent, currentNode, currentNodes);
}
}
}
@@ -283,10 +291,10 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
// skip events without movement
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
dragEvent = event.sourceEvent as MouseEvent;
// dragEvent = event.sourceEvent as MouseEvent;
mousePosition = getEventPosition(event.sourceEvent, containerBounds!);
updateNodes(pointerPos);
updateNodes(pointerPos, event.sourceEvent as MouseEvent);
}
})
.on('end', (event: UseDragEvent) => {
@@ -300,18 +308,23 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
if (dragItems.length > 0) {
const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
updateNodePositions(dragItems, false);
if (onDragStop || onNodeOrSelectionDragStop) {
if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) {
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodeLookup,
});
onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
_onSelectionDragStop(event.sourceEvent as MouseEvent, currentNode, currentNodes);
}
}
}
})