Aislo/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts

/* =============================================================================
 * M02_MasterTemplete_Drawing.ts
 * M02 도면 양식 편집 부품 — 웹캐드를 도각 편집 모드로 띄워 양식을 만들고 고친다 (PLAN 10-3).
 *
 * 계약(`tmp/M02_분석/6_계약.md` 화면 부품) — `mountDrawingTemplate(칸, 문서, {onSave, readOnly})`
 * → `{getDoc, destroy}`. 페이지(sub1)가 메인 칸에 붙인다.
 * `getDoc()` 은 CAD iframe 에서 편집본을 받아 오므로 **Promise** 다 — `await` 로 받는다.
 *
 * 양식 문서 = openwebcad 도면 JSON(`entities` · `layers`) + 양식 칸(`format` · `source` ·
 * `drawing_area`). CAD 는 양식 칸을 모르므로 돌려줄 때 원래 칸 위에 편집본을 얹는다.
 * ========================================================================== */

import "./M02_MasterTemplete_Drawing.css";
import { API_BASE_URL } from "@config/config_frontend";
import { createCadHost, type CadHostDrawing } from "@ui/cad_host/cad_host";
import { createButton, createInputField, showToast } from "@ui/ui_template_elements";

/** 도면 양식 문서 — 작도 영역은 [x0, y0, x1, y1] (양식 좌표 mm). */
export interface DrawingTemplateDoc extends CadHostDrawing {
  format?: number;
  source?: string;
  drawing_area?: [number, number, number, number];
  [key: string]: unknown;
}

export interface DrawingTemplateOptions {
  /** 쓰지 않음 — 저장은 페이지 머리 [저장] 한 곳(`getDoc()` 으로 편집본을 가져감 · 판 · 409 흐름). */
  onSave?: (doc: DrawingTemplateDoc) => void | Promise<void>;
  /** 보기 전용 — CAD 그리기·수정 · 작도 영역 · 불러오기가 막힌다. */
  readOnly?: boolean;
  /** 양식 이름 — CAD 자동백업 칸을 양식마다 나눈다(B07 도면 백업과도 안 겹침). */
  name?: string;
  /** 양식 층 — 같은 이름도 층마다 백업 칸이 갈린다(`m02:층:이름`). */
  layer?: string;
  /** 프로젝트 층이면 프로젝트 id — 칸이 `m02:project:프로젝트id:이름` 이 된다. */
  projectId?: string | null;
}

const RECOVERY_PREFIX = "OPEN_WEB_CAD__RECOVERY__";

/** 자동백업 칸 이름 — 층(과 프로젝트)을 붙여 같은 이름의 양식끼리 안 겹치게 한다. */
function recoveryScopeOf(options: DrawingTemplateOptions): string {
  const name = options.name ?? "drawing";
  if (!options.layer) return `m02:${name}`;
  const project = options.layer === "project" ? `:${options.projectId ?? ""}` : "";
  return `m02:${options.layer}${project}:${name}`;
}

/** 층 없는 옛 칸(`m02:이름`)을 새 칸으로 한 번 옮기고 지운다 — 새 칸에 이미 있으면 그대로 두고 지움. */
function migrateOldRecovery(options: DrawingTemplateOptions, scope: string): void {
  const old = `${RECOVERY_PREFIX}m02:${options.name ?? "drawing"}`;
  if (!options.layer || old === `${RECOVERY_PREFIX}${scope}`) return;
  try {
    const value = localStorage.getItem(old);
    if (value === null) return;
    if (localStorage.getItem(`${RECOVERY_PREFIX}${scope}`) === null) {
      localStorage.setItem(`${RECOVERY_PREFIX}${scope}`, value);
    }
    localStorage.removeItem(old);
  } catch {
    // 저장소를 못 써도 편집은 됨
  }
}

export interface DrawingTemplateHandle {
  getDoc: () => Promise<DrawingTemplateDoc>;
  destroy: () => void;
}

/** 작도 영역 칸이 없는 양식이 쓰는 값 — 서버 `Engine_Template._A1_INNER` 와 같다. */
const DEFAULT_AREA: [number, number, number, number] = [42, 47, 812, 567];
const AREA_LABELS = ["왼쪽 x", "아래 y", "오른쪽 x", "위 y"];

interface DrawingField {
  key: string;
  source: string;
  label: string;
}

async function fetchDrawingFields(): Promise<DrawingField[]> {
  const response = await fetch(`${API_BASE_URL}/m02/drawing-fields`, { credentials: "include" });
  const payload = (await response.json()) as { fields?: DrawingField[]; message?: string };
  if (!response.ok) throw new Error(payload.message ?? `HTTP ${response.status}`);
  return payload.fields ?? [];
}

async function importDrawingFile(
  file: File,
): Promise<{ drawing: DrawingTemplateDoc; entity_count: number }> {
  const form = new FormData();
  form.append("file", file);
  const response = await fetch(`${API_BASE_URL}/m02/drawing-import`, {
    method: "POST",
    credentials: "include",
    body: form,
  });
  const payload = (await response.json()) as {
    drawing: DrawingTemplateDoc;
    entity_count: number;
    message?: string;
  };
  if (!response.ok) throw new Error(payload.message ?? `HTTP ${response.status}`);
  return payload;
}

