Drag problem after changing parentNode

[dariovillalta]

Describe the Bug

Hey everyone,

I'm trying to create an UML graph design flow for processes and I'm having problem with changing nodes from one subflow to another by being dragged. Basically there can be multiple swim lanes that are a type of static nodes that don't move. Inside the swim lanes there may be several nodes with the attribute extent: parent that never changes, but the parentNode attribute changes when a node is being dragged and enters a new swim lane. There is a useRef variable to check if a node is being dragged being set on the events onNodeDragStart and onNodeDragStop, and then on onNodeMouseEnter it just checks if a node is being dragged and the parentNode is different to the current entered swim lane.

The problems are:

1. The flow changes accurately the nodes parentNode succesfully and the extent bounds constraint works well but the drag function stops working and the node sticks to the bottom
2. The swim lanes can have variable height and when one has an expanded height the extent bounds constraint stops working and the node floats outside the parent node when the attribute parentNode changes. Once the node is dragged again it appears inside the bounds correctly.

Something that may be relevant is that the mouse cursor changes when I move outside the swim lane even though I haven't stopped clicking the mouse the hand looks like it releases and when it reenters the swim lane it seems like it is holding again, I'm still trying to understand the library code but I figure this may be relevant, any guidance is extremely appreciated.

Here's some code:

For detecting if it is being dragged

`
const handleNodeDragStart = useCallback((event, node) => {
if (node.type === 'subnode') {
isDraggingNode.current = true;
draggedNodeRef.current = node;
}
console.log('isDraggingNode TRUE', isDraggingNode.current);
});

const handleNodeDragStop = useCallback((event, node) => {
if (node.type === 'subnode') {
isDraggingNode.current = false;
}
});
`

For changing the attributes:

`
const handleNodeMouseEnter = useCallback((event, node) => {
if (node.type !== 'subnode') {
if (isDraggingNode.current && draggedNodeRef.current) {
if (!node || draggedNodeRef.current.data.parentId === node.id) {
return;
}

    setNodes((nds) => {
      let draggedNode = { ...draggedNodeRef.current };
      const parentLane = node;

      if (!parentLane || draggedNode.data.parentId === parentLane.id) return nds;

      draggedNode.data.parentId = parentLane.id;
      draggedNode.parentNode = parentLane.id;

      draggedNodeRef.current = draggedNode;

      return nds.map((n) => (n.id === draggedNode.id ? draggedNode : n));
    });
  }
}

}, [setNodes]);
`

And the code that updates the height that somehow affects the node dragging

`
const updateNodeHeight = (id, newHeight) => {
setNodes((nds) => {
let updatedNodes = nds.map((node) => {
if (node.id === id) {
return {
...node,
data: { ...node.data, height: newHeight },
};
}
return node;
});

  const index = updatedNodes.findIndex((node) => node.id === id);
  for (let i = index + 1; i < updatedNodes.length; i++) {
    if (updatedNodes[i].type.localeCompare('swimlane')===0) {
      updatedNodes[i] = {
        ...updatedNodes[i],
        position: {
          ...updatedNodes[i].position,
          y: updatedNodes[i - 1].position.y + updatedNodes[i - 1].data.height,
        },
      };
    }
  }

  return updatedNodes;
});

};
`

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create swim lane nodes that are static, not draggable and stacked one over another without overlap. Create css to keep on lowest z-Index and update height function.
2. Create nodes with parent node and extent parent attributes
3. Create Flag to detect node is being dragged on start and stop
4. On onNodeMouseEnter detect if the node has entered another swim lane
5. Change attribute parentNode if thats the case
6. Drag node over different swim lanes

Expected behavior

As a user I expect to be able to change the parent node attribute and for the behavior of extent parent to behave or be dragged in the same manner as the original swim lane it belonged to, but I'm seeing the drag node functionality broken on every swim lane that isn't the one that the node belonged to when it started being dragged.

Screenshots or Videos

Screen.Recording.2024-06-01.at.04.05.43.mp4

Platform

• OS: macOS
• Browser: Firefox
• Version: 126.0.1

Additional context

Any help or hint is extremely appreciated

[dariovillalta]

Minus one small weird visual glitch, this works on v12