diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css index 3ac3c5845..18a1b25f5 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.css @@ -143,3 +143,9 @@ max-height: 24vh; overflow: auto; } + +.m02-dfip__unitfield { + display: flex; + gap: var(--spacing-8); + align-items: center; +} diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts index e268be002..3fb3a69c5 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel.ts @@ -38,6 +38,7 @@ import { type M01Row, } from "./M02_DF_InputPanel_Build"; import { renderLogicInput } from "./M02_DF_InputPanel_Logic"; +import { NO_UNIT, createUnitPick } from "./M02_DF_UnitPick"; import { renderMaterial } from "./M02_DF_InputPanel_Material"; import { renderTablePick } from "./M02_DF_InputPanel_Table"; import { renderVariables } from "./M02_DF_InputPanel_Vars"; @@ -417,7 +418,18 @@ function newForm( ): HTMLElement { const name = createInputField({ type: "text", label: t("NewName"), compact: true }); const spec = createInputField({ type: "text", label: t("NewSpec"), compact: true }); - const unit = createInputField({ type: "text", label: t("NewUnit"), compact: true }); + let unitValue = ""; + const unit = el("div", { className: "m02-dfip__unitfield" }); + const drawUnit = (): void => + unit.replaceChildren( + el("span", { className: "m02-dfip__muted", text: t("NewUnit") }), + createUnitPick({ + value: unitValue || NO_UNIT, + ariaLabel: t("NewUnit"), + onPick: (u) => ((unitValue = u === NO_UNIT ? "" : u), drawUnit()), + }), + ); + drawUnit(); const value = createInputField({ type: "text", label: t("NewValue"), compact: true }); const go = createButton({ label: t("Make"), @@ -432,7 +444,7 @@ function newForm( group, name: name.input.value.trim(), spec: spec.input.value.trim(), - unit: unit.input.value.trim(), + unit: unitValue, value: n, }).then( (made) => { @@ -455,14 +467,7 @@ function newForm( }); const d = el("details", { className: "m02-dfip__new", - children: [ - el("summary", { text: t("NewHead") }), - name.root, - spec.root, - unit.root, - value.root, - go, - ], + children: [el("summary", { text: t("NewHead") }), name.root, spec.root, unit, value.root, go], }); return d; } diff --git a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts index 3c0d9cd0f..555ad4a9d 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_InputPanel_Vars.ts @@ -7,6 +7,7 @@ import { currentLanguageIndex } from "@ui/ui_template_locale"; import { createButton, createInputField, createSelectField, el } from "@ui/ui_template_elements"; import type { CfLogic, CfVariable } from "./M02_DF_Model"; +import { NO_UNIT, createUnitPick } from "./M02_DF_UnitPick"; import { checkVariable, putVariable, removeVariable } from "./M02_DF_InputPanel_Build"; const TEXT = { @@ -84,13 +85,19 @@ export function renderVariables( compact: true, onChange: () => paint(), }); - const unit = createInputField({ - type: "text", - label: t("Unit"), - value: cur?.unit ?? "", - placeholder: "예: ㎡", - compact: true, - }); + // 단위 = 고르기만(표준 단위 목록) — 손글 안 받음 + let unitValue = cur?.unit ?? ""; + const unit = el("div", { className: "m02-dfip__unitfield" }); + const drawUnit = (): void => + unit.replaceChildren( + el("span", { className: "m02-dfip__muted", text: t("Unit") }), + createUnitPick({ + value: unitValue || NO_UNIT, + ariaLabel: t("Unit"), + onPick: (u) => ((unitValue = u === NO_UNIT ? "" : u), drawUnit()), + }), + ); + drawUnit(); const lo = createInputField({ type: "text", label: t("Min"), @@ -129,7 +136,7 @@ export function renderVariables( const v: CfVariable = { name: name.input.value.trim(), type: ty, - unit: unit.input.value.trim(), + unit: unitValue, example: ex === "" ? null : ty === "number" ? (numOf(ex) ?? ex) : ex, ...(ty === "number" && numOf(lo.input.value) !== null && numOf(hi.input.value) !== null ? { range: [Number(lo.input.value), Number(hi.input.value)] as [number, number] } @@ -164,7 +171,7 @@ export function renderVariables( children: [ name.root, type.root, - unit.root, + unit, extra, example.root, el("div", { className: "m02-dfip__chips", children: cancel ? [ok, cancel] : [ok] }),