export function mountDrawingTemplate(
  container: HTMLElement,
  doc: DrawingTemplateDoc,
  options: DrawingTemplateOptions = {},
): DrawingTemplateHandle {
  const readOnly = options.readOnly === true;
  const recoveryScope = recoveryScopeOf(options);
  migrateOldRecovery(options, recoveryScope);
  let base: DrawingTemplateDoc = doc;

  const root = document.createElement("div");
  root.className = "m02-drawing";
  const toolbar = document.createElement("div");
  toolbar.className = "m02-drawing__toolbar";

  // 작도 영역 — 도면 내용이 이 칸 한가운데에 놓인다.
  const area = document.createElement("div");
  area.className = "m02-drawing__area";
  const areaTitle = document.createElement("span");
  areaTitle.className = "m02-drawing__title";
  areaTitle.textContent = "작도 영역";
  const start = doc.drawing_area ?? DEFAULT_AREA;
  const areaInputs = AREA_LABELS.map((label, index) => {
    const field = createInputField({ label, type: "number", value: String(start[index]) });
    field.input.disabled = readOnly;
    return field;
  });
  area.append(areaTitle, ...areaInputs.map((field) => field.root));

  const readArea = (): [number, number, number, number] | null => {
    const values = areaInputs.map((field) => Number(field.input.value));
    const valid = values.every(Number.isFinite) && values[0] < values[2] && values[1] < values[3];
    areaInputs.forEach((field) => field.setError(valid ? undefined : "왼쪽<오른쪽 · 아래<위"));
    return valid ? (values as [number, number, number, number]) : null;
  };

  // 자리표 키 — 누르면 `{{키}}` 를 복사한다. 도각 글자에 붙여 넣으면 그릴 때 값이 채워진다.
  const fields = document.createElement("div");
  fields.className = "m02-drawing__fields";
  const fieldsTitle = document.createElement("span");
  fieldsTitle.className = "m02-drawing__title";
  fieldsTitle.textContent = "자리표";
  fields.append(fieldsTitle);
  void fetchDrawingFields()
    .then((list) => {
      for (const field of list) {
        const chip = document.createElement("button");
        chip.type = "button";
        chip.className = "m02-drawing__field";
        chip.dataset.source = field.source;
        chip.textContent = `{{${field.key}}}`;
        chip.title = `${field.label} (${field.source}) — 눌러 복사`;
        chip.addEventListener("click", () => {
          void navigator.clipboard
            ?.writeText(`{{${field.key}}}`)
            .then(() => showToast(`{{${field.key}}} 를 복사했습니다.`, "success"));
        });
        fields.append(chip);
      }
    })
    .catch((error) =>
      showToast(error instanceof Error ? error.message : "자리표 목록을 받지 못했습니다.", "error"),
    );

  const cad = createCadHost<DrawingTemplateDoc>({ title: "도면 양식" });
  const load = (drawing: DrawingTemplateDoc): void => {
    cad.beginLoading();
    cad.load(
      drawing,
      null,
      !readOnly,
      {},
      { recoveryScope, readOnly, hostTitle: "도면 양식 편집" },
    );
  };

  const actions = document.createElement("div");
  actions.className = "m02-drawing__actions";
  if (!readOnly) {
    const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.accept = ".dxf,.dwg";
    fileInput.hidden = true;
    fileInput.addEventListener("change", () => {
      const file = fileInput.files?.[0];
      fileInput.value = "";
      if (!file) return;
      importButton.disabled = true;
      importDrawingFile(file)
        .then((response) => {
          // 불러온 도각은 아직 저장하지 않는다 — 자리표를 놓고 [저장]을 눌러야 양식이 된다.
          load(response.drawing);
          showToast(`도형 ${response.entity_count}개를 불러왔습니다.`, "success");
        })
        .catch((error) =>
          showToast(
            error instanceof Error ? error.message : "도각 파일을 불러오지 못했습니다.",
            "error",
          ),
        )
        .finally(() => (importButton.disabled = false));
    });
    const importButton = createButton({
      label: "파일 불러오기",
      variant: "ghost",
      onClick: () => fileInput.click(),
    });
    actions.append(importButton, fileInput);
  }

  const getDoc = async (): Promise<DrawingTemplateDoc> => {
    const { drawing } = await cad.requestSave();
    const drawingArea = readArea();
    if (!drawingArea) throw new Error("작도 영역 값이 올바르지 않습니다.");
    base = { ...base, ...drawing, drawing_area: drawingArea };
    return base;
  };

  toolbar.append(area, fields, actions);
  root.append(toolbar, cad.element);
  container.append(root);
  load(doc);

  return {
    getDoc,
    destroy: () => {
      cad.destroy();
      root.remove();
    },
  };
}