- 흙막이 양식 한 벌(design_structure_guard) — 배관 · 박스 · 세월교가 같은 칸(형태 · 길이 · 높이 · 측점 전후) · 추가 흙막이 · 도수로/돌붙임 상자
- 세월교 · 박스 유입 · 유출: 흙막이 고르면 흙막이 칸(키 {side}_revet_* · 기본 찰 10 · 1.5 · 5 · 5) · [연동][경사] 옵션 줄
- B06 측벽 높이 · 좌우 · 상하 · 바닥판 읽기 줄을 세월교 · 박스 유입 · 유출 칸에 안 옮김(강조만)
- 유입 · 유출 「없음」 = 목록 램프 · 구조물 조합 잇기 줄 없음(명세 none)
- 세월교: 수량(련) 관경 바로 뒤 · 련 기본 2 · 새 시설 빈 월류 높이 = 유량 오면 필요 수심 · 종류 바꿀 때 유량 넘김
- 물넘이 포장: 경사각 기본 3° · 월류 폭 · 높이 칸(세월교와 같은 키 ford_width_m · ford_height_m · 같은 계산)
- 구조물정의 판 18(판_17 이력) · 이름 표 · 집계표 선택 컨테이너 짝 · 저장 병합 키
- 시험: 세월교 · 박스 · 물넘이 명세 기대값 · 흙막이 짝 자리 옮김
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BVPp2o6Mh2FZJr72yW3ofZ
74 lines
3.4 KiB
TypeScript
74 lines
3.4 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_Drainage_Revet_Choice.ts
|
|
* 관 보호공 상자 안 [연동] · [경사] 한 줄(54-30) — 반 폭 단추 둘 · 쓸 수 있는 쪽만 누를 수 있음.
|
|
* 값 = 횡단 연동 제어 옛 자리(`revet_link_detached` · `revet_follow_grade` · `design_structure_pipe_calc`) ·
|
|
* 고르면 횡단 그림이 바로 따라감. 경사를 끄면(수평) 연동은 풀 수 없음(옛 규칙 그대로).
|
|
* ========================================================================== */
|
|
|
|
import { toggleButton } from "./B05_Profile_UI_Panel_Fields";
|
|
import {
|
|
pipeRevetChoice,
|
|
setPipeRevetChoice,
|
|
} from "../A00_Common/design/design_structure_pipe_calc";
|
|
|
|
const LINK_TITLE = "옆 측점 흙막이와 횡단 자리를 함께 씀 — 끄면 측점마다 따로 잡음";
|
|
const LINK_LOCKED = "경사를 끈(수평) 동안은 연동을 풀 수 없음";
|
|
const GRADE_TITLE = "종단경사 반영 — 끄면 연장 구간 내내 같은 높이(수평)";
|
|
|
|
/** 한 줄 — `paint` 가 지금 값 · 쓸 수 있는지를 다시 칠하고 줄을 돌려줌(폼 다시 그림마다). */
|
|
export function revetChoiceRow(
|
|
chainageOf: () => number | null,
|
|
/** 쓴 뒤 — 폼을 다시 그려 유입 · 유출 두 줄을 함께 칠함. */
|
|
written: () => void,
|
|
): {
|
|
paint: (hidden: boolean) => HTMLElement;
|
|
} {
|
|
const row = document.createElement("div"); // label 이 아님 — 이름표를 눌러 첫 단추가 눌리지 않게
|
|
row.className = "b05-route__field";
|
|
const caption = document.createElement("span");
|
|
caption.textContent = "옵션";
|
|
const pair = document.createElement("div");
|
|
pair.className = "b05-structure__half-pair";
|
|
const write = (kind: "link" | "grade", on: boolean): void =>
|
|
void setPipeRevetChoice(chainageOf(), kind, on).then(written);
|
|
const link = toggleButton("연동", true, (on) => write("link", on));
|
|
const grade = toggleButton("경사", true, (on) => write("grade", on));
|
|
grade.title = GRADE_TITLE;
|
|
pair.append(link, grade);
|
|
row.append(caption, pair);
|
|
|
|
const set = (button: HTMLButtonElement, value: boolean | null, locked: boolean): void => {
|
|
button.disabled = value === null || locked;
|
|
button.classList.toggle("is-active", value === true);
|
|
button.setAttribute("aria-pressed", String(value === true));
|
|
};
|
|
function paint(hidden: boolean): HTMLElement {
|
|
const now = pipeRevetChoice(chainageOf());
|
|
const locked = now?.grade === false;
|
|
set(link, now?.linked ?? null, locked);
|
|
link.title = locked ? LINK_LOCKED : LINK_TITLE;
|
|
set(grade, now?.grade ?? null, false);
|
|
row.hidden = hidden;
|
|
return row;
|
|
}
|
|
return { paint };
|
|
}
|
|
|
|
/** 세월교 · 박스 흙막이 상자 줄(65-2 · 배관과 같은 줄) — 흙막이를 고른 유입 · 유출 · 추가 흙막이 상자마다 한 줄.
|
|
* 명세 폼 `fields` 자리에 그대로 씀. */
|
|
export function guardChoiceFields(
|
|
chainageOf: () => number | null,
|
|
written: () => void,
|
|
): (c: { id: string }, values: Record<string, string>) => HTMLElement[] {
|
|
const sides = {
|
|
inlet: revetChoiceRow(chainageOf, written),
|
|
outlet: revetChoiceRow(chainageOf, written),
|
|
};
|
|
return (c, values) =>
|
|
c.id === "soil_add"
|
|
? [revetChoiceRow(chainageOf, written).paint(false)]
|
|
: c.id === "inlet" || c.id === "outlet"
|
|
? [sides[c.id].paint(values.structure !== "흙막이")]
|
|
: [];
|
|
}
|