Switch away from pathfinding

[oskar-anderson]

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:

• The current point x or y equals the target x or y on the good case
• The diagonal movement gets interrupted by some obstacle and it will continue from a random point from the diagonal side that is closest to the end point on the bad case

Removing the pathfinding entirely might be the only real solution.

[oskar-anderson]

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:

• Abandoned, but looks very promising - https://github.com/anseki/leader-line
• Abandoned - https://github.com/stanko-arbutina/arrow-line
• https://github.com/pierpo/react-archer
• Abandoned - https://github.com/Eliav2/react-xarrows

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

[oskar-anderson]

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

[oskar-anderson]

Remade the application in React Flow #11