Node Dragging in Fixed position custom layout

[ShounakJoshi07]

Describe the bug

I am experiencing a problem with the dragging of nodes within a custom layout in ReaGraph. Despite following the official documentation to implement a custom layout to specify fixed positions for nodes, utilizing the onNodeDragged callback to update these positions. The functionality to drag and update node positions becomes impaired after specific canvas interactions. Notably, after triggering either onCanvasClick or onNodeClick events, nodes no longer update their positions when dragged. This results in nodes either snapping back to their original locations upon losing focus or their positions becoming "frozen." It's important to note that this "freezing" only affects the ability to drag and update positions; the rest of the component's interactive functionalities remain operational. This issue severely limits the intended dynamic modification of the network topology, which relies on the ability to update node positions through dragging.

Here is the code snippet showcasing my implementation:

const handleNodeDragged = useCallback((node) => {
const newPosition = { x: node.position.x, y: node.position.y };
if(newPosition.x !== node.data.position.x || newPosition.y !== node.data.position.y){
setNodes(currentNodes => {
const nodeIndex = currentNodes.findIndex(n => n.id === node.id);
const updatedNode = { ...currentNodes[nodeIndex], position: newPosition };
return [...currentNodes.slice(0, nodeIndex), updatedNode, ...currentNodes.slice(nodeIndex + 1)];
});
}
}, [setNodes]);

const layoutOverrides = {
getNodePosition: (id, {nodes}) => {
const node = nodes.find(n => n.id === id);
return node ? { x: node.position.x, y: node.position.y, z: 0 } : { x: 0, y: 0, z: 0 };
}
};

Steps to Reproduce the Bug or Issue

Unfortunately, the issue arises under somewhat unpredictable circumstances related to canvas interactions, making a concise reproduction path challenging to outline. However, the general approach involves:

1. Implementing a custom layout with fixed node positions.
2. Using onNodeDragged to update node positions upon dragging.
3. Observing that, after certain unspecified canvas interactions, nodes no longer update their positions upon dragging.

Expected behavior

I anticipated the ability to display the network in a static topology, with the nodes' positions defined by custom layout arguments. This setup should allow for the topology to be imported, exported, and altered through node dragging, maintaining the updated positions even after the nodes or canvas lose focus.

Screenshots or Videos

No response

Platform

• Reagraph Version: [e.g. 1.0.0]
• OS: macOS
• Browser: [Chrome, Safari, Firefox]
• NodeJS version: ...

Your Example Website or App

No response

Additional context

This behavior limits the interactive capabilities intended for the network visualization, specifically the dynamic modification of the network's topology through dragging.

Is there a known workaround or a particular practice I should follow to ensure consistent drag functionality? Any assistance or insights would be greatly appreciated.

Thank you for your time and support.