@swf2es/player-hosts 0.0.0-stage → 0.1.1

package/dist/thread/player/display/shapes.js

@@ -0,0 +1,407 @@
+export const MOVE = 1;
+export const LINE = 2;
+export const CURVE = 3;
+export const CUBIC = 4;
+/** How many points a command takes. */
+export function pointsOf(command) {
+    return command === CUBIC ? 3 : command === CURVE ? 2 : 1;
+}
+/** The path as a polygon's points, x y x y..., its curves as eight chords each. */
+export function flatten(path) {
+    const points = [];
+    let x = 0;
+    let y = 0;
+    for (let i = 0; i < path.length;) {
+        const command = path[i];
+        if (command === CUBIC) {
+            const [c1x, c1y, c2x, c2y, ax, ay] = path.slice(i + 1, i + 7);
+            for (let k = 1; k <= 8; k++) {
+                const t = k / 8;
+                const u = 1 - t;
+                points.push(u * u * u * x + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * ax, u * u * u * y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * ay);
+            }
+            x = ax;
+            y = ay;
+            i += 7;
+        }
+        else if (command === CURVE) {
+            const [cx, cy, ax, ay] = path.slice(i + 1, i + 5);
+            for (let k = 1; k <= 8; k++) {
+                const t = k / 8;
+                const u = 1 - t;
+                points.push(u * u * x + 2 * u * t * cx + t * t * ax, u * u * y + 2 * u * t * cy + t * t * ay);
+            }
+            x = ax;
+            y = ay;
+            i += 5;
+        }
+        else {
+            x = path[i + 1];
+            y = path[i + 2];
+            points.push(x, y);
+            i += 3;
+        }
+    }
+    return points;
+}
+/** Whether (px, py) is inside the polygon, by the even-odd rule. */
+export function inside(points, px, py) {
+    let hit = false;
+    for (let i = 0, j = points.length - 2; i < points.length; j = i, i += 2) {
+        const xi = points[i];
+        const yi = points[i + 1];
+        const xj = points[j];
+        const yj = points[j + 1];
+        if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) {
+            hit = !hit;
+        }
+    }
+    return hit;
+}
+/**
+ * The path's extent, each curve at its true extremes, as [xMin, yMin,
+ * xMax, yMax]; null for a path with no points.
+ */
+export function extent(path) {
+    let xMin = Number.POSITIVE_INFINITY;
+    let yMin = Number.POSITIVE_INFINITY;
+    let xMax = Number.NEGATIVE_INFINITY;
+    let yMax = Number.NEGATIVE_INFINITY;
+    const take = (x, y) => {
+        xMin = Math.min(xMin, x);
+        yMin = Math.min(yMin, y);
+        xMax = Math.max(xMax, x);
+        yMax = Math.max(yMax, y);
+    };
+    let x = 0;
+    let y = 0;
+    for (let i = 0; i < path.length;) {
+        const command = path[i];
+        if (command === MOVE) {
+            // A move alone has no extent: the pen's place counts once a segment leaves it.
+            x = path[i + 1];
+            y = path[i + 2];
+            i += 3;
+            continue;
+        }
+        take(x, y);
+        if (command === CURVE) {
+            const [cx, cy, ax, ay] = path.slice(i + 1, i + 5);
+            take(ax, ay);
+            // Where the derivative is zero on either axis, if within the curve.
+            const at = (t) => {
+                const u = 1 - t;
+                take(u * u * x + 2 * u * t * cx + t * t * ax, u * u * y + 2 * u * t * cy + t * t * ay);
+            };
+            for (const [p0, c, p2] of [
+                [x, cx, ax],
+                [y, cy, ay],
+            ]) {
+                const denominator = p0 - 2 * c + p2;
+                const t = denominator === 0 ? -1 : (p0 - c) / denominator;
+                if (t > 0 && t < 1) {
+                    at(t);
+                }
+            }
+            x = ax;
+            y = ay;
+            i += 5;
+        }
+        else if (command === CUBIC) {
+            const [c1x, c1y, c2x, c2y, ax, ay] = path.slice(i + 1, i + 7);
+            take(ax, ay);
+            const at = (t) => {
+                const u = 1 - t;
+                take(u * u * u * x + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * ax, u * u * u * y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * ay);
+            };
+            for (const [p0, c1, c2, p3] of [
+                [x, c1x, c2x, ax],
+                [y, c1y, c2y, ay],
+            ]) {
+                // The derivative's roots: a t² + b t + c = 0.
+                const a = -p0 + 3 * c1 - 3 * c2 + p3;
+                const b = 2 * (p0 - 2 * c1 + c2);
+                const c = c1 - p0;
+                const roots = a === 0 ? (b === 0 ? [] : [-c / b]) : quadraticRoots(a, b, c);
+                for (const t of roots) {
+                    if (t > 0 && t < 1) {
+                        at(t);
+                    }
+                }
+            }
+            x = ax;
+            y = ay;
+            i += 7;
+        }
+        else {
+            x = path[i + 1];
+            y = path[i + 2];
+            take(x, y);
+            i += 3;
+        }
+    }
+    return xMin <= xMax ? [xMin, yMin, xMax, yMax] : null;
+}
+function quadraticRoots(a, b, c) {
+    const d = b * b - 4 * a * c;
+    if (d < 0) {
+        return [];
+    }
+    const s = Math.sqrt(d);
+    return [(-b + s) / (2 * a), (-b - s) / (2 * a)];
+}
+/** Layers as they draw mirrored, as of a version: the renderer and the hit tests ask on each redraw. */
+const mirroredLayers = new WeakMap();
+/**
+ * `layers` as they draw where a transform turns them over (`mirrored`),
+ * each culled drawTriangles' the triangles it keeps there. `version` is the
+ * drawing's, whose layers change in place.
+ */
+export function facing(layers, mirrored, version = 0) {
+    if (!mirrored || !layers.some((layer) => layer.mirrored)) {
+        return layers;
+    }
+    const kept = mirroredLayers.get(layers);
+    if (kept?.version === version) {
+        return kept.layers;
+    }
+    const made = layers.map((layer) => {
+        const parts = layer.mirrored;
+        if (!parts) {
+            return layer;
+        }
+        // The triangles' line is the layer's first; a line set after them goes on in it.
+        const rest = layer.strokes.filter((s) => !s.triangles);
+        return {
+            fills: parts.fills,
+            strokes: parts.stroke ? [parts.stroke, ...rest] : rest,
+            meshes: parts.meshes,
+            extent: layer.extent,
+        };
+    });
+    mirroredLayers.set(layers, { version, layers: made });
+    return made;
+}
+/** The polygon's orientation: 1 clockwise on a y-down screen, -1 the other way, 0 for no area. */
+export function orientation(points) {
+    let area = 0;
+    for (let i = 0, j = points.length - 2; i < points.length; j = i, i += 2) {
+        area += points[j] * points[i + 1] - points[i] * points[j + 1];
+    }
+    return Math.sign(area);
+}
+const TWIPS = 20;
+function reversed(e) {
+    return { x0: e.x1, y0: e.y1, cx: e.cx, cy: e.cy, x1: e.x0, y1: e.y0 };
+}
+/** Each fill's edges joined into contours: from an edge, the next one that starts where it ends. */
+function contours(edges) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let numeric = true;
+    for (const e of edges) {
+        if (!Number.isSafeInteger(e.x0) ||
+            !Number.isSafeInteger(e.y0) ||
+            !Number.isSafeInteger(e.x1) ||
+            !Number.isSafeInteger(e.y1)) {
+            numeric = false;
+            break;
+        }
+        minX = Math.min(minX, e.x0, e.x1);
+        minY = Math.min(minY, e.y0, e.y1);
+        maxX = Math.max(maxX, e.x0, e.x1);
+        maxY = Math.max(maxY, e.y0, e.y1);
+    }
+    const height = maxY - minY + 1;
+    // Integer coordinates fit one exact numeric key only while the whole grid fits a safe integer.
+    numeric &&= Number.isSafeInteger((maxX - minX + 1) * height);
+    const key = (x, y) => numeric ? (x - minX) * height + (y - minY) : `${x},${y}`;
+    const from = new Map();
+    // Links are index + 1, leaving zero for the end; reverse insertion preserves record order.
+    const next = new Uint32Array(edges.length);
+    for (let i = edges.length - 1; i >= 0; i--) {
+        const e = edges[i];
+        const at = key(e.x0, e.y0);
+        next[i] = from.get(at) ?? 0;
+        from.set(at, i + 1);
+    }
+    const used = new Uint8Array(edges.length);
+    const paths = [];
+    for (let first = 0; first < edges.length; first++) {
+        if (used[first]) {
+            continue;
+        }
+        const start = edges[first];
+        const path = [MOVE, start.x0 / TWIPS, start.y0 / TWIPS];
+        let e = start;
+        let i = first;
+        for (;;) {
+            used[i] = 1;
+            if (Number.isNaN(e.cx)) {
+                path.push(LINE, e.x1 / TWIPS, e.y1 / TWIPS);
+            }
+            else {
+                path.push(CURVE, e.cx / TWIPS, e.cy / TWIPS, e.x1 / TWIPS, e.y1 / TWIPS);
+            }
+            if (e.x1 === start.x0 && e.y1 === start.y0) {
+                break;
+            }
+            const at = key(e.x1, e.y1);
+            let candidate = from.get(at) ?? 0;
+            while (candidate !== 0 && used[candidate - 1]) {
+                candidate = next[candidate - 1];
+            }
+            if (candidate === 0) {
+                from.delete(at);
+                break;
+            }
+            from.set(at, next[candidate - 1]);
+            i = candidate - 1;
+            e = edges[i];
+        }
+        paths.push(path);
+    }
+    return paths;
+}
+/** The layers a shape draws, in order: each layer's fills, then its lines. */
+export function shapeLayers(shape, bitmap = () => null) {
+    const layers = [];
+    // A bitmap fill's bitmap, its matrix from twips to pixels; one the SWF lacks stays the SWF's fill.
+    const paint = (fill) => {
+        if (fill.type === "linear" || fill.type === "radial" || fill.type === "focal") {
+            const g = fill.gradient;
+            const m = g.matrix;
+            return {
+                type: "gradient",
+                radial: fill.type !== "linear",
+                focal: fill.type === "focal" ? g.focal : 0,
+                stops: g.stops.slice(0, 16),
+                spread: g.spread <= 2 ? g.spread : 0,
+                linearRgb: g.interpolation === 1,
+                // The square is in twips as the shape is, so only the translation goes to pixels.
+                matrix: { a: m.a, b: m.b, c: m.c, d: m.d, tx: m.tx / 20, ty: m.ty / 20 },
+            };
+        }
+        const image = fill.type === "bitmap" ? bitmap(fill.bitmap) : null;
+        if (fill.type !== "bitmap" || !image) {
+            return fill;
+        }
+        const m = fill.matrix;
+        return {
+            type: "image",
+            image,
+            matrix: { a: m.a / 20, b: m.b / 20, c: m.c / 20, d: m.d / 20, tx: m.tx / 20, ty: m.ty / 20 },
+            repeat: fill.repeat,
+            smooth: fill.smooth,
+        };
+    };
+    let fills = shape.fills.map(paint);
+    let lines = shape.lines;
+    let fillEdges = fills.map(() => []);
+    let strokes = lines.map(() => []);
+    let fill0 = 0;
+    let fill1 = 0;
+    let line = 0;
+    let x = 0;
+    let y = 0;
+    // The stroke being extended, and where it ends.
+    let stroke = null;
+    let strokeX = Number.NaN;
+    let strokeY = Number.NaN;
+    const flush = () => {
+        const layer = { fills: [], strokes: [] };
+        for (const [i, fill] of fills.entries()) {
+            if (fillEdges[i].length) {
+                layer.fills.push({ fill, contours: contours(fillEdges[i]), winding: "evenOdd" });
+            }
+        }
+        for (const [i, l] of lines.entries()) {
+            if (strokes[i].length) {
+                layer.strokes.push({ line: l, paths: strokes[i] });
+            }
+        }
+        if (layer.fills.length || layer.strokes.length) {
+            layers.push(layer);
+        }
+    };
+    const edge = (e) => {
+        // An edge with one fill on both sides is inside it and bounds nothing.
+        // Given to it both ways, it would join its fill's contours across that
+        // fill, into contours that cross and that the containment tree misfills.
+        if (fill0 !== fill1 && fill1 > 0 && fill1 <= fills.length) {
+            fillEdges[fill1 - 1].push(e);
+        }
+        if (fill0 !== fill1 && fill0 > 0 && fill0 <= fills.length) {
+            fillEdges[fill0 - 1].push(reversed(e));
+        }
+        if (line > 0 && line <= lines.length) {
+            if (!stroke || strokeX !== e.x0 || strokeY !== e.y0) {
+                stroke = [MOVE, e.x0 / TWIPS, e.y0 / TWIPS];
+                strokes[line - 1].push(stroke);
+            }
+            if (Number.isNaN(e.cx)) {
+                stroke.push(LINE, e.x1 / TWIPS, e.y1 / TWIPS);
+            }
+            else {
+                stroke.push(CURVE, e.cx / TWIPS, e.cy / TWIPS, e.x1 / TWIPS, e.y1 / TWIPS);
+            }
+            strokeX = e.x1;
+            strokeY = e.y1;
+        }
+    };
+    for (const r of shape.records) {
+        if (r.type === "style") {
+            if (r.styles) {
+                // New styles: what came before is a layer of its own, drawn first.
+                flush();
+                fills = r.styles.fills.map(paint);
+                lines = r.styles.lines;
+                fillEdges = fills.map(() => []);
+                strokes = lines.map(() => []);
+                fill0 = 0;
+                fill1 = 0;
+                line = 0;
+            }
+            if (r.moveTo) {
+                x = r.moveTo.x;
+                y = r.moveTo.y;
+            }
+            if (r.fill0 !== null) {
+                fill0 = r.fill0;
+            }
+            if (r.fill1 !== null) {
+                fill1 = r.fill1;
+            }
+            if (r.line !== null) {
+                line = r.line;
+            }
+            // A style change or a move starts a new stroke.
+            stroke = null;
+        }
+        else if (r.type === "line") {
+            const e = { x0: x, y0: y, cx: Number.NaN, cy: Number.NaN, x1: x + r.dx, y1: y + r.dy };
+            x = e.x1;
+            y = e.y1;
+            edge(e);
+        }
+        else {
+            const cx = x + r.cx;
+            const cy = y + r.cy;
+            const e = { x0: x, y0: y, cx, cy, x1: cx + r.ax, y1: cy + r.ay };
+            x = e.x1;
+            y = e.y1;
+            edge(e);
+        }
+    }
+    flush();
+    return layers;
+}
+/**
+ * A shape's bounds alone: its records and styles, hundreds of thousands
+ * of objects across a large application's SWFs, go once drawn into layers.
+ */
+export function boundsOf(shape) {
+    return { bounds: shape.bounds, edgeBounds: shape.edgeBounds };
+}

