eomsangdonandClaude Opus 5.5
f5645c256d
- 기준지정 시점 · 종점 목록 → 「지점 목록」 하나 · [+ 지점] · 지점마다 차례 색 여섯 돌림(줄 왼 띠 · 지도 이름표 바탕)
- 저장 꼴 plan_base_json {epsg, points} · 옛 starts + ends · start · end 는 읽을 때 이어 붙임(옮김 없음) · 상한 40
- 노선분석 지점 = 핀 + 「지점 N」 · 기준지정과 같은 색 · 겹 목록 맨 끝(늘 맨 위) · 지점 누름 = 새 본선(No.0 = 그 지점) · 선 놓인 지점 = 갈래
- 공용 카카오 지도 = 휠 설정 방향 한 단(마우스 자리 고정) · 가운데 끌기 옮김 — 기준지정 · 지형 범위 창 · B08 이정표 같이
- 시험: 529-3 · 530-2 새 꼴 · 585-1 새 지킴 시험 · 낡은 B08 가짜 카카오(바탕 종류 · 사건 받기 없음) 맞춤
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
53 lines
2.2 KiB
TypeScript
53 lines
2.2 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);
|
|
}
|