eomsangdonandClaude Opus 5
d14222242a
- ui_template_theme.css에 2D 지도 벡터 팔레트(--map-*) 33종을 유일한 정의처로 등록하고, 캔버스에서 CSS 변수를 읽는 공통 유틸 ui_template_palette.ts(themeColor)를 신설. 값은 한 번만 읽어 캐시하고 data-theme 변경 시 비운다(다크 전환 대응). - B04 지도·유역 오버레이·흐름 화살표와 B05 배수유역도·유역선 편집·배관 마커의 하드코딩 색상을 전부 토큰 조회로 교체. 계획선 색·굵기, 후광색은 공용 함수로 일원화. - B05 배수유역 패널의 사용자 문구를 전부 ui_locales로 이관(제목, 레이어 토글 5종, 도구 버튼 5종, 툴팁, 상태 문구 8종, 유역 제원 표기). B04 유역 분석 오버레이의 버튼·갈래 토글·진행/실패 안내도 함께 전환. 관리자 진단용 결과 판독문은 원문 유지. - A02 프로그램 소개의 6단계 제목과 A01 히어로 문구의 단계 나열을 진행단계 이름 (전처리/종단설계/횡단설계/상세설계/수량산출/설계도서)과 일치시킴. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_palette.ts
|
|
* 캔버스(2D 지도)용 색 조회 — 색 값의 정의처는 `ui_template_theme.css` 하나뿐이다.
|
|
*
|
|
* CSS로 칠할 수 없는 `<canvas>` 그림도 색은 테마 변수에서 읽어야 화면마다 값이
|
|
* 갈라지지 않는다. `getComputedStyle`은 호출할 때마다 스타일 재계산을 유발하므로
|
|
* 한 번 읽은 값은 캐시하고, 테마가 바뀔 때(`data-theme` 변경)만 비운다.
|
|
* ========================================================================== */
|
|
|
|
const cache = new Map<string, string>();
|
|
let watching = false;
|
|
|
|
/** 테마가 바뀌면 캐시를 버린다 — 다음 렌더에서 새 값으로 다시 읽는다. */
|
|
function watchThemeChange(): void {
|
|
if (watching || typeof MutationObserver === "undefined") return;
|
|
watching = true;
|
|
new MutationObserver(() => cache.clear()).observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["data-theme"],
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 테마 CSS 변수 하나를 읽는다.
|
|
*
|
|
* @param name 변수 이름(`--map-route` 처럼 두 하이픈까지 포함)
|
|
* @param fallback 스타일이 아직 붙기 전(초기 렌더)이나 변수가 없을 때 쓸 값
|
|
*/
|
|
export function themeColor(name: string, fallback: string): string {
|
|
const cached = cache.get(name);
|
|
if (cached !== undefined) return cached;
|
|
watchThemeChange();
|
|
const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
const resolved = value || fallback;
|
|
// 값이 비어 있으면(스타일 미적용) 캐시하지 않는다 — 다음 렌더에서 다시 읽게 둔다.
|
|
if (value) cache.set(name, resolved);
|
|
return resolved;
|
|
}
|