46 lines
2.8 KiB
TypeScript
46 lines
2.8 KiB
TypeScript
/* =============================================================================
|
|
* A00_Common/design/design_profile_frame.ts
|
|
* 종단도 한 벌의 **판 뼈대**(DOM 틀) — `design_profile.ts` 에서 갈라냄(700줄 한계 · 472-5).
|
|
* 그리기 · 편집 · 상태는 저쪽 몫 · 여기는 칸만 만들어 돌려줌.
|
|
* ========================================================================== */
|
|
|
|
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
|
|
import { createProgressCircle } from "@ui/ui_template_progress";
|
|
import "../../B06_Section/B06_Section_UI_Style.css";
|
|
// SVG 차트 색상(.b06-chart__*)의 정의처는 _Style_Cross.css다. 이걸 빼면 B05로 바로 진입했을 때
|
|
// 배경 rect가 브라우저 기본 fill(검정)로 그려진다 — B06을 먼저 방문해야 정상으로 보이던 원인.
|
|
import "../../B06_Section/B06_Section_UI_Style_Cross.css";
|
|
import "../../B06_Section/B06_Section_UI_Style_Cross_Areas.css";
|
|
|
|
export function createProfileFrame(view: string) {
|
|
const root = document.createElement("section");
|
|
root.className = "b05-route-profile";
|
|
root.dataset.view = view;
|
|
// 이름표 "종단" — 무엇의 손잡이인지 화살표 옆에 밝힌다(2026-08-04 사용자 지시).
|
|
const panelHandle = createWorkflowPanelHandle("bottom", "down", "종단");
|
|
const balanceBar = document.createElement("div");
|
|
balanceBar.className = "b05-route-profile__balance";
|
|
const body = document.createElement("div");
|
|
body.className = "b05-route-profile__body";
|
|
const empty = document.createElement("p");
|
|
empty.className = "b05-route-profile__empty";
|
|
empty.textContent = "최적 경로를 계산하면 종단면도가 표시됩니다.";
|
|
body.append(empty);
|
|
// 종단면 본문 + 우측 판(배수유역도)을 나란히 놓는 2단 구성.
|
|
// 우측 판이 이 안에 있으므로 하단 패널을 접으면 함께 사라진다(사용자 지시).
|
|
// 그래프 영역 정중앙 로딩 서클 — 종단면 자료가 도착할 때까지 빈 안내만 보인다.
|
|
// body는 그릴 때마다 자식이 통째로 교체되므로 서클은 감싸는 칸에 둔다.
|
|
const progress = createProgressCircle({ overlay: true });
|
|
progress.root.hidden = true;
|
|
const bodyWrap = document.createElement("div");
|
|
bodyWrap.className = "b05-route-profile__body-wrap";
|
|
// 절토·성토 요약 줄은 **종단 쪽 열 안**에 둔다 — 패널 전체 폭에 걸치면 우측 배수유역도
|
|
// 구분선이 그 높이만큼 끊겨 보인다(2026-08-04 사용자 보고).
|
|
bodyWrap.append(balanceBar, body, progress.root);
|
|
const content = document.createElement("div");
|
|
content.className = "b05-route-profile__content";
|
|
const trailing = document.createElement("div");
|
|
trailing.className = "b05-route-profile__trailing";
|
|
return { root, panelHandle, balanceBar, body, empty, progress, bodyWrap, content, trailing };
|
|
}
|