diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 3522b806..76707060 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -33,6 +33,6 @@ Cypress.Commands.add('drag', (selector, { x, y }) => { .trigger('mousedown', { which: 1, view: window }) .trigger('mousemove', { clientX: x, clientY: y, force: true }) .wait(50) - .trigger('mouseup', { view: window, force: tru }) + .trigger('mouseup', { view: window, force: true }) ); }); diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 0c113b55..d4865c11 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -58,8 +58,7 @@ export default (NodeComponent: ComponentType) => { noPanClassName, noDragClassName, }: WrapNodeProps) => { - const draggingRef = useRef(false); - const [dragging, setDragging] = useState(false); + const [dragging, setDragging] = useState(false); const store = useStoreApi(); const { addSelectedNodes, unselectNodesAndEdges, updateNodePosition, updateNodeDimensions } = useStore( selector, @@ -88,22 +87,20 @@ export default (NodeComponent: ComponentType) => { const onSelectNodeHandler = useCallback( (event: MouseEvent) => { - if (!isDraggable) { - if (isSelectable) { - store.setState({ nodesSelectionActive: false }); + if (isSelectable) { + store.setState({ nodesSelectionActive: false }); - if (!selected) { - addSelectedNodes([id]); - } - } - - if (onClick) { - const node = store.getState().nodeInternals.get(id)!; - onClick(event, { ...node }); + if (!selected) { + addSelectedNodes([id]); } } + + if (onClick) { + const node = store.getState().nodeInternals.get(id)!; + onClick(event, { ...node }); + } }, - [isSelectable, selected, isDraggable, onClick, id] + [isSelectable, selected, onClick, id] ); const onDragStart = useCallback( @@ -136,7 +133,6 @@ export default (NodeComponent: ComponentType) => { (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)!; @@ -158,31 +154,14 @@ 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 && node) { + if (onNodeDragStop) { + const node = store.getState().nodeInternals.get(id)!; onNodeDragStop(event.sourceEvent as MouseEvent, { ...node }); } }, - [id, onNodeDragStop, onClick] + [id, onNodeDragStop] ); useEffect(() => { diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts index f4aacfbf..89b7fc9c 100644 --- a/src/hooks/useDrag.ts +++ b/src/hooks/useDrag.ts @@ -110,11 +110,12 @@ 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