Aislo/M02_MasterTemplete/M02_MasterTemplete_Labor_Diagram.ts

/* =============================================================================
 * M02_MasterTemplete_Labor_Diagram.ts
 * 일위대가 조합 다이어그램(PLAN 37) — 왼쪽 로직별 넣을 값 묶음 → 가운데 로직 카드 → 오른쪽 비용 구분 칸(노무비 · 재료비 · 경비 · 값)
 * 조합은 계산하지 않음 — 미리 보기 결과를 로직마다 · 비용 구분마다 보여 주기만(고치기 없음 · 흐름도와 다른 모양 · 색)
 * 값은 미리 보기와 한 벌(`buildDiagramData` 로 미리 보기가 넘김) · 글 [한, 영] 짝은 아래 TEXT
 * ========================================================================== */

import { currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, el } from "@ui/ui_template_elements";
import { formatMoney } from "../M01_MasterData/M01_MasterData_UI_Logic_Money";
import "./M02_MasterTemplete_Labor_Diagram.css";

const TEXT = {
  Inputs: ["넣을 값", "Inputs"],
  Logic: ["일위대가", "Unit price"],
  Sum: ["모은 값", "Total"],
  Empty: ["값 없음", "no value"],
  Wait: ["계산 전", "not calculated"],
  Stop: ["멈춤", "stopped"],
  Zoom_In: ["크게", "Zoom in"],
  Zoom_Out: ["작게", "Zoom out"],
  Fit: ["한눈에", "Fit"],
  Hint: [
    "가운데 단추 또는 Space + 끌기로 판 옮김 · Ctrl + 휠로 확대",
    "Middle button or Space + drag to move · Ctrl + wheel to zoom",
  ],
  None: ["담은 로직이 없음", "No logics yet"],
  Open: [
    "누르면 이 로직을 단가산출 로직 화면에서 엶",
    "Open this logic in the unit-price logic screen",
  ],
  Goto: ["미리 보기 입력 칸으로 감", "Go to this input in the preview"],
  Same: ["같은 이름의 넣을 값", "Same input name"],
  Won: ["원", "KRW"],
  Title: ["다이어그램", "Diagram"],
} as const;

const td = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];

/** 상세의 접는 칸 제목 */
export const diagramTitle = (): string => td("Title");

export const COST_BINS = ["노무비", "재료비", "경비"] as const;
type Cost = (typeof COST_BINS)[number];

export interface DiagramInput {
  name: string;
  unit: string;
  /** 미리 보기에 넣은 값 — 빈 글 = 값 없음 */
  value: string;
}

/** 로직 하나의 미리 보기 결과 — 돈이면 비용 구분별 · 값이면 값 하나 · 멈추면 까닭 · 아직이면 null */
export type DiagramOut =
  | { 노무비: number; 재료비: number; 경비: number; 계: number }
  | { 값: number }
  | { 멈춤: string }
  | null;

export interface DiagramLogic {
  key: string;
  name: string;
  /** 결과 단위 */
  unit: string;
  inputs: DiagramInput[];
  out: DiagramOut;
}

export interface DiagramData {
  logics: DiagramLogic[];
}

export interface DiagramHandlers {
  /** 로직 카드 누름 — 단가산출 로직 화면에서 엶 */
  openLogic(key: string): void;
  /** 넣을 값 알약 누름 — 미리 보기 그 입력 칸으로 */
  focusInput(key: string, name: string): void;
}

/* ── 값 만들기 (미리 보기가 부름 · DOM 없음) ──────────────────────────────── */

interface PreviewLineLike {
  ok: boolean;
  까닭?: string;
  갈래?: string;
  결과?: number;
  노무비?: number;
  재료비?: number;
  경비?: number;
  계?: number;
}

