@swf2es/player 0.0.0-stage → 0.1.0

package/src/scene/planes.ts

@@ -0,0 +1,260 @@
+// 3D objects as the view draws them (RenderView.drawPlane): what each one's
+// bitmap was last drawn of, which keeps it while nothing in it changes;
+// its quad's geometry, placed in perspective; and the lists of the passes
+// that draw their content, one a depth of 3D objects nested.
+import type { ColorTransform } from "@swf2es/format";
+import {
+  Commands,
+  Filters,
+  type Geometries,
+  type GeometryHandle,
+  type KeepHandle,
+  Rows,
+  SceneList,
+} from "@swf2es/render";
+import type { PixelRect } from "../bitmap/bitmap.js";
+import { IDENTITY_COLOR } from "../display/color.js";
+import { Container } from "../display/container.js";
+import { type DisplayObject, TRANSFORM } from "../display/displayobject.js";
+import { type Filter as FilterRecord, sameFilterRecords } from "../display/filters.js";
+import type { PlaneQuad } from "../display/plane.js";
+
+/** A geometry's colours where its vertices carry none, a 3D object's quad's. */
+const NO_COLORS = new Uint32Array(0);
+
+/**
+ * A 3D object's quad written into its geometry's arrays in place: its
+ * corners, its texels the bitmap's, `width` by `height`, and each corner's
+ * depth its w's inverse. Whether any of it changed, as stored.
+ */
+function planeQuadData(
+  data: { positions: Float32Array; texels: Float32Array; depths: Float32Array },
+  quad: PlaneQuad,
+  width: number,
+  height: number,
+): boolean {
+  // A function, not a closure over `changed`: it ran for every 3D object on every frame.
+  let changed = false;
+  for (let i = 0; i < 8; i++) {
+    changed = setStored(data.positions, i, quad.positions[i]) || changed;
+  }
+
+  for (let i = 0; i < 4; i++) {
+    changed = setStored(data.texels, i * 2, i === 1 || i === 2 ? width : 0) || changed;
+    changed = setStored(data.texels, i * 2 + 1, i >= 2 ? height : 0) || changed;
+    changed = setStored(data.depths, i, 1 / quad.ws[i]) || changed;
+  }
+
+  return changed;
+}
+
+/** `v` stored at `array[i]` as a 32-bit float: whether that changed it. */
+function setStored(array: Float32Array, i: number, v: number): boolean {
+  const stored = Math.fround(v);
+  if (array[i] === stored) {
+    return false;
+  }
+
+  array[i] = stored;
+  return true;
+}
+
+/** What a 3D object's bitmap was last drawn of, and its bounds then (RenderView.drawPlane). */
+export interface PlaneState {
+  seenAt: number;
+  generation: number;
+  rect: PixelRect | null;
+  scrolled: boolean;
+  filters: readonly FilterRecord[];
+  /** Whether its pass placed a 3D object or an outside mask, which move as all above does. */
+  unkeepable: boolean;
+  mask: DisplayObject | null;
+  left: number;
+  top: number;
+  texels: number;
+  samples: number;
+  width: number;
+  height: number;
+  color: ColorTransform;
+  colored: boolean;
+}
+
+export class Planes {
+  /** Each 3D object's kept bitmap (drawPlane). */
+  readonly keptBitmaps: WeakMap<DisplayObject, KeepHandle> = new WeakMap();
+  /** Each 3D object's quad as last made (quadGeometry). */
+  private readonly quads = new WeakMap<
+    DisplayObject,
+    {
+      handle: GeometryHandle;
+      data: {
+        positions: Float32Array;
+        colors: Uint32Array;
+        texels: Float32Array;
+        depths: Float32Array;
+        indices: Uint32Array;
+      };
+    }
+  >();
+  /** What each 3D object's bitmap was drawn of, which it is kept while unchanged (drawPlane). */
+  private readonly states = new WeakMap<DisplayObject, PlaneState>();
+  /** BitmapData.draw's kept bitmaps of 3D objects, apart from the stage's. */
+  readonly drawnBitmaps: WeakMap<DisplayObject, KeepHandle> = new WeakMap();
+  /**
+   * How many 3D objects and masks from outside them passes have placed: a
+   * pass that places one draws a bitmap that cannot be kept (drawPlane).
+   */
+  private placed = 0;
+  /** What `placed` was as each open pass began (enter), which its leave compares with. */
+  private readonly entered: number[] = [];
+  /** Where drawPlane works out a quad. */
+  readonly quad: PlaneQuad = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    positions: new Float64Array(8),
+    ws: new Float64Array(4),
+  };
+  /** How many 3D objects' passes the walk is in, and each depth's lists, kept for the next. */
+  private depth = 0;
+  private readonly passes: {
+    scene: SceneList;
+    rows: Rows;
+    filters: Filters;
+    commands: Commands;
+  }[] = [];
+
+  constructor(private readonly geometries: Geometries) {}
+
+  /** What `o`'s bitmap was last drawn of (drawPlane), made on its first. */
+  state(o: DisplayObject): PlaneState {
+    let k = this.states.get(o);
+    if (!k) {
+      k = {
+        seenAt: -1,
+        generation: -1,
+        rect: null,
+        scrolled: false,
+        filters: [],
+        unkeepable: false,
+        mask: null,
+        left: 0,
+        top: 0,
+        texels: 0,
+        samples: 0,
+        width: 0,
+        height: 0,
+        color: { ...IDENTITY_COLOR },
+        colored: false,
+      };
+      this.states.set(o, k);
+    }
+
+    return k;
+  }
+
+  /**
+   * `o`'s quad as `quad` has it, made again as it moves: its texels the bitmap's, `width` by
+   * `height`, each corner's depth its w.
+   */
+  quadGeometry(o: DisplayObject, width: number, height: number): GeometryHandle {
+    let kept = this.quads.get(o);
+    if (!kept || !this.geometries.alive(kept.handle)) {
+      const data = {
+        positions: new Float32Array(8),
+        colors: NO_COLORS,
+        texels: new Float32Array(8),
+        depths: new Float32Array(4),
+        indices: Uint32Array.of(0, 1, 2, 0, 2, 3),
+      };
+      planeQuadData(data, this.quad, width, height);
+      kept = { handle: this.geometries.add(data), data };
+      this.quads.set(o, kept);
+    } else if (planeQuadData(kept.data, this.quad, width, height)) {
+      this.geometries.update(kept.handle.id);
+    }
+
+    return kept.handle;
+  }
+
+  /** Whether the walk is in a 3D object's pass, whose pixels are its bitmap's, not the stage's. */
+  get inPass(): boolean {
+    return this.depth > 0;
+  }
+
+  /**
+   * A 3D object, or a mask from outside one, placed by the walk: in a pass,
+   * placed by what moves with all above it, which the pass's bitmap then
+   * cannot be kept past.
+   */
+  place(): void {
+    if (this.depth > 0) {
+      this.placed++;
+    }
+  }
+
+  /**
+   * A 3D object's pass begun, a depth further in: its lists. Each enter is
+   * paired with a leave in a finally, as the walk inside may throw.
+   */
+  enter(): { scene: SceneList; rows: Rows; filters: Filters; commands: Commands } {
+    const pass = this.pass(this.depth);
+    this.entered.push(this.placed);
+    this.depth++;
+    return pass;
+  }
+
+  /** The pass begun last ended: whether it placed anything (place), which keeps its bitmap from being kept. */
+  leave(): boolean {
+    this.depth--;
+    return this.placed !== this.entered.pop();
+  }
+
+  /** The lists of a pass at `depth`, made on its first. */
+  private pass(depth: number): {
+    scene: SceneList;
+    rows: Rows;
+    filters: Filters;
+    commands: Commands;
+  } {
+    let pass = this.passes[depth];
+    if (!pass) {
+      pass = {
+        scene: new SceneList(),
+        rows: new Rows(),
+        filters: new Filters(),
+        commands: new Commands(),
+      };
+      this.passes[depth] = pass;
+    }
+
+    return pass;
+  }
+}
+
+/**
+ * Whether nothing a 3D object's bitmap holds changed since the frame
+ * before drew it: in it but its own transform, which moves its quad
+ * alone, nor its filters' values, which setting flags as a transform.
+ * One whose pass placed a 3D object or a mask from outside it in it
+ * (unkeepable) is drawn anew on every frame, as those move with what
+ * above them moves, which flags nothing in it; and BitmapData.draw draws
+ * anew.
+ */
+export function planeUnchanged(
+  o: DisplayObject,
+  k: PlaneState,
+  frames: number,
+  snapshotting: boolean,
+): boolean {
+  return (
+    !snapshotting &&
+    !k.unkeepable &&
+    k.seenAt === frames - 1 &&
+    (o.dirty & ~TRANSFORM) === 0 &&
+    !(o.dirty & TRANSFORM && (o.scroll !== null || k.scrolled)) &&
+    !(o instanceof Container && o.descendantsDirty) &&
+    sameFilterRecords(k.filters, o.filters)
+  );
+}

