Files
Aislo/B05_Profile/B05_Profile_UI_Drainage_Revet_Choice.ts
T
eomsangdonandClaude Opus 5.5 d7faee1cd2 feat(structure): 65-1~5 세월교 · 박스암거 유입 · 유출 흙막이 양식 공통 · 없음 = 램프 뺌 · 세월교 기본값 · 물넘이 월류 폭 · 높이
- 흙막이 양식 한 벌(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
2026-10-06 23:09:38 +09:00

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 !== "흙막이")]
: [];
}