b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2.1 KiB
2.1 KiB
라벨 정보 — 모드 버튼 제거, 호버 시 손커서·항상 클릭 가능
날짜: 2026-06-24
수정 파일: client/src/components/overlay/StationOverlay.tsx
관련: 2026-06-24_1150_라벨정보-클릭팝업.md
요구
- 라벨 위 → 손모양 커서, 라벨 밖 → 화살표 커서.
- "라벨 정보 모드" 버튼 클릭 없이 항상 동작.
핵심 — 라벨 위에서만 캔버스가 입력을 받게 동적 토글
오버레이 캔버스가 항상 입력을 먹으면 영상 클릭(재생/일시정지)이 막힌다. 그래서:
- 부모(플레이어 컨테이너)에
mousemove리스너 → 매 이동마다 라벨 히트테스트.- 라벨 위:
canvas.pointerEvents='auto'→ 캔버스가 받음 → 커서pointer(손), 클릭 시 팝업. - 라벨 밖:
canvas.pointerEvents='none'→ 영상이 받음 → 커서 화살표, 클릭이 영상으로 통과.
- 라벨 위:
- 부모
pointerdown: target≠canvas(라벨 밖)면 팝업 닫기. 라벨 클릭(target=canvas)은 유지. - 팝업 자신은
onPointerDown stopPropagation→ 팝업 내부 클릭으로 안 닫힘. - 편집/세로화각 보정 모드는 종전대로 캔버스 항상 입력(드래그) + 커서
move(이 모드 진입 시 팝업 닫음).
변경
infoMode상태/토글 버튼 제거 → 라벨 정보 항상 활성. 패널엔 안내문만.hitTestLabel(nx,ny)헬퍼 추출(POI+측점 최근접) — 클릭/호버 공용.onPoiPointerDown재구성: 편집/보정 모드면 드래그, 아니면 라벨 팝업.- 캔버스 className 에서 pointer-events/cursor 제거 → 새 useEffect 가 모드별로
style직접 관리. - 편집/FOV 버튼의 상호배타에서 infoMode 제거.
동작 요약
| 상황 | 커서 | 클릭 |
|---|---|---|
| 라벨 위(기본 모드) | 손(pointer) | 속성 팝업 |
| 라벨 밖(기본 모드) | 화살표 | 영상 재생/일시정지 |
| 편집/세로화각 모드 | 이동(move) | POI 드래그 |
검증
npm run build -w client(node20) tsc + vite build 통과.
소요 시간: 약 12분 Context 사용량: input ~440k / output ~7k tokens