eomsangdonandClaude Sonnet 5.5
26c5c0343d
- 새 값 --draw-map-sketch · measure · warn · route-0~4 (테마 안 따름) · routeColor(index) 차례 색 함수 - planColors 가 지도 전용 색 + casing · 미리보기 · 거리재기 · 마커 · 핀 · 지점 검은 테 (strokeCased) - 시험 551_2 에 지도 전용 색 대비(어두운 바탕 · 검은 테 ≥ 3 : 1) 덧 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
66 lines
2.8 KiB
TypeScript
66 lines
2.8 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;
|
|
}
|
|
|
|
/** 585-1 예정노선 지점 색 — 그림 색 여섯 차례 돌림(지점 1 · 2 …) · 핀 · 목록 줄 같은 번호 같은 색 */
|
|
const POINT_COLORS = [
|
|
["--draw-chart-0", "#5b8def"],
|
|
["--draw-chart-1", "#34c38f"],
|
|
["--draw-chart-2", "#f1963b"],
|
|
["--draw-chart-3", "#9b6dde"],
|
|
["--draw-warning", "#b8860b"],
|
|
["--draw-danger", "#c0392b"],
|
|
] as const;
|
|
export function pointColor(index: number): string {
|
|
const [name, fallback] = POINT_COLORS[index % POINT_COLORS.length];
|
|
return themeColor(name, fallback);
|
|
}
|
|
|
|
/** 600-1 예정노선 선마다 차례 색 — 다섯 차례 돌림 · 지도 전용 값(테마 안 따름 · 겹 색과 가름) · 지도 선 · 구역 목록 색 띠가 같은 번호 같은 색 */
|
|
const ROUTE_COLORS = [
|
|
["--draw-map-route-0", "#3df5c4"],
|
|
["--draw-map-route-1", "#5aa9ff"],
|
|
["--draw-map-route-2", "#c58bff"],
|
|
["--draw-map-route-3", "#ff6ea8"],
|
|
["--draw-map-route-4", "#9dff4d"],
|
|
] as const;
|
|
export function routeColor(index: number): string {
|
|
const [name, fallback] = ROUTE_COLORS[((index % 5) + 5) % 5];
|
|
return themeColor(name, fallback);
|
|
}
|