Node drag causes React-Flow's internal state to get out of sync

I encountered a problem where after node is dragged, its position becomes stale and cannot be updated via changing node.position property; the root cause of this seems to be related to the following code in the reducer:

https://github.com/wbkd/react-flow/blob/4b043bceccf41ae1edbd52e2919e1bf5a65aef99/src/store/reducer.ts#L44-L46

In my testing, the condition is never true and therefore allows node.__rf.position to get out of sync with node.position; I believe the correct logic should be

if (storeNode.__rf.position.x !== propElement.position.x || storeNode.__rf.position.y !== propElement.position.y) { 
   updatedNode.__rf.position = propElement.position; 
 } 

Please note, this bug only surfaces after node position has been updated by node drag and subsequently updating the node’s position via node.position will cease to have an effect on the node’s position (ie node.__rf.position becomes out of sync with node.position).

[datoslabs]

Thank you @Danybs; the PR I submitted to fix this issue had been approved, hopefully, it will be released soon. Per my experiment and writeup above, after node drag node.position !== reflect node.__rf.position; this is why the fix needs to be made to the reducer as any attempts to programmatically update a node’s position after node drag event will not physically move the node since rendering is based on node.__rf.position NOT node.position.

[Danybs]

when drag elements to flow if move nodes, dont update position state i updated elements state position this way:

    const onNodeDragStop = (event, node) => {
        let elementsCopy = elements;
        let index = elements.findIndex(element => element.id === node.id);
        let newPositionNode = elements[index];
        newPositionNode.position = node.position;
        elementsCopy.splice(index, 1, newPositionNode);
        setElements(elementsCopy);
    };

regards