feat: use orthogonal rounded paths for flow edges, increase spacing, layer nodes above edges

src/components/TreeFlow.vue

@@ -81,7 +81,7 @@ function buildFlow(root: PlayerTreeNode) {
   if (dagreNodes.length === 0) return
 
   const g = new dagre.graphlib.Graph()
-  g.setGraph({ rankdir: 'LR', nodesep: 20, ranksep: 60, marginx: 20, marginy: 20 })
+  g.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 80, marginx: 24, marginy: 24 })
   g.setDefaultEdgeLabel(() => ({}))
 
   const nodeW = 120
@@ -140,11 +140,34 @@ onMounted(() => {
 })
 
 function edgePath(e: FlowEdge): string {
-  if (e.points.length === 0) return ''
+  if (e.points.length < 2) return ''
+  const r = 6
   let d = `M ${e.points[0].x} ${e.points[0].y}`
-  for (let i = 1; i < e.points.length; i++) {
-    d += ` L ${e.points[i].x} ${e.points[i].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]
+
+    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}`
   }
+
+  const last = e.points[e.points.length - 1]
+  d += ` L ${last.x} ${last.y}`
   return d
 }
 
@@ -221,10 +244,14 @@ const svgH = computed(() => containerH.value)
   top: 0;
   left: 0;
   pointer-events: none;
+  z-index: 0;
 }
 
 .flow-nodes {
   position: relative;
+  z-index: 1;
+}
+  position: relative;
 }
 
 .flow-node {