eomsangdonandClaude Opus 5.5
b96479fd7e
- map_layer_list = 겹 스물셋 · 처음 값 · 페이지 표(d03 · b05 보일 겹 · 처음 켬 · 취향 열쇠 — A② · A⑨) - map_layer_specs = GL 겹 꼴 · 차례(D03 UI_MapGl 에서 옮김 · 선 겹 꼴은 LINE_LAYERS 한 벌) - map_layer_bar = 겹 단추 줄 · 켬끔 · 취향 · 그래픽 카드 단추 / map_legend = 범례 칸 · 조각 겹 범례 - map_forest_layers = D03_UI_ForestLayers 옮김(이름만) - D03 UI_Layers 683 → 639 줄 · UI_MapGl 423 → 115 줄 · UI_LayerDefs 는 캔버스 도움 + 옛 이름 다시 내놓음 - 시험 길 고침(553-4 · 581-2 · 584-1 · 584-3 · 606-1 · 615 · 622-2) — 옮긴 파일 자리 · 553-4 겹 목록은 622-2 때 낡은 것(국유림 임도 · 경제림 · 생태자연도 빠짐) 같이 고침 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
/* =============================================================================
|
|
* map_layer_bar.ts
|
|
* 공용 지도 겹 줄(PLAN 569-2 · 586-2 · 624-2 · 요구 530) — 겹 단추 한 줄(공용 지도 도구줄 `createMapTools` · 묶음 사이 나눔선) +
|
|
* 끝에 그래픽 카드 단추(GL ↔ 옛 캔버스).
|
|
* 보일 겹 · 처음 켬 · 취향 열쇠 = 페이지 표(`map_layer_list` `MAP_LAYER_PAGES`) · 누르면 켬끔 뒤집고 취향에 적고 `onToggle`.
|
|
* 막힘 = 지형을 아직 안 받음(`sync({ ready: false })`) · 조각만 쓰는 겹은 옛 캔버스에서 「안 보임」 글.
|
|
* 받기 · 그리기 · 범례는 페이지 몫 — 켬끔 값(`on`)은 같은 객체를 같이 씀.
|
|
* 쓰는 법 = `createMapLayerBar({ page: "d03", glOn, onToggle, onGl })` → `{ root, bar, on, toggle, save, sync }`.
|
|
* ========================================================================== */
|
|
|
|
import { createIconButton } from "@ui/ui_template_button";
|
|
import { createMapTools } from "@ui/ui_template_map_tools";
|
|
import { writeByKey } from "../b_page_state";
|
|
import { tileOnly } from "./map_forest_layers";
|
|
import {
|
|
MAP_LAYER_PAGES,
|
|
pageGroups,
|
|
readLayerPref,
|
|
type MapLayerKey,
|
|
type MapPage,
|
|
} from "./map_layer_list";
|
|
|
|
export interface MapLayerBar {
|
|
/** 도구줄 감싼 것(자리는 페이지 CSS). */
|
|
root: HTMLElement;
|
|
/** 도구줄 자체(폭 재기). */
|
|
bar: HTMLElement;
|
|
/** 켬끔 — 페이지가 바꾸면 `save` · 받기 실패로 끄는 것은 안 적음. */
|
|
on: Record<MapLayerKey, boolean>;
|
|
/** 뒤집고 적고 `onToggle`. */
|
|
toggle: (key: MapLayerKey) => void;
|
|
save: () => void;
|
|
/** 단추 눌림 · 막힘 · 글을 켬끔 값에 맞춤. */
|
|
sync: (state: { ready: boolean; glOn: boolean }) => void;
|
|
}
|
|
|
|
export function createMapLayerBar(opts: {
|
|
page: MapPage;
|
|
glOn: boolean;
|
|
onToggle: (key: MapLayerKey) => void;
|
|
/** 그래픽 카드 단추 누름. */
|
|
onGl: () => void;
|
|
}): MapLayerBar {
|
|
const { page } = opts;
|
|
const on = readLayerPref(page);
|
|
const save = (): void => writeByKey(MAP_LAYER_PAGES[page].pref, JSON.stringify(on));
|
|
const toggle = (key: MapLayerKey): void => {
|
|
on[key] = !on[key];
|
|
save();
|
|
opts.onToggle(key);
|
|
};
|
|
const defs = pageGroups(page);
|
|
const buttons = new Map<MapLayerKey, HTMLButtonElement>();
|
|
const groups = defs.map((group) =>
|
|
group.map((def) => {
|
|
const button = createIconButton({
|
|
icon: def.icon,
|
|
title: def.title,
|
|
size: 32,
|
|
pressed: on[def.key],
|
|
onClick: () => toggle(def.key),
|
|
});
|
|
button.dataset.layer = def.key;
|
|
buttons.set(def.key, button);
|
|
return button;
|
|
}),
|
|
);
|
|
const glButton = createIconButton({
|
|
icon: "gauge",
|
|
title: "그래픽 카드 그림(바탕 겹 · 글을 GPU 로 · 끔 = 옛 캔버스 그림)",
|
|
size: 32,
|
|
pressed: opts.glOn,
|
|
onClick: opts.onGl,
|
|
});
|
|
glButton.dataset.layer = "gl";
|
|
groups.push([glButton]);
|
|
const tools = createMapTools({ label: "지도 겹", groups });
|
|
|
|
function sync({ ready, glOn }: { ready: boolean; glOn: boolean }): void {
|
|
for (const def of defs.flat()) {
|
|
const button = buttons.get(def.key)!;
|
|
button.setAttribute("aria-pressed", String(on[def.key]));
|
|
button.disabled = !ready;
|
|
const title = !ready
|
|
? `${def.title} — 지형 받기 뒤 보임`
|
|
: tileOnly(def.key) && !glOn
|
|
? `${def.title} — 옛 그림(그래픽 카드 끔)엔 안 보임`
|
|
: def.title;
|
|
button.title = title;
|
|
button.setAttribute("aria-label", title);
|
|
}
|
|
glButton.setAttribute("aria-pressed", String(glOn));
|
|
}
|
|
|
|
return { root: tools.root, bar: tools.bar, on, toggle, save, sync };
|
|
}
|