@swf2es/player-hosts 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,305 @@
+// A SimpleButton, and the making of its four states from DefineButton's records.
+import { BUTTON_DOWN, BUTTON_HIT_TEST, BUTTON_OVER, BUTTON_UP, } from "../../format/index.js";
+import { Container } from "./container.js";
+import { BUTTON, CHILDREN, NO_CHILDREN, pickWork, scriptWork, } from "./displayobject.js";
+import { displayFor } from "./instantiate.js";
+/**
+ * Which of DefineButtonSound's sounds a change of state plays, by the
+ * state before and after, as Ruffle's button events pick them; none is -1.
+ * A drag off while pressed, which shows over, and back on, down again,
+ * play none either, as Ruffle's DragOut and DragOver: the pointer asks
+ * those quietly. A release outside plays over to up's
+ * (ButtonObject.releasedOutside).
+ */
+const BUTTON_SOUNDS = {
+    up: { up: -1, over: 1, down: -1 },
+    over: { up: 0, over: -1, down: 2 },
+    down: { up: -1, over: 3, down: -1 },
+};
+/**
+ * A button (SimpleButton): four states, each a display object, of which it
+ * shows the up, over or down one, as the pointer has it, and hit tests with
+ * the fourth. AS3 keeps all four states, showing one child while each state
+ * plays its frames (`frameChildren`). AVM1 keeps just the current state's
+ * records as its children. Not a container to a script.
+ */
+export class ButtonObject extends Container {
+    up = null;
+    over = null;
+    down = null;
+    hitTest = null;
+    state = "up";
+    firstOrder = false;
+    avm1Made = null;
+    avm1Flag = BUTTON_UP;
+    enabled = true;
+    useHandCursor = true;
+    trackAsMenu = false;
+    constructor() {
+        super();
+        this.kind = BUTTON;
+        this.frameChildren = NO_CHILDREN;
+    }
+    get upState() {
+        return this.up;
+    }
+    set upState(d) {
+        this.up = d;
+        this.statesChanged();
+    }
+    get overState() {
+        return this.over;
+    }
+    set overState(d) {
+        this.over = d;
+        this.statesChanged();
+    }
+    get downState() {
+        return this.down;
+    }
+    set downState(d) {
+        this.down = d;
+        this.statesChanged();
+    }
+    get hitTestState() {
+        return this.hitTest;
+    }
+    set hitTestState(d) {
+        this.hitTest = d;
+        // Where it is hit, which no change in the display list tells the pointer.
+        pickWork.changes++;
+        this.statesChanged();
+    }
+    /**
+     * Its frame children made again from the states it has now, each once,
+     * as Ruffle orders them, the hit test state first, whichever it shows: a
+     * new list, so that none it let go of stays held.
+     */
+    statesChanged() {
+        if (this.avm1Made) {
+            this.frameChildren = this.children;
+            return;
+        }
+        // A state that holds the button plays as its parent's child, not as the button's.
+        const states = [this.hitTest, this.up, this.down, this.over].filter((o, i, all) => o !== null && all.indexOf(o) === i && !o.encloses(this));
+        this.frameChildren = states.length > 0 ? states : NO_CHILDREN;
+        scriptWork.changes++;
+    }
+    /**
+     * Its frame children but any that has since come to hold it, as a state
+     * off the list a script then put the button in: a walk down them would
+     * come back to it.
+     */
+    playingStates() {
+        const states = this.frameChildren;
+        for (let i = 0; i < states.length; i++) {
+            if (states[i].encloses(this)) {
+                return states.filter((o) => !o.encloses(this));
+            }
+        }
+        return states;
+    }
+    /** Its states' next frame scripts run up, over, down, hit: the first, in a SWF after 9 (Scripting.construct). */
+    get firstScripts() {
+        return this.firstOrder;
+    }
+    set firstScripts(first) {
+        if (first !== this.firstOrder) {
+            this.firstOrder = first;
+            scriptWork.changes++;
+        }
+    }
+    /** The display object of state `state`. */
+    stateObject(state) {
+        return state === "up" ? this.upState : state === "over" ? this.overState : this.downState;
+    }
+    /** Show state `state`, with the sound DefineButtonSound gives the change. */
+    setState(state, sound = true) {
+        if (sound) {
+            this.playSound(BUTTON_SOUNDS[this.state][state]);
+        }
+        this.state = state;
+        this.show();
+    }
+    /** A press on it released elsewhere: up, with over to up's sound, as Ruffle's ReleaseOutside plays. */
+    releasedOutside() {
+        this.playSound(0);
+        this.setState("up", false);
+    }
+    /** DefineButtonSound's sound `index`, if it has one. */
+    playSound(index) {
+        const sounds = this.character?.type === "button" ? this.character.sounds : null;
+        const sound = sounds?.[index];
+        const library = this.library;
+        if (sound && library) {
+            library.sounds?.start(this, library, sound.id, sound.info);
+        }
+    }
+    /**
+     * Have the state it is in be its one child, as it is now. The states it
+     * does not show are parented to nothing, as Flash has them once made.
+     */
+    show() {
+        if (this.avm1Made) {
+            this.showAvm1();
+            return;
+        }
+        const current = this.stateObject(this.state);
+        for (const child of [...this.children]) {
+            if (child !== current) {
+                this.removeChild(child);
+            }
+        }
+        for (const state of [this.upState, this.overState, this.downState, this.hitTestState]) {
+            if (state && state !== current && state.parent === this && !this.children.includes(state)) {
+                state.parent = null;
+            }
+        }
+        // One that holds the button cannot be its child, as Flash refuses it (#2150): the button
+        // shows nothing, and it stays where it is.
+        if (current && !this.children.includes(current) && !current.encloses(this)) {
+            if (current.parent !== this) {
+                current.parent?.removeChild(current);
+            }
+            this.children.splice(0, 0, current);
+            this.puts++;
+            current.parent = this;
+            this.relist(current);
+            this.invalidate(CHILDREN);
+            scriptWork.changes++;
+        }
+    }
+    /** AVM1 keeps only the current state's records alive, reusing records shared by both states. */
+    makeAvm1States(made) {
+        this.avm1Made = made;
+        this.frameChildren = this.children;
+        this.show();
+    }
+    showAvm1() {
+        const character = this.character;
+        const library = this.library;
+        if (character?.type !== "button" || !library) {
+            return;
+        }
+        const flag = this.state === "up" ? BUTTON_UP : this.state === "over" ? BUTTON_OVER : BUTTON_DOWN;
+        const records = character.records;
+        for (let i = this.children.length - 1; i >= 0; i--) {
+            const child = this.children[i];
+            let keep = false;
+            for (let j = 0; j < records.length; j++) {
+                const record = records[j];
+                if (record.states & flag &&
+                    record.states & this.avm1Flag &&
+                    record.depth === child.depth &&
+                    record.character === child.character?.id) {
+                    keep = true;
+                    break;
+                }
+            }
+            if (!keep && child.depth !== null && child.depth >= 0) {
+                this.removeAtDepth(child.depth);
+            }
+        }
+        for (let i = 0; i < records.length; i++) {
+            const record = records[i];
+            const c = record.states & flag ? library.characters.get(record.character) : undefined;
+            if (!c ||
+                c.type === "binary" ||
+                c.type === "font" ||
+                c.type === "fontCff" ||
+                c.type === "sound") {
+                continue;
+            }
+            const previous = this.depths.get(record.depth);
+            const display = previous?.character?.id === c.id ? previous : displayFor(c, library);
+            display.applyPlace(recordPlace(record, true));
+            if (display !== previous) {
+                this.placeAtDepth(display, record.depth);
+                this.avm1Made?.(display, c);
+            }
+        }
+        if (this.hitTest?.parent === this) {
+            this.hitTest.parent = null;
+        }
+        this.avm1Flag = flag;
+    }
+}
+/**
+ * Make a button's states from its records. AVM1 builds only the state it
+ * shows; AS3 makes up, over, down, then hit test: each state the one character it
+ * shows, else a container of its characters by depth, one for none too. A
+ * character in several states is made once for each. `made` brings a
+ * character to life once placed, and `holderMade` each container, once all
+ * four states' characters are, as Flash names them after those; the hit
+ * test state takes only the records' transforms.
+ */
+export function buttonStates(button, character, library, made, holderMade) {
+    const holders = [];
+    const state = (flag) => {
+        const parts = [];
+        for (const record of character.records) {
+            const c = record.states & flag ? library.characters.get(record.character) : undefined;
+            if (c &&
+                c.type !== "binary" &&
+                c.type !== "font" &&
+                c.type !== "fontCff" &&
+                c.type !== "sound") {
+                const display = displayFor(c, library);
+                display.applyPlace(recordPlace(record, flag !== BUTTON_HIT_TEST));
+                parts.push({ display, character: c, record });
+            }
+        }
+        // Made as the button's, under it, though in no container's list: a
+        // script sees the stage from them, and no parent above them.
+        if (parts.length === 1) {
+            parts[0].display.parent = button;
+            made(parts[0].display, parts[0].character);
+            return parts[0].display;
+        }
+        const holder = new Container();
+        holder.parent = button;
+        for (const part of parts) {
+            holder.placeAtDepth(part.display, part.record.depth);
+            made(part.display, part.character);
+        }
+        holders.push(holder);
+        return holder;
+    };
+    if (library.avm1) {
+        button.makeAvm1States(made);
+        button.hitTestState = state(BUTTON_HIT_TEST);
+        button.show();
+        return;
+    }
+    button.upState = state(BUTTON_UP);
+    button.overState = state(BUTTON_OVER);
+    button.downState = state(BUTTON_DOWN);
+    button.hitTestState = state(BUTTON_HIT_TEST);
+    for (const holder of holders) {
+        holderMade(holder);
+    }
+    button.show();
+}
+/** A button record as a place of its character: its transform, and, but in the hit test state, its look. */
+function recordPlace(record, look) {
+    return {
+        depth: record.depth,
+        move: false,
+        character: record.character,
+        matrix: record.matrix,
+        colorTransform: look ? record.colorTransform : null,
+        ratio: null,
+        name: null,
+        clipDepth: null,
+        className: null,
+        hasImage: false,
+        blendMode: look ? record.blendMode : null,
+        cacheAsBitmap: null,
+        visible: null,
+        opaqueBackground: null,
+        filters: look ? record.filters : null,
+        metaData: null,
+        actions: null,
+        corrupt: 0,
+    };
+}

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

