How do I have Node dragging in custom layout with positions.

[ShounakJoshi07]

I've developed a simple custom layout that utilizes x and y coordinates, as illustrated in the provided demo. While these coordinates successfully update during drag actions, I've encountered an issue where the drag functionality ceases to update the position after either onCanvasClick or onNodeClick events are triggered. Consequently, the dragging action no longer works as expected. Does anyone have insights on how to address this problem?

[amcdnl]

This should work, if it doesn't its a bug.

[ShounakJoshi07]

Description

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 };
}
};

And it is utilized in my component as follows:

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.

Steps to Reproduce

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.

Environment

• OS: macOS
• Framework: React (please specify the version if possible)
• ReaGraph Version: (please specify the version to help replicate the issue)

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.