Aislo/A00_Common/map/map_draw_kind.ts

/* =============================================================================
 * map_draw_kind.ts
 * 공용 긋기 방식 칸(PLAN 626-3 · 599-1 · 625-1) — 예정노선(D03) 그리기 칸 · 노드 판 · B05 평면 예정노선 그리기가 같이 씀.
 *   꼴 = 마디 고름 2 × 2(자유지정 · 길이·기울기 고정 / 길이 고정 · 기울기 고정) + 길이 · 기울기 두 열(기울기 아래 ≈ °) ·
 *     방식에 안 쓰는 칸은 숨김(막힘 = 권한 없음만) · 설명 글 없음(요구 463-6).
 *   쓰는 법 = `createDrawKindFields({ value, onChange })` → { root, get, set, setDisabled, setActive }.
 *   켬끔 꼴(589-9) = `onActive` 를 주면 고른 방식을 다시 누르면 풀림 · 방식을 고르면 켜짐 — 켬 = 긋기 시작 · 끔 = 긋기 끝
 *     (지금 켬인지는 `setActive` 로 맞춤 · 노드 판처럼 `onActive` 없는 곳은 늘 하나 고름).
 * ========================================================================== */

import type { UiSize } from "@ui/ui_template_button";
import { createInputField } from "@ui/ui_template_input";
import { createSegment } from "@ui/ui_template_segment";
import { createText } from "@ui/ui_template_text";
import "./map_draw_kind.css";

/** 기울기 % → 각(°) 한 자리 글. */
const slopeDegText1 = (pct: number): string => ((Math.atan(pct / 100) * 180) / Math.PI).toFixed(1);

/** 제약 칸 처음 값 — 길이 = 측점 간격(지식DB 설계제원_총괄) · 기울기 = 간선 20 km/h 일반지형 상한(종단선형). */
export const DRAW_DEFAULT_LENGTH_M = 20;
export const DRAW_DEFAULT_SLOPE_PCT = 9;

export type DrawConstraint = "free" | "length" | "slope" | "both";

export interface DrawKindValue {
  kind: DrawConstraint;
  lengthM: number;
  slopePct: number;
}

export const DRAW_KIND_LABELS: Record<DrawConstraint, string> = {
  free: "자유지정",
  both: "길이·기울기 고정",
  length: "길이 고정",
  slope: "기울기 고정",
};

export interface DrawKindFields {
  root: HTMLElement;
  get: () => DrawKindValue;
  /** 값을 바꿈(onChange 는 안 부름). */
  set: (value: Partial<DrawKindValue>) => void;
  setDisabled: (disabled: boolean) => void;
  /** 켬끔 꼴에서 지금 켬인지 맞춤(onActive 는 안 부름 · 끔 = 모두 풀린 모양). */
  setActive: (on: boolean) => void;
}

/** 긋기 방식 칸 — 고름 · 길이 · 기울기가 바뀔 때마다 `onChange(지금 값)`(빈 · 틀린 수는 칸 오류만). */
export function createDrawKindFields(opts: {
  value: DrawKindValue;
  onChange: (value: DrawKindValue) => void;
  /** 켬끔 꼴 — 방식 고름 = true · 고른 방식 다시 누름 = false. */
  onActive?: (on: boolean) => void;
  size?: UiSize;
}): DrawKindFields {
  const size = opts.size ?? 24;
  let value = { ...opts.value };
  let disabled = false;
  let active = !opts.onActive;
  const changed = (): void => opts.onChange({ ...value });
  const segment = createSegment({
    options: (Object.keys(DRAW_KIND_LABELS) as DrawConstraint[]).map((kind) => ({
      value: kind,
      label: DRAW_KIND_LABELS[kind],
    })),
    value: active ? value.kind : "",
    size,
    columns: 2,
    clearable: !!opts.onActive,
    ariaLabel: "긋기 방식",
    onChange: (next) => {
      if (next === "") return void ((active = false), opts.onActive?.(false));
      value.kind = next as DrawConstraint;
      fieldsState();
      changed();
      if (opts.onActive && !active) ((active = true), opts.onActive(true));
    },
  });
  segment.root.dataset.role = "draw-constraint";
  const lengthField = createInputField({
    label: "길이",
    type: "number",
    value: String(value.lengthM),
    min: 1,
    unit: "m",
    size,
    onInput: (text) => {
      const next = Number(text);
      lengthField.setError(next > 0 ? undefined : "0 보다 큰 수");
      if (!(next > 0)) return;
      value.lengthM = next;
      changed();
    },
  });
  lengthField.input.dataset.role = "draw-length";
  const slopeField = createInputField({
    label: "기울기",
    type: "number",
    value: String(value.slopePct),
    unit: "%",
    size,
    onInput: (text) => {
      const next = Number(text);
      const ok = text.trim() !== "" && Number.isFinite(next);
      slopeField.setError(ok ? undefined : "숫자");
      if (!ok) return;
      value.slopePct = next;
      degText();
      changed();
    },
  });
  slopeField.input.dataset.role = "draw-slope";
  const slopeDegText = createText("", "muted");
  slopeDegText.dataset.role = "draw-slope-deg";
  const degText = (): void => {
    slopeDegText.textContent = `≈ ${slopeDegText1(Math.abs(value.slopePct))}°`;
  };
  const slopeColumn = document.createElement("div");
  slopeColumn.append(slopeField.root, slopeDegText);
  const fields = document.createElement("div");
  fields.className = "map-draw-kind__fields";
  fields.append(lengthField.root, slopeColumn);
  const root = document.createElement("div");
  root.className = "map-draw-kind";
  root.append(segment.root, fields);

  function fieldsState(): void {
    for (const button of segment.root.querySelectorAll("button")) button.disabled = disabled;
    lengthField.input.disabled = slopeField.input.disabled = disabled;
    fields.hidden = value.kind === "free";
    lengthField.root.hidden = value.kind === "slope";
    slopeColumn.hidden = value.kind === "length";
  }
  degText();
  fieldsState();

  return {
    root,
    get: () => ({ ...value }),
    set(next) {
      value = { ...value, ...next };
      segment.set(active ? value.kind : "");
      lengthField.input.value = String(value.lengthM);
      slopeField.input.value = String(value.slopePct);
      lengthField.setError(undefined);
      slopeField.setError(undefined);
      degText();
      fieldsState();
    },
    setDisabled(next) {
      disabled = next;
      fieldsState();
    },
    setActive(on) {
      if (!opts.onActive) return;
      active = on;
      segment.set(active ? value.kind : "");
    },
  };
}