@swf2es/player 0.0.0-stage → 0.1.1

package/src/index.ts

@@ -0,0 +1,66 @@
+/**
+ * Browser SWF player: display list, timeline and playerglobal (flash.*),
+ * drawn by RenderView (@swf2es/player/scene). It compiles a SWF's ABCs
+ * with @swf2es/codegen as the SWF loads (its JIT), or takes their modules from a
+ * module cache, those the swf2es command compiled ahead of time included.
+ */
+
+export { AIR_DEFINITIONS } from "./air-definitions.js";
+export { Avm1, type Avm1Options } from "./avm1/avm1.js";
+export {
+  Container,
+  DisplayObject,
+  displayFor,
+  instantiate,
+  MovieClip,
+  ShapeObject,
+} from "./display/display.js";
+export { type Path, type ShapeLayer, shapeLayers } from "./display/shapes.js";
+export { type Character, type Library, readLibrary, type Timeline } from "./display/timeline.js";
+export {
+  browserFileHost,
+  type FileFilter,
+  type FileHost,
+  filtersGreyOutFiles,
+  type SaveFile,
+  type SelectedFile,
+} from "./files.js";
+export type {
+  AirApplication,
+  AirWindow,
+  CachedModule,
+  ClipboardHost,
+  ClipboardText,
+  Drawer,
+  EncryptedStoreHost,
+  ExternalInterfaceHost,
+  FetchRequest,
+  FetchResult,
+  FileStat,
+  FileSystemHost,
+  ModuleCache,
+  Navigate,
+  PlatformCapabilities,
+  ScreenCapabilities,
+  SharedObjectStorage,
+  SocketEndpoints,
+  SocketEvents,
+  SocketHost,
+  SocketTransport,
+  WebSocketEvents,
+  WebSocketHost,
+  WebSocketTransport,
+  WindowBounds,
+  WorkerHost,
+  WorkerThread,
+} from "./hosts.js";
+export { browserClipboard, globalWebSocketHost } from "./hosts.js";
+export { bindActivation } from "./input/activation.js";
+export type { MenuItem } from "./input/context-menu.js";
+export { bindKeyboard, type Keyboard, type KeyState } from "./input/keyboard.js";
+export type { Pointer, PointerState } from "./input/pointer.js";
+export { LocalConnections } from "./localconnection.js";
+export { Player } from "./player.js";
+export type { FillTessellator } from "./scene/fills.js";
+export { airLibrary, builtinLibrary, playerglobalLibrary, Scripting } from "./scripting.js";
+export type { FromWorker, ToWorker, WorkerInit } from "./workers/protocol.js";

package/src/input/activation.ts

@@ -0,0 +1,62 @@
+// The player's activation as a browser host sees it: Flash Player is
+// active while it has the system's focus, and a browser tells the page's
+// through the window's focus and blur and the document's visibility. A
+// plug-in lost focus to the page around it too, which an element that
+// takes the keys tells by its focusout.
+
+/**
+ * Tell `player` when the page gains or loses focus or is hidden or shown
+ * (Player.setActive), and, with `element`, when the focus moves from the
+ * element to the page around it, whose keys the element no longer hears.
+ * A page without focus or hidden as it binds, a background tab's, starts
+ * the player inactive, before its scripts listen, so that the first focus
+ * is an ACTIVATE.
+ */
+export function bindActivation(
+  player: { setActive(active: boolean): void },
+  win: Window,
+  element: HTMLElement | null = null,
+): () => void {
+  const doc = win.document;
+  let focused = doc.hasFocus();
+  let left = false;
+  const update = () => {
+    player.setActive(focused && !left && doc.visibilityState !== "hidden");
+  };
+  const focus = () => {
+    focused = true;
+    update();
+  };
+  const blur = () => {
+    focused = false;
+    update();
+  };
+  // The element's focus is the page's too.
+  const focusin = () => {
+    focused = true;
+    left = false;
+    update();
+  };
+  const focusout = (event: Event) => {
+    const to = (event as FocusEvent).relatedTarget as Node | null;
+    // The window's own blur takes the element's focus too: that is not the page's.
+    if (doc.hasFocus() && !(to && element?.contains(to))) {
+      left = true;
+      update();
+    }
+  };
+  win.addEventListener("focus", focus);
+  win.addEventListener("blur", blur);
+  doc.addEventListener("visibilitychange", update);
+  element?.addEventListener("focusin", focusin);
+  element?.addEventListener("focusout", focusout);
+  update();
+
+  return () => {
+    win.removeEventListener("focus", focus);
+    win.removeEventListener("blur", blur);
+    doc.removeEventListener("visibilitychange", update);
+    element?.removeEventListener("focusin", focusin);
+    element?.removeEventListener("focusout", focusout);
+  };
+}

package/src/input/avm1.ts

