b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
30 lines
1.6 KiB
Markdown
30 lines
1.6 KiB
Markdown
# 팝업을 라벨 아래로 + 라벨 글자도 클릭 가능(바운딩박스 히트테스트)
|
||
|
||
**날짜**: 2026-06-24
|
||
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`
|
||
**관련**: [2026-06-24_1212_라벨팝업-다중-추적-클릭동작.md](2026-06-24_1212_라벨팝업-다중-추적-클릭동작.md)
|
||
|
||
## 요구
|
||
1. 팝업을 POI 라벨 **아래**에 위치.
|
||
2. POI **아이콘뿐 아니라 글자**도 클릭으로 선택 가능.
|
||
|
||
## 구현
|
||
### 글자 클릭(바운딩박스 히트테스트)
|
||
기존 히트테스트는 마커 점 기준 반경(0.04 정규)이라 글자(마커 오른쪽 텍스트)는 안 잡혔음.
|
||
- RAF draw 에서 라벨을 그릴 때 **아이콘+글자 영역의 화면 px 박스**를 수집(`ctx.measureText`로 글자폭):
|
||
· 측점: `x0=마커−8 … x1=글자끝+2`, `y=중심±12`.
|
||
· POI: `x0=십자마커−r … x1=글자끝+2`, `y=중심±13`.
|
||
- `labelHitRef`(프레임마다 갱신)에 박스 배열 저장. 라벨 없으면 빈 배열.
|
||
- `hitTestLabel(nx,ny)`: 정규좌표를 cover px 로 변환 후 박스 포함 검사(나중에 그린 라벨 우선).
|
||
→ 클릭/호버 모두 아이콘·글자 어디를 눌러도 선택. 호버 손모양 커서도 글자 위에서 동작.
|
||
|
||
### 팝업 라벨 아래 배치
|
||
- 위치 공식 `left=sx−10, top=sy+16`(마커 중심 아래). 초기 렌더·RAF 추적 모두 동일.
|
||
(이전 `sx+14, sy−10`(우측) → 라벨 아래로 변경.)
|
||
|
||
## 검증
|
||
- `npm run build -w client` (node20) tsc + vite build 통과.
|
||
|
||
**소요 시간**: 약 10분
|
||
**Context 사용량**: input ~510k / output ~5k tokens
|