package/src/scene/pointer.ts

@@ -0,0 +1,278 @@
+// The pointer, touches and wheel on the renderer's canvas, taken to the
+// player's stage from the browser's events themselves: Flash's display
+// list chooses the target, and the same rules hold for moves outside the
+// canvas, releases outside it, touches, the wheel, the cursor and the menu.
+import { canvasPoint, wheelLines } from "../input/canvas.js";
+import type { PointerState } from "../input/pointer.js";
+import type { TouchState } from "../input/touch.js";
+import type { Player } from "../player.js";
+import { bindContextMenu } from "./context-menu.js";
+
+/** The part of the stage the canvas shows, read as each event comes, as the view may be zoomed. */
+export interface ShownStage {
+  readonly bounds: { x: number; y: number; width: number; height: number };
+}
+
+/**
+ * The mouse, touches and wheel on `canvas` to `player`'s stage, of which
+ * the canvas shows `shown`; what undoes it. An event over the canvas
+ * counts where the canvas is its target: over an element on
+ * top of it, as a menu or a host's control, it is outside.
+ */
+export function bindCanvasPointer(
+  canvas: HTMLCanvasElement,
+  player: Player,
+  shown: ShownStage,
+): () => void {
+  const page = canvas.ownerDocument.defaultView as Window;
+  // Live: read once, it follows the element's style as the page changes it.
+  const style = page.getComputedStyle(canvas);
+  // A point on the stage, a touch's size there, and whether it is over the canvas's pixels.
+  const at: [x: number, y: number, width: number, height: number, inside: boolean] = [
+    0,
+    0,
+    0,
+    0,
+    false,
+  ];
+  const place = (e: MouseEvent, w = 0, h = 0) => {
+    const [cx, cy, sx, sy] = canvasPoint(canvas, style, e.clientX, e.clientY);
+    const bounds = shown.bounds;
+    const kx = bounds.width / canvas.width;
+    const ky = bounds.height / canvas.height;
+    at[0] = cx * kx + bounds.x;
+    at[1] = cy * ky + bounds.y;
+    at[2] = (w / sx) * kx;
+    at[3] = (h / sy) * ky;
+    // Its first target, the canvas itself where it is in a shadow root, whose host the page's
+    // listeners see as the target.
+    at[4] =
+      e.composedPath()[0] === canvas &&
+      cx >= 0 &&
+      cy >= 0 &&
+      cx < canvas.width &&
+      cy < canvas.height;
+    return at;
+  };
+
+  // A move is posted, handled when the player next advances or before the
+  // next press, release, leave or key; a frame callback of its own handles
+  // it where the host does not advance (a paused player, say).
+  let frame = 0;
+  const flushSoon = () => {
+    frame ||= page.requestAnimationFrame(() => {
+      frame = 0;
+      player.pointer?.flush();
+      player.touch?.flush();
+    });
+  };
+  const unbindMenu = bindContextMenu(
+    canvas,
+    player,
+    (e) => {
+      const [x, y] = place(e);
+      return [x, y];
+    },
+    () => shown.bounds,
+  );
+
+  // Each touch's last point, which a cancel, whose own may be anywhere, ends at.
+  const touches = new Map<number, TouchState>();
+  const touched = (type: "move" | "down" | "up", e: PointerEvent) => {
+    const touch = player.touch;
+    if (!touch) {
+      return;
+    }
+
+    const [x, y, width, height] = place(e, e.width, e.height);
+    const t: TouchState = {
+      x,
+      y,
+      id: e.pointerId,
+      primary: e.isPrimary,
+      width,
+      height,
+      pressure: e.pressure,
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      time: e.timeStamp,
+    };
+    if (type === "up") {
+      touches.delete(t.id);
+    } else {
+      touches.set(t.id, t);
+    }
+
+    if (type === "move") {
+      touch.post(t);
+      flushSoon();
+      return;
+    }
+
+    touch.handle(type === "down" ? "begin" : "end", t);
+  };
+  // The mouse's or a pen's, at the point `place` last found.
+  const send = (type: "move" | "down" | "up" | "leave", e: PointerEvent) => {
+    const p: PointerState = {
+      x: at[0],
+      y: at[1],
+      button: e.button,
+      buttons: e.buttons,
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      time: e.timeStamp,
+    };
+    if (type === "move" && player.pointer) {
+      player.pointer.post(p);
+      flushSoon();
+      return;
+    }
+
+    player.pointer?.handle(type, p);
+  };
+
+  // Every move on the page: one over the canvas, and, while the mouse's button is down after a
+  // press on it, one anywhere, as Flash keeps the mouse until the release. A release outside after
+  // a press that held the mouse leaves it at the next move outside, as Flash's mouseLeave comes.
+  // A lifted finger leaves the canvas too, as a touch: the mouse it moved stays, as Flash's does.
+  const pressed = new Set<number>();
+  let leaveNext = false;
+  const move = (e: PointerEvent) => {
+    const touch = e.pointerType === "touch";
+    const inside = place(e, e.width, e.height)[4];
+    if (touch) {
+      if (inside || pressed.has(e.pointerId)) {
+        touched("move", e);
+      }
+
+      return;
+    }
+
+    if (inside || player.pointer?.captured) {
+      leaveNext = false;
+      send("move", e);
+    } else if (leaveNext) {
+      leaveNext = false;
+      send("leave", e);
+    }
+  };
+  // A press over the stage the canvas shows: in a letterbox's bars it is on no stage.
+  const down = (e: PointerEvent) => {
+    if (!place(e, e.width, e.height)[4]) {
+      return;
+    }
+
+    pressed.add(e.pointerId);
+    if (e.pointerType === "touch") {
+      touched("down", e);
+    } else {
+      send("down", e);
+    }
+  };
+  // A release over the canvas, or outside it after a press on it.
+  const up = (e: PointerEvent) => {
+    const inside = place(e, e.width, e.height)[4];
+    const ours = pressed.delete(e.pointerId);
+    if (!inside && !ours) {
+      return;
+    }
+
+    if (e.pointerType === "touch") {
+      touched("up", e);
+      return;
+    }
+
+    const held = !inside && !!player.pointer?.captured;
+    send("up", e);
+    leaveNext ||= held && !player.pointer?.captured;
+  };
+  const leave = (e: PointerEvent) => {
+    if (e.pointerType !== "touch") {
+      place(e);
+      send("leave", e);
+    }
+  };
+  // The browser takes a touch back so, as for a system gesture, and the touch ends where it last
+  // was, without its tap or click. A mouse's cancel, as a native drag starts, leaves its press:
+  // its release outside still comes to the player.
+  const cancel = (e: PointerEvent) => {
+    if (e.pointerType !== "touch") {
+      return;
+    }
+
+    pressed.delete(e.pointerId);
+    const t = touches.get(e.pointerId);
+    if (t) {
+      touches.delete(t.id);
+      player.touch?.handle("cancel", { ...t, time: e.timeStamp });
+    }
+  };
+
+  // The wheel in Flash's lines (input/canvas.ts). The page scrolls unless the SWF takes the wheel
+  // where the pointer is. With Ctrl, as a touchpad's pinch comes too, the page zooms and the SWF
+  // hears nothing.
+  const left = { lines: 0 };
+  const wheel = (e: WheelEvent) => {
+    const pointer = player.pointer;
+    if (!pointer || e.deltaY === 0 || e.ctrlKey) {
+      return;
+    }
+
+    const delta = wheelLines(left, e);
+    const [x, y] = place(e);
+    const p: PointerState = {
+      x,
+      y,
+      buttons: e.buttons,
+      altKey: e.altKey,
+      shiftKey: e.shiftKey,
+      time: e.timeStamp,
+    };
+    if (pointer.wheel(p, delta)) {
+      e.preventDefault();
+    }
+  };
+
+  page.addEventListener("pointermove", move);
+  canvas.addEventListener("pointerdown", down);
+  page.addEventListener("pointerup", up);
+  canvas.addEventListener("pointerleave", leave);
+  page.addEventListener("pointercancel", cancel);
+  canvas.addEventListener("wheel", wheel, { passive: false });
+  // A finger's drags are the SWF's, not the page's pans and zooms.
+  const touchAction = canvas.style.touchAction;
+  canvas.style.touchAction = "none";
+  // Flash's arrow, auto's or a forced one, is the arrow, not the page's cursor.
+  const pointer = player.pointer;
+  if (pointer) {
+    pointer.onCursor = (cursor) => {
+      canvas.style.cursor = cursor;
+    };
+    canvas.style.cursor = pointer.cursor();
+  }
+
+  return () => {
+    unbindMenu();
+    if (pointer) {
+      pointer.onCursor = null;
+      canvas.style.cursor = "";
+    }
+
+    canvas.style.touchAction = touchAction;
+    if (frame) {
+      page.cancelAnimationFrame(frame);
+      frame = 0;
+    }
+
+    player.pointer?.flush();
+    player.touch?.flush();
+    page.removeEventListener("pointermove", move);
+    canvas.removeEventListener("pointerdown", down);
+    page.removeEventListener("pointerup", up);
+    canvas.removeEventListener("pointerleave", leave);
+    page.removeEventListener("pointercancel", cancel);
+    canvas.removeEventListener("wheel", wheel);
+  };
+}