option to add bridges/arcs to crossings/intersections

[alixander]

can be a configuration for those who want it. should be relatively simple to add

[H0onnn]

@alixander Hello ! I am interested in this issue. If it's okay, can I solve it?

[alixander]

@H0onnn Yes certainly!

Some pointers:

1. I would add intersection-bridge as a boolean to d2-configs:

   d2/d2compiler/compile.go

   Line 1394 in 7269d30

   func compileConfig(ir *d2ir.Map) (*d2target.Config, error) {

2. Add a visual e2e test that has a crossing to https://github.com/terrastruct/d2/blob/master/e2etests/testdata/txtar.txt . Grid diagrams are one way to trigger it: https://play.d2lang.com/?script=Si_KTNFNzs8pzc0rtlIw4krkSuJK5krh4kpU0LVTSOFKBlFJXIAAAAD__w%3D%3D& . After you add this test, you can keep running TA=1 ./ci/test.sh ./e2etests -run TestE2E/txtar/your-test-name -v to see changes and keep opening the new svg to see what it looks like.
3. When the diagram is being exported, add logic to add a bridge: true field to connections which should have a bridge rendered: https://github.com/terrastruct/d2/blob/master/d2exporter/export.go . Note that this function which detects intersections may be useful:

   d2/lib/geo/segment.go

   Line 41 in 7269d30

   func (segment Segment) Intersects(otherSegment Segment) bool {

   .
4. When you render connections, for those that have a bridge: true field, you'll want to actually draw the little bridge at the intersection. This will probably be the hardest part, since you'll have to calculate svg paths.

   d2/d2renderers/d2svg/d2svg.go

   Line 497 in 7269d30

   func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {

Here to answer any questions as you go. If you decide you're no longer interested (no worries), just un-assign yourself.

[alixander]

A test with orthogonal edges: https://play.d2lang.com/?script=XMxBCoMwEIXh_TvFw6VgELopWfQu0YzOQKjFBESKdy9Nu8pq5n2Lf04hZ8meb5BqMcrz95MpTJI8u66uXM4kbnuF2crpOYK8cGHdLQ77dmTPGxBc7fl_CRPmRiKkkQVrIwprBL07LBb1vI_onYqtWurAxOFBRfyeBZ8AAAD__w%3D%3D&

Probably worth adding both to make sure the arc looks good both diagonally and orthogonally

[H0onnn]

Thank you for your kind response ! I will keep this in mind as I proceed with the work.

[alixander]

Hi @H0onnn just checking in to see if you're still pursuing this

[H0onnn]

@alixander Sorry, I'm not good at it :(

[briheet]

Hey @alixander , interested in working on this, added the test in txtar.txt which generated svg in testdata/txtar. Added the boolean value in Config and changed compileConfig. If its not urgent, can i work on this ?

[alixander]

@H0onnn No worries, thanks for trying!

@briheet Go for it!