eomsangdonandClaude Opus 5
3d037d869e
B05 3D 뷰어에는 방위 표시가 없어 방향을 읽을 수 없었음(사용자 지적, 메인 창 경유).
B04 가 오늘 새로 만든 「지면에 누운 나침반 링」을 그대로 쓰되, 두 페이지가 함께 쓰도록
공용으로 옮김.
- `B04_PreProcess_UI_Compass.ts` → `ui_template/ui_template_compass.ts` (git mv).
`createTerrainCompass({ sizePx, className })` 로 크기·자리를 호출부가 정함.
- 스타일도 `ui_template/ui_template_compass.css` 로 옮기고 모듈이 직접 물고 옴.
**놓을 자리만** 페이지 CSS 몫 — B04 우하단(`b04-surface__compass`),
B05 는 ISO 버튼 아래(`b05-route__compass`).
- B05 뷰어는 104px 로 쓰고 렌더 루프에서 카메라 오프셋으로 갱신, 지형이 없으면 감춤.
좌표 규약이 B04 와 같음(북 −z · 동 +x · 표고 +y, `Viewer.ts:295` 정점 변환) — 그대로 맞음.
화면 검증(5174): B05 나침반 104×104, ISO 버튼 아래 8px. 도북 화살이 뷰 전환에 반응 —
TOP 에서 `M0.00 -33.30`(수직), ISO 에서 `M23.56 -13.60`. 후자는 카메라 오프셋 (d,d,d)
에 대한 투영 이론값(x=R/√2=23.56, y=−R/√6=−13.60)과 일치. B04 쪽도 그대로(84×84,
우하단 16px, 링·화살 색 토큰 유지). `tsc --noEmit` 통과, 뷰어 693줄로 제한 안.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
72 lines
2.1 KiB
CSS
72 lines
2.1 KiB
CSS
/* =============================================================================
|
|
* ui_template_compass.css
|
|
* 3D 뷰어 방위 나침반(`ui_template_compass.ts`) 전용 스타일.
|
|
*
|
|
* B04 지표면 뷰어에만 있던 것을 B05 종단 3D 뷰어와 함께 쓰려고 공용으로 옮겼다
|
|
* (2026-09-03). 색상 하드코딩 금지 원칙대로 전부 토큰을 쓴다.
|
|
* ========================================================================== */
|
|
|
|
/* 3D 뷰어 방위 나침반 — 모양·색만 여기서 정한다.
|
|
**놓을 자리는 페이지 CSS 몫**이다(B04 우하단, B05 는 ISO 버튼 아래). 위치를 여기 박으면
|
|
페이지마다 덮어써야 해서 규칙이 엉킨다. */
|
|
.ui-compass {
|
|
position: absolute;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
filter: drop-shadow(0 1px 2px var(--color-surface-raised));
|
|
}
|
|
|
|
/* inline SVG의 baseline 여백을 없앤다 — 안 그러면 아래로 5px 떠 모서리 여백이 어긋난다. */
|
|
.ui-compass svg {
|
|
display: block;
|
|
}
|
|
|
|
/* 지면에 누운 나침반 링 — 좌표는 카메라 자세대로 매 프레임 다시 쓰인다.
|
|
링 안쪽 면은 지형이 비치도록 아주 옅게만 깔아 도면 위 방위표처럼 읽힌다. */
|
|
.ui-compass-face {
|
|
fill: var(--color-surface-raised);
|
|
fill-opacity: 0.5;
|
|
stroke: none;
|
|
}
|
|
|
|
.ui-compass-ring {
|
|
fill: none;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.ui-compass-tick {
|
|
stroke: var(--color-border);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.ui-compass-tick--major {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
/* 도북 화살 — 이 위젯에서 가장 먼저 읽혀야 하는 하나. */
|
|
.ui-compass-arrow {
|
|
fill: var(--color-danger, #d64545);
|
|
}
|
|
|
|
/* 표고축 — 내려다볼수록 짧아져 시점 기울기를 한 번 더 알린다. */
|
|
.ui-compass-pole {
|
|
stroke: var(--color-text-body);
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.ui-compass-label {
|
|
fill: var(--color-text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: var(--font-weight-semibold);
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.ui-compass-label--north {
|
|
fill: var(--color-danger, #d64545);
|
|
}
|