From 5e81c42c4087ebb5a01b38c72c6d3c99148a9006 Mon Sep 17 00:00:00 2001 From: cocos02 Date: Fri, 12 Jun 2026 13:25:29 +0800 Subject: [PATCH] fix: strict orthogonal edges with rounded corners, horizontal then vertical --- src/components/TreeFlow.vue | 41 ++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/src/components/TreeFlow.vue b/src/components/TreeFlow.vue index b465d00..cd20c2c 100644 --- a/src/components/TreeFlow.vue +++ b/src/components/TreeFlow.vue @@ -184,33 +184,28 @@ onMounted(() => { function edgePath(e: FlowEdge): string { if (e.points.length < 2) return '' - const r = 6 + const r = 5 let d = `M ${e.points[0].x} ${e.points[0].y}` - for (let i = 1; i < e.points.length - 1; i++) { - const prev = e.points[i - 1] - const curr = e.points[i] - const next = e.points[i + 1] + for (let i = 1; i < e.points.length; i++) { + const a = e.points[i - 1] + const b = e.points[i] + const dx = b.x - a.x + const dy = b.y - a.y - const dx1 = curr.x - prev.x - const dy1 = curr.y - prev.y - const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1) || 1 - - const dx2 = next.x - curr.x - const dy2 = next.y - curr.y - const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1 - - const rx = Math.min(r, len1 / 2, len2 / 2) - const ax = curr.x - (dx1 / len1) * rx - const ay = curr.y - (dy1 / len1) * rx - const bx = curr.x + (dx2 / len2) * rx - const by = curr.y + (dy2 / len2) * rx - - d += ` L ${ax} ${ay} Q ${curr.x} ${curr.y} ${bx} ${by}` + if (Math.abs(dy) < 0.5) { + d += ` L ${b.x} ${b.y}` + } else if (Math.abs(dx) < 0.5) { + d += ` L ${b.x} ${b.y}` + } else { + const cr = Math.min(r, Math.abs(dx) / 2, Math.abs(dy) / 2) + const midX = b.x + const midY = a.y + d += ` L ${midX - Math.sign(dx) * cr} ${midY}` + if (cr > 0.5) d += ` Q ${midX} ${midY} ${midX} ${midY + Math.sign(dy) * cr}` + d += ` L ${b.x} ${b.y}` + } } - - const last = e.points[e.points.length - 1] - d += ` L ${last.x} ${last.y}` return d }