export interface DiagramSource {
  /** 담은 차례대로 */
  rows: { key: string; name: string; unit: string; inputs: { name: string; unit: string }[] }[];
  /** 로직 키 → 입력 이름 → 넣은 값 */
  values: Record<string, Record<string, string>>;
  /** 서버 미리 보기 줄(담은 차례) · 아직 안 셌으면 null */
  lines: PreviewLineLike[] | null;
}

const outOf = (l: PreviewLineLike | undefined): DiagramOut => {
  if (!l) return null;
  if (!l.ok) return { 멈춤: l.까닭 ?? "" };
  if (l.갈래 === "결과") return { 값: l.결과 ?? 0 };
  return { 노무비: l.노무비 ?? 0, 재료비: l.재료비 ?? 0, 경비: l.경비 ?? 0, 계: l.계 ?? 0 };
};

export function buildDiagramData(src: DiagramSource): DiagramData {
  return {
    logics: src.rows.map((r, i) => ({
      key: r.key,
      name: r.name,
      unit: r.unit,
      inputs: r.inputs.map((x) => ({
        name: x.name,
        unit: x.unit,
        value: src.values[r.key]?.[x.name] ?? "",
      })),
      out: outOf(src.lines?.[i]),
    })),
  };
}

/* ── 글 ─────────────────────────────────────────────────────────────────── */

const num = (v: number): string =>
  Number(v.toPrecision(12)).toLocaleString("ko-KR", { maximumFractionDigits: 6 });

const isMoney = (o: DiagramOut): o is Extract<DiagramOut, { 계: number }> => !!o && "계" in o;
const isValue = (o: DiagramOut): o is { 값: number } => !!o && "값" in o;
const isStop = (o: DiagramOut): o is { 멈춤: string } => !!o && "멈춤" in o;

const amountOf = (o: DiagramOut, c: Cost): number => (isMoney(o) ? o[c] : 0);

function summary(l: DiagramLogic): string {
  if (isMoney(l.out)) return `${td("Sum")} ${formatMoney(l.out.계)} ${td("Won")}`;
  if (isValue(l.out)) return `${num(l.out.값)} ${l.unit}`.trim();
  if (isStop(l.out)) return `${td("Stop")}: ${l.out.멈춤}`;
  return td("Wait");
}

/* ── 판 (옮기기 · 확대 · 한눈에) ─────────────────────────────────────────── */

interface View {
  x: number;
  y: number;
  zoom: number;
  fitted: boolean;
}

interface State {
  view: View;
  viewport: HTMLElement;
  world: HTMLElement;
  label: HTMLElement;
  space: boolean;
  hover: boolean;
}

const states = new WeakMap<HTMLElement, State>();
const ZOOM_MIN = 0.2;
const ZOOM_MAX = 2.5;

function applyView(st: State): void {
  const { x, y, zoom } = st.view;
  st.world.style.transform = `translate(${x}px, ${y}px) scale(${zoom})`;
  st.label.textContent = `${Math.round(zoom * 100)}%`;
}

function zoomAt(st: State, factor: number, px?: number, py?: number): void {
  const v = st.view;
  const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, v.zoom * factor));
  const cx = px ?? st.viewport.clientWidth / 2;
  const cy = py ?? st.viewport.clientHeight / 2;
  v.x = cx - ((cx - v.x) / v.zoom) * next;
  v.y = cy - ((cy - v.y) / v.zoom) * next;
  v.zoom = next;
  applyView(st);
}

/** whole = 한눈에(통째로 보임) · 아니면 처음 — 너비에 맞추고 위에서 시작(글자가 너무 작아지지 않게) */
function fit(st: State, whole = true): void {
  const w = st.world.offsetWidth;
  const h = st.world.offsetHeight;
  if (!w || !h) return;
  const z = Math.min(
    ZOOM_MAX,
    Math.max(
      whole ? ZOOM_MIN : 0.5,
      Math.min(st.viewport.clientWidth / w, whole ? st.viewport.clientHeight / h : Infinity, 1),
    ),
  );
  st.view = {
    zoom: z,
    x: (st.viewport.clientWidth - w * z) / 2,
    y: whole ? Math.max(0, (st.viewport.clientHeight - h * z) / 2) : 0,
    fitted: true,
  };
  applyView(st);
}

