I was playing with some open-source code recently, trying to create links between objects on a grid. What I do want however is for the links not to be straight lines between the objects, but instead to be “squared” like on draw.io for example (the second screenshot below).
I tried to do the following:
- Get the start and the end of the line
- Find the grid position of the object that we need to connect to
- Depends where it is it’s position, start drawing the line moving either horizontally or vertically
This somehow feels like an overkill approach. Is there an easier way, a plugin, an example, a library or anything really to achieve the “squared” links like on draw.io?
What I currently have:
What I want to achieve:
The point where the arrow bends at right angles is trivial to determine and not overkill.
Thanks a lot hofk, a great source of gems there! I’m probably overthinking this (got into Threejs not long ago). I would probably implement a simple algo that would:
- Get the position (x, y) of the start and the end of the line
- Calculate a “midpoint” cell on the grid where the line should break (there could be multiple “midpoints” in some cases)
- Start drawing the line through the midpoint(s)
Hopefully that’s what you also thought of?
Also since the grid in Threejs seems to be just LineSegments, I probably expected that there is some built-in way to do this ie. to connect objects with a link that considers the grid cells.
Try three-flow: Diagramming library for adding to a threejs scene
The basic example shows how to set and change snap-to-grid
Oh wow! Thanks a lot @anidivr, this answers most of my questions actually! Marked as a solution.
Wishing you a great start of the new year ahead!