package/dist/thread/player/display/textobjects.js

@@ -0,0 +1,222 @@
+import { GUTTER, layoutText } from "../text/layout.js";
+import { placeGlyphs } from "../text/static.js";
+import { TextModel } from "../text/text.js";
+import { CONTENT, DisplayObject, TRANSFORM } from "./displayobject.js";
+/** A StaticText: DefineText's glyphs, which only a timeline places; its bounds the tag's. */
+export class StaticTextObject extends DisplayObject {
+    definition;
+    characters;
+    laidGlyphs = null;
+    constructor(definition, characters) {
+        super();
+        this.definition = definition;
+        this.characters = characters;
+        this.character = definition;
+    }
+    /** Show another text in its place, its glyphs laid out when next asked for. */
+    show(definition) {
+        this.definition = definition;
+        this.character = definition;
+        this.laidGlyphs = null;
+        this.invalidate(CONTENT);
+    }
+    /**
+     * Its glyphs as placed, and its text, found the first time they are
+     * asked for: by then its SWF's fonts are all read, those defined after it
+     * too.
+     */
+    get glyphs() {
+        this.laidGlyphs ??= placeGlyphs(this.definition, this.characters);
+        return this.laidGlyphs;
+    }
+}
+/**
+ * A TextField: placed by DefineEditText, or made by a script. Its text and
+ * formats are a TextModel; a timeline's starts with its tag's text, read
+ * as HTML if the tag says so, in the format the tag gives.
+ */
+export class TextObject extends DisplayObject {
+    definition;
+    model = new TextModel();
+    /** The embedded fonts its text may be in: its SWF's. */
+    fonts = null;
+    laid = null;
+    /** The field's rectangle, in its own pixels: from (left, top), width by height. */
+    left = 0;
+    top = 0;
+    width = 100;
+    height = 100;
+    border = false;
+    borderColor = 0;
+    background = false;
+    backgroundColor = 0xffffff;
+    multiline = false;
+    wordWrap = false;
+    type = "dynamic";
+    embedFonts = false;
+    autoSize = "none";
+    selectable = true;
+    maxChars = 0;
+    displayAsPassword = false;
+    condenseWhite = false;
+    antiAliasType = "normal";
+    gridFitType = "pixel";
+    sharpness = 0;
+    thickness = 0;
+    restrict = null;
+    mouseWheelEnabled = true;
+    alwaysShowSelection = false;
+    useRichTextClipboard = false;
+    scrollH = 0;
+    scrollV = 1;
+    /** The selection, from the end it was started at to the caret, as text indices; empty, a caret alone. */
+    anchorAt = 0;
+    caretAt = 0;
+    /** Whether it has the keyboard's focus, an input field then showing its caret. */
+    focused = false;
+    /** The StyleSheet its HTML is styled by, or null. */
+    styleSheet = null;
+    /** Under a sheet, the HTML a script last set, which htmlText gives back as it was set. */
+    htmlSource = null;
+    /** Under a sheet, its HTML styled again, as a change to the sheet asks. */
+    restyle = null;
+    constructor(definition, initialText = true) {
+        super();
+        this.definition = definition;
+        this.character = definition;
+        const edit = definition?.definition;
+        if (!edit) {
+            return;
+        }
+        this.left = edit.bounds.xMin / 20;
+        this.top = edit.bounds.yMin / 20;
+        this.width = (edit.bounds.xMax - edit.bounds.xMin) / 20;
+        this.height = (edit.bounds.yMax - edit.bounds.yMin) / 20;
+        this.multiline = edit.multiline;
+        this.wordWrap = edit.wordWrap;
+        this.type = edit.readOnly ? "dynamic" : "input";
+        this.displayAsPassword = edit.password;
+        this.autoSize = edit.autoSize ? "left" : "none";
+        this.selectable = edit.selectable;
+        // A border in the tag is Flash's border and white background together.
+        this.border = edit.border;
+        this.background = edit.border;
+        this.maxChars = edit.maxLength ?? 0;
+        this.embedFonts = edit.useOutlines;
+        const csm = definition.csm;
+        if (csm) {
+            this.antiAliasType = csm.useFlashType ? "advanced" : "normal";
+            this.gridFitType = ["none", "pixel", "subpixel"][csm.gridFit] ?? "none";
+            this.thickness = csm.thickness;
+            this.sharpness = csm.sharpness;
+        }
+        const font = definition?.font;
+        const color = edit.color;
+        this.model.defaultFormat = {
+            ...this.model.defaultFormat,
+            font: font?.name ?? edit.fontClass ?? this.model.defaultFormat.font,
+            bold: font?.bold ?? false,
+            italic: font?.italic ?? false,
+            size: edit.fontHeight === null ? 12 : edit.fontHeight / 20,
+            // RGBA as the tag stores it.
+            color: color === null ? 0 : ((color & 0xff) << 16) | (color & 0xff00) | ((color >>> 16) & 0xff),
+            align: ["left", "right", "center", "justify"][edit.align] ?? "left",
+            leftMargin: edit.leftMargin / 20,
+            rightMargin: edit.rightMargin / 20,
+            indent: edit.indent / 20,
+            leading: edit.leading / 20,
+        };
+        if (!initialText) {
+            this.model.setText("");
+        }
+        else if (edit.html) {
+            this.model.setHtml(edit.text, edit.multiline);
+        }
+        else {
+            this.model.setText(edit.text);
+        }
+    }
+    /** Its text laid out, as of now: made again only when the text, its formats or the field changed. */
+    get layout() {
+        const key = `${this.model.revision}|${this.width}|${this.wordWrap}|${this.embedFonts}|${this.displayAsPassword}|${this.type}|${this.antiAliasType}`;
+        if (this.laid?.key !== key) {
+            const text = this.model.text;
+            this.laid = {
+                key,
+                layout: layoutText({
+                    // A password's characters are laid out, and drawn, as asterisks; its lines stay.
+                    text: this.displayAsPassword ? text.replace(/[^\r]/g, "*") : text,
+                    formats: this.model.formats,
+                    defaultFormat: this.model.defaultFormat,
+                    width: this.width,
+                    wordWrap: this.wordWrap,
+                    embedFonts: this.embedFonts,
+                    fonts: this.fonts,
+                    input: this.type === "input",
+                    antiAliasType: this.antiAliasType,
+                }),
+            };
+        }
+        return this.laid.layout;
+    }
+    /**
+     * Fit the field to its text, as autoSize does: its height to the text's
+     * and the gutters, and its width too unless it wraps, keeping its left,
+     * centre or right edge where it was.
+     */
+    fit() {
+        if (this.autoSize === "none") {
+            return;
+        }
+        const layout = this.layout;
+        const height = (layout.height + 2 * GUTTER) / 20;
+        if (!this.wordWrap) {
+            const width = (layout.width + 2 * GUTTER) / 20;
+            const moved = this.autoSize === "center"
+                ? (this.width - width) / 2
+                : this.autoSize === "right"
+                    ? this.width - width
+                    : 0;
+            if (moved !== 0) {
+                this.matrix = { ...this.matrix, tx: Math.round((this.matrix.tx + moved) * 20) / 20 };
+                this.invalidate(TRANSFORM);
+            }
+            this.width = width;
+        }
+        this.height = height;
+        this.invalidate(CONTENT);
+    }
+    /** The text, \r between its lines. */
+    get text() {
+        return this.model.text;
+    }
+    /** The alignment of its first paragraph. */
+    get align() {
+        return (this.model.formats[0] ?? this.model.defaultFormat).align;
+    }
+    /** The end the selection was started at, within the text as it is now, which a script may have shortened. */
+    get anchor() {
+        return Math.min(this.anchorAt, this.model.text.length);
+    }
+    /** The caret, within the text as it is now. */
+    get caret() {
+        return Math.min(this.caretAt, this.model.text.length);
+    }
+    /** The selection's first and last index, in order. */
+    get selection() {
+        const [anchor, caret] = [this.anchor, this.caret];
+        return anchor <= caret ? [anchor, caret] : [caret, anchor];
+    }
+    /** Select from `anchor` to `caret`, each kept within the text; a focused field shows its caret there. */
+    select(anchor, caret) {
+        const length = this.model.text.length;
+        const [a, c] = [Math.max(0, Math.min(length, anchor)), Math.max(0, Math.min(length, caret))];
+        // A drag selects on every move, mostly what it had: redraw only for a change.
+        if (a === this.anchor && c === this.caret) {
+            return;
+        }
+        this.anchorAt = a;
+        this.caretAt = c;
+        this.invalidate(CONTENT);
+    }
+}