Pier_v1/src/view/footing-svg.ts

/**
 * 확대기초·말뚝 그림 (2단계, 승인 2026-10-23): plan and side views as SVG strings, drawn from the model (footings, piles,
 * columns) and the input values. Pure: no DOM, so that it can be tested. Units: m in the model; the labels show mm.
 * Both views use one scale (FOOTING_PX_PER_M), so they can sit side by side. The side view breaks the column and the piles
 * (끊음 표시) so that its height stays near the plan's.
 */
import type { PierModel } from '../core/geometry';

export const FOOTING_PX_PER_M = 22;
/** Side view: the column is shown this far above the footing top, the piles this far below the footing bottom (m). */
const COLUMN_STUB = 3;
const PILE_STUB = 4;

const mm = (v: number) => Math.round(v * 1000);

/** A break mark (끊음): two short slanted strokes "//" centred on (x, y), so the member is shown as cut. */
function breakMark(x: number, y: number, halfWidth: number): string {
  const d = 0.12;
  return `<g stroke="#55606e" stroke-width="0.03" fill="none"><line x1="${x - halfWidth - d / 2}" y1="${y - 0.15}" x2="${x - halfWidth + d / 2}" y2="${y + 0.15}"/><line x1="${x + halfWidth - d / 2}" y1="${y - 0.15}" x2="${x + halfWidth + d / 2}" y2="${y + 0.15}"/></g>`;
}

function svgOf(x0: number, y0: number, w: number, h: number, label: string, body: string): string {
  const pw = Math.round(w * FOOTING_PX_PER_M);
  const ph = Math.round(h * FOOTING_PX_PER_M);
  return `<svg viewBox="${x0} ${y0} ${w} ${h}" width="${pw}" height="${ph}" role="img" aria-label="${label}">${body}</svg>`;
}

/** Plan view: the footing rectangle (length along the 교축, width across), the pile circles, the column circle, the axis. */
export function footingPlanSvg(model: PierModel): string {
  const f = model.footings[0];
  if (!f) return '';
  const pad = 0.8;
  const x0 = f.s - f.length / 2 - pad;
  const y0 = -f.width / 2 - pad;
  const w = f.length + 2 * pad;
  const h = f.width + 2 * pad;
  const piles = model.piles.filter((p) => Math.abs(p.s - f.s) <= f.length / 2 + 1e-6);
  const parts: string[] = [];
  parts.push(`<rect x="${f.s - f.length / 2}" y="${-f.width / 2}" width="${f.length}" height="${f.width}" fill="#dfe5ec" stroke="#5b6676" stroke-width="0.02"/>`);
  for (const p of piles) {
    parts.push(`<circle cx="${p.s}" cy="${p.n}" r="${p.diameter / 2}" fill="#8898aa" stroke="#3b4656" stroke-width="0.01"/>`);
  }
  for (const c of model.columns) {
    parts.push(`<circle cx="${c.s}" cy="0" r="${c.diameter / 2}" fill="none" stroke="#0f5c66" stroke-width="0.03" stroke-dasharray="0.1 0.06"/>`);
  }
  parts.push(`<line x1="${x0}" y1="0" x2="${x0 + w}" y2="0" stroke="#b4531f" stroke-width="0.02" stroke-dasharray="0.3 0.1 0.05 0.1"/>`);
  parts.push(`<text x="${f.s}" y="${-f.width / 2 - 0.35}" font-size="0.28" text-anchor="middle">${mm(f.length)}</text>`);
  parts.push(`<text x="${f.s + f.length / 2 + 0.35}" y="0" font-size="0.28" text-anchor="start">${mm(f.width)}</text>`);
  return svgOf(x0, y0, w, h, '확대기초·말뚝 평면', parts.join(''));
}

/** Side view (elevation, EL up): the footing, the piles, and the column stub above the footing, both broken (끊음). */
export function footingSideSvg(model: PierModel): string {
  const f = model.footings[0];
  if (!f) return '';
  const piles = model.piles.filter((p) => Math.abs(p.s - f.s) <= f.length / 2 + 1e-6);
  const pileTop = piles.length ? Math.max(...piles.map((p) => p.top)) : f.bottom;
  const pileLen = piles.length ? piles[0].top - piles[0].bottom : 0;
  const pad = 0.8;
  const x0 = f.s - f.length / 2 - pad;
  const w = f.length + 2 * pad;
  // Visible band in EL: from the column stub above the footing top, down to the pile stub below the footing bottom.
  const topEl = f.top + COLUMN_STUB;
  const botEl = f.bottom - PILE_STUB;
  const y0 = -topEl;
  const h = topEl - botEl;
  const parts: string[] = [];
  parts.push(`<rect x="${f.s - f.length / 2}" y="${-f.top}" width="${f.length}" height="${f.top - f.bottom}" fill="#dfe5ec" stroke="#5b6676" stroke-width="0.02"/>`);
  for (const p of piles) {
    const from = Math.max(p.bottom, botEl);
    const to = Math.min(p.top, f.bottom);
    if (to > from) parts.push(`<line x1="${p.s}" y1="${-to}" x2="${p.s}" y2="${-from}" stroke="#8898aa" stroke-width="${Math.max(p.diameter, 0.02)}"/>`);
  }
  const col = model.columns[0];
  if (col) {
    parts.push(`<rect x="${col.s - col.diameter / 2}" y="${-f.top - COLUMN_STUB}" width="${col.diameter}" height="${COLUMN_STUB}" fill="#c9d4df" stroke="#0f5c66" stroke-width="0.02"/>`);
    // Break mark on the column stub, at its middle.
    parts.push(breakMark(col.s, -f.top - COLUMN_STUB / 2, col.diameter / 2 + 0.15));
  }
  if (piles.length) {
    // Break mark across the pile group, in the lower stub (the pile label sits below it).
    parts.push(breakMark(f.s, -(botEl + 0.6), f.length / 2));
  }
  parts.push(`<text x="${f.s + f.length / 2 + 0.35}" y="${-(f.top + f.bottom) / 2}" font-size="0.28" text-anchor="start">h1 ${mm(f.top - f.bottom)}</text>`);
  if (piles.length) {
    parts.push(`<text x="${f.s}" y="${-(botEl + 1.3)}" font-size="0.28" text-anchor="middle">말뚝 ${mm(pileLen)} (끊음)</text>`);
  }
  void pileTop;
  return svgOf(x0, y0, w, h, '확대기초·말뚝 측면', parts.join(''));
}