@swf2es/player 0.0.0-stage → 0.1.0

package/src/stage.ts

@@ -0,0 +1,7 @@
+// Stage settings shared by Flash natives and the host that places its view.
+export type StageScaleMode = "showAll" | "noScale" | "noBorder" | "exactFit";
+
+export function stageAlignment(value: string): string {
+  const input = value.toUpperCase();
+  return `${input.includes("T") ? "T" : ""}${input.includes("B") ? "B" : ""}${input.includes("L") ? "L" : ""}${input.includes("R") ? "R" : ""}`;
+}

package/src/text/csm.ts

@@ -0,0 +1,173 @@
+// Advanced anti-aliasing's (Saffron's) cutoffs: Flash draws a glyph of an
+// advanced field with each pixel's coverage a ramp over its signed
+// distance to the outline, in pixels, inside positive, from 0 at the
+// outside cutoff to 1 at the inside one. The cutoffs come from a table
+// by the size in pixels on the screen, the font's CSM hint (its
+// DefineFontAlignZones; none is thin) and whether the text is light or
+// dark, linear between a table's sizes and flat past its ends; thickness
+// and sharpness then move them, and TextRenderer's
+// setAdvancedAntiAliasingTable puts a table of a font's own in place of
+// both colours'.
+//
+// The tables were measured in adl (AIR 51), from the ramps across the
+// edges of a block glyph drawn at each size from 4 to 96 pixels: the
+// sizes here are where the ramp's ends stop being one straight line, to
+// within 0.004 of a pixel.
+
+/** Sizes in pixels, each with its inside and outside cutoffs: size, in, out, size, in, out... */
+export type CsmTable = readonly number[];
+
+const table = (...entries: [number, number, number][]): CsmTable => entries.flat();
+
+/** By CSM hint, thin, medium and thick: light text's table, then dark text's. */
+const DEFAULTS: readonly (readonly [CsmTable, CsmTable])[] = [
+  [
+    table(
+      [8, 0.081, -0.82],
+      [12, 0.029, -0.821],
+      [16, 0.127, -0.813],
+      [26, 0.333, -0.852],
+      [27, 0.349, -0.854],
+    ),
+    table(
+      [8, 0.255, -0.528],
+      [12, 0.206, -0.441],
+      [13, 0.234, -0.439],
+      [16, 0.276, -0.469],
+      [26, 0.398, -0.591],
+      [27, 0.407, -0.601],
+    ),
+  ],
+  [
+    table(
+      [8, 0.08, -0.671],
+      [12, 0.309, -0.54],
+      [16, 0.445, -0.492],
+      [20, 0.525, -0.513],
+      [26, 0.645, -0.54],
+      [27, 0.656, -0.541],
+    ),
+    table(
+      [8, 0.442, -0.439],
+      // biome-ignore lint/suspicious/noApproximativeNumericConstant: measured, not log10(e)
+      [10, 0.486, -0.434],
+      [11, 0.515, -0.428],
+      [12, 0.566, -0.421],
+      [18, 0.57, -0.422],
+      [27, 0.619, -0.469],
+    ),
+  ],
+  [
+    table(
+      [8, 0.18, -0.571],
+      [12, 0.46, -0.39],
+      [16, 0.526, -0.415],
+      [26, 0.649, -0.536],
+      [27, 0.656, -0.541],
+    ),
+    table([8, 0.566, -0.42], [16, 0.567, -0.419], [27, 0.619, -0.469]),
+  ],
+];
+
+/**
+ * Tables set by TextRenderer.setAdvancedAntiAliasingTable, by font name
+ * and style; adl uses one for light and dark text alike, whichever
+ * colour type it was set for. TextRenderer's settings are the player's,
+ * not a SWF's: they are kept for the page, as Flash keeps them for its
+ * process.
+ */
+const custom = new Map<string, CsmTable>();
+
+const styleKey = (name: string, bold: boolean, italic: boolean) =>
+  `${name}\u0000${bold ? (italic ? "boldItalic" : "bold") : italic ? "italic" : "regular"}`;
+
+/**
+ * Set a font's own table, entries of size, inside and outside cutoff, in
+ * any order; none takes it away. Text drawn by it before is drawn by it
+ * once drawn again. An entry with NaN or an infinity in it is left out,
+ * as the shader could make nothing of it.
+ */
+export function setCsmTable(
+  name: string,
+  style: string,
+  entries: [number, number, number][],
+): void {
+  const key = `${name}\u0000${style}`;
+  const usable = entries.filter((entry) => entry.every(Number.isFinite));
+  if (usable.length === 0) {
+    custom.delete(key);
+  } else {
+    usable.sort((a, b) => a[0] - b[0]);
+    custom.set(key, usable.flat());
+  }
+}
+
+/**
+ * Whether Flash takes a colour, 0xRRGGBB, for light text: its luma,
+ * 30:59:11, over 200 of 255. It is the colour as drawn, under the
+ * object's colour transform. This and cutoffs mirror what
+ * the renderer's glyph program (@swf2es/render's webgl/programs.ts) does
+ * in GLSL, which draws by it: a
+ * change to one is a change to the other.
+ */
+export function isLight(color: number): boolean {
+  return 30 * ((color >> 16) & 0xff) + 59 * ((color >> 8) & 0xff) + 11 * (color & 0xff) > 20000;
+}
+
+/** The tables a font's text is drawn by, light and dark. */
+export function csmTables(font: {
+  name: string;
+  bold: boolean;
+  italic: boolean;
+  csmHint?: number;
+}): readonly [CsmTable, CsmTable] {
+  const own = custom.size > 0 ? custom.get(styleKey(font.name, font.bold, font.italic)) : undefined;
+  if (own) {
+    return [own, own];
+  }
+
+  return DEFAULTS[Math.min(2, Math.max(0, font.csmHint ?? 0))];
+}
+
+/**
+ * The cutoffs at `ppem` pixels to the em, under `thickness` (-200 to
+ * 200) and `sharpness` (-400 to 400), into `out` as inside, outside: each
+ * moves them by a fiftieth of a pixel per pixel of size at its end of its
+ * range, thickness both outward, sharpness the two together; met, they
+ * stay where they met. The renderer's glyph program does the same per glyph.
+ */
+export function cutoffs(
+  table: CsmTable,
+  ppem: number,
+  thickness: number,
+  sharpness: number,
+  out: Float32Array,
+): void {
+  let inside = table[1];
+  let outside = table[2];
+  if (ppem >= table[table.length - 3]) {
+    inside = table[table.length - 2];
+    outside = table[table.length - 1];
+  } else if (ppem > table[0]) {
+    for (let i = 3; i < table.length; i += 3) {
+      if (ppem <= table[i]) {
+        const t = (ppem - table[i - 3]) / (table[i] - table[i - 3]);
+        inside = table[i - 2] + (table[i + 1] - table[i - 2]) * t;
+        outside = table[i - 1] + (table[i + 2] - table[i - 1]) * t;
+        break;
+      }
+    }
+  }
+
+  const unit = 0.0001 * ppem;
+  const t = Math.max(-200, Math.min(200, thickness));
+  const s = Math.max(-400, Math.min(400, sharpness));
+  inside -= unit * (t + s / 2);
+  outside -= unit * (t - s / 2);
+  if (inside < outside) {
+    inside = outside = (inside + outside) / 2;
+  }
+
+  out[0] = inside;
+  out[1] = outside;
+}