function mountShell(host: HTMLElement): State {
  const world = el("div", { className: "m02-labordg__world" });
  const viewport = el("div", {
    className: "m02-labordg__viewport",
    attrs: { tabindex: "0" },
    children: [world],
  });
  const label = el("span", { className: "m02-labordg__zoom" });
  const st: State = {
    view: { x: 0, y: 0, zoom: 1, fitted: false },
    viewport,
    world,
    label,
    space: false,
    hover: false,
  };
  host.replaceChildren(
    el("div", {
      className: "m02-labordg__bar",
      children: [
        createButton({
          label: td("Zoom_Out"),
          variant: "ghost",
          size: "sm",
          onClick: () => zoomAt(st, 1 / 1.2),
        }),
        createButton({
          label: td("Zoom_In"),
          variant: "ghost",
          size: "sm",
          onClick: () => zoomAt(st, 1.2),
        }),
        createButton({
          label: td("Fit"),
          variant: "ghost",
          size: "sm",
          onClick: () => fit(st, true),
        }),
        label,
        el("span", { className: "m02-labordg__hint", text: td("Hint") }),
      ],
    }),
    viewport,
  );
  // 판 옮기기 — 가운데 단추 · Space + 왼쪽 끌기
  viewport.addEventListener("pointerdown", (e) => {
    if (!(e.button === 1 || (e.button === 0 && st.space))) return;
    e.preventDefault();
    try {
      viewport.setPointerCapture(e.pointerId);
    } catch {
      /* 잡지 못해도 옮기기는 됨 */
    }
    const from = { x: e.clientX - st.view.x, y: e.clientY - st.view.y };
    viewport.classList.add("is-panning");
    const move = (m: PointerEvent): void => {
      st.view.x = m.clientX - from.x;
      st.view.y = m.clientY - from.y;
      applyView(st);
    };
    const up = (): void => {
      viewport.classList.remove("is-panning");
      viewport.removeEventListener("pointermove", move);
      viewport.removeEventListener("pointerup", up);
      viewport.removeEventListener("pointercancel", up);
    };
    viewport.addEventListener("pointermove", move);
    viewport.addEventListener("pointerup", up);
    viewport.addEventListener("pointercancel", up);
  });
  viewport.addEventListener(
    "wheel",
    (e) => {
      if (!e.ctrlKey) return;
      e.preventDefault();
      const r = viewport.getBoundingClientRect();
      zoomAt(st, e.deltaY < 0 ? 1.1 : 1 / 1.1, e.clientX - r.left, e.clientY - r.top);
    },
    { passive: false },
  );
  new ResizeObserver(() => {
    if (!st.view.fitted && world.offsetWidth) fit(st, false);
  }).observe(viewport);
  viewport.addEventListener("pointerenter", () => (st.hover = true));
  viewport.addEventListener("pointerleave", () => (st.hover = false));
  const keys = (e: KeyboardEvent, on: boolean): void => {
    if (e.code !== "Space" || !st.hover || !host.isConnected) return;
    st.space = on;
    viewport.classList.toggle("is-space", on);
    e.preventDefault();
  };
  window.addEventListener("keydown", (e) => keys(e, true));
  window.addEventListener("keyup", (e) => keys(e, false));
  // 같은 이름 넣을 값 — 마우스를 올리면 같은 이름끼리 진하게
  const hot = (e: Event, on: boolean): void => {
    const name = (e.target as HTMLElement).closest<HTMLElement>("[data-name]")?.dataset.name;
    if (name === undefined) return;
    for (const n of world.querySelectorAll<Element>(`[data-name]`))
      if ((n as HTMLElement).dataset.name === name) n.classList.toggle("is-hot", on);
  };
  world.addEventListener("pointerover", (e) => hot(e, true));
  world.addEventListener("pointerout", (e) => hot(e, false));
  return st;
}

