fix: switch edge paths back to orthogonal lines with rounded corners

src/components/TreeFlow.vue

@@ -184,36 +184,33 @@ onMounted(() => {
 
 function edgePath(e: FlowEdge): string {
   if (e.points.length < 2) return ''
-  const pts = e.points.map(p => ({ h: p.x, v: p.y }))
-  return catmullRomPath(pts)
-}
+  const r = 6
+  let d = `M ${e.points[0].x} ${e.points[0].y}`
 
-function catmullRomPath(pts: { h: number; v: number }[]): string {
-  if (pts.length < 2) return ''
-  let d = `M ${pts[0].h} ${pts[0].v}`
+  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]
 
-  if (pts.length === 2) {
-    d += ` L ${pts[1].h} ${pts[1].v}`
-    return d
+    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}`
   }
 
-  for (let i = 0; i < pts.length - 1; i++) {
-    const p0 = pts[Math.max(0, i - 1)]
-    const p1 = pts[i]
-    const p2 = pts[i + 1]
-    const p3 = pts[Math.min(pts.length - 1, i + 2)]
-
-    const cp1x = p1.h + (p2.h - p0.h) / 6
-    const cp1y = p1.v + (p2.v - p0.v) / 6
-    const cp2x = p2.h - (p3.h - p1.h) / 6
-    const cp2y = p2.v - (p3.v - p1.v) / 6
-
-    if (i === 0) {
-      d += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.h} ${p2.v}`
-    } else {
-      d += ` S ${cp2x} ${cp2y} ${p2.h} ${p2.v}`
-    }
-  }
+  const last = e.points[e.points.length - 1]
+  d += ` L ${last.x} ${last.y}`
   return d
 }