package/src/text/css.ts

@@ -0,0 +1,198 @@
+// The CSS that StyleSheet.parseCSS reads, as Flash reads it: selectors
+// before a block, properties name: value inside, comments skipped. Flash
+// finds few things wrong, and on any of them the whole sheet is ignored
+// (Ruffle's CssStream, which its corpus checks against Flash).
+
+const WHITESPACE = " \n\r\t";
+
+/** Each selector's properties, names as written; null for a sheet Flash rejects. */
+export function parseCss(input: string): Map<string, Map<string, string>> | null {
+  let pos = 0;
+  const peek = (): string | undefined => input[pos];
+
+  const skipComment = (): boolean => {
+    if (input.startsWith("/*", pos)) {
+      pos += 2;
+      while (!input.startsWith("*/", pos)) {
+        pos++;
+        if (pos >= input.length) {
+          return false;
+        }
+      }
+
+      pos += 2;
+      return true;
+    }
+
+    return false;
+  };
+
+  const skip = (): boolean => {
+    let found = false;
+    while (skipComment() || (pos < input.length && WHITESPACE.includes(input[pos]))) {
+      if (pos < input.length && WHITESPACE.includes(input[pos])) {
+        pos++;
+      }
+
+      found = true;
+    }
+
+    return found;
+  };
+
+  const until = (stops: string): string => {
+    const start = pos;
+    while (pos < input.length && !stops.includes(input[pos])) {
+      pos++;
+    }
+
+    return input.slice(start, pos);
+  };
+
+  const selectors = (): string[] | null => {
+    const out: string[] = [];
+    for (;;) {
+      skip();
+      const name = until("{, \n\r\t");
+      if (name) {
+        out.push(name);
+      }
+
+      skip();
+      const next = peek();
+      if (next === "{") {
+        pos++;
+        if (!out.length) {
+          out.push("");
+        }
+
+        return out;
+      }
+
+      if (next !== ",") {
+        return null;
+      }
+
+      pos++;
+    }
+  };
+
+  const properties = (): Map<string, string> | null => {
+    const out = new Map<string, string>();
+    for (;;) {
+      skip();
+      if (peek() === "}") {
+        pos++;
+        return out;
+      }
+
+      if (peek() === undefined) {
+        return out;
+      }
+
+      // Spaces before a name are skipped, after it kept, and within it an error.
+      const start = pos;
+      let name = until(": \n\r\t");
+      if (skip()) {
+        if (peek() === ":") {
+          name = input.slice(start, pos);
+        } else if (peek() !== undefined) {
+          return null;
+        }
+      }
+
+      if (peek() !== ":") {
+        return null;
+      }
+
+      pos++;
+      skip();
+      const valueStart = pos;
+      let value = until(";:}");
+      for (;;) {
+        const next = peek();
+        if (next === ":") {
+          // A colon in a value ends it at the line's end, if it has one.
+          pos = valueStart;
+          const line = until("\n\r");
+          if (peek() !== undefined) {
+            pos++;
+            out.set(name, line);
+            break;
+          }
+
+          pos = valueStart;
+          value = until(";}");
+          continue;
+        }
+
+        if (next === ";") {
+          pos++;
+          out.set(name, value);
+          break;
+        }
+
+        if (next === "}") {
+          pos++;
+          const end = value.search(/[\n\r]/);
+          out.set(name, end < 0 ? value : value.slice(0, end));
+          return out;
+        }
+
+        return null;
+      }
+    }
+  };
+
+  const result = new Map<string, Map<string, string>>();
+  for (;;) {
+    skip();
+    if (peek() === undefined) {
+      return result;
+    }
+
+    const names = selectors();
+    if (!names) {
+      return null;
+    }
+
+    const block = properties();
+    if (!block) {
+      return null;
+    }
+
+    for (const name of names) {
+      result.set(name, new Map(block));
+    }
+  }
+}
+
+/** A property name as a style object has it: font-size is fontSize. */
+export function camelCase(name: string): string {
+  return name.replace(/-(.)/g, (_, c: string) => c.toUpperCase());
+}
+
+/** A font-family list as a TextFormat's font: the generic families as Flash names them, spaces dropped around names. */
+export function fontList(input: string): string {
+  const generic: Record<string, string> = {
+    mono: "_typewriter",
+    "sans-serif": "_sans",
+    serif: "_serif",
+  };
+  return input
+    .split(",")
+    .map((name) => name.replace(/^ +/, ""))
+    .filter((name) => name !== "")
+    .map((name) => generic[name] ?? name)
+    .join(",");
+}
+
+/** A colour #RRGGBB, of at most six digits; 0 for anything else. */
+export function cssColor(input: string): number {
+  if (!input.startsWith("#")) {
+    return 0;
+  }
+
+  const digits = input.slice(1).trimEnd();
+  return digits.length <= 6 && /^[0-9a-fA-F]+$/.test(digits) ? Number.parseInt(digits, 16) : 0;
+}

