search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.45k stars 1.16k forks source link

Intermittent bug in dragNewLink with allowLooseLinks = false #1027

Open tauren opened 5 months ago

tauren commented 5 months ago

I'm nearing completion on an app built with this great tool and am trying to clean up some loose ends (pun intended). I need to prevent any dangling links from being created.

I found the following snippet within the Simple Flow Example, which looked promising:

      const state = engine.getStateMachine().getCurrentState();
      if (state instanceof DefaultDiagramState) {
        state.dragNewLink.config.allowLooseLinks = false;
      }

However, it appears to work only sometimes. If I repeatedly attempt to create dangling links, many are removed, but some remain. This happens quite frequently in my app and is replicable in the online demo linked above.

https://github.com/projectstorm/react-diagrams/assets/282084/94aca979-a1df-4abd-a846-295ffbae0af8

I'm not even sure where to begin attempting to debug this. Open to suggestions.

abhishek-doe commented 5 months ago

I am new to this library, can you tell me what kind of app did you made. if Possible, please share your github link for that app, that would be a great help for me.

tauren commented 5 months ago

I am new to this library, can you tell me what kind of app did you made. if Possible, please share your github link for that app, that would be a great help for me.

Unfortunately, it's a simple internal app and not available online. Also, I'm currently refactoring it to use ReactFlow. I kept having to work around ReactDiagrams bugs and eventually ran into one that I couldn't get around without rewriting a large part of the framework.

Since I'm sure someone will ask, I discovered that the event triggered on removing ports didn't contain information about the port on the other side of a connected port. This is because the framework had already internally deleted the connection. Therefor I had no way to propagate consistent state through my tree without either maintaining my own external state or refactoring vasts portions of ReactDiagram internals.

Seeing as how this project is old and not well maintained, I decided my best bet was to switch to a more modern and supported tool. Either way I was going to have to spend a bunch of time refactoring my app.

Good luck!