Aislo/B06_Section/B06_Section_UI_Cross_Detail_Select.ts

/* =============================================================================
 * B06_Section_UI_Cross_Detail_Select.ts
 * [상세] 그림 선 고르기(209-1) — 설계선 · 구조물 선 · 원지반선 · 사토장선 · 암 경계선(259-1)을 만나는 점에서 조각으로
 * 나눠(`_Cross_Detail_Geom.splitAtCrossings`) 조각마다 투명 판정 선 · 누름 = 하나 고름 ·
 * Shift/Ctrl+누름 = 더하기/빼기 · 고른 것 값 = [+ − ⤢] 왼쪽 두 줄(카드 179-1 · 195-1 꼴):
 *   하나 = 길이 · 경사비율 / 수평 · 높이 · 여럿 = 길이 합 / 닫힌 넓이 · 둘레(안 닫히면 「닫히지 않음」).
 * 닫힌 영역(259-2) = 조각으로 둘러싸인 면(`findFaces` · 열린 영역 제외) · 안 누름 = 그 영역(둘레 조각)
 *   고름 · Shift/Ctrl = 영역 더하기 · 채움 강조 · 값 = 면적 / 둘레 · 선으로 한 영역을 닫아도 채움.
 * 표 칸 누름 = 저장된 조각을 다시 고름(`choose`) · 띠 = 값 글만(`note`).
 * 칸에 넣기 = 표 우클릭 「그래프에서 고르기」 동안만(`_Cross_Detail_Table` 이 [칸에 넣기] · Enter 로 씀).
 * ponytail: 그림을 다시 그리면(칸 크기 · 카드 다시 그림) 고름을 지움 — 조각 키 기억은 필요할 때.
 * ========================================================================== */

import type { CrossDesign, CrossPickPiece } from "./B06_Section_Api_Types";
import type { CrossAxesOptions } from "./B06_Section_UI_Cross_Axes";
import { CROSS_PAD } from "./B06_Section_UI_Section_Common";
import {
  DESIGN_LINE_ATTR,
  mergeStraightPieces,
  pieceLabel,
} from "./B06_Section_UI_Cross_Design_Pick";
import {
  findFaces,
  LINE_TOLERANCE_M,
  pathLength,
  pieceSource,
  ringArea,
  splitAtCrossings,
  type Face,
  type Pt,
  type SplitPiece,
} from "./B06_Section_UI_Cross_Detail_Geom";

const SVG_NS = "http://www.w3.org/2000/svg";
export const PIECE_HIT_CLASS = "b06-detail__piece";
/** 닫힌 영역 판정 면(259-2) — 조각 판정 선 밑 · 투명 채움. */
export const FACE_HIT_CLASS = "b06-detail__face";

/** 화면 px → m(카드 `x` · `toDisplayY` 의 역 · 축 옵션). */
export function pxToM(axes: CrossAxesOptions): (p: number[]) => Pt {
  return ([px, py]) => {
    const display = axes.displayMax - (py - CROSS_PAD.top) / axes.pixelsPerMeter;
    return [
      axes.maxOffset - (px - CROSS_PAD.left) / axes.pixelsPerMeter,
      axes.elevationMid + (display - axes.elevationMid) / axes.exaggeration,
    ];
  };
}

function mToPx(axes: CrossAxesOptions): (p: Pt) => string {
  return ([offset, elevation]) => {
    const display = axes.elevationMid + (elevation - axes.elevationMid) * axes.exaggeration;
    const x = CROSS_PAD.left + (axes.maxOffset - offset) * axes.pixelsPerMeter;
    const y = CROSS_PAD.top + (axes.displayMax - display) * axes.pixelsPerMeter;
    return `${x},${y}`;
  };
}

function pointsOf(el: Element): number[][] {
  if (el.tagName.toLowerCase() === "line") {
    const n = (name: string) => Number(el.getAttribute(name));
    return [
      [n("x1"), n("y1")],
      [n("x2"), n("y2")],
    ];
  }
  return (el.getAttribute("points") ?? "")
    .trim()
    .split(/\s+/)
    .map((pair) => pair.split(",").map(Number))
    .filter((p) => p.length === 2 && p.every(Number.isFinite));
}

