eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(B05): 좌측 패널 · 곡선 이름표 날 칸을 부품 입력 · 고르기로 (PLAN 553-2)

Browse Source 
- 구조물 배치 · 비정규 측점 · 배수 시설 · 설정 칸 17 자리 = ui-input · ui-select(design_structure_form 포함 — M02 도 같은 꼴)
- 페이지 칸 꼴(테두리 · 바탕 · 둥글기 · 여백) 지움 · 높이 = 좌측 패널 양식(26) 그대로 · 고르기 화살표 자리 = 패널 양식 값
- 구조물 조합 이름 칸 = 부품 칸 · 곡선 반지름 · 길이 칸 = 단 24
- 칸 자리 전후 다름 0 · 그림 색 다름 0(밝음 · 어두움)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
eomsangdon
2026-10-26 23:41:58 +09:00
co-authored by Claude Opus 5.5
parent cbfe2b8ac2
commit 4668642d2c
13 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
A00_Common/design/design_structure_form.ts
+2
View File
@@ -136,6 +136,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
): HTMLElement => {
if (item.kind === "select") {
const select = document.createElement("select");
select.className = "ui-select";
const choices = choicesOf(item, values);
const now = values[item.id] ?? "";
const drawn = choices.find((ch) => ch.value === now);
@@ -154,6 +155,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = {
}
if (item.kind === "text") {
const input = document.createElement("input");
input.className = "ui-input";
input.type = "text";
input.maxLength = TEXT_MAX;
input.value = values[item.id] ?? "";
B05_Profile/B05_Profile_UI_Drainage_Facility.ts
+1
View File
@@ -402,6 +402,7 @@ export function createFacilityOptionsForm(
// 바꿔 단다(`setRevetSideLabels`) — 값은 언제나 그 채널 키로 오간다.
// 설치 측 = 필수 칸 — 빈 보기 없음(54-43 · 빈 옛 값 = 양쪽)
const revetSide = document.createElement("select");
revetSide.className = "ui-select";
revetSide.replaceChildren(...["양쪽", "좌", "우"].map((v) => new Option(v, v)));
const revetTopRow = grid(labeled("설치 측", revetSide, "side"));
const revetInlet = createRevetSideGroup(INLET_REVET_KEYS);
B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts
+4
View File
@@ -81,6 +81,7 @@ export function labeled(
export function numberInput(step: string, min = "0", placeholder = ""): HTMLInputElement {
const input = document.createElement("input");
input.className = "ui-input";
input.type = "number";
input.step = step;
input.min = min;
@@ -147,6 +148,7 @@ export function putNumber(target: Record<string, string | number>, key: string,
* 확정으로 굳지 않게. 기본값이 있는 칸은 부르는 쪽이 값을 넣음(그것은 따로 차례). */
export function optionalSelect(choices: ReadonlyArray<string>): HTMLSelectElement {
const element = document.createElement("select");
element.className = "ui-select";
element.replaceChildren(
new Option("", ""),
...choices.map((choice) => new Option(choice, choice)),
@@ -220,6 +222,7 @@ export interface RevetSideGroup {
export function createRevetSideGroup(keys: RevetmentKeys): RevetSideGroup {
const box = group("기슭막이");
const kind = document.createElement("select");
kind.className = "ui-select";
kind.replaceChildren(new Option("기슭막이", "기슭막이"));
// 높이는 기본값 없음 — 설계자 입력(계획홍수위 + 여유고 · 2026-09-14 브레인 판정).
const fields = createRevetmentFields(keys);
@@ -258,6 +261,7 @@ export interface RevetmentFields {
export function createRevetmentFields(keys: RevetmentKeys): RevetmentFields {
// 형태 = 필수 칸 — 빈 보기 없음(54-43 · 값은 부르는 쪽이 정의 기본값으로 채움)
const form = document.createElement("select");
form.className = "ui-select";
form.replaceChildren(...REVET_FORMS.map((value) => new Option(value, value)));
const length = keys.length ? numberInput("0.1", "0") : null;
// 빈 칸 = 그냥 빈 칸(54-43 · 자리표시 글 없음)
B05_Profile/B05_Profile_UI_IrregularStations.ts
+4
View File
@@ -140,6 +140,7 @@ function field(labelText: string, input: HTMLElement): HTMLLabelElement {
function numberInput(step: string, min: string): HTMLInputElement {
const input = document.createElement("input");
input.className = "ui-input";
input.type = "number";
input.step = step;
input.min = min;
@@ -148,6 +149,7 @@ function numberInput(step: string, min: string): HTMLInputElement {
function selectInput(options: ReadonlyArray<string>): HTMLSelectElement {
const select = document.createElement("select");
select.className = "ui-select";
select.replaceChildren(...options.map((value) => new Option(value, value)));
return select;
}
@@ -175,8 +177,10 @@ export function createIrregularStationsSection(
const typeSelect = selectInput(["", ...STRUCTURE_TYPES]);
const pipeTypeSelect = selectInput(PIPE_TYPES);
const diameterSelect = document.createElement("select");
diameterSelect.className = "ui-select";
const widthSelect = selectInput(ESCAPE_ROUTE_WIDTHS_M.map((width) => width.toFixed(1)));
const nameField = document.createElement("input");
nameField.className = "ui-input";
nameField.type = "text";
nameField.placeholder = STRUCTURE_ETC_DEFAULT_NAME;
B05_Profile/B05_Profile_UI_Panel_Fields.ts
+1
View File
@@ -66,6 +66,7 @@ export function numberField(label: string, value = ""): WrappedInput {
const caption = document.createElement("span");
caption.textContent = label;
const input = document.createElement("input");
input.className = "ui-input";
input.type = "number";
input.step = "0.01";
input.value = value;
B05_Profile/B05_Profile_UI_RouteEdit_Label.ts
+2
View File
@@ -181,6 +181,7 @@ export function createCurveLabel(
const radiusField = numberField("반지름");
radiusField.wrapper.className = "b05-routeedit__curve-field";
radiusField.classList.add("b05-routeedit__curve-radius");
radiusField.setAttribute("data-size", "24"); // 부품 입력 단 24(553-2)
radiusField.min = "1";
radiusField.step = "0.5";
const radius = radiusField as HTMLInputElement;
@@ -195,6 +196,7 @@ export function createCurveLabel(
const arcField = numberField("곡선 길이");
arcField.wrapper.className = "b05-routeedit__curve-field";
arcField.classList.add("b05-routeedit__curve-arc");
arcField.setAttribute("data-size", "24");
arcField.min = "1";
arcField.step = "0.5";
const arc = arcField as HTMLInputElement;
B05_Profile/B05_Profile_UI_Structures_Fields.ts
+6 -1
View File
@@ -24,6 +24,7 @@ export function field(labelText: string, input: HTMLElement): HTMLLabelElement {
export function numberInput(step = "0.1", min = "0"): HTMLInputElement {
const input = document.createElement("input");
input.className = "ui-input";
input.type = "number";
input.step = step;
input.min = min;
@@ -32,6 +33,7 @@ export function numberInput(step = "0.1", min = "0"): HTMLInputElement {
export function select(options: ReadonlyArray<[string, string]>): HTMLSelectElement {
const element = document.createElement("select");
element.className = "ui-select";
element.replaceChildren(...options.map(([value, label]) => new Option(label, value)));
return element;
}
@@ -84,7 +86,10 @@ export function optionControl(
}
const element =
option.input === "number" ? numberInput("0.1", "0") : document.createElement("input");
if (option.input !== "number") element.type = "text";
if (option.input !== "number") {
element.type = "text";
element.className = "ui-input";
}
element.value = value;
if (tip) element.title = tip;
const limit = option.warn_above;
B05_Profile/B05_Profile_UI_Structures_Form.ts
+1
View File
@@ -92,6 +92,7 @@ export function buildStructuresForm(options: {
const anchorFields = stationFields("기준 측점", options.getInterval);
const endFields = stationFields("종료 측점", options.getInterval);
const memoField = document.createElement("input");
memoField.className = "ui-input";
memoField.type = "text";
memoField.placeholder = "메모(선택)";
B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts
+2
View File
@@ -168,6 +168,7 @@ export function renderOptionFields(
for (const option of type.options) {
if (!SPLIT_ROLE[option.key] || option.visible !== false) continue;
const input = document.createElement("input");
input.className = "ui-input";
input.value = values[option.key] === undefined ? "" : String(values[option.key]);
all.push({
wrap: document.createElement("div"),
@@ -299,6 +300,7 @@ export function paintStale(
body.className = "b05-structure__grid";
for (const [key, value] of stale) {
const input = document.createElement("input");
input.className = "ui-input";
input.type = "text";
input.readOnly = true;
input.value = String(value);
B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts
+1 -1
View File
@@ -36,7 +36,7 @@ export function buildSummaryRow(): SummaryRow {
const name = document.createElement("input");
name.type = "text";
name.readOnly = true;
name.className = "b05-structure__summary-name";
name.className = "ui-input b05-structure__summary-name";
name.dataset.b05Summary = "pick";
const clear = document.createElement("button");
clear.type = "button";
B05_Profile/B05_Profile_UI_Style.css
+1 -5
View File
@@ -329,16 +329,12 @@ html.is-bm-route .b05-route__view-controls {
font-size: var(--text-caption);
}
/* 칸 = 부품 입력 · 고르기(553-2 · 꼴 · 색은 부품 · 높이는 좌측 패널 양식) — 폭만 */
.b05-route__field input,
.b05-route__field select,
.b05-route__panel-section > select {
width: 100%;
min-width: 0;
padding: var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-surface);
color: var(--color-text-body);
}
/* ─── 비정규 측점(구조물) 섹션 ─────────────────────────────────────────── */
B05_Profile/B05_Profile_UI_Style_RouteEdit.css
+3 -8
View File
@@ -479,15 +479,10 @@
white-space: nowrap;
}
.b05-routeedit__curve-radius,
.b05-routeedit__curve-arc {
/* 반지름 · 곡선 길이 칸 = 부품 입력 단 24(553-2) — 폭 · 오른쪽 맞춤만 */
.b05-routeedit__curve-radius.ui-input,
.b05-routeedit__curve-arc.ui-input {
width: 5rem;
padding: 2px 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-4, 4px);
background: var(--color-surface);
color: var(--color-text-body);
font: inherit;
text-align: right;
}
B05_Profile/B05_Profile_UI_Style_Structures.css
+9
View File
@@ -361,6 +361,15 @@
height: var(--b05-control-h);
padding: 0 6px;
font-size: var(--text-caption);
line-height: normal;
}
/* 부품 고르기 화살표 자리 — 좌측 패널 양식(.ui-panel-form select.ui-select)과 같은 값 */
.b05-structure-section select.ui-select,
.b05-drainage__facility select.ui-select {
padding-right: 24px;
background-position: right 6px center;
background-size: 12px;
}
/* 스텝 묶음과 그 안의 버튼·숫자칸도 같은 높이로 선다. */