eomsangdonandClaude Opus 5.5
29512c001b
- D02 걷음 — 길 · 단계(PLAN 단계 둘 = 노선 분석 · 확정) · [>] · 대시보드 단계 점 · 서버 길 · 폴더 만들기 · 캐시 등록 · 글 · 가이드 폴더 - 등록 [등록] · 받은 예정노선 [보기] = D03 으로 곧바로 - D03 지점 = 긋기에 붙는 점 · 목록 칸(여섯 색 · 「지점 N」 · 🗑) · 핀 끌기 = 그 자리 노선 노드 같이 · [저장] 몸에 실음 · [초기화] = 선만 지우고 지점 남김 - 지도 우클릭 메뉴(부품 상자) — 여기서 긋기 시작(빈 땅 = 새 본선) · 갈래 시작 · 이어 긋기 · 지점 놓기 · 지점 지우기 · 긋기 끝 - 받기 — 처음 = 등록 기준점 둘레 ± 1 km(지점 · 선 없을 때) · 지점 · 선 · 지도 보기 가운데가 받은 범위 밖이면 조용히 이어 받음(단추 · 막는 창 걷음 · 실패만 [다시 받기]) - 좌표계 = 파일 머리 · 없으면 기준점 경도 TM 띠 - 시험: 529_3(D02 지점 API) 지움 → 591_2 로 갈음 · 280_2 · 528 · 530_2 · 547_1 · 548 · 553_4 · 556_2 · 560_4 · 401 · 54_2 = D02 단계 · 페이지 걷음에 맞춤 · 590_1 · 530_2_analyze = 사업연도 · 기준점 한 번에 읽음 · 591_1 D04 씨앗 시험 = 590-1 이 씨앗 줄 걷음에 맞춤 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);
|
|
}
|