Make diagram zoom controls clearer

This commit is contained in:
Ian Gulliver
2026-10-23 13:34:56 -07:00
parent 1caa2c98f0
commit fa73b748c0
2 changed files with 12 additions and 9 deletions
+11 -8
View File
@@ -1322,14 +1322,17 @@ func markRect(_ r: CGRect) -> CGRect {
}
func openMark(_ r: CGRect) -> Path {
let s: CGFloat = 8
let x = r.maxX - 12 - s - 3
let y = r.minY + 12
let c = CGPoint(x: r.maxX - 21, y: r.minY + 20)
let radius: CGFloat = 5.5
let edge = radius / 2.squareRoot()
var p = Path()
p.addRoundedRect(in: CGRect(x: x + 3, y: y, width: s, height: s), cornerSize: CGSize(width: 2, height: 2))
p.move(to: CGPoint(x: x, y: y + 3))
p.addLine(to: CGPoint(x: x, y: y + 3 + s))
p.addLine(to: CGPoint(x: x + s, y: y + 3 + s))
p.addEllipse(in: CGRect(x: c.x - radius, y: c.y - radius, width: radius * 2, height: radius * 2))
p.move(to: CGPoint(x: c.x + edge, y: c.y + edge))
p.addLine(to: CGPoint(x: c.x + edge + 4.5, y: c.y + edge + 4.5))
p.move(to: CGPoint(x: c.x - 2.5, y: c.y))
p.addLine(to: CGPoint(x: c.x + 2.5, y: c.y))
p.move(to: CGPoint(x: c.x, y: c.y - 2.5))
p.addLine(to: CGPoint(x: c.x, y: c.y + 2.5))
return p
}
@@ -1374,7 +1377,7 @@ struct BoxCanvas: View {
}
ctx.stroke(path, with: .color(stroke), style: StrokeStyle(lineWidth: lit ? 1.5 : 1, dash: b.kind == .ghost ? ghostDash : []))
if b.node.opens {
ctx.stroke(openMark(b.rect), with: .color(Palette.muted), lineWidth: 1.2)
ctx.stroke(openMark(b.rect), with: .color(Palette.accent), style: StrokeStyle(lineWidth: 1.6, lineCap: .round))
}
var y = b.rect.minY + padY
ctx.draw(Text(b.node.title).font(Font(titleFont)).foregroundColor(b.kind == .ghost ? Palette.muted : Palette.text), at: CGPoint(x: b.rect.minX + padX, y: y), anchor: .topLeading)
+1 -1
View File
@@ -168,7 +168,7 @@ func diagramHTML(_ diagram: DiagramLayout) -> String {
.box{cursor:pointer}
.box.frame{cursor:inherit}
.box .mark rect{fill:transparent;stroke:none}
.mark path{fill:none;stroke:var(--muted);stroke-width:1.2}
.mark path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.title{font-size:\(num(CTFontGetSize(titleFont)))px;font-weight:600;fill:var(--text)}
.detail{font-size:\(num(CTFontGetSize(detailFont)))px;fill:var(--muted)}
.edge{pointer-events:none}