@swf2es/player 0.0.0-stage → 0.1.0

package/src/display/scale9.ts

@@ -0,0 +1,321 @@
+// 9-slice scaling (docs/architecture/rendering.md, "Nine-slice scaling"): an object
+// with a grid draws its shapes, its own and its Shape children's, with
+// each vertex moved region by region, so that the corners keep their size
+// in its parent's space, the edges stretch one way and the centre both.
+// Its sprites, texts and bitmaps scale as ever, as do its bounds.
+import type { Matrix } from "@swf2es/format";
+import { ownBounds } from "./bounds.js";
+import {
+  Container,
+  type DisplayObject,
+  ShapeObject,
+  StaticTextObject,
+  TextObject,
+} from "./display.js";
+import { apply, invert, type Rect, union } from "./geometry.js";
+import { MOVE, pointsOf, type ShapeLayer } from "./shapes.js";
+import { makeRoom, moveLast, same } from "./value-lists.js";
+
+/**
+ * One axis of a slice, in the owner's space: the bounds' and the grid's
+ * edges, and where they are drawn, both in the owner's units.
+ */
+export interface Axis {
+  from: [number, number, number, number];
+  to: [number, number, number, number];
+}
+
+/** How an object with a grid draws its shapes, and the key that tells two apart. */
+export interface Slice {
+  x: Axis;
+  y: Axis;
+  key: string;
+}
+
+/**
+ * Flash slices only an object whose own matrix neither turns nor skews,
+ * to a 4096th, and mirrors neither way; any other scales as ever. adl
+ * slices b = 0.000244 and not 0.0002442: a 16.16 fraction under 16.
+ */
+const SKEW = 1 / 4096;
+
+/**
+ * An axis from the bounds' edges lo and hi and the grid's gLo and gHi,
+ * scaled by s: the corners keep their size in the parent's units, or,
+ * where the scaled size is less than theirs, share it in proportion and
+ * leave the centre none.
+ */
+export function axis(lo: number, gLo: number, gHi: number, hi: number, s: number): Axis {
+  const corners = gLo - lo + (hi - gHi);
+  const k = Math.min(1, (s * (hi - lo)) / corners);
+  return {
+    from: [lo, gLo, gHi, hi],
+    to: [lo, lo + (k * (gLo - lo)) / s, hi - (k * (hi - gHi)) / s, hi],
+  };
+}
+
+/**
+ * The bounds a grid divides: what `o` draws, without lines, and what each
+ * of its children draws itself, each in the child's own space, its matrix
+ * ignored, and nothing of the grandchildren; a text field or a static
+ * text counts for nothing, a bitmap or a video does. So adl slices: a
+ * child's bars moved 30 to the right leave the edges where the panel's
+ * are, one drawn out to 120 moves the right edge to 120 wherever the child
+ * is, and a grandchild's moves nothing.
+ */
+export function sliceBounds(o: DisplayObject): Rect | null {
+  let r = ownBounds(o, false);
+  if (o instanceof Container) {
+    for (const child of o.children) {
+      if (!(child instanceof TextObject || child instanceof StaticTextObject)) {
+        const b = ownBounds(child, false);
+        if (b) {
+          r = union(r, b);
+        }
+      }
+    }
+  }
+
+  return r;
+}
+
+/** Whether `grid` is strictly inside `r` both ways, as Flash slices only by such a grid. */
+export function gridInside(r: Rect | null, grid: Rect): boolean {
+  return (
+    r !== null &&
+    r.xMin < grid.xMin &&
+    grid.xMin < grid.xMax &&
+    grid.xMax < r.xMax &&
+    r.yMin < grid.yMin &&
+    grid.yMin < grid.yMax &&
+    grid.yMax < r.yMax
+  );
+}
+
+/**
+ * The slice `o` draws its shapes with under its matrix `m`: null where it
+ * has no grid, or one not strictly inside its sliceBounds both ways, or a
+ * transform Flash does not slice under, or one that changes nothing.
+ */
+export function sliceOf(o: DisplayObject, m: Matrix = o.matrix): Slice | null {
+  const grid = o.scale9Grid;
+  if (
+    !grid ||
+    !(m.a > 0 && m.d > 0 && Math.abs(m.b) < SKEW && Math.abs(m.c) < SKEW) ||
+    (m.a === 1 && m.d === 1)
+  ) {
+    return null;
+  }
+
+  const r = sliceBounds(o);
+  if (!r || !gridInside(r, grid)) {
+    return null;
+  }
+
+  const kept = slices.get(o);
+  if (
+    kept &&
+    kept.grid === grid &&
+    kept.a === m.a &&
+    kept.d === m.d &&
+    kept.r.xMin === r.xMin &&
+    kept.r.yMin === r.yMin &&
+    kept.r.xMax === r.xMax &&
+    kept.r.yMax === r.yMax
+  ) {
+    return kept.slice;
+  }
+
+  const x = axis(r.xMin, grid.xMin, grid.xMax, r.xMax, m.a);
+  const y = axis(r.yMin, grid.yMin, grid.yMax, r.yMax, m.d);
+  const slice = { x, y, key: `${x.to.join()},${y.to.join()},${x.from.join()},${y.from.join()}` };
+  slices.set(o, { grid, a: m.a, d: m.d, r, slice });
+  return slice;
+}
+
+/**
+ * The slice `o` draws with as it is drawn: a MorphShape, it or a child,
+ * takes its ratio's blend first, as it does later in the same draw, so
+ * that a new ratio's bounds slice on its own frame, as adl's do, and not
+ * a frame late.
+ */
+export function sliceDrawn(o: DisplayObject): Slice | null {
+  if (o instanceof ShapeObject && o.morph) {
+    o.drawn();
+  } else if (o instanceof Container) {
+    for (const child of o.children) {
+      if (child instanceof ShapeObject && child.morph) {
+        child.drawn();
+      }
+    }
+  }
+
+  return sliceOf(o);
+}
+
+/** Each object's last slice and what it was made of: a hit test asks for it on every pointer move. */
+const slices = new WeakMap<
+  DisplayObject,
+  { grid: Rect; a: number; d: number; r: Rect; slice: Slice }
+>();
+
+/**
+ * Where `v` is drawn on the axis: piecewise linear through the edges, and
+ * on past the bounds at the corners' rate, as a curve's control point may be.
+ */
+export function onAxis(axis: Axis, v: number): number {
+  const { from, to } = axis;
+  const i = v < from[1] ? 0 : v < from[2] ? 1 : 2;
+  return to[i] + ((v - from[i]) * (to[i + 1] - to[i])) / (from[i + 1] - from[i]);
+}
+
+/**
+ * The slice that reshapes what `d` itself draws, and the matrix from its
+ * space to the owner's, null for the owner itself: its own grid's, or,
+ * for a shape, its parent's, unless it is filtered, which adl draws as a
+ * bitmap of it, stretched whole (the `slice-filtered` case). Null for none.
+ */
+export function sliceFor(d: DisplayObject): { slice: Slice; m: Matrix | null } | null {
+  if (withinMask(d)) {
+    return null;
+  }
+
+  if (d.scale9Grid) {
+    const slice = sliceOf(d);
+    if (slice) {
+      return { slice, m: null };
+    }
+  }
+
+  const parent = d.parent;
+  if (d instanceof ShapeObject && parent?.scale9Grid && d.filters.length === 0) {
+    const slice = sliceOf(parent);
+    if (slice) {
+      return { slice, m: d.placed };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Whether `d` is a mask, a script's or a timeline's, or is in one: adl
+ * draws it unsliced, and its shape test hits nothing of it.
+ */
+export function withinMask(d: DisplayObject): boolean {
+  for (let o: DisplayObject | null = d; o; o = o.parent) {
+    if (o.maskOf !== null || o.clipDepth > 0) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Layers with every point of their paths, fills' and lines' alike, moved
+ * as the slice moves them. A fill's gradient or bitmap keeps its matrix,
+ * stretched as ever, as Flash's does. `version` is a drawing's, whose
+ * layers change in place.
+ */
+export function sliceLayers(
+  layers: ShapeLayer[],
+  slice: Slice,
+  m: Matrix | null,
+  version = 0,
+): ShapeLayer[] {
+  // Compared as values, not by a key formatted from them on every draw and hit test: the slice
+  // by its own key, made once with it, its matrix by its numbers.
+  let kept = sliced.get(layers);
+  for (let i = kept ? kept.length - 1 : -1; i >= 0; i--) {
+    const e = (kept as SlicedLayers[])[i];
+    if (
+      e.version === version &&
+      (e.slice === slice || e.slice.key === slice.key) &&
+      (e.m === null
+        ? m === null
+        : m !== null &&
+          same(e.m.a, m.a) &&
+          same(e.m.b, m.b) &&
+          same(e.m.c, m.c) &&
+          same(e.m.d, m.d) &&
+          same(e.m.tx, m.tx) &&
+          same(e.m.ty, m.ty))
+    ) {
+      return (i === (kept as SlicedLayers[]).length - 1 ? e : moveLast(kept as SlicedLayers[], i))
+        .layers;
+    }
+  }
+
+  const made = moveLayers(layers, slice, m);
+  if (!kept) {
+    kept = [];
+    sliced.set(layers, kept);
+  }
+
+  // The least lately used goes past a few: instances of one symbol at a few sizes alternate.
+  makeRoom(
+    kept,
+    SLICES_KEPT,
+    () => false,
+    () => {},
+  );
+  kept.push({ slice, m: m && { ...m }, version, layers: made });
+  return made;
+}
+
+const SLICES_KEPT = 4;
+
+/**
+ * The latest slices of each set of layers, with the slice, matrix and
+ * version each was made for: a hit test asks on every pointer move, and
+ * the renderer again on a redraw that is not a reslice.
+ */
+const sliced = new WeakMap<ShapeLayer[], SlicedLayers[]>();
+
+/** A set of layers as sliced, and the slice, matrix and version it was sliced for. */
+interface SlicedLayers {
+  slice: Slice;
+  m: Matrix | null;
+  version: number;
+  layers: ShapeLayer[];
+}
+
+function moveLayers(layers: ShapeLayer[], slice: Slice, m: Matrix | null): ShapeLayer[] {
+  const inverse = m && invert(m);
+  if (m && !inverse) {
+    return layers;
+  }
+
+  const move = (path: number[]): number[] => {
+    const out = path.slice();
+    for (let i = 0; i < out.length; ) {
+      const points = pointsOf(out[i]);
+      for (let k = 0; k < points; k++) {
+        const at = i + 1 + 2 * k;
+        const [ox, oy] = m ? apply(m, out[at], out[at + 1]) : [out[at], out[at + 1]];
+        const sx = onAxis(slice.x, ox);
+        const sy = onAxis(slice.y, oy);
+        [out[at], out[at + 1]] = inverse ? apply(inverse, sx, sy) : [sx, sy];
+      }
+
+      i += 1 + 2 * points;
+    }
+
+    return out;
+  };
+
+  // drawTriangles' textured triangles stay where they were drawn.
+  return layers.map((layer) => ({
+    ...layer,
+    fills: layer.fills.map((f) => ({ ...f, contours: f.contours.map(move) })),
+    strokes: layer.strokes.map((s) => ({
+      ...s,
+      paths: s.paths.map(move),
+      closes: s.closes?.map((c) => {
+        const [, x, y] = move([MOVE, c.x, c.y]);
+        return { at: c.at, x, y };
+      }),
+    })),
+  }));
+}

package/src/display/shapeobject.ts

@@ -0,0 +1,160 @@
+// A Shape or MorphShape a timeline placed or a script made, and what
+// Flash's bitmap cache of one still shows after its shape is swapped.
+import type { ColorTransform, Place } from "@swf2es/format";
+import { IDENTITY_COLOR } from "./color.js";
+import { CONTENT, DisplayObject, pickWork, TRANSFORM } from "./displayobject.js";
+import type { Filter } from "./filters.js";
+import { morphAt } from "./morph.js";
+import type { MorphCharacter, ShapeCharacter } from "./timeline.js";
+
+export class ShapeObject extends DisplayObject {
+  /** The shape it draws, or last drew; null for a Shape a script made, which draws nothing yet. */
+  shape: ShapeCharacter | null;
+  /** A MorphShape's morph, which `shape` is a blend of. */
+  morph: MorphCharacter | null = null;
+  /**
+   * The blend drawn() last made, and its morph and ratio: it stands while
+   * `shape` is still it, which a swap to a shape is not.
+   */
+  private blended: { morph: MorphCharacter; ratio: number; shape: ShapeCharacter } | null = null;
+  /**
+   * The shape Flash's bitmap cache of it still shows, given another of the
+   * same bounds while cached (`swap`), and the look it was cached with;
+   * null where it draws what it is. It goes for good when the look does.
+   */
+  stale: StaleCache | null = null;
+
+  constructor(shape: ShapeCharacter | null) {
+    super();
+    this.shape = shape;
+    this.character = shape;
+  }
+
+  /** A MorphShape, its morph's start until it is drawn at another ratio. */
+  static ofMorph(morph: MorphCharacter): ShapeObject {
+    const shape = morphAt(morph, 0);
+    const object = new ShapeObject(shape);
+    object.morph = morph;
+    object.blended = { morph, ratio: 0, shape };
+    object.character = morph;
+    return object;
+  }
+
+  /**
+   * A MorphShape takes on a new ratio when it is next drawn (drawn): until
+   * then its bounds and hit tests are the last drawn blend's, as Flash's
+   * are (the corpus's hittest_morph).
+   */
+  override applyPlace(place: Place): void {
+    const ratio = this.ratio;
+    super.applyPlace(place);
+
+    if (this.morph && this.ratio !== ratio) {
+      this.invalidate(CONTENT);
+    }
+  }
+
+  /** The shape to draw now: a MorphShape's blend at its ratio, which it keeps from here. */
+  drawn(): ShapeCharacter | null {
+    // The blend it has is kept while its morph and ratio are: asking the
+    // morph again would turn over its few latest blends for nothing.
+    const b = this.blended;
+    if (
+      this.morph &&
+      (b?.morph !== this.morph || b.ratio !== this.ratio || b.shape !== this.shape)
+    ) {
+      this.shape = morphAt(this.morph, this.ratio);
+      this.blended = { morph: this.morph, ratio: this.ratio, shape: this.shape };
+      // New bounds, which no invalidate tells of: the change of ratio did,
+      // but those it marked may have been measured since, with the old blend.
+      pickWork.changes++;
+      this.pickChanged(true);
+    }
+
+    return this.shape;
+  }
+
+  /**
+   * Flash draws the object again, its cache gone stale or not, for another
+   * scale, turn or skew, colour or filters; not when it only moves
+   * (`cache-replace`). The cache turned off counts only where a frame is
+   * drawn so: off and on again in between, it stands (the view's to tell).
+   */
+  override invalidate(what: number): void {
+    const stale = this.stale;
+    if (stale && what & TRANSFORM && !stale.stands(this)) {
+      this.stale = null;
+      what |= CONTENT;
+    }
+
+    super.invalidate(what);
+  }
+}
+
+/** What a bitmap cache was drawn of, and the look it was drawn with. */
+export class StaleCache {
+  private readonly a: number;
+  private readonly b: number;
+  private readonly c: number;
+  private readonly d: number;
+  private readonly color: ColorTransform | null;
+  private readonly filters: readonly Filter[];
+
+  constructor(
+    readonly shape: ShapeCharacter,
+    o: DisplayObject,
+  ) {
+    ({ a: this.a, b: this.b, c: this.c, d: this.d } = o.matrix);
+    this.color = o.colorTransform;
+    this.filters = o.filters;
+  }
+
+  stands(o: DisplayObject): boolean {
+    const m = o.matrix;
+    return (
+      m.a === this.a &&
+      m.b === this.b &&
+      m.c === this.c &&
+      m.d === this.d &&
+      sameColor(o.colorTransform, this.color) &&
+      sameFilters(o.filters, this.filters)
+    );
+  }
+}
+
+/**
+ * A place's filters are read anew at each move, the same or not. Those
+ * from a SWF are plain records; a script's displacement map holds its
+ * bitmap, so another list with one counts as other filters.
+ */
+function sameFilters(a: readonly Filter[], b: readonly Filter[]): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (a.length !== b.length || a.some((f) => f.kind === "displacementMap")) {
+    return false;
+  }
+
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+/** Whether Flash draws `o` from a bitmap it keeps: cacheAsBitmap set, or filters. */
+export function cached(o: DisplayObject): boolean {
+  return o.cachedAsBitmap || o.filters.length > 0;
+}
+
+function sameColor(a: ColorTransform | null, b: ColorTransform | null): boolean {
+  const x = a ?? IDENTITY_COLOR;
+  const y = b ?? IDENTITY_COLOR;
+  return (
+    x.rMul === y.rMul &&
+    x.gMul === y.gMul &&
+    x.bMul === y.bMul &&
+    x.aMul === y.aMul &&
+    x.rAdd === y.rAdd &&
+    x.gAdd === y.gAdd &&
+    x.bAdd === y.bAdd &&
+    x.aAdd === y.aAdd
+  );
+}