Drag stop listeners aren't working if multiple nodes are moved

Issue

If more than one node is selected with the “click to multi select” feature (https://github.com/wbkd/react-flow/issues/609, https://github.com/wbkd/react-flow/pull/663), then there seems to be no handler that will work, if more than one node is dragged.

Reproducing the issue

• Open the overview example
• Enable or set multiSelectionKeyCode (default is Meta)
• Meta + Click two nodes
• Drag to change both node positions

Observation

onNodeDragStop(event, node) will fire, but only contain a single node instead of a list of all nodes.

onSelectionDragStop(event, nodes) doesn’t fire. Based on this comment it seems to be the expected behavior, and “selection” is the blue box, but not multiple elements that are selected per click.

Potential solutions

It might be that I’m missing something here. So, helping me out, could be a solution 😃 If that’s not the case:

• onSelectionDragStop could fire with a list of moved nodes regardless if the multiselection was done with multiSelectionKeyCode or with a rectangle
• onNodeDragStop could be called with a list of nodes instead of a single node, if more than one node was moved

Info

• Using react-flow in version 9.6.1
• Similar to https://github.com/wbkd/react-flow/issues/858
• Relevant comment https://github.com/wbkd/react-flow/issues/1006#issuecomment-799758872

[elbakerino]

Another workaround, using the internal state of nodes, so far seems to work with single and multi selection drag movement.

const store = useStore()
const onNodeDragStop: (event: ReactMouseEvent, node: Node) => void = React.useCallback((e, node) => {
    // get currently selected elements
    const selectedElems = store.getState().selectedElements
    // get those as nodes to be able to access `__rf`
    const nodes = store.getState().nodes.filter(n => selectedElems?.findIndex(se => se.id === n.id) !== -1)
    const updatedNodes = []
    nodes?.forEach(elem => {
        // do your updating stuff
        updatedNodes.push({
            id: elem.id,
            type: elem.type,
            // @ts-ignore
            position: elem.__rf && elem.__rf.position ? elem.__rf.position : elem.position,
        })
    })
    updateNodesMoved(updatedNodes)
}, [updateNodesMoved, store])

[moklick]

We are working on a next release #2152. We dropped react-draggable and rewrote the dragging logic. We are now passing a third parameter nodes to onNodeDragStart, onNodeDrag and onNodeDragStop that includes all selected nodes. You can check out the next version with npm install react-flow-renderer@next.

@Zelenya7 the new version should solve your issue, otherwise you can filter your local nodes array const selectedNodes = nodes.filter(n => n.selected). The nodes receive selected as an attribute.