/** 그림 도형 층 요소 → 고를 조각(m) — 설계 · 구조물 선은 같은 방향 토막을 직선 하나로 합친 뒤 나눔. */
export function collectPieces(elements: Element[], axes: CrossAxesOptions): SplitPiece[] {
  const toM = pxToM(axes);
  const runs: Parameters<typeof mergeStraightPieces>[0] = [];
  const others: SplitPiece[] = [];
  for (const el of elements) {
    const points = pointsOf(el).map(toM);
    if (points.length < 2) continue;
    if (el.classList.contains("b06-chart__design-cross"))
      runs.push({
        points: points.map(([offset, elevation]) => ({ offset, elevation })),
        structure: !el.hasAttribute(DESIGN_LINE_ATTR),
      });
    else if (el.classList.contains("b06-chart__cross-profile"))
      others.push({ line: "ground", points });
    else if (el.classList.contains("b06-chart__spoil-fill")) others.push({ line: "spoil", points });
    else if (el.classList.contains("b06-chart__rock-boundary"))
      others.push({ line: "rock", points });
  }
  const straight = mergeStraightPieces(runs).map((piece): SplitPiece => ({
    line: piece.structure ? "structure" : "design",
    points: [
      [piece.from.offset, piece.from.elevation],
      [piece.to.offset, piece.to.elevation],
    ],
  }));
  return splitAtCrossings([...straight, ...others]);
}

/** 고름 바꿈 — 더하기(Shift/Ctrl) = 넣고 빼기 · 아니면 그 하나(다시 누르면 비움). */
export function toggleSelection(selected: number[], index: number, additive: boolean): number[] {
  if (additive)
    return selected.includes(index) ? selected.filter((i) => i !== index) : [...selected, index];
  return selected.length === 1 && selected[0] === index ? [] : [index];
}

const LINE_NAME: Record<SplitPiece["line"], string> = {
  design: "설계선",
  structure: "구조물 선",
  ground: "원지반선",
  spoil: "사토장선",
  rock: "암 경계선",
};

/** 고른 것 값 두 줄 — 하나 = 길이 · 경사비율 / 수평 · 높이(카드 꼴) · 여럿 = 길이 합 / 넓이. */
export function selectionLabel(design: CrossDesign | undefined, pieces: SplitPiece[]): string {
  if (!pieces.length) return "";
  if (pieces.length === 1) {
    const [piece] = pieces;
    const from = piece.points[0];
    const to = piece.points[piece.points.length - 1];
    if (
      design &&
      piece.points.length === 2 &&
      (piece.line === "design" || piece.line === "structure")
    )
      return pieceLabel(design, {
        from: { offset: from[0], elevation: from[1] },
        to: { offset: to[0], elevation: to[1] },
        structure: piece.line === "structure",
      });
    const horizontal = Math.abs(to[0] - from[0]);
    const height = Math.abs(to[1] - from[1]);
    const grade = horizontal > 0 ? `${((height / horizontal) * 100).toFixed(1)}%` : "수직";
    return (
      `${LINE_NAME[piece.line]} 길이 ${pathLength(piece.points).toFixed(2)}m · 경사비율 ${grade}\n` +
      `수평 ${horizontal.toFixed(2)}m · 높이 ${height.toFixed(2)}m`
    );
  }
  const total = pieces.reduce((sum, piece) => sum + pathLength(piece.points), 0);
  const area = ringArea(pieces.map((piece) => piece.points));
  return (
    `${pieces.length}개 · 길이 합 ${total.toFixed(2)}m\n` +
    (area === null ? "면적 닫히지 않음" : `면적 ${area.toFixed(2)}㎡ · 둘레 ${total.toFixed(2)}m`)
  );
}

/** 고른 영역 값 두 줄(259-2) — 넓이 합 / 둘레(고른 둘레 조각 길이 합 · 붙은 영역은 맞닿은 변 뺌). */
export function regionLabel(faces: Face[], pieces: SplitPiece[]): string {
  const area = faces.reduce((sum, face) => sum + face.area, 0);
  const around = pieces.reduce((sum, piece) => sum + pathLength(piece.points), 0);
  const count = faces.length > 1 ? `${faces.length}개 · ` : "";
  return `영역 ${count}면적 ${area.toFixed(2)}㎡\n둘레 ${around.toFixed(2)}m`;
}

