Files
Aislo/D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts
T
eomsangdonandClaude Opus 5.5 5bc29bc889 fix(D03): 지점 핀 메뉴 「지점 N에서 긋기 시작」 = 지점 자리에서 · 이어 받기는 지점 · 선이 받은 범위 밖일 때만(옛 프로젝트 여는 즉시 받기 없음) (PLAN 591-2)
- 핀 머리를 우클릭해도 긋기 첫 점 = 지점(전엔 누른 자리 = 지점과 18 px 떨어진 새 본선)
- 받은 범위 안 · 가장자리 여유(350 m) 안쪽 선이 있다고 다시 받지 않음 — 받을 때 서버가 여유를 더함

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-30 10:36:15 +09:00

586 lines
22 KiB
TypeScript

/* =============================================================================
* D03_PlanAnalysis_UI_Page.ts
* D 예정노선 1단계 노선분석(요구서 389 3장 6~13 · 440 · 452 · PLAN 562-3 · 563-1 · 579-3 · 580 · 591-2) — B05~B09 틀(`mountGroupStep`).
*
* 메인 = 평면(바탕 겹 켜고 끔 — 위성 · 등고선 · 세류 · 지적 · 도로 · 급경사 + 그은 선 · 측점 · 연도 구분) + 도구 여섯.
* 좌 = 지형(조용히 받기 — 처음 = 등록 기준점 둘레 1 km · 지점 · 선 · 지도 보기 가운데가 받은 범위 밖이면 이어 받음 ·
* 단추 · 막는 창 없음 · 진행 = 이 칸 작은 막대 · 실패만 [다시 받기]) · 지점(목록 · 핀 · 우클릭 메뉴 =
* `D03_PlanAnalysis_UI_Points`) · 그리기([긋기] · 제약 칸 · 연도 = 도구줄 「연도 마커」 끌어 놓기 585-3) ·
* 구역 · 연도(해 · 선 · 구간 줄 = 고르기 · 고른 줄 밝힘) · [저장] [초기화].
* 고른 구간 속성(연도 · 넓이 · 방향 · 지움) = 지도 위 속성 판 `D03_PlanAnalysis_UI_Props`(585-2).
* 지점 = 긋기에 붙는 점(핀 · 늘 맨 위) · 기준점 = 처음 받는 기준일 뿐(노선 무관) · 고르기 · 고치기 = `D03_PlanAnalysis_UI_Edit`.
*
* 데이터 3층(CLAUDE.md 5장) — 지점 · 긋기 · 마크 · 연도 = 캐시(`d03-plan` {version: 3, network, points}) · [저장] =
* PUT plan/network(지점 함께 · 서버가 길이 · 측점 · 조각 · 연도 행을 다시 셈 · 응답으로 바꿈) · [초기화] = 빈 선 PUT(지점 남김).
* 되돌리기 · 다시하기 = 이 화면 스택(걸음 = `commit` 한 번). 화면 전체 잠금 = [저장] · [초기화]만.
* 공유 회사(산림청 아님) = 보기만 — 긋기 · 받기 · [저장] 없음.
* ========================================================================== */
import "./D03_PlanAnalysis_UI_Style.css";
import { ROUTES } from "@config/config_frontend";
import { attachCollapsible, createPanelCard } from "@ui/ui_template_collapsible";
import { askConfirm } from "@ui/ui_template_modal";
import { createProgressBar } from "@ui/ui_template_progress";
import { createText } from "@ui/ui_template_text";
import {
createButton,
hideLoadingOverlay,
showLoadingOverlay,
showToast,
} from "@ui/ui_template_elements";
import { clearState, readState, writeState } from "../A00_Common/b_page_state";
import { currentProjectId } from "../A00_Common/b_project_switch";
import { mountGroupStep } from "../A00_Common/group_workflow";
import { keyIs } from "../A00_Common/key_registry";
import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
import { heightAt as gridHeightAt } from "../common_util/common_util_surface_sampler";
import {
fetchPlanNetwork,
fetchPlanProgress,
fetchPlanSurface,
fetchTerrainExtent,
savePlanNetwork,
startTerrain,
type PlanJob,
type PlanNetworkView,
type PlanSurface,
} from "./D03_PlanAnalysis_Api";
import { openPlan3d } from "./D03_PlanAnalysis_UI_3D";
import { createPlanDraw } from "./D03_PlanAnalysis_UI_Draw";
import { createPlanEdit } from "./D03_PlanAnalysis_UI_Edit";
import { createPlanLayers } from "./D03_PlanAnalysis_UI_Layers";
import {
createPlanMap,
PLAN_STATION_INTERVAL_M,
type PlanMapLayer,
} from "./D03_PlanAnalysis_UI_Map";
import { createPlanMeasure } from "./D03_PlanAnalysis_UI_Measure";
import { createPlanPoints } from "./D03_PlanAnalysis_UI_Points";
import { createPlanProps } from "./D03_PlanAnalysis_UI_Props";
import { lineLength, stationChainages } from "./logic/D03_PlanAnalysis_Draw";
import {
emptyNetwork,
fromServer,
lineNames,
marksOf,
normalizePieces,
type PlanNetwork,
type Vertex,
} from "./logic/D03_PlanAnalysis_Plan";
import { lonLatToTm, tmParams } from "./logic/D03_PlanAnalysis_Tm";
const POLL_MS = 1000;
/** 지도 보기 가운데(보기의 반)가 받은 범위 밖이면 이어 받음 — 그 상자가 이보다 넓으면(멀리 줄여 봄) 안 받음(m). */
const VIEW_FETCH_MAX_M = 2000;
/** 지도 보기 바뀐 뒤 이만큼 멈추면 범위를 봄(ms). */
const VIEW_SETTLE_MS = 800;
/** 처음 맞춤 = 기준점 둘레(서버 `SITE_RADIUS_M`). */
const SITE_RADIUS_M = 1000;
/** 되돌리기 쌓는 수. */
const UNDO_MAX = 100;
/** 캐시 꼴 판 — 옛 꼴(지점 없음 · 갈래 고름)은 안 읽음. */
const DRAFT_VERSION = 3;
/** 한 걸음 = 지점 + 노선(되돌리기 · 캐시 · 고침 판정). */
interface Snap {
network: PlanNetwork;
points: Vertex[];
}
interface Draft extends Snap {
version: number;
}
const sleep = (ms: number): Promise<void> => new Promise((done) => setTimeout(done, ms));
const errorText = (error: unknown): string =>
error instanceof Error ? error.message : String(error);
export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
const projectId = currentProjectId();
let editable = false;
let points: Vertex[] = []; // 지점(긋기에 붙는 점 · 591-2)
let epsg = 0;
let yearStart = new Date().getFullYear(); // 새 선 처음 해
let network: PlanNetwork = emptyNetwork();
let savedJson = JSON.stringify({ network, points }); // 못 읽은 채 떠남 = 고침 없음
let undoStack: Snap[] = [];
let redoStack: Snap[] = [];
let surface: PlanSurface | null = null;
let have: [number, number, number, number] | null = null;
let viewCore: Vertex[] = []; // 지도 보기 가운데 상자 두 귀(넓으면 빈 것)
let viewTimer = 0;
let lastTried = ""; // 같은 받기를 거듭하지 않음
let ready = false; // 들어올 때 받기 판단이 끝남(그 앞 보기 바뀜은 안 받음)
let busy = false;
let failed: string | null = null;
let measuring = false;
let lastSaveMs: number | null = null;
const z = (x: number, y: number): number => (surface ? gridHeightAt(surface.grid, x, y) : NaN);
const draw = createPlanDraw({
base: () => points,
network: () => network,
heightAt: () => z,
commit,
onMode: () => {
if (draw.mode() !== "idle") setMeasure(false);
refresh();
},
});
const edit = createPlanEdit({
network: () => network,
base: () => points,
commit,
show: (next) => {
network = normalizePieces(next, yearStart);
map.redraw();
},
enabled: () => draw.mode() === "idle" && !measuring,
editable: () => editable,
onSelect: () => refresh(),
});
const props = createPlanProps({
network: () => network,
edit,
editable: () => editable,
yearStart: () => yearStart,
commit,
});
const measure = createPlanMeasure(() => z);
const marks = createPlanPoints({
points: () => points,
network: () => network,
epsg: () => epsg,
draw,
commit: (nextPoints, next) => step({ network: next, points: nextPoints }),
show: (nextPoints, next) => {
[points, network] = [nextPoints, next];
map.redraw();
},
idle: () => draw.mode() === "idle" && !measuring,
editable: () => editable,
});
// 지도 보기 가운데 상자 — 그릴 때마다 보이는 화면 가운데 반을 작업 좌표로(바뀌면 잠시 뒤 범위 봄)
const viewWatch: PlanMapLayer = {
draw(context, screen) {
const [w, h] = [context.canvas.clientWidth, context.canvas.clientHeight];
const corners = [
[w / 4, h / 4],
[(3 * w) / 4, h / 4],
[(3 * w) / 4, (3 * h) / 4],
[w / 4, (3 * h) / 4],
].map(([x, y]) => screen.toMetric(...screen.unrotate(x, y)));
const xs = corners.map((c) => c[0]);
const ys = corners.map((c) => c[1]);
const box: Vertex[] = [
[Math.min(...xs), Math.min(...ys)],
[Math.max(...xs), Math.max(...ys)],
];
const wide =
box[1][0] - box[0][0] > VIEW_FETCH_MAX_M || box[1][1] - box[0][1] > VIEW_FETCH_MAX_M;
const next = wide || !w ? [] : box;
if (JSON.stringify(next) === JSON.stringify(viewCore)) return;
viewCore = next;
clearTimeout(viewTimer);
viewTimer = window.setTimeout(() => void ensureCovered(), VIEW_SETTLE_MS);
},
};
const map = createPlanMap({
onUndo: undo,
onRedo: redo,
on3d: open3d,
onMeasure: () => setMeasure(!measuring),
});
const backdrop = createPlanLayers({
projectId,
map,
points: () => [...points, ...allVertices()],
});
map.root.append(backdrop.bar, backdrop.legend, props.panel);
const main = document.createElement("div");
main.className = "d03-plan";
main.append(map.root);
const terrainText = createText("", "muted");
terrainText.classList.add("d03-plan__hint");
const bar = createProgressBar();
bar.root.hidden = true;
const retryButton = createButton({
label: "다시 받기",
variant: "filled",
size: 28,
onClick: () => {
[failed, lastTried, ready] = [null, "", true];
void ensureCovered();
},
});
const terrainCard = createPanelCard("지형", false);
terrainCard.append(terrainText, bar.root, retryButton);
const pointCard = createPanelCard("지점", false);
pointCard.append(marks.panel);
const drawCard = createPanelCard("그리기", false);
drawCard.append(draw.panel);
const pieceCard = createPanelCard("구역 · 연도", false);
pieceCard.append(props.list);
const saveButton = createButton({ label: "저장", variant: "filled", onClick: () => void save() });
const resetButton = createButton({
label: "초기화",
variant: "ghost",
onClick: () => void reset(),
});
const actions = document.createElement("div");
actions.className = "ui-sidebar-actions";
actions.append(saveButton, resetButton);
const panel = document.createElement("div");
panel.className = "ui-sidebar-panel d03-plan__panel";
panel.append(terrainCard, pointCard, drawCard, pieceCard, actions);
attachCollapsible(panel);
// 떠날 때(단계 아이콘 · [<] [>] · 머리 메뉴 · 뒤로) 고친 선이 있으면 공용 물음 [취소][폐기][저장](572-3)
mountGroupStep(root, ROUTES.D03_PLAN_ANALYSIS, {
mainContent: main,
leftPanel: panel,
dirty: () => editable && dirty(),
save,
discard: () => clearState("d03-plan", projectId),
});
root.querySelector(".ui-workflow-layout")?.classList.add("d03-plan-layout");
const allVertices = (): Vertex[] => network.lines.flatMap((line) => line.vertices);
const snap = (): Snap => ({ network, points });
const dirty = (): boolean => JSON.stringify(snap()) !== savedJson;
const keepDraft = (): void =>
dirty()
? writeState("d03-plan", { version: DRAFT_VERSION, ...snap() } satisfies Draft, projectId)
: clearState("d03-plan", projectId);
/** 한 걸음 — 조각을 맞춰 넣고 되돌리기에 쌓음 · 캐시 · 받은 범위 밖이면 조용히 이어 받음. */
function step(next: Snap): void {
undoStack = [...undoStack.slice(1 - UNDO_MAX), snap()];
redoStack = [];
[network, points] = [normalizePieces(next.network, yearStart), next.points];
keepDraft();
refresh();
void ensureCovered();
}
function commit(next: PlanNetwork): void {
step({ network: next, points });
}
function undo(): void {
const last = undoStack.pop();
if (!last) return;
redoStack.push(snap());
({ network, points } = last);
keepDraft();
refresh();
}
function redo(): void {
const next = redoStack.pop();
if (!next) return;
undoStack.push(snap());
({ network, points } = next);
keepDraft();
refresh();
}
function setMeasure(on: boolean): void {
if (on === measuring) return;
measuring = on;
measure.clear();
if (on) draw.setMode("idle");
map.setLayers(layerList());
refresh();
}
/** 겹 차례 — 핀 누름(`marks.input`)은 고르기보다 앞 · 핀 그림 · 우클릭 메뉴(`marks.pins`)는 맨 끝(맨 위). */
const layerList = (): PlanMapLayer[] => [
...backdrop.layers,
draw.layer,
marks.input,
edit.layer,
...(measuring ? [measure.layer] : []),
viewWatch,
marks.pins,
];
/** 점들이 받은 범위 안인가. */
const inside = (list: Vertex[]): boolean =>
!!have &&
list.every(([x, y]) => x >= have![0] && x <= have![2] && y >= have![1] && y <= have![3]);
const outside = (): boolean => !!have && !inside([...points, ...allVertices()]);
/** 조용히 받기(요구 453) — 지점 · 선 · 지도 보기 가운데가 받은 범위 밖이면 이어 받음 ·
* 단추 · 막는 창 없음 · 실패 = [다시 받기] · 같은 요청은 한 번만. */
async function ensureCovered(): Promise<void> {
if (!ready || !editable || busy || failed || !epsg || !root.isConnected) return;
const need = [...points, ...allVertices()];
if (inside(need) && inside(viewCore)) return; // 받을 때 서버가 여유를 더함
const extra = [...need, ...viewCore];
const key = JSON.stringify([have, extra]);
if (key === lastTried) return;
lastTried = key;
await download(extra);
}
function refresh(): void {
draw.sync();
edit.sync();
map.setTools({
undo: editable && undoStack.length > 0,
redo: editable && redoStack.length > 0,
view3d: !!surface && network.lines.some((line) => line.vertices.length > 1),
measure: measuring,
yearMark: editable && network.lines.some((line) => line.vertices.length > 1),
});
map.redraw();
props.render();
marks.render();
retryButton.hidden = !editable || busy || !failed;
if (!busy)
terrainText.textContent = failed
? `지형 받기 실패 — ${failed}`
: !surface
? editable
? "받은 지형 없음 — 기준점 둘레를 받습니다(길이 · 기울기는 지형을 받은 뒤)."
: "받은 지형 없음"
: outside()
? "지점 또는 그은 선이 받은 지형 밖 — 이어 받습니다."
: "받은 지형 안";
saveButton.hidden = resetButton.hidden = !editable;
saveButton.disabled = busy || !dirty();
}
async function download(extra: Vertex[]): Promise<void> {
busy = true; // 요청이 가는 동안 다른 받기를 막음(지켜보기가 이어 받음)
try {
await startTerrain(projectId, null, extra);
} catch (error) {
// 이미 도는 일(다른 창)이면 그것을 지켜봄
if (!/이미 돌고/.test(errorText(error))) {
busy = false;
return void showToast(errorText(error), "error");
}
}
await follow();
}
/** 도는 받기를 지켜보고 끝나면 지형 · 바탕을 다시 읽음. */
async function follow(): Promise<void> {
const job = await watch();
if (!job || !root.isConnected) return;
failed = job.error;
await Promise.all([loadSurface(), backdrop.load()]);
refresh();
await ensureCovered(); // 받는 동안 옮긴 지점 · 선 · 보기
}
/** 지형 받기를 끝날 때까지 지켜봄 — 진행은 지형 칸에. */
async function watch(): Promise<PlanJob | null> {
busy = true;
bar.root.hidden = false;
refresh();
try {
for (;;) {
if (!root.isConnected) return null;
const job = (await fetchPlanProgress(projectId)).terrain;
bar.set(job.percent / 100);
terrainText.textContent = `지형 받기 ${job.percent}% · ${job.message ?? ""}`;
if (!job.running) {
if (job.error) showToast(job.error, "error");
return job;
}
await sleep(POLL_MS);
}
} catch (error) {
showToast(`진행을 읽지 못했습니다 — ${errorText(error)}`, "error");
return null;
} finally {
busy = false;
bar.root.hidden = true;
refresh();
}
}
async function loadSurface(): Promise<void> {
try {
surface = await fetchPlanSurface(projectId);
const extent = await fetchTerrainExtent(projectId, null, []);
have = extent.have_m;
} catch (error) {
showToast(`지형면을 읽지 못했습니다 — ${errorText(error)}`, "error");
}
}
/** 서버 응답 → 지금 값 · 저장본(지점 · 선). */
function takeServer(view: PlanNetworkView): void {
if (view.year_start) yearStart = view.year_start;
const server = view.network;
network =
server && server.lines.length
? fromServer(server.lines, server.marks, server.pieces, yearStart)
: emptyNetwork();
points = view.base.points.map((p): Vertex => [p.x, p.y]);
if (view.base.epsg) epsg = view.base.epsg;
savedJson = JSON.stringify(snap());
}
function serverBody(): Parameters<typeof savePlanNetwork>[1] {
const { lines, pieces } = network;
return { epsg, points, lines, marks: marksOf(network), pieces };
}
/** [저장] — 서버가 다시 셈 · 실패면 그대로(캐시 남음). 참 = 저장됨. */
async function save(): Promise<boolean> {
draw.setMode("idle");
showLoadingOverlay();
try {
const began = performance.now();
takeServer(await savePlanNetwork(projectId, serverBody()));
lastSaveMs = Math.round(performance.now() - began);
clearState("d03-plan", projectId);
undoStack = [];
redoStack = [];
refresh();
showToast("예정노선을 저장했습니다.", "success");
return true;
} catch (error) {
showToast(`저장하지 못했습니다 — ${errorText(error)}`, "error");
return false;
} finally {
hideLoadingOverlay();
}
}
/** [초기화] = 선만 지운 빈 노선을 정본에 · 지점은 남김(요구 453). */
async function reset(): Promise<void> {
const ok = await askConfirm({
title: "초기화",
message: "그은 선 · 갈래 · 구역을 모두 지웁니다(지점은 남김). 저장된 노선도 바뀝니다.",
okLabel: "초기화",
danger: true,
});
if (!ok) return;
draw.setMode("idle");
showLoadingOverlay();
try {
const body = { epsg, points, lines: [], marks: [], pieces: [] };
takeServer(await savePlanNetwork(projectId, body));
clearState("d03-plan", projectId);
undoStack = [];
redoStack = [];
refresh();
showToast("선을 지웠습니다(지점은 남김).", "success");
} catch (error) {
showToast(`초기화하지 못했습니다 — ${errorText(error)}`, "error");
} finally {
hideLoadingOverlay();
}
}
function open3d(): void {
if (!surface) return;
const names = lineNames(network.lines);
const lines = network.lines
.map((line, index) => ({
name: names[index],
line: line.vertices,
stations: stationChainages(lineLength(line.vertices), PLAN_STATION_INTERVAL_M),
}))
.filter((item) => item.line.length > 1);
openPlan3d(projectId, surface, lines);
}
// 검증 창구 — 꼴 · 미리보기 · 제약 · 화면 자리 · 재기 · 회전 · 저장 시간(ORCA 판정)
(window as unknown as { __d03Plan?: unknown }).__d03Plan = {
network: () => network,
base: () => points,
have: () => have,
busy: () => busy,
lineNames: () => lineNames(network.lines),
screenOf: map.screenOf,
screenOfLonLat: map.screenOfLonLat,
preview: draw.preview,
stroke: draw.stroke,
selected: edit.selected,
select: edit.select,
setScope: edit.setScope,
box: edit.box,
constraint: draw.constraint,
setConstraint: draw.setConstraint,
mode: draw.mode,
setMode: draw.setMode,
measure: measure.result,
rotationDeg: map.rotationDeg,
history: () => ({ undo: undoStack.length, redo: redoStack.length }),
dirty,
saveMs: () => lastSaveMs,
heightAt: z,
layers: backdrop.state,
};
const onKey = (event: KeyboardEvent): void => {
if (!root.isConnected) return window.removeEventListener("keydown", onKey);
const typing = (event.target as HTMLElement | null)?.closest?.("input, textarea, select");
if (typing || !editable) return;
// 키 = 등록부(588-3 · 한글 자판도 자판 자리로)
const handled = keyIs(event, "plan.undo")
? (undo(), true)
: keyIs(event, "plan.redo")
? (redo(), true)
: measuring && event.key === "Escape"
? (setMeasure(false), true)
: draw.key(event) || edit.key(event);
if (handled) {
event.preventDefault();
map.redraw();
}
};
window.addEventListener("keydown", onKey);
map.setLayers(layerList());
marks.mount(map.root);
try {
editable = !!(await fetchSessionUser())?.is_forest_service;
draw.setEditable(editable);
const view = await fetchPlanNetwork(projectId);
const { epsg: workEpsg, site } = view.base;
if (!workEpsg) {
terrainText.textContent = "기준점이 없습니다 — 예정노선 등록에서 정하세요.";
return;
}
epsg = workEpsg;
takeServer(view);
const draft = readState<Draft>("d03-plan", projectId);
if (draft?.version === DRAFT_VERSION && draft.network && Array.isArray(draft.points))
({ network, points } = draft);
const tm = tmParams(epsg);
const siteXy = site && tm ? lonLatToTm(tm, site.lon, site.lat) : null;
const around: Vertex[] = siteXy
? [
[siteXy[0] - SITE_RADIUS_M, siteXy[1] - SITE_RADIUS_M],
[siteXy[0] + SITE_RADIUS_M, siteXy[1] + SITE_RADIUS_M],
]
: [];
const drawn = [...points, ...allVertices()];
map.update({ fit: drawn.length ? drawn : around, epsg });
refresh();
await loadSurface();
refresh();
await backdrop.load();
const job = (await fetchPlanProgress(projectId)).terrain;
if (job.running) {
ready = true;
await follow();
} else if (editable && !job.error) {
// 들어올 때 받은 범위가 기준점 둘레 · 지점을 못 덮으면 바로 받기(서버가 셈 · 실패 뒤엔 [다시 받기])
const extent = await fetchTerrainExtent(projectId, null, []);
ready = true;
if (!extent.covered) await download([]);
else await ensureCovered();
}
} catch (error) {
terrainText.textContent = `불러오지 못했습니다 — ${errorText(error)}`;
}
}