package/src/text/fonts.ts

@@ -0,0 +1,129 @@
+// The fonts a field's text is laid out in (docs/architecture/text.md, "Text"):
+// a SWF's embedded fonts, found by name, and the browser's for a device
+// font, measured on a canvas where there is one.
+import type { Font } from "@swf2es/format";
+
+/** A SWF's embedded fonts: DefineFont through 3, by name. */
+export class FontSet {
+  private readonly byName = new Map<string, Font[]>();
+
+  add(font: Font): void {
+    const fonts = this.byName.get(font.name);
+    if (fonts) {
+      fonts.push(font);
+    } else {
+      this.byName.set(font.name, [font]);
+    }
+  }
+
+  /** Prefer a font with layout metrics when a library has more than one of the same name. */
+  find(name: string, bold: boolean, italic: boolean): Font | null {
+    const fonts = this.byName.get(name);
+    if (!fonts) {
+      return null;
+    }
+
+    return (
+      fonts.find((f) => f.bold === bold && f.italic === italic && f.layout) ??
+      fonts.find((f) => f.layout) ??
+      fonts.find((f) => f.bold === bold && f.italic === italic) ??
+      fonts[0]
+    );
+  }
+}
+
+/** A device font as the browser has it: `_sans`, `_serif` and `_typewriter` as its kinds, any other by name, then serif, as Flash's default is. */
+function fontFamily(font: string): string[] {
+  switch (font) {
+    case "_sans":
+      return ["Arial", "Helvetica", "sans-serif"];
+    case "_serif":
+      return ["Times New Roman", "Times", "serif"];
+    case "_typewriter":
+      return ["Courier New", "Courier", "monospace"];
+    default:
+      return [font, "serif"];
+  }
+}
+
+/** A device font's metrics at a size, in pixels: an advance for each character, the ascent and descent. */
+export interface DeviceMetrics {
+  advance(char: string): number;
+  ascent: number;
+  descent: number;
+}
+
+let canvas:
+  | { context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D }
+  | null
+  | undefined;
+
+function context(): CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null {
+  if (canvas === undefined) {
+    canvas = null;
+    if (typeof OffscreenCanvas !== "undefined") {
+      const c = new OffscreenCanvas(1, 1).getContext("2d");
+      canvas = c ? { context: c } : null;
+    } else if (typeof document !== "undefined") {
+      const c = document.createElement("canvas").getContext("2d");
+      canvas = c ? { context: c } : null;
+    }
+  }
+
+  return canvas?.context ?? null;
+}
+
+const measured = new Map<string, DeviceMetrics>();
+
+/** The CSS font a device format is measured and drawn in. */
+export function cssFont(font: string, size: number, bold: boolean, italic: boolean): string {
+  const families = fontFamily(font)
+    .map((f) => (/^[a-z-]+$/.test(f) ? f : `"${f}"`))
+    .join(", ");
+  return `${italic ? "italic " : ""}${bold ? "bold " : ""}${size}px ${families}`;
+}
+
+/**
+ * A device font's metrics: the browser's, from its canvas, where there is
+ * one; else (node) a stand-in, half the size a character, ascent 0.9 and
+ * descent 0.2 of it. Flash's system fonts are neither.
+ */
+export function deviceMetrics(
+  font: string,
+  size: number,
+  bold: boolean,
+  italic: boolean,
+): DeviceMetrics {
+  const key = `${font}|${size}|${bold}|${italic}`;
+  let metrics = measured.get(key);
+  if (metrics) {
+    return metrics;
+  }
+
+  const c = context();
+  if (c) {
+    const css = cssFont(font, size, bold, italic);
+    const widths = new Map<string, number>();
+    c.font = css;
+    const box = c.measureText("Mg");
+    metrics = {
+      advance: (char) => {
+        let w = widths.get(char);
+        if (w === undefined) {
+          c.font = css;
+          w = c.measureText(char).width;
+          widths.set(char, w);
+        }
+
+        return w;
+      },
+      ascent: box.fontBoundingBoxAscent ?? size * 0.9,
+      descent: box.fontBoundingBoxDescent ?? size * 0.2,
+    };
+  } else {
+    metrics = { advance: () => size / 2, ascent: size * 0.9, descent: size * 0.2 };
+  }
+
+  measured.set(key, metrics);
+  return metrics;
+}