106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
/* =============================================================================
|
|
* D03_PlanAnalysis_UI_Pieces.ts
|
|
* D03 좌측 「구역 · 연도」 목록 몸(PLAN 597) — 해 줄(같은 해) · 선 머리 줄(선) · 구간 줄(구간).
|
|
* 속성 판(`UI_Props.ts`)에서 떼어냄 — 목록 = 보기 + 고르기.
|
|
* ========================================================================== */
|
|
|
|
import { createText } from "@ui/ui_template_text";
|
|
import { stationLabel } from "../common_util/common_util_station";
|
|
import { lineLength } from "./logic/D03_PlanAnalysis_Draw";
|
|
import { lineNames, type PlanNetwork } from "./logic/D03_PlanAnalysis_Plan";
|
|
import type { PlanEdit } from "./D03_PlanAnalysis_UI_Edit";
|
|
import { PLAN_STATION_INTERVAL_M } from "./D03_PlanAnalysis_UI_Map";
|
|
|
|
const station = (m: number): string => stationLabel(m, PLAN_STATION_INTERVAL_M, 1);
|
|
const meters = (m: number): string => `${m.toFixed(1)} m`;
|
|
|
|
export interface PlanPiecesParams {
|
|
network: () => PlanNetwork;
|
|
edit: PlanEdit;
|
|
}
|
|
|
|
export interface PlanPieces {
|
|
/** 좌측 「구역 · 연도」 목록 몸. */
|
|
list: HTMLElement;
|
|
render: () => void;
|
|
}
|
|
|
|
/** 좌측 줄 — 누름 = 고름(div · 열쇠 Enter 도). */
|
|
const pickRow = (row: HTMLElement, onPick: () => void): HTMLElement => {
|
|
row.tabIndex = 0;
|
|
row.setAttribute("role", "button");
|
|
row.addEventListener("click", onPick);
|
|
row.addEventListener("keydown", (event) => event.key === "Enter" && onPick());
|
|
return row;
|
|
};
|
|
|
|
export function createPlanPieces(params: PlanPiecesParams): PlanPieces {
|
|
const { edit } = params;
|
|
const list = document.createElement("div");
|
|
list.className = "d03-plan__pieces";
|
|
|
|
function render(): void {
|
|
const network = params.network();
|
|
const names = lineNames(network.lines);
|
|
const picked = new Set(edit.selected()?.pieces ?? []);
|
|
const scope = edit.selected()?.scope;
|
|
const rows: HTMLElement[] = [];
|
|
const byYear = new Map<number, typeof network.pieces>();
|
|
for (const piece of network.pieces)
|
|
byYear.set(piece.year, [...(byYear.get(piece.year) ?? []), piece]);
|
|
for (const [year, pieces] of [...byYear].sort(([a], [b]) => a - b)) {
|
|
const row = document.createElement("div");
|
|
row.className = "d03-plan__piece d03-plan__piece-year";
|
|
row.dataset.year = String(year);
|
|
row.classList.toggle(
|
|
"is-selected",
|
|
scope === "year" && pieces.every((p) => picked.has(p.id)),
|
|
);
|
|
const length = pieces.reduce((sum, p) => sum + p.to_m - p.from_m, 0);
|
|
row.append(createText(`${year}년 · 구간 ${pieces.length} · ${meters(length)}`, "muted"));
|
|
rows.push(
|
|
pickRow(row, () => {
|
|
edit.select([pieces[0].id]);
|
|
edit.setScope("year");
|
|
}),
|
|
);
|
|
}
|
|
network.lines.forEach((line, index) => {
|
|
const pieces = network.pieces.filter((piece) => piece.line === line.id);
|
|
if (!pieces.length) return;
|
|
const head = document.createElement("div");
|
|
head.className = "d03-plan__piece d03-plan__piece-head";
|
|
head.dataset.line = line.id;
|
|
head.classList.toggle(
|
|
"is-selected",
|
|
scope === "line" && pieces.every((p) => picked.has(p.id)),
|
|
);
|
|
head.append(createText(`${names[index]} · ${meters(lineLength(line.vertices))}`, "muted"));
|
|
rows.push(
|
|
pickRow(head, () => {
|
|
edit.select([pieces[0].id]);
|
|
edit.setScope("line");
|
|
}),
|
|
);
|
|
for (const piece of pieces) {
|
|
const row = document.createElement("div");
|
|
row.className = "d03-plan__piece";
|
|
row.classList.toggle("is-selected", picked.has(piece.id));
|
|
row.dataset.piece = piece.id;
|
|
row.append(
|
|
createText(
|
|
`${station(piece.from_m)} ~ ${station(piece.to_m)} (${meters(piece.to_m - piece.from_m)})`,
|
|
"muted",
|
|
),
|
|
createText(`${piece.year}년`, "muted"),
|
|
);
|
|
rows.push(pickRow(row, () => edit.select([piece.id])));
|
|
}
|
|
});
|
|
if (!rows.length) rows.push(createText("선을 그으면 구역이 생깁니다.", "muted"));
|
|
list.replaceChildren(...rows);
|
|
}
|
|
|
|
return { list, render };
|
|
}
|