b23042andClaude Opus 4.8
78fc090360
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
39 lines
2.1 KiB
Markdown
39 lines
2.1 KiB
Markdown
# 라벨 정보 — 모드 버튼 제거, 호버 시 손커서·항상 클릭 가능
|
|
|
|
**날짜**: 2026-06-24
|
|
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`
|
|
**관련**: [2026-06-24_1150_라벨정보-클릭팝업.md](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
|