Aislo/B07_DesignDetail/B07_DesignDetail_UI_GuideToggle.ts

/* =============================================================================
 * B07_DesignDetail_UI_GuideToggle.ts
 * 횡단 장 안내선 보이기 / 숨기기 단추(PLAN 180-3) — 좌측 「횡단도」 묶음 배치 칸 줄에 붙음.
 *
 *   끄는 것 = 화면 전용 안내선 둘(붉은 넘침 칸 틀 + 파란 점선 작도 영역) · 인쇄되는 칸선은 그대로
 *   상태 = 이 화면을 쓰는 동안만(저장 안 함) · 장을 바꾸거나 화면을 다시 세워도 이어짐(모듈 값)
 *   숨김이면 「n 칸 넘침」 토스트도 안 띄움 · CAD 에는 `cad.setGuideVisible` 로 알림
 * ========================================================================== */

import { createButton } from "@ui/ui_template_elements";

/** 안내선 보임 — 모듈 값(화면 다시 세워도 유지 · 새로 고침하면 보임으로) */
let shown = true;

export const guideShown = (): boolean => shown;

const labelOf = (visible: boolean): string => (visible ? "안내선 숨기기" : "안내선 보이기");

/**
 * 단추 하나 — 누르면 보임 ↔ 숨김 · `apply(보임)` 로 CAD 에 알림.
 * 장이 아닌 도면이면 꺼짐 — 부르는 쪽이 `button.disabled` 로 정함.
 */
export function buildGuideToggle(apply: (visible: boolean) => void): HTMLButtonElement {
  const button = createButton({
    label: labelOf(shown),
    variant: "ghost",
    size: "sm",
    onClick: () => {
      shown = !shown;
      paint();
      apply(shown);
    },
  });
  const paint = (): void => {
    const label = button.children[button.children.length - 1];
    if (label) label.textContent = labelOf(shown);
    button.setAttribute("aria-pressed", String(!shown));
    button.title = shown
      ? "점선 작도 영역 · 붉은 넘침 틀을 화면에서 숨김(인쇄 칸선은 그대로)"
      : "숨긴 점선 작도 영역 · 붉은 넘침 틀을 다시 보임";
  };
  paint();
  return button;
}