@@ -0,0 +1,102 @@
+// Mouse input shared by an AS3 host and the AVM1 movies its Loaders hold.
+import type { Avm1 } from "../avm1/avm1.js";
+import { Avm1Pointer } from "../avm1/pointer.js";
+import type { DisplayObject, MovieClip } from "../display/display.js";
+import type { Scripting } from "../scripting.js";
+import type { Cursor, PointerState } from "./pointer.js";
+
+export class LoadedAvm1Input {
+  private readonly movies = new Map<MovieClip, Avm1Pointer>();
+  private over: Avm1Pointer | null = null;
+
+  constructor(private readonly s: Scripting) {}
+
+  add(root: MovieClip, vm: Avm1): void {
+    const stage = this.s.stage;
+    if (!stage) {
+      return;
+    }
+
+    const pointer = new Avm1Pointer(stage, vm, root);
+    pointer.onCursor = () => this.s.pointer?.updateCursor();
+    this.movies.set(root, pointer);
+  }
+
+  remove(root: MovieClip): boolean {
+    const pointer = this.movies.get(root);
+    if (this.over === pointer) {
+      this.over = null;
+    }
+
+    this.movies.delete(root);
+    return this.movies.size === 0;
+  }
+
+  /** A stable callback for the AS3 pick: the AVM1Movie stands in for its interactive children. */
+  readonly hit = (root: MovieClip, x: number, y: number): boolean =>
+    this.movies.get(root)?.hit(x, y) ?? false;
+
+  broadcast(type: "move" | "down" | "up", p: PointerState): void {
+    for (const pointer of this.movies.values()) {
+      pointer.broadcast(type, p);
+    }
+  }
+
+  /** Global listeners ran already; only the winning movie gets button picks. */
+  prepare(type: "move" | "down" | "up", p: PointerState, target: DisplayObject | null): number {
+    this.over = this.movies.get(target as MovieClip) ?? null;
+    let redraws = 0;
+    for (const pointer of this.movies.values()) {
+      const before = pointer.redraws;
+      pointer.pickable = pointer === this.over;
+      if (type === "move") {
+        pointer.handle(type, p, false);
+      } else {
+        pointer.sync(p, pointer.pickable);
+      }
+
+      redraws += pointer.redraws - before;
+    }
+
+    return redraws;
+  }
+
+  finish(type: "down" | "up", p: PointerState): number {
+    let redraws = 0;
+    for (const pointer of this.movies.values()) {
+      const before = pointer.redraws;
+      pointer.handle(type, p, false);
+      redraws += pointer.redraws - before;
+    }
+
+    return redraws;
+  }
+
+  sync(p: PointerState, target: DisplayObject | null): number {
+    this.over = this.movies.get(target as MovieClip) ?? null;
+    let redraws = 0;
+    for (const pointer of this.movies.values()) {
+      const before = pointer.redraws;
+      pointer.sync(p, pointer === this.over);
+      redraws += pointer.redraws - before;
+    }
+
+    return redraws;
+  }
+
+  leave(p: PointerState): number {
+    let redraws = 0;
+    this.over = null;
+    for (const pointer of this.movies.values()) {
+      const before = pointer.redraws;
+      pointer.handle("leave", p, false);
+      redraws += pointer.redraws - before;
+    }
+
+    return redraws;
+  }
+
+  cursor(): Cursor | null {
+    return this.over?.cursor() ?? null;
+  }
+}

package/src/input/canvas.ts

@@ -0,0 +1,74 @@
+// What the pointer binding (scene/pointer.ts) takes from the browser:
+// where a client point lies on a canvas's pixels as CSS shows them, and the
+// wheel's movement in Flash's lines.
+
+/**
+ * Where a client point lies on `canvas`'s pixels. CSS `object-fit` shows
+ * them in a box of their own within the element's content box,
+ * letterboxed by `contain`, cropped by `cover`, centred as the default
+ * `object-position` puts it. Also the CSS pixels a canvas pixel spans each
+ * way. `style` is the canvas's live computed style.
+ */
+export function canvasPoint(
+  canvas: HTMLCanvasElement,
+  style: CSSStyleDeclaration,
+  clientX: number,
+  clientY: number,
+): [x: number, y: number, sx: number, sy: number] {
+  // The content box: the element's rectangle within its borders and padding.
+  const px = (v: string | undefined) => Number.parseFloat(v ?? "") || 0;
+  const rect = canvas.getBoundingClientRect();
+  let left = rect.left + px(style.borderLeftWidth) + px(style.paddingLeft);
+  let top = rect.top + px(style.borderTopWidth) + px(style.paddingTop);
+  const width =
+    rect.width -
+    px(style.borderLeftWidth) -
+    px(style.paddingLeft) -
+    px(style.borderRightWidth) -
+    px(style.paddingRight);
+  const height =
+    rect.height -
+    px(style.borderTopWidth) -
+    px(style.paddingTop) -
+    px(style.borderBottomWidth) -
+    px(style.paddingBottom);
+
+  let sx = width / canvas.width;
+  let sy = height / canvas.height;
+  const fit = style.objectFit;
+  if (fit === "contain" || fit === "scale-down" || fit === "cover" || fit === "none") {
+    let scale = fit === "cover" ? Math.max(sx, sy) : fit === "none" ? 1 : Math.min(sx, sy);
+    if (fit === "scale-down") {
+      scale = Math.min(scale, 1);
+    }
+
+    left += (width - canvas.width * scale) / 2;
+    top += (height - canvas.height * scale) / 2;
+    sx = scale;
+    sy = scale;
+  }
+
+  return [(clientX - left) / sx, (clientY - top) / sy, sx, sy];
+}
+
+/**
+ * The wheel's movement in Flash's lines, up positive: 3 a notch, Flash's
+ * delta on Windows. A browser gives a notch as 3 lines, or as about 100
+ * pixels, fewer where the page is zoomed or the screen scaled, and several
+ * at once as their multiple; a touchpad's few pixels at a time add up in
+ * `left`, 100 to 3 lines, till a whole line is taken.
+ */
+export function wheelLines(left: { lines: number }, e: WheelEvent): number {
+  const size = Math.abs(e.deltaY);
+  if (e.deltaMode !== 0) {
+    left.lines = -e.deltaY * (e.deltaMode === 2 ? 3 : 1);
+  } else if (size >= 50) {
+    left.lines = -Math.sign(e.deltaY) * 3 * Math.max(1, Math.round(size / 100));
+  } else {
+    left.lines -= (e.deltaY * 3) / 100;
+  }
+
+  const delta = Math.trunc(left.lines);
+  left.lines -= delta;
+  return delta;
+}

