d2
d2 copied to clipboard
Container labels don't respect margins in Dagre and TALA
In short
It appears to me that in Dagre and TALA layouts, container labels have no margin or don't respect them. All works as expected, until you put something inside a shape, thus making it a container.
I'm pretty sure this isn't expected behavior, but correct me if I'm wrong.
ELK handles all the cases I've tested without issues.
Details
- With plain shapes, the label does not cross the shape outline. This is expected.
- With containers, the label can cross the shape outline and overlap with other objects. Sometimes the label doesn't fit the view and part of it gets cut off. This is unexpected.
TALA usually avoids the issue due to its creative, more flexible label positioning. However, if you use label.near
, then TALA loses its advantage and starts behaving like Dagre (in the context of this issue).
Demonstration
Compiled using v0.6.3, sketch mode enabled. The images have not been cropped.
Plain shapes ✅
*.label.near: top-left
a: "Internal Corporate Network"
b: "External Partner Network"
a -> b
Dagre
TALA
Containers without label.near
⚠️
a: "Internal Corporate Network"
b: "External Partner Network"
a.VLAN1
b.VLAN2
Dagre
Containers with label.near
⚠️
*.label.near: top-left
a: "Internal Corporate Network"
b: "External Partner Network"
a.VLAN1 -> b.VLAN2
Dagre
TALA
cf.
[case 1] dagre https://play.d2lang.com/?l=&script=SrRSUPLMK0ktykvMUXDOLyrIL0osSVXwSy0pzy_KVlKozklMSs3Ry0tNLLJSKMkv0E1OBamu5UqyUlByrYBqDEgsKslLLSJCW6JemI-jnyFXEpg24gIEAAD__w%3D%3D&layout=dagre& elk https://play.d2lang.com/?l=&script=SrRSUPLMK0ktykvMUXDOLyrIL0osSVXwSy0pzy_KVlKozklMSs3Ry0tNLLJSKMkv0E1OBamu5UqyUlByrYBqDEgsKslLLSJCW6JemI-jnyFXEpg24gIEAAD__w%3D%3D&layout=elk&
[case 2]
dagre https://play.d2lang.com/?l=&script=SrRSUPLMK0ktykvMUXDOLyrIL0osSVXwSy0pzy_KVlKozklMSs3Ry0tNLLJSyC8tKc5MSdUtyS_QTU4F6arlSrJSUHKtgBoQkFhUkpdaRIL2RL0wH0c_Q64kMG3EBQgAAP__&layout=dagre&
elk https://play.d2lang.com/?l=&script=SrRSUPLMK0ktykvMUXDOLyrIL0osSVXwSy0pzy_KVlKozklMSs3Ry0tNLLJSyC8tKc5MSdUtyS_QTU4F6arlSrJSUHKtgBoQkFhUkpdaRIL2RL0wH0c_Q64kMG3EBQgAAP__&layout=elk&