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

fix(system): return user nodes in node drag/click handlers

Browse Source
This commit is contained in:
moklick
2024-05-02 17:40:48 +02:00
parent 51ab674115
commit ce9ce1db0b
2 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/NodeWrapper/index.tsx
+16 -6
View File
@@ -98,11 +98,21 @@ export function NodeWrapper<NodeType extends Node>({
}); });
const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave; const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
const onMouseEnterHandler = onMouseEnter ? (event: MouseEvent) => onMouseEnter(event, { ...node }) : undefined; const onMouseEnterHandler = onMouseEnter
const onMouseMoveHandler = onMouseMove ? (event: MouseEvent) => onMouseMove(event, { ...node }) : undefined; ? (event: MouseEvent) => onMouseEnter(event, { ...internals.userNode })
const onMouseLeaveHandler = onMouseLeave ? (event: MouseEvent) => onMouseLeave(event, { ...node }) : undefined; : undefined;
const onContextMenuHandler = onContextMenu ? (event: MouseEvent) => onContextMenu(event, { ...node }) : undefined; const onMouseMoveHandler = onMouseMove
const onDoubleClickHandler = onDoubleClick ? (event: MouseEvent) => onDoubleClick(event, { ...node }) : undefined; ? (event: MouseEvent) => onMouseMove(event, { ...internals.userNode })
: undefined;
const onMouseLeaveHandler = onMouseLeave
? (event: MouseEvent) => onMouseLeave(event, { ...internals.userNode })
: undefined;
const onContextMenuHandler = onContextMenu
? (event: MouseEvent) => onContextMenu(event, { ...internals.userNode })
: undefined;
const onDoubleClickHandler = onDoubleClick
? (event: MouseEvent) => onDoubleClick(event, { ...internals.userNode })
: undefined;
const onSelectNodeHandler = (event: MouseEvent) => { const onSelectNodeHandler = (event: MouseEvent) => {
const { selectNodesOnDrag, nodeDragThreshold } = store.getState(); const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
@@ -118,7 +128,7 @@ export function NodeWrapper<NodeType extends Node>({
} }
if (onClick) { if (onClick) {
onClick(event, { ...node }); onClick(event, { ...internals.userNode });
} }
}; };
packages/system/src/xydrag/utils.ts
+6 -5
View File
@@ -77,7 +77,7 @@ export function getDragItems<NodeType extends NodeBase>(
// returns two params: // returns two params:
// 1. the dragged node (or the first of the list, if we are dragging a node selection) // 1. the dragged node (or the first of the list, if we are dragging a node selection)
// 2. array of selected nodes (for multi selections) // 2. array of selected nodes (for multi selections)
export function getEventHandlerParams<NodeType extends NodeBase>({ export function getEventHandlerParams<NodeType extends InternalNodeBase>({
nodeId, nodeId,
dragItems, dragItems,
nodeLookup, nodeLookup,
@@ -85,11 +85,11 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
nodeId?: string; nodeId?: string;
dragItems: Map<string, NodeDragItem>; dragItems: Map<string, NodeDragItem>;
nodeLookup: Map<string, NodeType>; nodeLookup: Map<string, NodeType>;
}): [NodeType, NodeType[]] { }): [NodeBase, NodeBase[]] {
const nodesFromDragItems: NodeType[] = []; const nodesFromDragItems: NodeBase[] = [];
for (const [id, dragItem] of dragItems) { for (const [id, dragItem] of dragItems) {
const node = nodeLookup.get(id); const node = nodeLookup.get(id)?.internals.userNode;
if (node) { if (node) {
nodesFromDragItems.push({ nodesFromDragItems.push({
@@ -103,7 +103,8 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
return [nodesFromDragItems[0], nodesFromDragItems]; return [nodesFromDragItems[0], nodesFromDragItems];
} }
const node = nodeLookup.get(nodeId)!; const node = nodeLookup.get(nodeId)!.internals.userNode;
return [ return [
{ {
...node, ...node,