v0.2.56

v0.2.56 — 아바타 엣지 따라 이동 옵션

false (기본)

• 기존 동작 — CSS transition: transform 800ms cubic-bezier(...) 직선 이동.

true

• prev → current 좌표 사이를 RAF + cubic bezier 곡선 따라 이동. 800ms ease-in-out-cubic.
• bezier control points: DataFlowParticles2D 의 bezierAt 과 동일 패턴 — 직선 수직 방향 lift Math.min(60, len * 0.18) 으로 대칭 곡선.
• 적용 범위: React Flow 2D 엔진 (Avatar2DImpl). WebGL/3D 는 매 프레임 좌표 직접 설정 구조라 다음 iteration.

구현

• *1. viewStore (viewStore.ts)**
• avatarFollowEdges: boolean 필드 + setAvatarFollowEdges action + PERSIST.
• *2. Avatar2DImpl (AgentAvatars2D.tsx)**
• prevTargetRef 신규 — 이전 좌표 저장 (bezier 시작점).
• useEffect 로직:
• path 미변경: transition off + 즉시 좌표 set (팬/줌 대응).
• path 변경 + avatarFollowEdges=true + prevPos 존재: CSS transition off + RAF 루프로 bezier 따라 transform 갱신.
• path 변경 + avatarFollowEdges=false (또는 prevPos 없음): 기존 CSS cubic-bezier transition.
• RAF cleanup: useEffect return 으로 cancelAnimationFrame.
• *3. UI (ViewOptionsPanel.tsx)**
• ActivitySection 의 추적 줌 슬라이더 다음에 Toggle 추가.
• 라벨: "엣지를 따라 이동". 설명: "아바타가 노드 간 이동 시 직선이 아닌 부드러운 곡선 (엣지 경로) 으로 이동. React Flow 2D 엔진에서 적용."

변경 파일

• src/store/viewStore.ts — 필드 + setter + PERSIST.
• src/components/Avatars/AgentAvatars2D.tsx — bezier RAF 애니메이션 로직.
• src/components/Layout/ViewOptionsPanel.tsx — Toggle UI.
• package.json 0.2.55 → 0.2.56.

검증

• npx tsc --noEmit exit=0
• npm run build 성공 — renderer 9.38s, 번들 3,468.43 kB.

사용자 확인

• 설정 → ActivitySection → "엣지를 따라 이동" Toggle 켜기.
• 아바타가 노드 간 이동할 때 직선이 아닌 부드러운 곡선 (대칭 bezier) 따라 움직임.
• 입자 흐름 (DataFlowParticles) 과 같은 곡률로 — 시각적 일관성.
• 끄면 기존 직선 transition.

추후 개선 (out-of-scope)

• 실제 그래프 엣지 (analysis.edges) 의 source/target 매칭해 그 엣지의 정확한 bezier 경로 따라가기 (현재는 두 좌표 사이 합성 곡선).
• WebGL/3D 엔진의 동일 기능 — 매 프레임 좌표 직접 set 구조라 별도 refactor 필요.
• --

📦 GitHub 릴리스 노트: v0.2.56