feuerwerk/src/viewport/nineSlice.ts

/**
 * The geometry a nine-sliced frame draws with (#41): no Pixi and no project, so it stays
 * unit-testable. A sprite is one quad per part rather than a shared 4×4 vertex grid, because a
 * repeated part needs its own UVs per tile – a grid can only stretch.
 */
import type { FrameFill } from '../core/model/Asset';
import type { NineSlice } from '../core/model/texture';

/** How often a part may repeat before it stretches instead; a guard, not a design (see `sliceSpans`). */
export const MAX_TILES = 64;

/** One part along an axis: `p0`..`p1` in the sprite's units, `t0`..`t1` in the frame's 0..1 texture space. */
export interface Span {
  p0: number;
  p1: number;
  t0: number;
  t1: number;
}

/**
 * The parts one axis is cut into. `near`/`far` are the two borders in source pixels, and they keep
 * that size times `scale` in the sprite's units – that is the whole point of slicing. A sprite too
 * small to hold both is not left with overlapping corners: they are scaled down together until the
 * middle is exactly zero, so the seam sits where the two corners meet.
 */
export function sliceSpans(
  target: number,
  source: number,
  near: number,
  far: number,
  fill: FrameFill,
  scale = 1,
): Span[] {
  if (!(target > 0) || !(source > 0) || !(scale > 0)) return [];
  const nearUnits = near * scale;
  const farUnits = far * scale;
  const shrink = nearUnits + farUnits > target ? target / (nearUnits + farUnits) : 1;
  const n = nearUnits * shrink;
  const f = farUnits * shrink;
  const middle = Math.max(0, target - n - f);
  const sourceMiddle = source - near - far;
  const spans: Span[] = [];
  if (n > 0) spans.push({ p0: 0, p1: n, t0: 0, t1: near / source });
  if (middle > 0 && sourceMiddle > 0) {
    const t0 = near / source;
    const t1 = (source - far) / source;
    // Whole tiles of the frame's own size, the last one cut off where the middle ends. Sampling
    // with UVs past 1 would do it in one quad, but a frame is a cut-out of a sheet: past its edge
    // lies the neighbouring cell, not the frame again. The tile scales with the borders (#96),
    // or a border drawn twice as big would sit beside a pattern drawn at its old size.
    const tile = sourceMiddle * scale;
    const tiles = fill === 'repeat' ? Math.ceil(middle / tile) : 1;
    if (fill === 'repeat' && tiles <= MAX_TILES) {
      for (let i = 0; i < tiles; i++) {
        const p0 = n + i * tile;
        const p1 = Math.min(n + middle, p0 + tile);
        spans.push({ p0, p1, t0, t1: t0 + ((p1 - p0) / tile) * (t1 - t0) });
      }
    } else {
      spans.push({ p0: n, p1: n + middle, t0, t1 });
    }
  }
  if (f > 0) spans.push({ p0: target - f, p1: target, t0: (source - far) / source, t1: 1 });
  return spans;
}

/**
 * A ring of `padding` source pixels around the parts (#69): as wide as a border pixel is drawn,
 * and reading that far past the frame, so a shader finds the same room there as around a quad.
 */
export function paddedSpans(
  spans: Span[],
  target: number,
  source: number,
  padding: number,
  scale = 1,
): Span[] {
  if (!(padding > 0) || spans.length === 0) return spans;
  const room = padding * scale;
  const t = padding / source;
  return [{ p0: -room, p1: 0, t0: -t, t1: 0 }, ...spans, { p0: target, p1: target + room, t0: 1, t1: 1 + t }];
}

/**
 * Positions in 0..1 of the sprite's box, as the unit quad they replace: the mesh carries the
 * sprite's size in its scale, so the geometry must not.
 */
export function sliceGeometry(
  slice: NineSlice,
  w: number,
  h: number,
  padding = 0,
): { positions: Float32Array; uvs: Float32Array; indices: Uint32Array } {
  const { border, fill, scale } = slice;
  const columns = paddedSpans(
    sliceSpans(w, slice.sourceW, border.left, border.right, fill, scale),
    w,
    slice.sourceW,
    padding,
    scale,
  );
  const rows = paddedSpans(
    sliceSpans(h, slice.sourceH, border.top, border.bottom, fill, scale),
    h,
    slice.sourceH,
    padding,
    scale,
  );
  const positions: number[] = [];
  const uvs: number[] = [];
  const indices: number[] = [];
  for (const row of rows) {
    for (const column of columns) {
      const base = positions.length / 2;
      positions.push(
        column.p0 / w,
        row.p0 / h,
        column.p1 / w,
        row.p0 / h,
        column.p1 / w,
        row.p1 / h,
        column.p0 / w,
        row.p1 / h,
      );
      uvs.push(column.t0, row.t0, column.t1, row.t0, column.t1, row.t1, column.t0, row.t1);
      indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
    }
  }
  return {
    positions: new Float32Array(positions),
    uvs: new Float32Array(uvs),
    indices: new Uint32Array(indices),
  };
}

/**
 * What the geometry depends on. Rebuilding on every frame would throw away a buffer the GPU
 * already has; a sprite that only moves keeps the one it was given.
 */
export function sliceKey(slice: NineSlice, w: number, h: number): string {
  const b = slice.border;
  return `${b.left},${b.top},${b.right},${b.bottom}|${slice.fill}|×${slice.scale}|${slice.sourceW}×${slice.sourceH}|${round(w)}×${round(h)}`;
}

/** Sub-pixel changes of size do not change the picture, and would rebuild on every mouse move. */
function round(value: number): number {
  return Math.round(value * 4) / 4;
}