Aislo/B06_Section/B06_Section_UI_Cross_Wall.ts

/* =============================================================================
 * B06_Section_UI_Cross_Wall.ts
 * 기슭막이 벽 **공용 기하 + 그리기** — 배관 세트 벽(`_Cross_Culvert_Geom`/`_Culvert`)과
 * 독립 기슭막이(`_Cross_Revetment`)가 같은 산식·같은 도형을 쓰도록 뽑아낸 층이다
 * (2026-08-28 사용자: "배관용에서 배관만 빼면 대부분 동일해야"). 벽 1매의 합성 단면
 * (하부 사다리꼴 + 상부 평행사변형, 배면 수직·전면 1:0.3)과 그 돌쌓기 표현은 여기 하나뿐.
 *
 * 관 유입·유출 흙막이 · 추가 흙막이 · 사면안정 흙막이 · 옹벽이 모두 이 함수 하나로 선다.
 * 형태가 바꾸는 것은 안 무늬(`_Cross_Wall_Hatch`)뿐 — 외곽은 높이·자리·기울기로만 정함.
 * ========================================================================== */

import {
  materialLabel,
  REVET_EMBED_DEPTH_M,
  REVET_LEAN_RATIO,
  REVET_THICKNESS_M,
  WALL_FILL_TOP_INSET_M,
  WALL_MIN_PURE_HEIGHT_M,
} from "./logic/B06_Section_UI_Cross_Culvert_Const";
import type { RevetMaterial } from "./logic/B06_Section_UI_Cross_Culvert_Const";
import type { OffsetPoint, WallLayout } from "./logic/B06_Section_Cross_Culvert_Types";
import { appendWallHatch } from "./B06_Section_UI_Cross_Wall_Hatch";

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

function polygon(
  points: Array<[number, number]>,
  className: string,
  tooltip: string,
): SVGPolygonElement {
  const shape = document.createElementNS(SVG_NS, "polygon");
  shape.setAttribute("points", points.map(([px, py]) => `${px},${py}`).join(" "));
  shape.setAttribute("class", className);
  if (tooltip) {
    const title = document.createElementNS(SVG_NS, "title");
    title.textContent = tooltip;
    shape.append(title);
  }
  return shape;
}

/** 벽 1매의 기하 입력 — 자리 기준은 **하단선 중점**(anchor.offset)과 그 자리 기준표고
 *  (anchor.elevation = 관 invert 또는 지반). 벽은 그 위로 `height`만큼 선다. */
export interface RevetWallGeometryInput {
  /** 하단선 중점 offset + 기준표고(벽이 이 위로 선다). */
  anchor: OffsetPoint;
  /** +1 = 화면 좌측(계류측), −1 = 우측. 전면 1:0.3이 이 부호로 기운다. */
  outward: number;
  /** 계산용 높이(기준표고~상단, 근입 0.5 제외). */
  height: number;
  material: RevetMaterial;
  role: "inlet" | "outlet" | "extra";
  /** 표기용 형태 — 미지정이면 재질 라벨(메/찰/콘크리트). */
  form?: string | null;
  lengthM?: number | null;
  thickness?: number;
  floatGapM?: number;
  extraIndex?: number;
  /** 전면 기울기 1:n 의 n — 표준경사(`leanOf`). 없으면 종전 0.3. */
  lean?: number;
  /** 노면(계획고) — 벽 윗면이 이보다 높으면 여기서 멈춤. 높이 한도는 이것 하나. */
  roadElevation?: number | null;
}

/**
 * 합성 단면(하부 사다리꼴 + 상부 평행사변형) 꼭짓점을 만든다. 배관 벽(`buildWall`,
 * `_Cross_Culvert_Geom` 335~376행)과 **같은 산식** — 배면 수직, 상단 변 = 사다리꼴
 * 상단(t/2)+띠(t), 전면 1:0.3, 하단선 = 기준표고 −0.5m 수평 기초.
 */
