diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index ab0e73bb..0c113b55 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -58,6 +58,8 @@ export default (NodeComponent: ComponentType) => { noPanClassName, noDragClassName, }: WrapNodeProps) => { + const draggingRef = useRef(false); + const [dragging, setDragging] = useState(false); const store = useStoreApi(); const { addSelectedNodes, unselectNodesAndEdges, updateNodePosition, updateNodeDimensions } = useStore( selector, @@ -130,13 +132,12 @@ export default (NodeComponent: ComponentType) => { [id, selected, selectNodesOnDrag, isSelectable, onNodeDragStart] ); - // As one of the props passed to a custom node - const [dragging, setDragging] = useState(false); - const onDrag = useCallback( (event: UseDragEvent, dragPos: UseDragData) => { updateNodePosition({ id, diff: { x: dragPos.dx, y: dragPos.dy } }); setDragging(true); + draggingRef.current = true; + if (onNodeDrag) { const node = store.getState().nodeInternals.get(id)!; onNodeDrag(event.sourceEvent as MouseEvent, { @@ -157,13 +158,31 @@ export default (NodeComponent: ComponentType) => { const onDragStop = useCallback( (event: UseDragEvent) => { + let node; + + if (onClick || onNodeDragStop) { + node = store.getState().nodeInternals.get(id)!; + } + + if (!draggingRef.current) { + if (isSelectable && !selectNodesOnDrag && !selected) { + addSelectedNodes([id]); + } + + if (onClick && node) { + onClick(event.sourceEvent as MouseEvent, { ...node }); + } + + return; + } + draggingRef.current = false; setDragging(false); - if (onNodeDragStop) { - const node = store.getState().nodeInternals.get(id)!; + + if (onNodeDragStop && node) { onNodeDragStop(event.sourceEvent as MouseEvent, { ...node }); } }, - [id, onNodeDragStop] + [id, onNodeDragStop, onClick] ); useEffect(() => { diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts index 89b7fc9c..f4aacfbf 100644 --- a/src/hooks/useDrag.ts +++ b/src/hooks/useDrag.ts @@ -110,12 +110,11 @@ function useDrag({ dx: pos.x, dy: pos.y, }); - - event.on('end', (event) => { - onStop(event); - }); } }) + .on('end', (event) => { + onStop(event); + }) .filter((event: any) => { const filter = !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName); return handleSelector