From b15b7dbd6b8e451f949cb6a33e7fcf249c324158 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 19 Feb 2024 16:37:35 +0100 Subject: [PATCH 1/3] Fire node drag events also when dragging selection --- examples/react/src/examples/Basic/index.tsx | 11 ++++-- packages/system/src/xydrag/XYDrag.ts | 39 ++++++++++++--------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx index f454b313..a41f50db 100644 --- a/examples/react/src/examples/Basic/index.tsx +++ b/examples/react/src/examples/Basic/index.tsx @@ -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} diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index 91ed7fb8..e0a2f983 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -27,6 +27,7 @@ import type { UpdateNodePositions, Box, } from '../types'; +import { on } from 'events'; export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void; @@ -171,16 +172,19 @@ export function XYDrag voi } updateNodePositions(dragItems, true); - const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag); - if (dragEvent && (onDrag || onNodeOrSelectionDrag)) { + if (dragEvent) { const [currentNode, currentNodes] = getEventHandlerParams({ nodeId, dragItems, nodeLookup, }); onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes); - onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes); + onNodeDrag?.(dragEvent as MouseEvent, currentNode, currentNodes); + if (!nodeId) { + const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag); + _onSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes); + } } } @@ -236,16 +240,18 @@ export function XYDrag 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) { 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); + } } } @@ -300,18 +306,19 @@ export function XYDrag voi if (dragItems.length > 0) { const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems(); - const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop); updateNodePositions(dragItems, false); - if (onDragStop || onNodeOrSelectionDragStop) { - const [currentNode, currentNodes] = getEventHandlerParams({ - nodeId, - dragItems, - nodeLookup, - }); - onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); - onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + const [currentNode, currentNodes] = getEventHandlerParams({ + nodeId, + dragItems, + nodeLookup, + }); + onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); + onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + if (!nodeId) { + const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop); + _onSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); } } }) From 86ccf6807eb6786db2f44d13ac0fc9854a34b87e Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 19 Feb 2024 16:51:59 +0100 Subject: [PATCH 2/3] Removed accidental import --- packages/system/src/xydrag/XYDrag.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index e0a2f983..eaae123e 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -27,7 +27,6 @@ import type { UpdateNodePositions, Box, } from '../types'; -import { on } from 'events'; export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void; From d19d5fc1d39f08bf3aefe9813d3f227fc0557950 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 20 Feb 2024 14:57:06 +0100 Subject: [PATCH 3/3] chore(xydrag): cleanup --- packages/system/src/xydrag/XYDrag.ts | 49 ++++++++++++++++------------ 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index eaae123e..6bd85eb9 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -93,7 +93,6 @@ export function XYDrag 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 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, @@ -172,17 +171,19 @@ export function XYDrag voi updateNodePositions(dragItems, true); - if (dragEvent) { + if (dragEvent && (onDrag || onNodeDrag || (!nodeId && onSelectionDrag))) { const [currentNode, currentNodes] = getEventHandlerParams({ nodeId, dragItems, nodeLookup, }); - onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes); - onNodeDrag?.(dragEvent as MouseEvent, currentNode, currentNodes); + + onDrag?.(dragEvent, dragItems, currentNode, currentNodes); + onNodeDrag?.(dragEvent, currentNode, currentNodes); + if (!nodeId) { const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag); - _onSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes); + _onSelectionDrag(dragEvent, currentNode, currentNodes); } } } @@ -201,7 +202,7 @@ export function XYDrag 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); @@ -239,17 +240,19 @@ export function XYDrag voi lastPos = pointerPos; dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId); - if (dragItems.length > 0) { + if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) { const [currentNode, currentNodes] = getEventHandlerParams({ nodeId, dragItems, nodeLookup, }); + onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); onNodeDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + if (!nodeId) { const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart); - _onSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + _onSelectionDragStart(event.sourceEvent as MouseEvent, currentNode, currentNodes); } } } @@ -288,10 +291,10 @@ export function XYDrag 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) => { @@ -308,16 +311,20 @@ export function XYDrag voi updateNodePositions(dragItems, false); - const [currentNode, currentNodes] = getEventHandlerParams({ - nodeId, - dragItems, - nodeLookup, - }); - onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); - onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); - if (!nodeId) { - const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop); - _onSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) { + const [currentNode, currentNodes] = getEventHandlerParams({ + nodeId, + dragItems, + nodeLookup, + }); + + onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); + onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes); + + if (!nodeId) { + const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop); + _onSelectionDragStop(event.sourceEvent as MouseEvent, currentNode, currentNodes); + } } } })