v0.2.49
v0.2.49 — 에이전트 추적 시 카메라 거리/줌 조절 기능
viewStore.ts
cameraFollowZoom: number필드 추가 (default 1.0, range 0.3 ~ 3.0).setCameraFollowZoom(v)액션 (clamp 포함).- PERSIST 리스트 (
cameraFollowSensitivity옆) 에 추가 — 사용자 설정 영속.
WebGL
- (
WebGLGraph2D.tsx FollowCameraWebGL): useFrame안에 zoom lerp 블록 신규.followEnabled && followedAgent일 때만 발동 (wheel pan/zoom 침범 X).ortho.zoom += (followZoom - ortho.zoom) * speed— follow speed 와 동일 비율로 부드럽게 수렴.
React Flow
- (
useFollowCamera2D.ts): rf.setCenter(cx, cy, { zoom: followZoom, duration })— 기존 hardcodedzoom: 1.1을 사용자 설정으로 교체.- useEffect deps 에
followZoom추가 → 사용자가 슬라이더 움직이면 즉시 다음 setCenter 에 반영.
3D
- (
FollowCamera3D.tsx): baseDistanceRef신규 — 추적 시작 시점의 camera-target 거리 캡쳐.- 매 프레임
targetDist = baseDist / followZoomlerp (followZoom 2.0 → 절반 거리 → 가까이). followedAgent가 null 이면 baseDistanceRef reset (useEffect).- 각도 보존: camera → target 방향 벡터 정규화 후 새 거리만큼 곱해 위치 재설정.
UI
- (
ViewOptionsPanel.tsx): - 기존 follow sensitivity 슬라이더 바로 아래에 신규 슬라이더:
- 라벨: "추적 줌 (카메라 거리)" + 값 표시 (
1.00×형식). - range 30-300 (= 0.3 ~ 3.0).
- 안내 텍스트: "0.30× = 멀리 / 1.00× = 기본 / 3.00× = 가까이. WebGL · 2D · 3D 모두 적용."
변경 파일
src/store/viewStore.ts— 필드 + 액션 + PERSIST.src/components/Visualizer2D/WebGLGraph2D.tsx— useFrame zoom lerp.src/hooks/useFollowCamera2D.ts— setCenter zoom 옵션 동적.src/components/Avatars/FollowCamera3D.tsx— 거리 lerp + reset useEffect.src/components/Layout/ViewOptionsPanel.tsx— 슬라이더 UI.package.json0.2.48 → 0.2.49.
검증
npx tsc --noEmitexit=0npm run build성공 — renderer 6.81s, 번들 3,458.29 kB.
사용자 확인
- 설정 패널 (ViewOptionsPanel) 의 "추적 줌" 슬라이더 조정:
- 0.30× 로 내리면 카메라가 점진적으로 더 멀리 lerp → 주변 노드도 함께 보임.
- 3.00× 로 올리면 점진적으로 추적 대상에 더 가까이 lerp → 디테일 강조.
- 추적 중지 (followedAgent = null) 시 zoom 변화 적용 안 됨 (사용자 wheel zoom 유지).
- WebGL / React Flow / 3D 세 엔진 모두 같은 슬라이더로 일관된 동작.
- --
← (없음)
v0.2.50 →
📦 GitHub 릴리스 노트: v0.2.49