@@ -0,0 +1,40 @@
+/** The colour transform that changes nothing: an object without one draws as with this. */
+export const IDENTITY_COLOR = {
+    rMul: 1,
+    gMul: 1,
+    bMul: 1,
+    aMul: 1,
+    rAdd: 0,
+    gAdd: 0,
+    bAdd: 0,
+    aAdd: 0,
+};
+/** What a child draws, seen through its parent: `child` first, then `parent`. */
+export function concatColor(parent, child) {
+    return concatColorInto({ ...IDENTITY_COLOR }, parent, child);
+}
+/** `parent` and `child` concatenated, as concatColor does, into `out`, which is given back. */
+export function concatColorInto(out, parent, child) {
+    out.rMul = child.rMul * parent.rMul;
+    out.gMul = child.gMul * parent.gMul;
+    out.bMul = child.bMul * parent.bMul;
+    out.aMul = child.aMul * parent.aMul;
+    out.rAdd = child.rAdd * parent.rMul + parent.rAdd;
+    out.gAdd = child.gAdd * parent.gMul + parent.gAdd;
+    out.bAdd = child.bAdd * parent.bMul + parent.bAdd;
+    out.aAdd = child.aAdd * parent.aMul + parent.aAdd;
+    return out;
+}
+export function sameColor(a, b) {
+    return (a === b ||
+        (a !== null &&
+            b !== null &&
+            a.rMul === b.rMul &&
+            a.gMul === b.gMul &&
+            a.bMul === b.bMul &&
+            a.aMul === b.aMul &&
+            a.rAdd === b.rAdd &&
+            a.gAdd === b.gAdd &&
+            a.bAdd === b.bAdd &&
+            a.aAdd === b.aAdd));
+}

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