export function buildRevetWallGeometry(input: RevetWallGeometryInput): WallLayout {
  const { anchor, outward, material, role } = input;
  const road = input.roadElevation;
  const height =
    road != null && anchor.elevation + input.height > road + 1e-9
      ? Math.max(road - anchor.elevation, WALL_MIN_PURE_HEIGHT_M - REVET_EMBED_DEPTH_M)
      : input.height;
  const thickness = input.thickness ?? REVET_THICKNESS_M;
  const lean = input.lean ?? REVET_LEAN_RATIO;
  const baseWidth = thickness * 1.5 + lean * height;
  const backOffset = anchor.offset - outward * (baseWidth / 2);
  const topJoint = backOffset + outward * (thickness / 2);
  const topElevation = anchor.elevation + height;
  const topBack: OffsetPoint = { offset: backOffset, elevation: topElevation };
  const topFront = topJoint + outward * thickness;
  const frontXAt = (elevation: number): number =>
    topFront + outward * lean * (topElevation - elevation);
  const bottomElevation = anchor.elevation - REVET_EMBED_DEPTH_M;
  const bottomBack: OffsetPoint = { offset: backOffset, elevation: bottomElevation };
  const bottomFront: OffsetPoint = {
    offset: frontXAt(bottomElevation),
    elevation: bottomElevation,
  };
  return {
    role,
    extraIndex: input.extraIndex,
    form: input.form ?? materialLabel(material),
    lengthM: input.lengthM ?? null,
    backOffset,
    outerOffset: bottomFront.offset,
    base: anchor.elevation,
    height,
    floatGapM: input.floatGapM ?? 0,
    material,
    lean,
    outward,
    topBack,
    topJoint: { offset: topJoint, elevation: topElevation },
    fillTop: { offset: topFront - outward * WALL_FILL_TOP_INSET_M, elevation: topElevation },
    bottomBack,
    bottomFront,
    points: [bottomBack, topBack, { offset: topFront, elevation: topElevation }, bottomFront],
  };
}

/**
 * 벽 1매를 SVG로 그린다 — 폴리곤 + 대각 이음선 + 계류측 기운 띠의 돌쌓기 해칭.
 * 배관 오버레이(`_Cross_Culvert` 161~246행)와 **같은 그리기**. 선택·강조 배선은 호출자
 * 몫이라 여기서는 본체 폴리곤만 돌려준다. `keyId`는 clipPath id 중복 방지용.
 */
export function drawRevetWall(
  layer: SVGElement,
  wall: WallLayout,
  x: (offset: number) => number,
  toDisplayY: (elevation: number) => number,
  className: string,
  tooltip: string,
  keyId: string,
): SVGPolygonElement {
  const revetShape = polygon(
    wall.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
    className,
    tooltip,
  );
  layer.append(revetShape);

  // 이음선 + **형태별 표현**(돌/콘크리트/돌망태/통나무/바자)은 공용 해칭이 맡는다
  // (2026-08-30 사용자 지시 3) — 배관 오버레이와 같은 함수를 쓴다.
  appendWallHatch(layer, wall, x, toDisplayY, keyId);
  return revetShape;
}

/** 성토·절토 접속선(공사 계획선) 폴리라인 — 설계선과 같은 보라 실선. */
export function appendPlanLine(
  layer: SVGElement,
  points: OffsetPoint[],
  x: (offset: number) => number,
  toDisplayY: (elevation: number) => number,
  tooltip: string,
  className = "b06-chart__design-cross",
): void {
  if (points.length < 2) return;
  const line = document.createElementNS(SVG_NS, "polyline");
  line.setAttribute(
    "points",
    points.map((p) => `${x(p.offset)},${toDisplayY(p.elevation)}`).join(" "),
  );
  line.setAttribute("class", className);
  if (tooltip) {
    const title = document.createElementNS(SVG_NS, "title");
    title.textContent = tooltip;
    line.append(title);
  }
  layer.append(line);
}

/**
 * 벽 안으로 지나가는 다른 선(원지반 · 설계선 · 비탈 · 다른 외곽)을 가린다(66-5) — 흙막이 · 옹벽을
 * 바탕색 덮개와 함께 맨 위로 올림. 벽 자기 외곽 · 무늬는 그대로. 관 · 클릭 판정면 · 글은 그 위로
 * 다시 올려 지금 차례(관이 벽을 지나감 · 판정면 맨 위)를 지킨다.
 */
export function raiseWalls(layer: SVGElement): void {
  const kids = [...layer.children];
  const groups = kids
    .filter((el) => el.classList.contains("b06-chart__culvert-revet"))
    .map((wall) => {
      // 무늬 = 벽 바로 뒤의 clipPath + 잘린 묶음(`appendWallHatch`)
      const hatch: Element[] = [];
      let next = wall.nextElementSibling;
      while (
        next &&
        (next.tagName === "clipPath" ||
          next.getAttribute("clip-path")?.startsWith("url(#b06-revet-clip-"))
      ) {
        hatch.push(next);
        next = next.nextElementSibling;
      }
      const cover = document.createElementNS(SVG_NS, "polygon");
      cover.setAttribute("points", wall.getAttribute("points") ?? "");
      cover.setAttribute("class", "b06-chart__wall-cover");
      return [cover, wall, ...hatch];
    });
  if (!groups.length) return;
  for (const group of groups) layer.append(...group);
  layer.append(
    ...kids.filter((el) =>
      el.matches(".b06-chart__culvert-pipe, .b06-chart__culvert-revet-hit, text"),
    ),
  );
}