238 lines
14 KiB
TypeScript
238 lines
14 KiB
TypeScript
import { createButton } from "@ui/ui_template_elements";
|
|
import { createSidePanels, type SidePanels } from "@ui/ui_template_side_panels";
|
|
import { bindFootprintToggle } from "./B05_Profile_UI_RouteEdit_Footprint";
|
|
import { bindMarkToggle } from "./B05_Profile_UI_RouteEdit_Marks";
|
|
|
|
/* =============================================================================
|
|
* B05_Profile_UI_RouteEdit_Chrome.ts
|
|
* 계획노선 편집(평면)의 **뼈대** — 칸·단추·오버레이 판을 만들고 자주 쓰는 요소를 집어 준다.
|
|
*
|
|
* `B05_Profile_UI_RouteEdit.ts` 가 700줄을 넘겨 떼어낸 조각이다(2026-09-12). 생김새만 있고
|
|
* 동작은 없다 — 배선은 본체와 각 조각(`_Apply`·`_Rotate`·`_History`…)이 한다.
|
|
*
|
|
* **배치**(352-1) — 지도가 칸 전체 · 머리 줄 · 테두리 없음. 도구는 3D 와 같은 떠 있는 유리 단추
|
|
* (지도 왼쪽 위 · ☰ 비킴), [?] 조작 설명은 도구줄 아래 2열, 상태·범례는 왼쪽 아래, 잰 값은 오른쪽
|
|
* 아래. 횡단 두 판은 지도 오른쪽을 덮는 판(아래 종단 판이 그 위).
|
|
* 도구줄 차례(366-2 · 381-2) — [?] | ↶ ↷ | 3D | ⟲ ⟳ · 1m 등고선 · 측점 · 기울기 · 절/성토선 · 거리 재기 |
|
|
* 측점 스냅 · 분석 지형.
|
|
*
|
|
* 자리(345-3) — 모달이 아니라 종단 보기 가운데 위 본문(옛 3D 자리)에 붙는다. 덮개 · 전체 화면 ·
|
|
* 닫기 단추는 걷었다 · [취소] · [확인] · [노선 반영] · [저장 전으로]는 없앰(346-3 · 352-2 — 노선은 페이지
|
|
* [저장]이 맨 앞에서 보냄) · 오른쪽 횡단 칸은 접는 칸.
|
|
* 머리 `tools` 자리에 부른 쪽 단추([3D])가 앉는다. [노선 추천] · 현재 추천 · [초기화]는 좌측
|
|
* 「노선 추천」 칸으로 옮겼다(345-4 · `_Panel_Recommend`).
|
|
* ========================================================================== */
|
|
|
|
/** 회전 단추 아이콘 — **반만 도는 화살표**(2026-09-12 사용자 지시 ㉙). 한 바퀴를 다 그린
|
|
* 기호(`↺`·`↻`)는 「한 바퀴 돈다」로 읽혀 한 칸씩 도는 동작과 안 맞았다. */
|
|
export const HALF_TURN_ICON = {
|
|
ccw: `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13 8a5 5 0 0 0-10 0" /><path d="M3 8 1.2 5.6" /><path d="M3 8 5.4 6.6" /></svg>`,
|
|
cw: `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 8a5 5 0 0 1 10 0" /><path d="M13 8 14.8 5.6" /><path d="M13 8 10.6 6.6" /></svg>`,
|
|
};
|
|
|
|
/** 되돌리기 · 다시하기 아이콘 — **곧은 꼬리 + 갈고리**(↩ ↪ · 요구 241-9). 둥근 화살표(`↶`·`↷`)는
|
|
* 회전 단추와 헷갈렸다. 종단 도구줄도 같은 그림. */
|
|
export const HISTORY_ICON = {
|
|
undo: `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 6h7.5a3.5 3.5 0 0 1 0 7H7" /><path d="M6 3 3 6l3 3" /></svg>`,
|
|
redo: `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="none"
|
|
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13 6H5.5a3.5 3.5 0 0 0 0 7H9" /><path d="M10 3l3 3-3 3" /></svg>`,
|
|
};
|
|
|
|
export interface RouteEditChrome {
|
|
overlay: HTMLElement;
|
|
canvas: HTMLCanvasElement;
|
|
status: HTMLElement;
|
|
busy: HTMLElement;
|
|
measureBox: HTMLElement;
|
|
measureText: HTMLElement;
|
|
measureButton: HTMLButtonElement;
|
|
minorContourButton: HTMLButtonElement;
|
|
/** [측점 스냅] 켬끔(요구 224-2) — `aria-pressed` · `is-active` 는 본체가 맞춤. */
|
|
stationSnapButton: HTMLButtonElement;
|
|
/** 분석 지형 고르기(PLAN 133-1) — 라이다 있는 프로젝트만 보임(감싼 label 의 hidden). */
|
|
terrainSelect: HTMLSelectElement;
|
|
}
|
|
|
|
/** 손잡이 자리(24) + 틈(8) — 접혀도 남는 폭(`.ui-side-panels` margin-left). */
|
|
const SIDE_HANDLE_PX = 32;
|
|
|
|
/** 횡단 판 몸 → 패널 묶음 — 고른 측점 횡단을 띄울 때 접힌 판을 폄(382-2 · `_Cross`). */
|
|
export const sidePanelsOf = new WeakMap<HTMLElement, SidePanels>();
|
|
|
|
// 글판 접기 기억(345-5 덧 3) — 페이지 동안만(모듈 값) · 다시 열어도 그대로.
|
|
let hintOpen = false;
|
|
let infoCollapsed = false;
|
|
|
|
/** 뼈대를 만들어 `parent` 에 붙이고, 자주 쓰는 요소를 집어 돌려준다. */
|
|
export function createRouteEditChrome(
|
|
parent: HTMLElement,
|
|
tools: HTMLElement[] = [],
|
|
): RouteEditChrome {
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "b05-routeedit";
|
|
overlay.innerHTML = `
|
|
<div class="b05-routeedit__canvas-wrap" aria-label="계획노선 편집">
|
|
<canvas class="b05-routeedit__canvas"></canvas>
|
|
<div class="b05-route__view-controls b05-routeedit__tools">
|
|
<button type="button" class="ui-btn ui-btn--glass b05-routeedit__hint-toggle"
|
|
data-act="hint-toggle" aria-expanded="false" title="조작 도움말 펼치기 · 접기">?</button>
|
|
<i class="b05-route__view-separator" aria-hidden="true"></i>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="undo"
|
|
title="되돌리기 (Ctrl+Z)" aria-label="되돌리기" disabled>${HISTORY_ICON.undo}</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="redo"
|
|
title="다시하기 (Ctrl+Y)" aria-label="다시하기" disabled>${HISTORY_ICON.redo}</button>
|
|
<i class="b05-route__view-separator" aria-hidden="true"></i>
|
|
<span data-slot="tools"></span>
|
|
<i class="b05-route__view-separator" aria-hidden="true"></i>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="rotate-ccw"
|
|
title="반시계로 돌리기" aria-label="반시계로 돌리기">${HALF_TURN_ICON.ccw}</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="rotate-cw"
|
|
title="시계로 돌리기" aria-label="시계로 돌리기">${HALF_TURN_ICON.cw}</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="contour-minor"
|
|
aria-pressed="false" disabled
|
|
title="1m 간격 등고선을 얇고 옅게 겹칩니다 (확대하면 보임)">1m 등고선</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="stations"
|
|
title="측점 눈금 · 번호를 평면에 보이기 · 숨기기 (시점 · 종점 이름표는 늘 보임)">측점</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="slopes"
|
|
title="측점 사이 기울기(%)를 평면에 보이기 · 숨기기 (확대해야 보임)">기울기</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="footprint"
|
|
title="도로 끝 · 비탈 끝(깎기 붉음 · 쌓기 청록)을 평면에 겹칩니다">절/성토선</button>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="measure"
|
|
title="노선 위 두 점을 눌러 거리·기울기를 잽니다 (Shift+클릭도 같음)">거리 재기</button>
|
|
<i class="b05-route__view-separator" aria-hidden="true"></i>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="station-snap"
|
|
aria-pressed="false"
|
|
title="켜면 곡선 가운데(MC)를 가까운 일반측점에 맞춥니다 — 놓을 때 고친 자리부터 교각점을 간격 절반 안에서 밂 · 고정 교각점은 그대로 · 못 맞춘 곡선은 상태줄 「측점 밖 곡선」 · [저장] 때 저장">측점 스냅</button>
|
|
<label class="b05-routeedit__terrain" hidden
|
|
title="노선 편집 분석(등고선 · 지반고 · 기울기 · 횡단 미리보기 · 추천)에 쓸 지형 — 확정 지표면 · 종횡단은 안 바뀝니다">분석 지형
|
|
<select class="ui-select ui-select--sm" data-act="terrain">
|
|
<option value="las">라이다</option>
|
|
<option value="sheet">수치지형도</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="b05-routeedit__hint">
|
|
<div class="b05-routeedit__hint-body">
|
|
<span>노드 끌기 = 옮기기</span><span>노드 클릭 = R 라벨</span>
|
|
<span>선 두 번 클릭 = 노드 추가</span><span>노드 오른쪽 클릭 = 삭제</span>
|
|
<span>측점 눈금 클릭 = 횡단 미리보기</span><span>Shift+클릭 = 거리·기울기</span>
|
|
<span>가운데(휠) 버튼 끌기 = 지도 이동</span><span>휠 = 확대</span>
|
|
</div>
|
|
</div>
|
|
<div class="b05-routeedit__measure" hidden>
|
|
<span class="b05-routeedit__measure-text"></span>
|
|
<span data-slot="measure-close"></span>
|
|
</div>
|
|
<div class="b05-routeedit__info">
|
|
<span class="b05-routeedit__status">노선을 읽는 중…</span>
|
|
<span class="b05-routeedit__legend">
|
|
<span><i class="is-expected"></i> 예상노선(원본)</span>
|
|
<span><i class="is-planned"></i> 계획노선</span>
|
|
</span>
|
|
<span class="b05-routeedit__summary"></span>
|
|
<button type="button" class="b05-routeedit__info-toggle" data-act="info-toggle"
|
|
aria-expanded="true" title="상태 · 범례 글판 접기 · 펴기">▾</button>
|
|
</div>
|
|
</div>
|
|
<div class="b05-routeedit__busy" hidden><span></span></div>
|
|
<aside class="b05-routeedit__side-wrap"></aside>`;
|
|
parent.append(overlay);
|
|
// 부른 쪽 단추([3D])도 같은 유리 단추로 — 지도 위에 떠 있는 도구줄.
|
|
tools.forEach((tool) => tool.classList.replace("ui-btn--ghost", "ui-btn--glass"));
|
|
overlay.querySelector('[data-slot="tools"]')!.replaceWith(...tools);
|
|
|
|
// 횡단 미리보기 = 패널 양식(382-1 · 손잡이 · 머리 · 폭 끌기 · 열림 · 폭 기억) · 자리는 지도 위 덮개 그대로 ·
|
|
// 기억이 없으면 좁은 화면은 접힌 채 시작(지도가 먼저다) · 잰 값 창이 판을 비킴(--b05-side-open).
|
|
const side = document.createElement("div");
|
|
side.className = "b05-routeedit__side";
|
|
const setSideOpen = (): void =>
|
|
overlay.style.setProperty(
|
|
"--b05-side-open",
|
|
`${(panels.current() ? panels.width() : 0) + SIDE_HANDLE_PX}px`,
|
|
);
|
|
const panels = createSidePanels({
|
|
prefKey: "b05-routeedit-cross",
|
|
panels: [{ id: "cross", title: "횡단", body: side }],
|
|
defaultOpen: window.innerWidth >= 1500 ? "cross" : null,
|
|
defaultWidth: 460,
|
|
follow: false,
|
|
onChange: setSideOpen,
|
|
onResize: setSideOpen,
|
|
});
|
|
sidePanelsOf.set(side, panels);
|
|
overlay.querySelector(".b05-routeedit__side-wrap")!.append(panels.root);
|
|
setSideOpen();
|
|
|
|
// 도움말 = 기본 접힘 · [?] 한 번에 펼침(345-5 덧 3).
|
|
const hint = overlay.querySelector<HTMLElement>(".b05-routeedit__hint")!;
|
|
const hintToggle = overlay.querySelector<HTMLButtonElement>('[data-act="hint-toggle"]')!;
|
|
const setHint = (open: boolean): void => {
|
|
hintOpen = open;
|
|
hint.classList.toggle("is-open", open);
|
|
hintToggle.setAttribute("aria-expanded", String(open));
|
|
};
|
|
setHint(hintOpen);
|
|
hintToggle.addEventListener("click", () => setHint(!hintOpen));
|
|
|
|
// 상태 · 범례 접기 — 접으면 한 줄 「계획노선 N m」(상태 글에서 읽음 · 345-5 덧 3).
|
|
const info = overlay.querySelector<HTMLElement>(".b05-routeedit__info")!;
|
|
const infoToggle = info.querySelector<HTMLButtonElement>('[data-act="info-toggle"]')!;
|
|
const summary = info.querySelector<HTMLElement>(".b05-routeedit__summary")!;
|
|
const setInfo = (collapsed: boolean): void => {
|
|
infoCollapsed = collapsed;
|
|
info.classList.toggle("is-collapsed", collapsed);
|
|
infoToggle.textContent = collapsed ? "▸" : "▾";
|
|
infoToggle.setAttribute("aria-expanded", String(!collapsed));
|
|
};
|
|
setInfo(infoCollapsed);
|
|
infoToggle.addEventListener("click", () => setInfo(!infoCollapsed));
|
|
|
|
const measureCloseButton = createButton({ label: "✕", variant: "ghost" });
|
|
measureCloseButton.classList.add("b05-routeedit__measure-close");
|
|
measureCloseButton.setAttribute("aria-label", "닫기");
|
|
measureCloseButton.title = "닫기";
|
|
overlay.querySelector('[data-slot="measure-close"]')!.replaceWith(measureCloseButton);
|
|
|
|
const canvas = overlay.querySelector<HTMLCanvasElement>(".b05-routeedit__canvas")!;
|
|
const status = overlay.querySelector<HTMLElement>(".b05-routeedit__status")!;
|
|
const syncSummary = (): void => {
|
|
const text = status.textContent ?? "";
|
|
const length = /계획노선 ([\d.]+)m/.exec(text)?.[1];
|
|
summary.textContent = length ? `계획노선 ${length} m` : text;
|
|
};
|
|
new MutationObserver(syncSummary).observe(status, { childList: true, characterData: true });
|
|
syncSummary();
|
|
const measureBox = overlay.querySelector<HTMLElement>(".b05-routeedit__measure")!;
|
|
const measureText = overlay.querySelector<HTMLElement>(".b05-routeedit__measure-text")!;
|
|
const measureButton = overlay.querySelector<HTMLButtonElement>('[data-act="measure"]')!;
|
|
const busy = overlay.querySelector<HTMLElement>(".b05-routeedit__busy")!;
|
|
const minorContourButton = overlay.querySelector<HTMLButtonElement>(
|
|
'[data-act="contour-minor"]',
|
|
)!;
|
|
const terrainSelect = overlay.querySelector<HTMLSelectElement>('[data-act="terrain"]')!;
|
|
const stationSnapButton = overlay.querySelector<HTMLButtonElement>('[data-act="station-snap"]')!;
|
|
bindFootprintToggle(overlay.querySelector<HTMLButtonElement>('[data-act="footprint"]')!);
|
|
bindMarkToggle(overlay.querySelector<HTMLButtonElement>('[data-act="stations"]')!, "stations");
|
|
bindMarkToggle(overlay.querySelector<HTMLButtonElement>('[data-act="slopes"]')!, "slopes");
|
|
|
|
return {
|
|
overlay,
|
|
canvas,
|
|
status,
|
|
busy,
|
|
measureBox,
|
|
measureText,
|
|
measureButton,
|
|
minorContourButton,
|
|
stationSnapButton,
|
|
terrainSelect,
|
|
};
|
|
}
|