/** 영역 여럿 → 둘레 조각 — 둘 이상이 맞닿은 변은 짝수 번 나와 빠짐. */
export function regionEdges(faces: Face[]): number[] {
  const count = new Map<number, number>();
  for (const face of faces)
    for (const edge of face.edges) count.set(edge, (count.get(edge) ?? 0) + 1);
  return [...count].filter(([, n]) => n % 2).map(([edge]) => edge);
}

/** 그림 조각이 저장된 조각(두 끝 · 어느 방향이든)과 같은 자리인가(259-2 표 칸 → 그래프). */
export function samePiece(piece: SplitPiece, stored: CrossPickPiece): boolean {
  if (piece.line !== stored.line) return false;
  const near = (a: Pt, b: Pt) => Math.hypot(a[0] - b[0], a[1] - b[1]) <= LINE_TOLERANCE_M;
  const [a, b] = [piece.points[0], piece.points[piece.points.length - 1]];
  return (
    (near(a, stored.start) && near(b, stored.end)) || (near(a, stored.end) && near(b, stored.start))
  );
}

/** 고른 조각 → 칸 출처(209-1 저장 꼴) — 면적은 닫혀야 · 길이는 하나 이상. */
export function selectionSource(
  kind: "area" | "length",
  pieces: SplitPiece[],
): { src: "area" | "length"; pieces: CrossPickPiece[] } | null {
  if (!pieces.length) return null;
  if (kind === "area" && ringArea(pieces.map((piece) => piece.points)) === null) return null;
  return { src: kind, pieces: pieces.map(pieceSource) };
}

/* ── 모달 배선 ─────────────────────────────────────────────────────────── */

export interface DetailSelect {
  /** 그림을 새로 그린 뒤 — 조각 · 판정 선 · 값 칸 다시(같은 자리 조각 고름은 유지 · 233-2). */
  redraw: () => void;
  /** 고르기 갈래(표 우클릭) — 있으면 [칸에 넣기] 단추 · 면적이면 누름 = 늘 더하기. */
  setMode: (kind: "area" | "length" | null) => void;
  source: (kind: "area" | "length") => ReturnType<typeof selectionSource>;
  clear: () => void;
  /** 저장된 조각을 그림에서 고름(259-2 표 칸 누름) · null = 비움. */
  choose: (stored: CrossPickPiece[] | null) => void;
  /** 고름 없이 값 글만(띠 · 259-2) — 다음 누름에 지워짐. */
  note: (text: string | null) => void;
  detach: () => void;
}

/** 조각의 자리 이름 — 선 종류 + mm 로 맞춘 꼭짓점(px → m 되짚기의 부동소수 흔들림 거름). */
const pieceKey = (piece: SplitPiece | undefined): string =>
  piece ? `${piece.line}|${piece.points.map((p) => p.map((v) => v.toFixed(3))).join(";")}` : "";

