Undo event | xyflow | Page 1

half gulch May 15, 2025, 7:58 AM

#

Hi Netero. I didn't get the issue you have while adding the node/edge back. What do you mean by it throws undefined value? You would simply add the node/edge back in the appropriate state in case of undoing a delete action as you said. It shouldn't be an issue.

#

If you can get reactflow pro and want a proper undo/redo solution, you can use this Undo Redo Example

React Flow

Undo and Redo - React Flow

Undo and redo functionality for moving, adding, and deleting nodes and edges

half gulch May 15, 2025, 2:28 PM

#

Hmn. At the end of the day, you still have to mutate the whole nodes or edges array state when you undo or redo.

#

What is the actual problem you are facing when you add the node or edge back to the array state on undoing a delete action? You said it throws undefined value. I didnt get it?

half gulch May 15, 2025, 3:09 PM

#

You are storing the node object in some history stack when you delete a node(use the filter method to remove that node from the nodes state) and then when you undo you add that node object back to the nodes array state?

#

Can you share the undo function? Also the function in which you update your history stack when you delete a node?

half gulch May 15, 2025, 3:43 PM

#

Kindly share the setUndoAction function as well

half gulch May 15, 2025, 4:04 PM

#

In the handleUndo function, you are calling the setUndoAction function in case of DELETE. I am asking you to share its code

 case "DELETE_NODE":
        if (actionHistory.nodeData && actionHistory.edgeData) {
          setUndoAction(); // <--- THIS ONE
        } else {
          console.error("actionHistory nodeData or edgeData is not found.");
        }
        break;

#

In this function, why arent you adding the node and edges you saved, back into the nodes and edges state?

#Undo event