wip: Consider arrowhead for label position

[donglixiaoche]

#793

consider testcase arrowhead_labels, before this pr, the result svg will be

because we didn't consider arrowhead for labelPosition, the position will be a little be downward along the rendering path

after this pr, srcAdj, dstAdj, srcArrowhead, dstArrowhead will have an effect on labelPostion

[donglixiaoche]

@alixander the logic of this pr focus on connection.GetLabelTopLeft

previously, we got labelTL base on connection.Route, but the real rendering path of connection may diff a little bit with connection.Route, due to the exist of stroke-width(of both edge and shape). and for now, connection.LabelPosition will always be INSIDE_MIDDLE_CENTER (am i right? do i miss something?) , so stroke-width won't effect the way we calc labelPosition

in this pr, we need to consider stroke-width and arrowhead for labelPosition, i think there may be two ways doing this:

1. construct the real rendering route before we calc the labelPosition (give this up, more complicated than i thought)
2. calc the real length we need walk through along connection.Route (currently used)

what do you think?

[alixander]

connection.LabelPosition will always be INSIDE_MIDDLE_CENTER (am i right? do i miss something?)

no, only for dagre and elk. TALA places it anywhere along the connection.

e.g. notice "turn into target" is closer to the destination

https://play.d2lang.com/?script=fJIxjoQwDEV7n-JfYCm2TLHNVnsMlA0QDSSRk4xAA3cfOSESEtJUfPnZ_l841oWcFP7kgxcBUbMNSWH__yYAWPH1g42AnQDt3WDHqPBbROZeXkaZA9JkFlPUoCAnLHruN5-rjA-T9ETAQQdRce6qnXiEnqPhs3wadWWnULMGz-nGB2HaL8HON1adPzTUPNLARn6QYaKa4jqkmqJWueZRSJkdrEse9UjU0HWxOhW1gsD4HOkdAAD__w%3D%3D&layout=tala&sketch=1&theme=302&

[donglixiaoche]

ohh, i see. don't know how TALA is integrated. i used to assume all my work is for dagre and elk engine. so i'd better to try construct target route and calc labelPosition base on that right? ( in my opinion, just add some adjustment should be ok)

and i want to ask is there any chance the rendering path may longer than the real route? now i see all the adjustment make it shorter

[alixander]

yeah actually i don't think you'd need to do anything for TALA. will take a look at this PR shortly

[gavin-ts]

instead of updating GetLabelTopLeft, and GetPointOnRoute, I think it might be better to temporarily move the route start and end points to begin after the arrowheads (e.g. connection.Route[0].X += srcAdj.X) and then revert this after getting the label position on the route between arrowheads. This avoids the extra complexity in the GetPointOnRoute funcs.

[donglixiaoche]

to temporarily construct the route, we can't just add a start and end point to original route, but also we need to remove the extra points before and after, can this be done by calcing the distance along the route? what if the connection is a curve?

[gavin-ts]

I meant just you could modify the first and last points in the route to start after the arrowheads. Similar to how we adjust them here to account for the arrowhead+shape stroke widths:

d2/d2renderers/d2svg/d2svg.go

Lines 377 to 380 in bce9b1a

	path = append(path, fmt.Sprintf("M %f %f",
	route[0].X+srcAdj.X,
	route[0].Y+srcAdj.Y,
	))

after computing the label position on the adjusted route, apply the -adjustments to get the original back going forwards

you can compute the adjustment similar to this:

d2/d2renderers/d2svg/d2svg.go

Lines 357 to 358 in bce9b1a

	v := geo.NewVector(end.X-start.X, end.Y-start.Y)
	return v.Unit().Multiply(-distance).ToPoint()

[donglixiaoche]

what if there are multiple points between original point and new point? if so there would still be issue

[gavin-ts]

that's true but there shouldn't be multiple points within the length of the arrowhead. It will be more robust to account for that though in case it does come up.

[alixander]

also @donglixiaoche just a heads up that @gavin-ts is working on a cousin issue of this, which is adjusting arrowhead labels (different from yours, but related). might be worth taking a look at his to see potential merge conflicts that i think will arise: #1207

[donglixiaoche]

also @donglixiaoche just a heads up that @gavin-ts is working on a cousin issue of this, which is adjusting arrowhead labels (different from yours, but related). might be worth taking a look at his to see potential merge conflicts that i think will arise: #1207

copy, will try to figure out the a proper way to do it

[alixander]

@donglixiaoche sorry for the many merge conflicts here. whenever you want to move this forward and resolve those, feel free to ping me to take another look