Description
Is there an existing issue for this?
- I have searched the existing issues and this is a new bug.
Current Behavior
This API is really amazing for what it does and for the most part has made my life extremely easy for what I set out to do. But the behaviors of removing nodes/edges has legitimately driven me insane for the entirety of my time with VueFlow. I may somehow just be using it wrong, but it's been wildly inconsistent.
All of the code for my post can be found here and you can launch the deployed version from its git page. I was able to mostly finish my program:
https://github.com/SkyAphid/corkboard
As far as I could tell by searching, no one else has brought up the problem I've been having. You can find the code I'm going to display below in its App.vue class, since I was able to find a decent solution around it for now.
My problem comes from deleting nodes. At first I thought it was as simple as calling removeNodes(id). The edges seemed to delete with it. However when I went to finally use my JSON files, I found that the edges weren't being removed, but hidden in the JSON file for some reason. I came back to edit the code, to find that removeEdges(id) wasn't working either when I tried to add it below removeNodes(). The node would disappear, but then pop right back up in the export, depending on how you ordered things (though I've forgotten what combination caused this, since I was so frustrated at the time and trying various things to just get it to work and move on).
I did experiments with using the edge.value filter functions, and applyEdgeChange, and still no luck. So I went back to trying to brute-force the removeEdges function to work. I was able to somewhat nail down the problematic behavior that way.
If you delete an edge, the node doesn't delete. If you delete a node, the edge doesn't delete. You can't do it at the same time for some reason. If I delete a node, its edges will still in the JSON output. If I try and do them at the same time, one or the other will stay hidden in the JSON output. Which resulted in this code, which "works:"
onNodeDoubleClick((nodeEvent) => {
let pointerEvent = nodeEvent.event;
let node = nodeEvent.node;
pointerEvent.preventDefault();
let items = [
{
label: "Delete Node", onClick: () => {
removeNodes(node.id);
let edges = getEdges;
for (const edge of edges.value){
if (edge.source == node.id || edge.target == node.id){
removeEdges(edge.id);
}
}
},
},
];
etc, etc...
Calling this function will only delete one of the two at a time despite being in the same call. So I'll right click and tell it to delete the node, but only the edge will disappear. Then the next time, the node. But it gets even worse: If I have multiple edges connected to a node, it will only delete one edge at a time, then the next edge, then the next edge, and then finally it deletes the node.
Thankfully, I was able to get past the issue with the edges by doing this:
label: "Delete Node", onClick: () => {
removeNodes(node.id);
let edges = getEdges;
let edgesToRemove;
for (const edge of edges.value){
if (edge.source == node.id || edge.target == node.id){
edgesToRemove.push(edge);
}
}
removeEdges(edgesToRemove);
},
So now at the very least, I have to click two times and it'll delete the edges, THEN the node on the second click. BUT it still asks me if I want to delete each node one by one. I honestly have no idea how to turn the confirmations off or define what warrants one. The least I could do was just make sure it's at least styled like the rest of the program.
I'm by far no expert in Vue/Javascript, I learned it along with this project as I went and built this in a week's time. But I think I've worked with it enough at this point to say that this is likely a bug of some kind.
Expected Behavior
Ideally, I don't want to have to call removeEdges at all. The removeNode function should frankly just delete any attached edges itself or be a toggleable setting. But I doubt that is something that will be compromised on, so at the very least I want to be able to call removeNode(id) and removeEdges(edges) in one call please, and they both disappear and I just go on with my day instead of having to repeat my inputs to get the desired result. Being able to control when the warning is displayed could help a lot too, since you don't really want users being able to control whether or not a disconnected/useless edge should be deleted or not.
Also, in my opinion, you guys should commit to edges working like everything else and not disappearing when a node is deleted because that strongly implies it's been deleted to new users. The resulting JSON output should be a representation of exactly what you see on the screen, with no surprises.
And as always, I know that maintaining APIs like this takes time and effort that I'm not entitled to. So I give you guys my upmost thanks for taking the time to read this long post and hopefully help me out. You're appreciated and I thank you very much!
Steps To Reproduce
I'll be deploying a version to my github page with the "fix" I was able to come up with. Simply delete a node with an edge attached to it to see the behavior.
Relevant log output
No response
Anything else?
Anyway, thank you so much for the amazing software! It really got my project off the ground and I was able to completely replace a commercial software that had gotten a little too expensive for us in a short amount of time. Hopefully this gets padded out so I can call it a day on this thing finally. I'm ready to get onto other things.
To whomever reads this, have a wonderful week/day/evening!