package/src/input/context-menu.ts

@@ -0,0 +1,105 @@
+// A menu is a snapshot made after menuSelect, not something polled by the renderer.
+import type { avm2 } from "@swf2es/runtime";
+import type { Container } from "../display/display.js";
+import { dispatchTo } from "../scripting/events.js";
+import type { Scripting } from "../scripting.js";
+import { type PointerState, pointerTarget } from "./pointer.js";
+
+export interface MenuItem {
+  caption: string;
+  enabled: boolean;
+  separatorBefore?: boolean;
+  checked?: boolean;
+  select(): void;
+}
+
+export interface ContextMenu {
+  items: MenuItem[];
+  quality: boolean;
+}
+
+export function customContextMenu(s: Scripting, stage: Container, p: PointerState): ContextMenu {
+  const result: ContextMenu = { items: [], quality: s.showDefaultContextMenu };
+  s.mouseStageX = p.x;
+  s.mouseStageY = p.y;
+  const rt = s.rt;
+  const get = (o: avm2.Value, name: string) => rt.getProperty(o, rt.publicName(name));
+  const picked = pointerTarget(
+    stage,
+    p.x,
+    p.y,
+    s.stageViewportWidth || s.stageWidth,
+    s.stageViewportHeight || s.stageHeight,
+    undefined,
+    s.stageViewportX,
+    s.stageViewportY,
+  );
+  const target = picked === stage ? s.root : picked;
+  let owner = target;
+  let menu: avm2.AsObject | null = null;
+  for (; owner; owner = owner.parent) {
+    const value = owner.object?.$contextMenu;
+    if (value && rt.isInstance(value, rt.classNamed("flash.ui::ContextMenu"))) {
+      menu = value;
+      break;
+    }
+  }
+
+  if (!menu) {
+    return result;
+  }
+
+  const mouse = target?.object ?? null;
+  const contextOwner = owner?.object ?? null;
+  const event = (type: string) =>
+    rt.construct(
+      rt.classNamed("flash.events::ContextMenuEvent"),
+      type,
+      false,
+      false,
+      mouse,
+      contextOwner,
+    );
+  dispatchTo(s, menu, event("menuSelect"));
+  const builtIn = get(menu, "builtInItems");
+  result.quality &&= !!builtIn && rt.toBoolean(get(builtIn, "quality"));
+  const custom = get(menu, "customItems");
+  if (!custom) {
+    return result;
+  }
+
+  const length = rt.toUint(get(custom, "length"));
+  const cls = rt.classNamed("flash.ui::ContextMenuItem");
+  const captions = new Set<string>();
+  let selected = false;
+  for (let i = 0; i < length && result.items.length < 15; i++) {
+    const item = get(custom, String(i));
+    if (!rt.isInstance(item, cls) || !rt.toBoolean(get(item, "visible"))) {
+      continue;
+    }
+
+    const caption = rt.toString(get(item, "caption"));
+    if (!caption || captions.has(caption)) {
+      continue;
+    }
+
+    captions.add(caption);
+    const enabled = rt.toBoolean(get(item, "enabled"));
+    result.items.push({
+      caption,
+      enabled,
+      separatorBefore: rt.toBoolean(get(item, "separatorBefore")),
+      select: () => {
+        if (!enabled || selected || s.destroyed) {
+          return;
+        }
+
+        selected = true;
+        s.clipboard.gesture(() => dispatchTo(s, item, event("menuItemSelect")));
+        s.updates++;
+      },
+    });
+  }
+
+  return result;
+}