367 lines
16 KiB
TypeScript
367 lines
16 KiB
TypeScript
/* =============================================================================
|
|
* D03_PlanAnalysis_UI_Props.ts
|
|
* D03 고름 속성 판(PLAN 585-2 · 598 · 요구 463 13·16 · 11) — 오토캐드 특성 창 꼴 · 판 하나가 고름 꼴마다 몸을 바꿈.
|
|
*
|
|
* 판 = 지도 위 떠 있는 판(공용 `createFloatPanel` · 머리 끌어 옮김 · 오른쪽 위) · 고름 있을 때만 · ✕ = 풂.
|
|
* 노드 — 경위도 · 지반고 · 측점 · 앞 선 길이 · 기울기 · [노드 지움] [지점으로](그 자리에 지점 · 이미 있으면 숨김) ·
|
|
* [잇기](선 끝 · 638-3).
|
|
* 선(토막) — 측점 · 길이 · 지반 기울기 · 세트 · [다시 긋기](하나 · 599) [선 지움](가운데 = 구역 둘).
|
|
* 구역 — 길이 · 노드 수 · 세트(구역 모든 구간) · 구간 줄 · [구역 지움].
|
|
* 전체 — 길이 · 구역 수 · 해마다 길이 · [전체 지움](되돌리기 됨).
|
|
* 세트 구간(왼쪽 해 · 세트 · 구간 줄) — 세트(모두 같으면 그 세트 · 다르면 「여러 세트」) · 구간 줄 · 마커 — 앞뒤 세트 · [마커 지움].
|
|
* 세트 고름(638-3 · 요구 547) = 있는 세트 + 해마다 「새 세트」(`setChoices`) → `assignSet`(고른 범위 끝에서 나눔 →
|
|
* 세트 바꿈 → 이웃 같은 세트 하나로) = 되돌리기 한 걸음 · 보기만 계정 = 값만.
|
|
* 좌측 「구역 · 연도」 목록 = `UI_Pieces.ts`(페이지가 붙임).
|
|
* ========================================================================== */
|
|
|
|
import { createButton, showToast } from "@ui/ui_template_elements";
|
|
import { createFloatPanel } from "@ui/ui_template_float_panel";
|
|
import { createSelectField } from "@ui/ui_template_input";
|
|
import { createKv, type KvRow } from "@ui/ui_template_kv";
|
|
import { stationLabel } from "../common_util/common_util_station";
|
|
import { groundSlopePct, lineLength, type HeightAt } from "./logic/D03_PlanAnalysis_Draw";
|
|
import { assignSet, setChoices, setKey, type LineRange } from "./logic/D03_PlanAnalysis_Group";
|
|
import {
|
|
lineNames,
|
|
samePoint,
|
|
type PlanNetwork,
|
|
type PlanPiece,
|
|
type Vertex,
|
|
} from "./logic/D03_PlanAnalysis_Plan";
|
|
import {
|
|
placeNode,
|
|
segmentPath,
|
|
segmentPieces,
|
|
segmentRange,
|
|
} from "./logic/D03_PlanAnalysis_Select";
|
|
import { nodeOff, nodeRecord } from "./logic/D03_PlanAnalysis_Span";
|
|
import {
|
|
createDrawKindFields,
|
|
DRAW_DEFAULT_LENGTH_M,
|
|
DRAW_DEFAULT_SLOPE_PCT,
|
|
type DrawKindValue,
|
|
} from "./D03_PlanAnalysis_UI_DrawPanel";
|
|
import type { PlanEdit, PlanSelection } from "./D03_PlanAnalysis_UI_Edit";
|
|
import { featureOn, featureShown, type PlanPage } from "./D03_PlanAnalysis_UI_Features";
|
|
import { PLAN_STATION_INTERVAL_M } from "./D03_PlanAnalysis_UI_Map";
|
|
import { selectionLength } from "./D03_PlanAnalysis_UI_Select";
|
|
import "./D03_PlanAnalysis_UI_DrawParts.css";
|
|
|
|
/** 새 세트 고를 해 — 사업연도 시작부터. */
|
|
const YEAR_SPAN = 10;
|
|
|
|
const station = (m: number): string => stationLabel(m, PLAN_STATION_INTERVAL_M, 1);
|
|
const meters = (m: number): string => `${m.toFixed(1)} m`;
|
|
const percent = (pct: number | null): string => (pct === null ? "-" : `${pct.toFixed(1)} %`);
|
|
|
|
export interface PlanPropsParams {
|
|
/** 기능 표 페이지 — 연도 · 구간 줄 · [지점으로]. */
|
|
page: PlanPage;
|
|
network: () => PlanNetwork;
|
|
edit: PlanEdit;
|
|
editable: () => boolean;
|
|
/** 사업연도 시작(연도 고름 · 표 「years」 사용 페이지). */
|
|
yearStart?: () => number;
|
|
commit: (next: PlanNetwork) => void;
|
|
heightAt: () => HeightAt;
|
|
/** 작업 좌표 → 경위도(없음 = 경위도 칸 숨김). */
|
|
lonLat?: (x: number, y: number) => [number, number] | null;
|
|
/** 지점(노드 판 [지점으로] — 이미 있으면 숨김 · 표 「points」 켠 페이지만). */
|
|
points?: () => Vertex[];
|
|
addPoint?: (point: Vertex) => void;
|
|
/** 노드 판 방식 · 값 바꿈 — 노드 · 그 자리 지점 한 걸음. */
|
|
commitPoints: (points: Vertex[], next: PlanNetwork) => void;
|
|
/** [다시 긋기](599-3) — 구역 id · 앞 노드 · 뒤 노드. */
|
|
respan: (line: string, from: number, to: number) => boolean;
|
|
}
|
|
|
|
export interface PlanProps {
|
|
/** 지도 위 속성 판(지도 칸에 붙임). */
|
|
panel: HTMLElement;
|
|
/** 고름 · 꼴이 바뀜 — 판 다시. */
|
|
render: () => void;
|
|
/** 고를 세트 — 있는 세트 + 해마다 「새 세트」(값 = 세트 열쇠). */
|
|
setOptions: () => Array<{ value: string; text: string }>;
|
|
/** 이 범위를 고른 세트로(되돌리기 한 걸음). */
|
|
assign: (ranges: LineRange[], key: string) => void;
|
|
}
|
|
|
|
export function createPlanProps(params: PlanPropsParams): PlanProps {
|
|
const { edit, page } = params;
|
|
const points = (): Vertex[] => params.points?.() ?? [];
|
|
/** 연도 줄 보임 — 표 「years」 사용 · 보기만 + 조각 있음. */
|
|
const yearsShown = (network: PlanNetwork): boolean =>
|
|
featureShown(page, "years") && network.pieces.length > 0;
|
|
const float = createFloatPanel({
|
|
title: "고름",
|
|
draggable: true,
|
|
onClose: () => edit.select([]),
|
|
});
|
|
float.root.classList.add("d03-plan__props");
|
|
float.root.dataset.role = "plan-props";
|
|
float.root.hidden = true;
|
|
|
|
/** 고를 세트 — 사업연도 시작부터 열 해(새 세트) + 있는 세트. */
|
|
function choices(): ReturnType<typeof setChoices> {
|
|
const start = params.yearStart?.() ?? new Date().getFullYear();
|
|
const years = Array.from({ length: YEAR_SPAN }, (_, i) => start + i);
|
|
return setChoices(params.network(), years);
|
|
}
|
|
|
|
const setOptions = (): Array<{ value: string; text: string }> =>
|
|
choices().map((c) => ({ value: c.key, text: c.fresh ? `${c.year} 새 세트` : c.key }));
|
|
|
|
function assign(ranges: LineRange[], key: string): void {
|
|
const target = choices().find((c) => c.key === key);
|
|
if (target && ranges.length) params.commit(assignSet(params.network(), ranges, target));
|
|
}
|
|
|
|
const button = (label: string, role: string, onClick: () => void): HTMLButtonElement => {
|
|
const b = createButton({ label, variant: "ghost", size: 24, onClick });
|
|
b.dataset.role = role;
|
|
return b;
|
|
};
|
|
|
|
/** 세트 고름 — 고른 범위 모두 그 세트(되돌리기 한 걸음) · 범위 = 토막 · 구간. */
|
|
function setField(pieces: PlanPiece[], ranges: LineRange[]): HTMLElement {
|
|
const keys = new Set(pieces.map(setKey));
|
|
const options = setOptions();
|
|
const field = createSelectField({
|
|
label: "세트",
|
|
options: keys.size > 1 ? [{ value: "", text: "여러 세트" }, ...options] : options,
|
|
value: keys.size > 1 ? "" : ([...keys][0] ?? ""),
|
|
size: 24,
|
|
ariaLabel: "고른 구간 세트",
|
|
disabled: !params.editable() || !featureOn(page, "set"),
|
|
onChange: (value) => value && assign(ranges, value),
|
|
});
|
|
field.select.dataset.role = "props-set";
|
|
return field.root;
|
|
}
|
|
|
|
const rangesOf = (pieces: PlanPiece[]): LineRange[] =>
|
|
pieces.map(({ line, from_m, to_m }) => ({ line, from_m, to_m }));
|
|
|
|
/** 구간 줄 — 누름 = 그 구간만. */
|
|
function pieceRows(network: PlanNetwork, pieces: PlanPiece[]): HTMLElement {
|
|
const names = lineNames(network.lines);
|
|
const rows = document.createElement("div");
|
|
rows.className = "d03-plan__props-rows";
|
|
for (const piece of pieces) {
|
|
const index = network.lines.findIndex((line) => line.id === piece.line);
|
|
const row = button(
|
|
`${names[index]} ${station(piece.from_m)}~${station(piece.to_m)} · ` +
|
|
`${meters(piece.to_m - piece.from_m)} · ${setKey(piece)}`,
|
|
"props-piece",
|
|
() => edit.select([piece.id]),
|
|
);
|
|
row.dataset.piece = piece.id;
|
|
rows.append(row);
|
|
}
|
|
return rows;
|
|
}
|
|
|
|
/** 노드 방식 · 값(598-4 · 599-1 부품) — 방식 고름 = 바로 · 수 칸 = Enter · 칸 떠날 때 · 앞 노드 기준 다시 놓음. */
|
|
function nodeKind(line: number, vertex: number): HTMLElement {
|
|
const record = params.network().lines[line].nodes?.[vertex] ?? null;
|
|
let value: DrawKindValue = {
|
|
kind: record?.kind ?? "free",
|
|
lengthM: record?.length_m ?? DRAW_DEFAULT_LENGTH_M,
|
|
slopePct: record?.slope_pct ?? DRAW_DEFAULT_SLOPE_PCT,
|
|
};
|
|
const apply = (): void => {
|
|
const network = params.network();
|
|
const next = nodeRecord(value.kind, value.lengthM, value.slopePct);
|
|
const out = placeNode(network, points(), line, vertex, next, params.heightAt());
|
|
if (typeof out === "string") return void showToast(out, "info");
|
|
if (JSON.stringify(out.network.lines) !== JSON.stringify(network.lines))
|
|
params.commitPoints(out.points, out.network);
|
|
};
|
|
const fields = createDrawKindFields({
|
|
value,
|
|
onChange: (next) => {
|
|
const kindChanged = next.kind !== value.kind;
|
|
value = next;
|
|
if (kindChanged) apply();
|
|
},
|
|
});
|
|
fields.root.addEventListener("change", apply);
|
|
fields.root.dataset.role = "props-node-kind";
|
|
fields.setDisabled(!params.editable());
|
|
return fields.root;
|
|
}
|
|
|
|
/** 고름 꼴마다 — 머리 글 · 몸 · 단추. */
|
|
function body(
|
|
picked: PlanSelection,
|
|
network: PlanNetwork,
|
|
): { title: string; parts: HTMLElement[]; actions: HTMLButtonElement[] } {
|
|
const names = lineNames(network.lines);
|
|
const nameOf = (id: string | null): string =>
|
|
names[network.lines.findIndex((line) => line.id === id)] ?? "";
|
|
const z = params.heightAt();
|
|
const pieces = network.pieces.filter((piece) => picked.pieces.includes(piece.id));
|
|
const length = selectionLength(edit.paths());
|
|
|
|
if (picked.kind === "node") {
|
|
const { line, vertex } = picked.node!;
|
|
const vertices = network.lines.find((l) => l.id === line)!.vertices;
|
|
const point = vertices[vertex];
|
|
const lonLat = params.lonLat?.(point[0], point[1]) ?? null;
|
|
const height = z(point[0], point[1]);
|
|
const rows: KvRow[] = [
|
|
{ label: "지반고", value: Number.isFinite(height) ? `${height.toFixed(2)} m` : null },
|
|
{ label: "측점", value: station(lineLength(vertices.slice(0, vertex + 1))) },
|
|
];
|
|
if (params.lonLat)
|
|
rows.unshift({
|
|
label: "경위도",
|
|
value: lonLat ? `${lonLat[0].toFixed(6)}, ${lonLat[1].toFixed(6)}` : null,
|
|
});
|
|
if (vertex > 0) {
|
|
const [a, b] = [vertices[vertex - 1], vertices[vertex]];
|
|
rows.push(
|
|
{ label: "앞 선 길이", value: meters(lineLength([a, b])) },
|
|
{ label: "앞 선 기울기", value: percent(groundSlopePct(a, b, z)) },
|
|
);
|
|
}
|
|
const entry = network.lines.find((l) => l.id === line)!;
|
|
if (nodeOff(entry, vertex, z)) rows.push({ label: "기록", value: "⚠ 지금 자리와 어긋남" });
|
|
const parts: HTMLElement[] = [createKv(rows)];
|
|
if (vertex > 0) parts.push(nodeKind(network.lines.indexOf(entry), vertex));
|
|
const toPoint = button("지점으로", "props-to-point", () =>
|
|
params.addPoint?.([point[0], point[1]]),
|
|
);
|
|
toPoint.hidden =
|
|
!featureOn(page, "points") || !params.addPoint || points().some((p) => samePoint(p, point));
|
|
return {
|
|
title: `${nameOf(line)} · 노드 ${vertex + 1}`,
|
|
parts,
|
|
actions: [
|
|
button("노드 지움", "props-drop-node", () => edit.dropNode(picked.node!)),
|
|
toPoint,
|
|
...(featureOn(page, "join") && edit.isEnd(picked.node!)
|
|
? [button("잇기", "props-join", () => edit.startJoin(picked.node!))]
|
|
: []),
|
|
],
|
|
};
|
|
}
|
|
|
|
if (picked.kind === "segment") {
|
|
const single = picked.segments.length === 1 ? picked.segments[0] : null;
|
|
const ids = segmentPieces(network, picked.segments);
|
|
const inSegments = network.pieces.filter((p) => ids.includes(p.id));
|
|
const ranges = picked.segments.flatMap((seg) => {
|
|
const range = segmentRange(network, seg);
|
|
return range ? [{ line: seg.line, from_m: range[0], to_m: range[1] }] : [];
|
|
});
|
|
const rows: KvRow[] = [{ label: "길이", value: meters(length) }];
|
|
if (single) {
|
|
const [from, to] = segmentRange(network, single)!;
|
|
const [a, b] = segmentPath(network, single)!;
|
|
rows.unshift({ label: "측점", value: `${station(from)} ~ ${station(to)}` });
|
|
rows.push({ label: "지반 기울기", value: percent(groundSlopePct(a, b, z)) });
|
|
}
|
|
const parts: HTMLElement[] = [createKv(rows)];
|
|
if (yearsShown(network)) parts.push(setField(inSegments, ranges));
|
|
const actions = [button("선 지움", "props-drop-segment", edit.dropSelected)];
|
|
if (single)
|
|
actions.unshift(
|
|
button("다시 긋기", "props-respan", () =>
|
|
params.respan(single.line, single.index, single.index + 1),
|
|
),
|
|
);
|
|
return {
|
|
title: single
|
|
? `${nameOf(single.line)} · 선 ${single.index + 1}`
|
|
: `선 ${picked.segments.length}개`,
|
|
parts,
|
|
actions,
|
|
};
|
|
}
|
|
|
|
if (picked.kind === "line") {
|
|
const vertices = network.lines.find((l) => l.id === picked.line)?.vertices ?? [];
|
|
return {
|
|
title: nameOf(picked.line),
|
|
parts: [
|
|
createKv([
|
|
{ label: "길이", value: meters(length) },
|
|
{ label: "노드", value: `${vertices.length}개` },
|
|
]),
|
|
...(yearsShown(network)
|
|
? [setField(pieces, rangesOf(pieces)), pieceRows(network, pieces)]
|
|
: []),
|
|
],
|
|
actions: [button("구역 지움", "props-drop-line", () => edit.dropRegion(picked.line!))],
|
|
};
|
|
}
|
|
|
|
if (picked.kind === "all") {
|
|
const byYear = new Map<number, number>();
|
|
for (const p of network.pieces)
|
|
byYear.set(p.year, (byYear.get(p.year) ?? 0) + p.to_m - p.from_m);
|
|
return {
|
|
title: "전체",
|
|
parts: [
|
|
createKv([
|
|
{ label: "길이", value: meters(length) },
|
|
{ label: "구역", value: `${network.lines.length}개` },
|
|
...[...byYear]
|
|
.sort(([a], [b]) => a - b)
|
|
.map(([year, m]) => ({ label: `${year}년`, value: meters(m) })),
|
|
]),
|
|
],
|
|
actions: [button("전체 지움", "props-drop-all", edit.dropAll)],
|
|
};
|
|
}
|
|
|
|
// 연도 구간 · 마커
|
|
const lineIds = new Set(pieces.map((piece) => piece.line));
|
|
const total = pieces.reduce((sum, piece) => sum + piece.to_m - piece.from_m, 0);
|
|
const parts: HTMLElement[] = [setField(pieces, rangesOf(pieces)), pieceRows(network, pieces)];
|
|
const actions: HTMLButtonElement[] = [];
|
|
const mark = network.pieces.find((p) => p.id === picked.mark);
|
|
if (mark) {
|
|
const before = network.pieces.find(
|
|
(p) => p.line === mark.line && Math.abs(p.to_m - mark.from_m) < 1e-3,
|
|
);
|
|
parts.unshift(
|
|
createKv([
|
|
{ label: "측점", value: station(mark.from_m) },
|
|
{ label: "앞 · 뒤 세트", value: `${before ? setKey(before) : "-"} · ${setKey(mark)}` },
|
|
]),
|
|
);
|
|
actions.push(button("마커 지움", "props-drop-mark", edit.dropMark));
|
|
}
|
|
return {
|
|
title: `구간 ${pieces.length} · 구역 ${lineIds.size} · ${meters(total)}`,
|
|
parts,
|
|
actions,
|
|
};
|
|
}
|
|
|
|
function renderPanel(): void {
|
|
const picked = edit.selected();
|
|
float.root.hidden = !picked;
|
|
if (!picked) return float.body.replaceChildren();
|
|
const { title, parts, actions } = body(picked, params.network());
|
|
const head = float.root.querySelector(".ui-float-panel__title");
|
|
if (head) head.textContent = title;
|
|
float.root.dataset.kind = picked.kind;
|
|
const row = document.createElement("div");
|
|
row.className = "d03-plan__row";
|
|
if (params.editable()) row.append(...actions);
|
|
float.body.replaceChildren(...parts, row);
|
|
}
|
|
|
|
return {
|
|
panel: float.root,
|
|
render() {
|
|
renderPanel();
|
|
},
|
|
setOptions,
|
|
assign,
|
|
};
|
|
}
|