v0.1.48

v0.1.48 — 엣지 Z 노드 아래 (CSS) + lane 중앙 분포 + 시각 가벼움

요청

• "노드 연결선이 노드의 Z 높이 아래로 표시 및 우회되어야할거같아" (스크린샷: 주황 dashed 라인이 노드 카드를 가로질러 표시)

변경 파일

• src/styles/index.css — .react-flow__node { z-index: 5 !important; } + .react-flow__edges { z-index: 1 !important; } + .react-flow__edge.selected { z-index: 2 !important; }. 이전 코멘트 (엣지를 노드 위에 두던 정책) 갱신.

이전 정책

• 엣지를 노드 위에 두어 장거리 엣지가 중간 노드에 가려지지 않게.

신규 정책

• 노드 카드의 가독성을 우선 — 엣지가 가려져도 노드 양 옆으로 fragment 가 보여 추적 가능.
• src/utils/edgeStyle.ts — offsetForEdge() lane 분포 중앙으로 이동:
• 이전: 14~224px (source 노드에 너무 가까움)
• 신규: 90~225px (column gap 의 중앙 140px 구간) — source/target 양쪽에서 충분히 떨어짐
• src/components/Visualizer2D/Graph2D.tsx — 모든 엣지 stroke width × 0.85 (얇게), 일반 엣지 opacity 0.85→0.55 / parent 0.45→0.35 / agent-project 0.7→0.45 / github-repo 0.85→0.55. highlight 시 opacity 1 유지. highlight effect 도 동일 비율.

시각 효과

• 엣지가 노드 뒤로 가려져 노드 카드 텍스트를 절대 덮지 않음
• 노드와 엣지의 가까운 거리에서도 lane 이 중앙에 있어 시각적으로 분리감 명확
• 전체적으로 엣지의 시각 무게가 줄어 노드 정보가 더 잘 보임

trade-off

• 장거리 엣지는 중간 노드에 가려질 수 있지만, 사용자가 노드를 click 하면 highlight 가 opacity 1 / z-index 2 로 떠올라 추적 가능.

검증

• npx tsc --noEmit exit=0. npm run build 성공 — out/renderer/index-iBUaM8ih.js 3,074.03kB.

📦 GitHub 릴리스 노트: v0.1.48