/* ── 그리기 ─────────────────────────────────────────────────────────────── */

const SVG = "http://www.w3.org/2000/svg";

function path(d: string, cls: string, name?: string): SVGPathElement {
  const p = document.createElementNS(SVG, "path");
  p.setAttribute("d", d);
  p.setAttribute("class", cls);
  if (name !== undefined) p.dataset.name = name;
  return p;
}

/** 다이어그램 그리기 — 칸은 고정 세 줄(넣을 값 · 로직 카드 · 비용 구분) · 자리는 저절로 */
export function renderComboDiagram(
  host: HTMLElement,
  data: DiagramData,
  on: DiagramHandlers,
): void {
  host.classList.add("m02-labordg");
  let st = states.get(host);
  if (!st || !st.viewport.isConnected) {
    st = mountShell(host);
    states.set(host, st);
  }
  const { world } = st;
  if (!data.logics.length) {
    world.replaceChildren(el("p", { className: "m02-labordg__none", text: td("None") }));
    return;
  }
  const hasValue = data.logics.some((l) => isValue(l.out));
  const bins: (Cost | "값")[] = [...COST_BINS, ...(hasValue ? (["값"] as const) : [])];
  const grid = el("div", { className: "m02-labordg__grid" });
  grid.style.gridTemplateColumns = `max-content 4.5rem 15rem 5rem repeat(${bins.length}, 11rem)`;
  const head = (text: string, col: number, cls = ""): HTMLElement =>
    el("div", {
      className: `m02-labordg__head ${cls}`,
      text,
      attrs: { style: `grid-column:${col};grid-row:1` },
    });
  grid.append(head(td("Inputs"), 1), head(td("Logic"), 3));
  bins.forEach((b, i) => grid.append(head(b, 5 + i, `is-bin is-${b}`)));

  const sums = new Map<string, number>(bins.map((b) => [b, 0]));
  const cards: HTMLElement[] = [];
  const groups: HTMLElement[] = [];
  const cells: HTMLElement[][] = [];
  data.logics.forEach((l, i) => {
    const row = i + 2;
    const group = el("div", {
      className: "m02-labordg__group",
      attrs: { style: `grid-column:1;grid-row:${row}` },
      children: l.inputs.length
        ? l.inputs.map((x) => {
            const empty = x.value.trim() === "";
            const pill = el("button", {
              className: `m02-labordg__pill${empty ? " is-empty" : ""}`,
              attrs: { type: "button", "data-name": x.name, title: td("Goto") },
              children: [
                el("span", { className: "m02-labordg__pill-name", text: x.name }),
                el("span", {
                  className: "m02-labordg__pill-value",
                  text: empty ? td("Empty") : `${x.value}${x.unit ? ` ${x.unit}` : ""}`,
                }),
              ],
            });
            pill.addEventListener("click", () => on.focusInput(l.key, x.name));
            return pill;
          })
        : [],
    });
    const card = el("button", {
      className: `m02-labordg__card${isStop(l.out) ? " is-stop" : ""}`,
      attrs: { type: "button", style: `grid-column:3;grid-row:${row}`, title: td("Open") },
      children: [
        el("span", { className: "m02-labordg__card-key", text: l.key }),
        el("strong", { className: "m02-labordg__card-name", text: l.name }),
        el("span", { className: "m02-labordg__card-unit", text: l.unit }),
        el("span", { className: "m02-labordg__card-out", text: summary(l) }),
      ],
    });
    card.addEventListener("click", () => on.openLogic(l.key));
    const mine = bins.map((b, c) => {
      const amount = b === "값" ? (isValue(l.out) ? l.out.값 : 0) : amountOf(l.out, b);
      sums.set(b, (sums.get(b) ?? 0) + (b === "값" ? 0 : amount));
      const shown =
        b === "값"
          ? isValue(l.out)
            ? `${num(l.out.값)} ${l.unit}`.trim()
            : ""
          : formatMoney(amount);
      return el("div", {
        className: `m02-labordg__cell is-bin is-${b}${amount === 0 ? " is-zero" : ""}`,
        attrs: { style: `grid-column:${5 + c};grid-row:${row}` },
        children: [
          el("span", { className: "m02-labordg__cell-name", text: l.name }),
          el("span", { className: "m02-labordg__cell-amount", text: shown }),
        ],
      });
    });
    groups.push(group);
    cards.push(card);
    cells.push(mine);
    grid.append(group, card, ...mine);
  });
  const total = data.logics.length + 2;
  bins.forEach((b, i) =>
    grid.append(
      el("div", {
        className: `m02-labordg__cell is-bin is-${b} is-total`,
        attrs: { style: `grid-column:${5 + i};grid-row:${total}` },
        children: [
          el("span", { className: "m02-labordg__cell-name", text: td("Sum") }),
          el("span", {
            className: "m02-labordg__cell-amount",
            text: b === "값" ? "" : formatMoney(sums.get(b) ?? 0),
          }),
        ],
      }),
    ),
  );

  const svg = document.createElementNS(SVG, "svg");
  svg.setAttribute("class", "m02-labordg__lines");
  world.replaceChildren(svg, grid);

  // 선 — 칸 자리를 재서 그림(판 확대와 상관없이 판 안 좌표)
  const scale = st.view.zoom || 1;
  const base = grid.getBoundingClientRect();
  const at = (e: Element): { l: number; r: number; t: number; b: number; m: number } => {
    const r = e.getBoundingClientRect();
    const t = (r.top - base.top) / scale;
    const h = r.height / scale;
    return {
      l: (r.left - base.left) / scale,
      r: (r.right - base.left) / scale,
      t,
      b: t + h,
      m: t + h / 2,
    };
  };
  svg.setAttribute("width", String(grid.offsetWidth));
  svg.setAttribute("height", String(grid.offsetHeight));
  const curve = (x1: number, y1: number, x2: number, y2: number): string => {
    const dx = (x2 - x1) / 2;
    return `M${x1},${y1} C${x1 + dx},${y1} ${x2 - dx},${y2} ${x2},${y2}`;
  };
  data.logics.forEach((_l, i) => {
    const c = at(cards[i]);
    const g = at(groups[i]);
    svg.append(path(curve(g.r, c.m, c.l, c.m), "m02-labordg__wire"));
    cells[i].forEach((cell, k) => {
      const t = at(cell);
      const zero = cell.classList.contains("is-zero");
      svg.append(
        path(curve(c.r, c.m, t.l, t.m), `m02-labordg__out is-${bins[k]}${zero ? " is-zero" : ""}`),
      );
    });
  });
  // 같은 이름 넣을 값 — 점선(검사 없음 · 보이기만)
  const byName = new Map<string, Element[]>();
  grid.querySelectorAll(".m02-labordg__pill").forEach((p) => {
    const name = (p as HTMLElement).dataset.name ?? "";
    byName.set(name, [...(byName.get(name) ?? []), p]);
  });
  let lane = 0;
  for (const [name, list] of byName) {
    if (list.length < 2) continue;
    lane++;
    const rects = list.map(at);
    const x = Math.min(...rects.map((r) => r.l)) - 8 - lane * 6;
    for (let k = 1; k < rects.length; k++) {
      const a = rects[k - 1];
      const b = rects[k];
      svg.append(
        path(`M${a.l},${a.m} C${x},${a.m} ${x},${b.m} ${b.l},${b.m}`, "m02-labordg__same", name),
      );
    }
  }
  svg.style.overflow = "visible";
  // 처음에는 너비에 맞춤 — 아직 안 보이는 칸(크기 0)이면 보이는 때 맞춤
  if (!st.view.fitted) fit(st, false);
  else applyView(st);
}