export function attachDetailSelect(input: {
  cad: HTMLElement;
  design: () => CrossDesign | undefined;
  axes: () => CrossAxesOptions | null;
  /** 조각 누름 뒤(더하기 여부) — 표가 길이 고르기 한 번 누름이면 바로 칸에 넣음. */
  picked: (additive: boolean) => void;
  /** [칸에 넣기] 단추. */
  commit: () => void;
  /** 면적 고르기 중 그 자리에 면적 띠가 있나 — 있으면 영역 대신 띠(표가 맡음). */
  band?: (event: MouseEvent) => boolean;
}): DetailSelect {
  const { cad } = input;
  let pieces: SplitPiece[] = [];
  let hits: SVGPolylineElement[] = [];
  let faces: Face[] = [];
  let faceEls: SVGPolygonElement[] = [];
  let selected: number[] = [];
  /** 영역 누름으로 고른 면 — 비면 고른 조각이 한 면을 꼭 닫을 때 그 면. */
  let chosenFaces: number[] = [];
  let noteText: string | null = null;
  let mode: "area" | "length" | null = null;

  const label = document.createElement("span");
  label.className = "b06-cross-card__line-dims b06-detail__measure";
  const put = document.createElement("button");
  put.type = "button";
  put.className = "b06-cross-card__zoom-btn b06-detail__commit";
  put.textContent = "칸에 넣기";
  put.title = "고른 선을 칸에 넣음(Enter)";
  put.addEventListener("click", (event) => {
    event.stopPropagation();
    input.commit();
  });

  const show = (): void => {
    const chosen = selected.map((i) => pieces[i]);
    hits.forEach((hit, i) => hit.classList.toggle("is-selected", selected.includes(i)));
    const same = (edges: number[]) =>
      edges.length === selected.length && edges.every((edge) => selected.includes(edge));
    const filled = chosenFaces.length
      ? chosenFaces
      : faces.flatMap((face, i) => (same(face.edges) ? [i] : []));
    faceEls.forEach((el, i) => el.classList.toggle("is-selected", filled.includes(i)));
    label.textContent =
      noteText ??
      (filled.length
        ? regionLabel(
            filled.map((i) => faces[i]),
            chosen,
          )
        : selectionLabel(input.design(), chosen));
    label.hidden = !label.textContent;
    put.hidden = !mode || !selectionSource(mode, chosen);
    // [+ − ⤢] 왼쪽(카드 꼴) — 그림을 다시 그리면 막대가 새로 생김
    const bar = cad.querySelector(".b06-cross-card__zoom");
    if (bar && label.parentElement !== bar) bar.prepend(label, put);
  };

  const onClick = (event: MouseEvent): void => {
    const target = event.target as Element;
    const hit = target.closest?.(`.${PIECE_HIT_CLASS}`);
    const shift = event.shiftKey || event.ctrlKey || event.metaKey;
    const additive = shift || mode === "area";
    noteText = null;
    if (!hit) {
      const face = target.closest?.(`.${FACE_HIT_CLASS}`);
      if (face && !(mode === "area" && input.band?.(event))) {
        // 영역 안 누름 = 그 영역 둘레 조각 고름(259-2) · 길이 고르기여도 바로 넣지 않음(Enter)
        event.stopPropagation();
        const index = faceEls.indexOf(face as SVGPolygonElement);
        chosenFaces = toggleSelection(chosenFaces, index, shift);
        selected = regionEdges(chosenFaces.map((i) => faces[i]));
        show();
        input.picked(true);
        return;
      }
      if (!additive && !mode) [selected, chosenFaces] = [[], []];
      show();
      return;
    }
    event.stopPropagation();
    chosenFaces = [];
    selected = toggleSelection(selected, hits.indexOf(hit as SVGPolylineElement), additive);
    show();
    input.picked(additive);
  };
  cad.addEventListener("click", onClick);

  return {
    redraw() {
      // 다시 그려도(창 크기 · 카드 다시 세움) 같은 자리 조각은 고름 유지 — 지우면 바로 꺼졌음(233-2)
      const keep = new Set(selected.map((i) => pieceKey(pieces[i])));
      const axes = input.axes();
      const layer = cad.querySelector<SVGGElement>("g.b06-chart__plot-layer");
      pieces = axes && layer ? collectPieces([...layer.querySelectorAll("*")], axes) : [];
      selected = pieces.flatMap((piece, i) => (keep.has(pieceKey(piece)) ? [i] : []));
      chosenFaces = [];
      faces = findFaces(pieces);
      const toPx = axes ? mToPx(axes) : null;
      // 영역 판정 면 먼저(밑) → 조각 판정 선(위)
      faceEls = toPx
        ? faces.map((face) => {
            const el = document.createElementNS(SVG_NS, "polygon");
            el.setAttribute("points", face.ring.map(toPx).join(" "));
            el.setAttribute("class", FACE_HIT_CLASS);
            layer?.append(el);
            return el;
          })
        : [];
      hits = toPx
        ? pieces.map((piece) => {
            const hit = document.createElementNS(SVG_NS, "polyline");
            hit.setAttribute("points", piece.points.map(toPx).join(" "));
            hit.setAttribute("class", `${PIECE_HIT_CLASS} ${PIECE_HIT_CLASS}--${piece.line}`);
            layer?.append(hit);
            return hit;
          })
        : [];
      show();
    },
    setMode(kind) {
      mode = kind;
      show();
    },
    source: (kind) =>
      selectionSource(
        kind,
        selected.map((i) => pieces[i]),
      ),
    clear() {
      [selected, chosenFaces] = [[], []];
      show();
    },
    choose(stored) {
      chosenFaces = [];
      noteText = null;
      selected = stored
        ? pieces.flatMap((piece, i) => (stored.some((s) => samePiece(piece, s)) ? [i] : []))
        : [];
      show();
    },
    note(text) {
      noteText = text;
      show();
    },
    detach() {
      cad.removeEventListener("click", onClick);
    },
  };
}