fix: strict orthogonal edges with rounded corners, horizontal then vertical

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
 }