Tighten diagram layout: symmetry, consistent anchors, text padding

This commit is contained in:
Ian Gulliver
2026-10-23 08:52:49 -07:00
parent d6d9dd86d9
commit 324c6f8652
2 changed files with 297 additions and 89 deletions
+5 -5
View File
@@ -70,18 +70,18 @@ func diagramHTML(_ layout: BoxLayout) -> String {
let f = fill(b)
svg += "<g class=\"box\" data-id=\"\(esc(b.node.id))\" style=\"--l:\(hex(f, .light));--d:\(hex(f, .dark))\">"
svg += "<rect x=\"\(num(r.minX))\" y=\"\(num(r.minY))\" width=\"\(num(r.width))\" height=\"\(num(r.height))\" rx=\"\(b.depth == 0 ? 8 : 6)\"/>"
var y = r.minY + pad
svg += "<text class=\"title\" x=\"\(num(r.minX + pad))\" y=\"\(num(y + CTFontGetAscent(titleFont)))\">\(esc(b.node.title))</text>"
y += titleLine + 2
var y = r.minY + padY
svg += "<text class=\"title\" x=\"\(num(r.minX + padX))\" y=\"\(num(y + CTFontGetAscent(titleFont)))\">\(esc(b.node.title))</text>"
y += titleLine + titleGap
for d in b.node.details {
svg += "<text class=\"detail\" x=\"\(num(r.minX + pad))\" y=\"\(num(y + CTFontGetAscent(detailFont)))\">\(esc(d))</text>"
svg += "<text class=\"detail\" x=\"\(num(r.minX + padX))\" y=\"\(num(y + CTFontGetAscent(detailFont)))\">\(esc(d))</text>"
y += detailLine
}
svg += "</g>"
}
for (i, e) in layout.edges.enumerated() {
svg += "<g class=\"edge\" data-i=\"\(i)\">"
svg += "<path d=\"\(edgePath(e.points))\"\(e.edge.dashed ? " stroke-dasharray=\"5 4\"" : "")/>"
svg += "<path d=\"\(edgePath(shaft(e.points)))\"\(e.edge.dashed ? " stroke-dasharray=\"5 4\"" : "")/>"
if e.points.count >= 2 {
svg += "<polygon points=\"\(arrowHead(e.points[e.points.count - 2], e.points[e.points.count - 1]))\"/>"
}