@@ -0,0 +1,150 @@
+// A display object with children. It keeps them in render order, which
+// is their index in AS3, and apart from it the children the timeline
+// placed, by depth, which is how SWF tags address them; a child the
+// timeline places goes before the first child of a greater depth.
+import { CHILDREN, DisplayObject, OTHER, scriptWork } from "./displayobject.js";
+export class Container extends DisplayObject {
+    /** The library whose timeline this is, for what it tells of children going; a script's container has none. */
+    library = null;
+    /** Its children in render order: index 0 is drawn first, below the rest. */
+    children = [];
+    /** The children the timeline placed, by depth. */
+    depths = new Map();
+    /** Whether a descendant changed since the renderer last synced. */
+    descendantsDirty = true;
+    /**
+     * The clips and buttons the frame's walks visit at and under it, in
+     * their order, kept while no clip or container comes or goes below it
+     * (walkList), and its arrays after, to be made again in; null where it
+     * has never been long enough to keep.
+     */
+    walk = null;
+    /** Counts the children put on the list, for removeAtDepth to see whether a listener put one back. */
+    puts = 0;
+    constructor() {
+        super();
+        this.frameChildren = this.children;
+    }
+    /**
+     * A child came, went or moved: the walks' lists that hold it are made
+     * again, those of this container and every one above it. Not for a
+     * leaf, a shape or a text, which no walk visits: a timeline's shapes
+     * swapped every frame leave the lists be.
+     */
+    relist(child) {
+        if (child.kind === OTHER && child.frameChildren.length === 0) {
+            return;
+        }
+        for (let p = this; p; p = p.parent) {
+            const walk = p.walk;
+            if (walk?.current) {
+                walk.current = false;
+                // Emptied, its room kept: one no walk makes again, off the list or now too short to
+                // keep, would hold what left it alive.
+                walk.items.fill(null);
+            }
+        }
+    }
+    /** Place `child` at timeline depth `depth`: before the first child of a greater depth. */
+    placeAtDepth(child, depth) {
+        this.removeAtDepth(depth);
+        let index = this.children.length;
+        for (let i = 0; i < this.children.length; i++) {
+            const d = this.children[i].depth;
+            if (d !== null && d > depth) {
+                index = i;
+                break;
+            }
+        }
+        child.depth = depth;
+        child.parent = this;
+        this.children.splice(index, 0, child);
+        this.puts++;
+        this.depths.set(depth, child);
+        this.relist(child);
+        this.invalidate(CHILDREN);
+        scriptWork.changes++;
+    }
+    removeAtDepth(depth) {
+        const child = this.depths.get(depth);
+        if (!child) {
+            return null;
+        }
+        // An AVM1 clip with an unload handler stays, drawn, at a depth below
+        // the timeline's until the next frame, as Flash keeps one (avm1/avm1.ts).
+        if (this.library?.avm1?.keeps(child)) {
+            const kept = -depth - 1;
+            this.depths.delete(depth);
+            this.depths.set(kept, child);
+            child.depth = kept;
+            return child;
+        }
+        // The timeline's removal: a script's goes through the natives, which tell of it themselves.
+        // Flash has the child out of the list while it tells of it, still its parent's: the
+        // siblings' indexes have closed up, and the parent no longer finds it there (#2025).
+        const index = this.children.indexOf(child);
+        if (index >= 0) {
+            this.takeOut(child, index);
+        }
+        const puts = this.puts;
+        this.library?.removing?.(child, true);
+        this.library?.sounds?.removed(child);
+        // A listener may have put it on this list again (which Flash does not survive). Where
+        // nothing was put on it meanwhile, the search, a whole list's on every removal, is spared.
+        if (child.parent === this && (this.puts === puts || !this.children.includes(child))) {
+            child.parent = null;
+            child.focusDrop?.(child);
+        }
+        return child;
+    }
+    /**
+     * Take `child` out, wherever it is in the list, and off the timeline's
+     * depths; nothing for one not in it, which a listener of its removal may
+     * have taken out already.
+     */
+    removeChild(child) {
+        const index = this.children.indexOf(child);
+        if (index < 0) {
+            return;
+        }
+        this.takeOut(child, index);
+        child.parent = null;
+        child.focusDrop?.(child);
+    }
+    /** `child`, at `index`, out of the list and off the depths; its parent is left to the caller. */
+    takeOut(child, index) {
+        if (child.depth !== null) {
+            this.depths.delete(child.depth);
+            child.depth = null;
+        }
+        this.children.splice(index, 1);
+        this.relist(child);
+        this.invalidate(CHILDREN);
+        scriptWork.changes++;
+    }
+    /**
+     * Put `child` at `index` in render order, as a script's addChildAt does:
+     * out of its parent first, and off the timeline's depths, which no
+     * longer place it.
+     */
+    addChildAt(child, index) {
+        const same = child.parent === this;
+        child.parent?.removeChild(child);
+        child.parent = this;
+        this.children.splice(same ? Math.min(index, this.children.length) : index, 0, child);
+        this.puts++;
+        this.relist(child);
+        this.invalidate(CHILDREN);
+        scriptWork.changes++;
+    }
+    swapChildren(a, b) {
+        const i = this.children.indexOf(a);
+        const j = this.children.indexOf(b);
+        this.children[i] = b;
+        this.children[j] = a;
+        this.relist(a);
+        this.relist(b);
+        this.invalidate(CHILDREN);
+        scriptWork.changes++;
+    }
+}

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

@@ -0,0 +1,14 @@
+// The display list the player owns: display objects, containers and
+// movie clips, as Flash has them. The renderer walks it (see scene/view.ts) and
+// never decides its order. Each kind of object has a module of its own; this
+// one gathers them for the rest of the player, which imports them from here.
+export { BitmapObject } from "./bitmapobject.js";
+export { ButtonObject, buttonStates } from "./buttonobject.js";
+export { Container } from "./container.js";
+export { BUTTON, CLIP, CONTENT, DisplayObject, LEAST_SCALE_3D, normalizeDegrees, OTHER, pickWork, rootOf, scriptWork, TRANSFORM, unloads, } from "./displayobject.js";
+export { construct, displayFor, instantiate } from "./instantiate.js";
+export { EMPTY_TIMELINE, MovieClip } from "./movieclip.js";
+export { ShapeObject } from "./shapeobject.js";
+export { StaticTextObject, TextObject } from "./textobjects.js";
+export { VideoObject } from "./videoobject.js";
+export { Clips, scriptChildren, walkList } from "./walk.js";