xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
26.26k stars 1.68k forks source link

onNodeDragStop fires even when node has not been moved #3223

Closed cini9 closed 1 year ago

cini9 commented 1 year ago

Describe the Bug

First off, thanks a bunch for this library. It really takes our diagrams to the next level !

I have been trying to update a node's position in the database once the drag event has ended. To do so, I am using the onNodeDragStop even handler, like so :

<ReactFlow
    nodes={nodes}
    edges={edges}
    deleteKeyCode={['Backspace', 'Delete']}
    connectionRadius={40}
    onNodesChange={onNodesChange}
    fitView
    defaultEdgeOptions={DiagramService.DEFAULT_EDGE_OPTIONS}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
    nodeTypes={nodeTypes}
    onDrop={onDrop}
    onDragOver={onDragOver}
    nodeOrigin={[0.5, 0.5]}
    minZoom={0.2}
    onNodeDragStop={handleDragStop}
  >
    <Background />
    <Controls />
    <MiniMap nodeColor={nodeColor} />
</ReactFlow>

  const handleDragStop = useCallback((_: MouseEvent, node: Node<InstantiatedNode>) => {
      console.log('this is firing', node)
    }, [])

The callback is where I wish to send a mutation to the api to update the node position in the database. However, I noticed that onNodeDragStop is firing even when I simply select the node, and don't drag it to a new position. Is this is the correct behaviour ?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

This behaviour also appears to happen in the examples provided in the documentation. In the proximity connect example :

  1. https://reactflow.dev/docs/examples/nodes/proximity-connect/
  2. Add a console.log inside of the onNodeDragStop callback
  3. Open the console
  4. Click on any of the nodes, without moving them to a new position.

Expected behavior

As as user, I would expect the onNodeDragStop event to fire only if there has been an actual drag event and the position of the node has changed.

Screenshots or Videos

No response

Platform

Additional context

No response

bcakmakoglu commented 1 year ago

This is basically a duplicate of #2622

cini9 commented 1 year ago

In the meantime, I've implemented a workaround using a "isDragging" flag to detect whether there is an actual drag event. Is there any plan to manage this internally ?

moklick commented 1 year ago

closed in favour of #2622