Closed oskar-anderson closed 11 months ago
Turning the algorithm greedy helped a little, but overall the text format is not really working.
Try switching away from canvas to HTML. Relationship arrows can then be drawn as curved lines with a library:
That means saving PNG will also have to be moved to html - https://stackoverflow.com/questions/43755750/div-or-html-to-image-alternative-to-html2canvas Also look into replicating drawsql/azimutt style.
Good article - https://azimutt.app/blog/how-to-choose-your-entity-relationship-diagram
Good article - https://www.jointjs.com/blog/javascript-diagramming-libraries This library seems very promising (custom react TSX components as graph elements, builtin zooming, working PNG export example, builtin minimap, builtin connection arrows) - https://reactflow.dev
Remade the application in React Flow #11
The problem with pathfinding is that the path is hard to make not ugly (remove unnecessary turns and turns at natural positions). Currently the path will move diagonally until:
Removing the pathfinding entirely might be the only real solution.