v0.2.51
v0.2.51 — 줌별 엣지/아이콘 렌더링 정합성 (size + Y-flip + pulse)
변경 사항
- *사용자 보고**: "에이전트의 행동 엣지 같은 요소가 화면 확대 비율에 따라 이상하게 표시될때가 있어".
진단
- WebGL/React Flow 의 trails overlay 가
<g transform="matrix/scale">안에서 SVG 요소를 그릴 때 발생하는 3가지 줌 의존성 버그:
- 이미지 크기 줌 비례: chain link image (16x16) + trail dot image 가 graph-space 좌표에 있어 줌에 따라 화면 픽셀 크기가 변동. 줌 2x 면 32px, 0.5x 면 8px.
- WebGL Y축 반전 (이미지 거꾸로): WebGL overlay 의 transform 은
matrix(zoom 0 0 -zoom ...)으로 Y 를 flip —<image>의 콘텐츠가 위아래 거꾸로 표시됨. - CSS keyframe 의 r 절대값:
vw-chain-pulse/vw-webgl-chain-pulse가r: 3.5 → 5로 애니메이션해 직접 설정한 counter-scaled r 값을 override → 줌 무관 일정 크기 보장 깨짐.
해결
- *(1) Image 크기/방향 보정 — counter-scale 그룹**
- WebGL
WebGLTrailsOverlay.tsx: - chain link image:
<g transform="translate(l.x l.y) scale(1/zoom -1/zoom)"><image x={-8} y={-8} width={16} height={16}>— translate 로 위치 찍고 inner scale 로 부모 matrix 의zoom × -zoom을 cancel. - trail dot image: 동일 패턴.
- React Flow
AgentAvatars2D.tsx: - Y-flip 없음 → 간단히
sz = 16 / viewport.zoom으로 width/height 조정. - chain link circle fallback:
r = 4→r = 4 / viewport.zoom. - *(2) Pulse 애니메이션 — r 제거, opacity 만**
- WebGL
vw-webgl-chain-pulse와 React Flowvw-chain-pulse모두: - 기존:
{ r: 3.5; opacity: 0.85 } → { r: 5; opacity: 1 }— r 가 counter-scaled 값 override. - 신규:
{ opacity: 0.75 } → { opacity: 1 }— opacity 만 펄스. r 은 counter-scaled 값 유지 → zoom 무관 일정 크기.
검증 후 정합성 표
| 요소 | Before (zoom 0.5x / 2x) | After |
|---|---|---|
| Chain link image (WebGL) | 8px 거꾸로 / 32px 거꾸로 | 16px 정상 (양쪽 zoom 모두) |
| Chain link image (RF) | 8px / 32px | 16px (양쪽 zoom 모두) |
| Trail dot image (WebGL) | 비례 + 거꾸로 | 화면 일정 + 정상 방향 |
| Chain link circle fallback (RF) | 2px / 8px | 4px (양쪽 zoom 모두) |
| Pulse 애니메이션 | r 1.75-2.5 / 7-10px | opacity 0.75-1 (size 일정) |
변경 파일
src/components/Visualizer2D/WebGLTrailsOverlay.tsx— chain link image counter-scale group, trail dot image counter-scale group, chain link circle r counter-scaled, pulse keyframes opacity-only.src/components/Avatars/AgentAvatars2D.tsx— chain link image/circle counter-scaled, vw-chain-pulse keyframes opacity-only.package.json0.2.50 → 0.2.51.
검증
npx tsc --noEmitexit=0npm run build성공 — renderer 9.67s, 번들 3,460.32 kB.
사용자 확인
- 0.3x ~ 3x 어느 zoom 에서도 chain link / trail dot 아이콘의 화면 크기 일정.
- 이미지가 거꾸로 표시되던 WebGL 버그 해결 (Y-flip 보정).
- Pulse 애니메이션은 깜빡임 (opacity) 으로 유지 — 크기 깜빡임은 없어졌지만 시각 효과 보존.
- --
← (없음)
v0.2.52 →
📦 GitHub 릴리스 노트: v0.2.51