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>
1.6 KiB
1.6 KiB
팝업을 라벨 아래로 + 라벨 글자도 클릭 가능(바운딩박스 히트테스트)
날짜: 2026-06-24
수정 파일: client/src/components/overlay/StationOverlay.tsx
관련: 2026-06-24_1212_라벨팝업-다중-추적-클릭동작.md
요구
- 팝업을 POI 라벨 아래에 위치.
- 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