onNodeDragStart without onNodeDragStop

Hi,

I have encountered a situation where onNodeDragStop is not getting called after onNodeDragStart is called when the user did not move the node out of position before releasing the mouse left button. I believe it’s due to the following logic:

https://github.com/wbkd/react-flow/blob/64d1913356d171fd2c4303c918c3e375f57cbee7/src/components/Nodes/wrapNode.tsx#L173-L195

Is it possible to update the logic as follows to ensure onNodeDragStop is not omitted:

 const onDragStop = useCallback( 
   (event: DraggableEvent) => { 
     // onDragStop also gets called when user just clicks on a node. 
     // Because of that we set dragging to true inside the onDrag handler and handle the click here 
     if (!isDragging) { 
       if (isSelectable && !selectNodesOnDrag && !selected) { 
         addSelectedElements(node); 
       } 
  
       onClick?.(event as MouseEvent, node); 

     } else {
       updateNodePosDiff({ 
         id: node.id, 
         isDragging: false, 
       });
    } 
     onNodeDragStop?.(event as MouseEvent, node); 
   }, 
   [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, isDragging, selected] 
 ); 

[datoslabs]

Hi @moklick,

I understand the reasoning. Unfortunately, drag and click both start with mousedown event and if I recall correctly, since the Node is wrapped within a react-draggable component, the mousedown will trigger onNodeDragStart event and on mouseup event if no “dragging” occurred, then the existing code will trigger the onClick which will in-term trigger onElementClick event and skip onNodeDragStop event. In other words, with the following simple example:

const elements = [
  {
    id: "1",
    type: "input",
    data: { label: "Master Node" },
    position: { x: 50, y: 50 }
  },
  { id: "2", data: { label: "Node 2" }, position: { x: 100, y: 100 } },
  { id: "3", data: { label: "Node 3" }, position: { x: 250, y: 150 } },
  { id: "4", data: { label: "Node 4" }, position: { x: 500, y: 200 } },
  { id: "5", data: { label: "Node 5" }, position: { x: 750, y: 250 } },
  {
    id: "6",
    data: { label: "Node 6" },
    position: { x: 800, y: 300 },
    type: "output"
  },
  { id: "e1-2", source: "3", target: "2", type: "straight" },
  { id: "e1-3", source: "1", target: "3", type: "default" },
  { id: "e1-4", source: "1", target: "4", type: "default" },
  { id: "e1-5", source: "5", target: "2", type: "step", animated: true },
  { id: "e1-6", source: "1", target: "6", type: "step" }
];
return ( 
  <ReactFlow 
    elements={elements} 
    onNodeDragStart={()=>console.log("onNodeDragStart")}
    onNodeDragStop={()=>console.log("onNodeDragStop")}
    onElementClick={()=>console.log("onElementClick")} 
  />
);

When the user clicks (mousedown and without moving the mouse mouseup) on an element, the console will log:

onNodeDragStart
onElementClick 

Which will result in onNodeDragStart event firing without corresponding onNodeDragStop event. In most cases when there is a handler for onNodeDragStart event it is likely to find a handler for onNodeDragStop event; while it is feasible to implement a handler for onElementClick to negate/close out the effect of onNodeDragStart, it makes the code less intuitive and harder to maintain as it will force the developer to “handle” parts of onNodeDragStop logic in onElementClick handler. Ideally, the onDragStart event should fire when the node’s position changed for the 1st time in order to clearly differentiate drag from click; however, I am not sure that’s how react-draggable is implemented.

[nmcdnld]

Wow, dealing with same exact issue and love @datoslabs answer