v0.1.49
v0.1.49 — HTTP 엔드포인트 hostname 그룹화 + 강조 엣지 오버레이 + 축 가시성 강화
요청 1
- "외부 서비스 노드들은 플랫폼이나 서비스 종류 별로 Y축을 분리"
변경 파일
src/components/Visualizer2D/Graph2D.tsxhttpEndpointsuseMemo:- 각 HTTP api: 노드의 URL 에서 hostname 추출 (
new URL(url).hostname). - 변수 보간 형태 (
${apiBase}/...) → 'template' 그룹 / 빈 URL → 'unknown' 그룹. - hostname 별 그룹핑 후 노드 수 desc 정렬 (큰 그룹 위에). template/unknown 은 항상 아래.
- 그룹 내부: HTTP method 순 (GET → POST → PUT → PATCH → DELETE) → URL 알파벳.
- 그룹 사이 1.5 행 (84px) 시각적 갭.
요청 2
- "2D모드에서 X축 Y축 표시 기능 구현"
이미 구현됨
- —
showAxisX/showAxisY토글로 X/Y 축 선 + 라벨 표시 (AxisLineNode/AxisLabelNode).
v0.1.49 강화
- opacity 0.55 → **0.7** (더 또렷)
- line 두께 1px → **2px**, glow shadow
0 0 10px(이전 6px) - CSS 신규:
.react-flow__node-axisLine/axisLabelz-index 2 (엣지 위, 노드 아래)
요청 3
- "뷰포트에서 노드 선택시 강조된 엣지는 노드의 Z 높이보다 높게 표시"
변경 파일
src/components/Visualizer2D/Graph2D.tsx신규<HighlightedEdgesOverlay />(87줄):- ReactFlow 의
useRFStore+useViewport로 edges/nodes/viewport 직접 구독. - selectedNodeId 와 연결된 엣지만 필터.
- 별도 SVG 레이어 (absolute inset-0, z-index 10) — viewport transform 동일 적용.
- 각 강조 엣지: cubic bezier 경로 + 글로우 outer stroke (width 6, opacity 0.25) + 본체 (width 2.2, opacity 0.95).
- 일반 엣지의 smoothstep/step 모양과 다른 부드러운 곡선 — 강조 효과로 시각 구분.
- ReactFlow 엣지 컨테이너의 z-index 1 (v0.1.48) 을 우회하여 강조 엣지만 노드 위 z-index 10 으로 떠오름.
검증
npx tsc --noEmitexit=0.npm run build성공 — out/renderer/index-VyepZ9Dl.js 3,078.11kB (+4kB).
📦 GitHub 릴리스 노트: v0.1.49