@swf2es/player 0.0.0-stage → 0.1.0

package/src/playerglobal/toplevel.ts

@@ -0,0 +1,158 @@
+// playerglobal's toplevel functions: trace, as Flash Player writes it to its
+// log, and flash.utils' getDefinitionByName, getTimer and the multi-byte
+// escapes, whose rules are what Flash traces in Ruffle's escape_multi_byte.
+import type { avm2 } from "@swf2es/runtime";
+import type { Scripting } from "../scripting.js";
+
+type Value = avm2.Value;
+
+/** "pkg.Name" or "pkg::Name" as "pkg::Name", as getDefinitionByName takes either. */
+function qualify(name: string): string {
+  if (name.includes("::")) {
+    return name;
+  }
+
+  const i = name.lastIndexOf(".");
+  return i < 0 ? name : `${name.slice(0, i)}::${name.slice(i + 1)}`;
+}
+
+/**
+ * What `name` names in `domain`, as getDefinitionByName and
+ * ApplicationDomain's lookups take a name: "pkg.Name" or "pkg::Name", or a
+ * Vector, "Vector.<T>" with or without its package, T named either way or
+ * a Vector too; `find` looks a plain name up. As Flash's, T is looked up
+ * as any definition, * among those not defined (#1065), and one that is
+ * not a class makes the Vector corrupt: what `notAClass` gives, by default
+ * VerifyError #1107, which hasDefinition counts as defined instead.
+ */
+export function definitionNamed(
+  rt: avm2.Runtime,
+  name: string,
+  find: (qualified: string) => avm2.Value,
+  notAClass: () => avm2.Value = () => {
+    throw rt.error("VerifyError", 1107);
+  },
+): avm2.Value {
+  const vector = /^(?:__AS3__\.vec(?:::|\.))?Vector\.<(.+)>$/.exec(name);
+  if (vector) {
+    const param = definitionNamed(rt, vector[1], find, notAClass);
+    return param?.$it ? rt.applyType(rt.classNamed("__AS3__.vec::Vector"), [param]) : notAClass();
+  }
+
+  return find(qualify(name));
+}
+
+const UTF8 = new TextEncoder();
+
+export function toplevelNatives(s: Scripting): avm2.Natives {
+  return {
+    trace:
+      (rt) =>
+      (...args: Value[]) => {
+        rt.print(args.map((v) => rt.toString(v)).join(" "));
+      },
+    // Looked up in the domain of the code that asks, as Flash's.
+    "flash.utils::getDefinitionByName": (rt) => (name: Value) =>
+      definitionNamed(rt, rt.toString(name), (q) => rt.definitionNamed(q, s.code.codeDomain())),
+    // The alias registerClassAlias gave the value's class, which describeType writes; null for none.
+    "flash.utils::getAliasName": (rt) => (v: Value) => {
+      if (v === null || v === undefined) {
+        return null;
+      }
+
+      const alias = rt.aliasOf(v.$it ? v.$it : rt.traitsOf(v));
+      return alias === "" ? null : alias;
+    },
+    // Milliseconds since the start, by the host's real clock or the frame clock (Timers.timer).
+    "flash.utils::getTimer": () => () => s.timers.timer(),
+    "flash.utils::escapeMultiByte": (rt) => (text: Value) => escapeMultiByte(rt.toString(text)),
+    "flash.utils::unescapeMultiByte": (rt) => (text: Value) => unescapeMultiByte(rt.toString(text)),
+  };
+}
+
+/** Every byte of the UTF-8 but the alphanumerics as %XX, up to a NUL; a lone surrogate is U+FFFD, as the encoder has it. */
+function escapeMultiByte(text: string): string {
+  const nul = text.indexOf("\0");
+  const bytes = UTF8.encode(nul < 0 ? text : text.slice(0, nul));
+  let out = "";
+  for (let i = 0; i < bytes.length; i++) {
+    const b = bytes[i];
+    const alphanumeric =
+      (b >= 0x30 && b <= 0x39) || (b >= 0x41 && b <= 0x5a) || (b >= 0x61 && b <= 0x7a);
+    out += alphanumeric
+      ? String.fromCharCode(b)
+      : `%${b.toString(16).toUpperCase().padStart(2, "0")}`;
+  }
+
+  return out;
+}
+
+const HEX = /^[0-9a-fA-F]$/;
+
+/**
+ * The bytes of %XX escapes and the rest as given, up to a NUL not behind a
+ * %, decoded as UTF-8 the lenient way: a % takes the next character, and
+ * one more if the first is a hex digit, and gives a byte only when both
+ * are; an encoded surrogate stands; an incomplete or invalid sequence
+ * leaves its bytes as characters of their own.
+ */
+function unescapeMultiByte(text: string): string {
+  const bytes: number[] = [];
+  for (let i = 0; i < text.length; ) {
+    const c = text[i++];
+    if (c === "\0") {
+      break;
+    }
+
+    if (c !== "%") {
+      for (const b of UTF8.encode(c)) {
+        bytes.push(b);
+      }
+
+      continue;
+    }
+
+    const first = text[i++];
+    if (first === undefined || !HEX.test(first)) {
+      continue;
+    }
+
+    const second = text[i++];
+    if (second !== undefined && HEX.test(second)) {
+      bytes.push(Number.parseInt(first + second, 16));
+    }
+  }
+
+  let out = "";
+  for (let i = 0; i < bytes.length; ) {
+    const b = bytes[i];
+    const length =
+      b < 0x80
+        ? 1
+        : b >= 0xc0 && b < 0xe0
+          ? 2
+          : b >= 0xe0 && b < 0xf0
+            ? 3
+            : b >= 0xf0 && b < 0xf8
+              ? 4
+              : 0;
+    let code = length === 1 ? b : length === 2 ? b & 0x1f : length === 3 ? b & 0x0f : b & 0x07;
+    let ok = length > 0 && i + length <= bytes.length;
+    for (let k = 1; ok && k < length; k++) {
+      const next = bytes[i + k];
+      ok = (next & 0xc0) === 0x80;
+      code = (code << 6) | (next & 0x3f);
+    }
+
+    if (!ok) {
+      out += String.fromCharCode(b);
+      i++;
+      continue;
+    }
+
+    out += String.fromCodePoint(code);
+    i += length;
+  }
+
+  return out;
+}

package/src/scene/advanced.ts

@@ -0,0 +1,282 @@
+// Advanced anti-aliasing (Saffron) in the renderer: a text's glyphs as one
+// geometry of quads (text/saffron.ts' GlyphQuads), which the backend's
+// glyph program covers pixel by pixel from the glyphs' outlines. A field's quads lie
+// in its own pixels, a StaticText's in its definition's, under its matrix.
+// The view keeps each text's quads while what they were made of holds
+// (AdvancedTexts).
+import { IDENTITY, type Matrix } from "@swf2es/format";
+import type { Geometries, GeometryData, GeometryHandle } from "@swf2es/render";
+import type { DisplayObject } from "../display/displayobject.js";
+import { type StaticTextObject, TextObject } from "../display/textobjects.js";
+import { csmTables } from "../text/csm.js";
+import { GUTTER, shownLines } from "../text/layout.js";
+import {
+  GlyphQuads,
+  quadIndices,
+  reserveAll,
+  STRIDE,
+  store as saffronStore,
+} from "../text/saffron.js";
+
+/** gridFitType's values, in the order the shader and CSMTextSettings number them. */
+const GRIDS = ["none", "pixel", "subpixel"];
+
+const NO_COLORS = new Uint32Array(0);
+
+/**
+ * A text's glyphs as Saffron draws them: the geometry of their quads, null
+ * for none, and those of its glyphs, counted in the order its items have
+ * them (scene/text.ts), drawn as normal text: those whose tables find no
+ * room.
+ */
+interface AdvancedGlyphs {
+  geometry: GeometryData | null;
+  normal: number[];
+}
+
+/**
+ * A field's embedded glyphs as quads, at `scale` of Flash's pixels to a
+ * pixel of the field, of the lines it shows, each where its pen stood in
+ * fractions of a twip, as adl places it; null where they cannot be drawn
+ * so, a glyph or the whole asking too much of the shader, for the field to
+ * be drawn as normal text, all of it alike.
+ */
+function fieldQuads(o: TextObject, scale: number): AdvancedGlyphs | null {
+  const layout = o.layout;
+  if (!o.model.text || layout.lines.length === 0) {
+    return null;
+  }
+
+  const first = Math.min(Math.max(0, o.scrollV - 1), layout.lines.length - 1);
+  // The lines that fit the field from there, one at least: adl draws no line part of the way.
+  const last = first + shownLines(o, first) - 1;
+  const dx = o.left * 20 - o.scrollH * 20;
+  const dy = o.top * 20 - (layout.lines[first].y - GUTTER);
+  const quads = reserveAll(
+    new GlyphQuads(GRIDS.indexOf(o.gridFitType), o.thickness, o.sharpness, scale),
+    (q) => {
+      for (let l = first; l <= last; l++) {
+        for (const c of layout.lines[l].chars) {
+          if (
+            c.shown &&
+            c.font &&
+            c.glyph &&
+            !q.reserve(c.glyph, c.font.em, Math.max(0, c.format.size), csmTables(c.font))
+          ) {
+            return false;
+          }
+        }
+      }
+
+      return true;
+    },
+  );
+  if (!quads) {
+    return null;
+  }
+
+  const normal: number[] = [];
+  let glyph = 0;
+
+  for (let l = first; l <= last; l++) {
+    const line = layout.lines[l];
+    const baseline = (dy + line.y + line.ascent) / 20;
+    for (const c of line.chars) {
+      if (!c.shown || !c.font || !c.glyph) {
+        continue;
+      }
+
+      if (
+        !quads.add(
+          c.glyph,
+          c.font.em,
+          (dx + c.at + c.kern) / 20,
+          baseline,
+          Math.max(0, c.format.size),
+          c.format.color & 0xffffff,
+          1,
+          csmTables(c.font),
+        )
+      ) {
+        normal.push(glyph);
+      }
+
+      glyph++;
+    }
+  }
+
+  return { geometry: geometryOf(quads), normal };
+}
+
+/**
+ * A StaticText's glyphs as quads in its definition's space, at `scale` of
+ * Flash's pixels to a pixel of it there; null where they cannot be drawn so.
+ */
+function staticQuads(o: StaticTextObject, scale: number): AdvancedGlyphs | null {
+  const csm = o.definition.csm;
+  if (!csm?.useFlashType) {
+    return null;
+  }
+
+  const glyphs = o.glyphs.glyphs;
+  const quads = reserveAll(new GlyphQuads(csm.gridFit, csm.thickness, csm.sharpness, scale), (q) =>
+    glyphs.every((placed) =>
+      q.reserve(placed.glyph, placed.font.em, placed.height / 20, csmTables(placed.font)),
+    ),
+  );
+  if (!quads) {
+    return null;
+  }
+
+  const normal: number[] = [];
+
+  for (let i = 0; i < glyphs.length; i++) {
+    const placed = glyphs[i];
+    if (
+      !quads.add(
+        placed.glyph,
+        placed.font.em,
+        placed.x / 20,
+        placed.y / 20,
+        placed.height / 20,
+        placed.color & 0xffffff,
+        (placed.color >>> 24) / 255,
+        csmTables(placed.font),
+      )
+    ) {
+      normal.push(i);
+    }
+  }
+
+  return { geometry: geometryOf(quads), normal };
+}
+
+/** The quads added as a geometry: their positions apart, for its bounds; null for none. */
+function geometryOf(quads: GlyphQuads): GeometryData | null {
+  const built = quads.built();
+  if (!built) {
+    return null;
+  }
+
+  const count = built.glyphs * 4;
+  const positions = new Float32Array(count * 2);
+
+  for (let k = 0; k < count; k++) {
+    positions[k * 2] = built.vertices[k * STRIDE];
+    positions[k * 2 + 1] = built.vertices[k * STRIDE + 1];
+  }
+
+  return {
+    positions,
+    colors: NO_COLORS,
+    indices: quadIndices(built.glyphs),
+    glyphs: { vertices: built.vertices, mode: built.mode, table: built.table },
+  };
+}
+
+/** A text's glyph quads as Saffron draws them (AdvancedTexts.advancedText), and what they were made of. */
+interface AdvancedText {
+  source: unknown;
+  scale: number;
+  resets: number;
+  scrollV: number;
+  scrollH: number;
+  left: number;
+  top: number;
+  height: number;
+  grid: string;
+  thickness: number;
+  sharpness: number;
+  glyphs: AdvancedGlyphs | null;
+  handle: GeometryHandle | null;
+}
+
+/** Texts' glyph quads as the view draws them, made again only as what they were made of changes. */
+export class AdvancedTexts {
+  /** Each advanced text's glyph quads, and what they were made of (advancedText); BitmapData.draw's apart. */
+  private readonly advancedTexts = new WeakMap<DisplayObject, AdvancedText>();
+  private readonly drawnAdvanced = new WeakMap<DisplayObject, AdvancedText>();
+
+  constructor(private readonly geometries: Geometries) {}
+
+  /**
+   * A text's glyphs as Saffron draws them, of its glyphs' quads made again
+   * as its layout, scroll or place in its field, its settings, its scale
+   * in Flash's pixels or the outlines' store change: their geometry, in the
+   * field's pixels or the StaticText's definition's, and what places them
+   * there in the text's space. Null where it cannot be drawn so, which is
+   * kept too.
+   */
+  advancedText(
+    o: TextObject | StaticTextObject,
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    target: { scale: number; pixel: number },
+    drawing: boolean,
+  ): { handle: GeometryHandle | null; normal: number[]; m: Matrix } | null {
+    const field = o instanceof TextObject ? o : null;
+    const m = field ? IDENTITY : staticMatrix(o as StaticTextObject);
+    // Flash's pixels a pixel of the text: the target's pixels a stage pixel over a pixel of Flash's.
+    // Kept in steps of a square root of two, the step down: the quads reach out as far as at the
+    // scale itself or further, and their cost counts as at most twice less, so that a text that
+    // grows or shrinks makes its quads again only now and then.
+    const exact =
+      Math.sqrt(Math.abs((a * d - b * c) * (m.a * m.d - m.b * m.c))) *
+      (target.scale / target.pixel);
+    const scale =
+      exact > 0 && Number.isFinite(exact) ? Math.SQRT2 ** Math.floor(Math.log2(exact) * 2) : 1;
+    const source = field ? field.layout : (o as StaticTextObject).glyphs;
+    // The stage's and BitmapData.draw's apart, as they draw it at scales of their own.
+    const texts = drawing ? this.drawnAdvanced : this.advancedTexts;
+    let kept = texts.get(o);
+    if (
+      kept &&
+      kept.source === source &&
+      kept.scale === scale &&
+      kept.resets === saffronStore.resets &&
+      (!field ||
+        (kept.scrollV === field.scrollV &&
+          kept.scrollH === field.scrollH &&
+          kept.left === field.left &&
+          kept.top === field.top &&
+          kept.height === field.height &&
+          kept.grid === field.gridFitType &&
+          kept.thickness === field.thickness &&
+          kept.sharpness === field.sharpness)) &&
+      (!kept.handle || this.geometries.alive(kept.handle))
+    ) {
+      return kept.glyphs ? { handle: kept.handle, normal: kept.glyphs.normal, m } : null;
+    }
+
+    if (kept?.handle && this.geometries.alive(kept.handle)) {
+      this.geometries.remove(kept.handle.id);
+    }
+
+    const glyphs = field ? fieldQuads(field, scale) : staticQuads(o as StaticTextObject, scale);
+    kept = {
+      source,
+      scale,
+      resets: saffronStore.resets,
+      scrollV: field?.scrollV ?? 0,
+      scrollH: field?.scrollH ?? 0,
+      left: field?.left ?? 0,
+      top: field?.top ?? 0,
+      height: field?.height ?? 0,
+      grid: field?.gridFitType ?? "",
+      thickness: field?.thickness ?? 0,
+      sharpness: field?.sharpness ?? 0,
+      glyphs,
+      handle: glyphs?.geometry ? this.geometries.add(glyphs.geometry) : null,
+    };
+    texts.set(o, kept);
+    return glyphs ? { handle: kept.handle, normal: glyphs.normal, m } : null;
+  }
+}
+
+/** A StaticText's matrix, from its definition's space to its own pixels. */
+function staticMatrix(o: StaticTextObject): Matrix {
+  const m = o.definition.definition.matrix;
+  return { a: m.a, b: m.b, c: m.c, d: m.d, tx: m.tx / 20, ty: m.ty / 20 };
+}

package/src/scene/context-menu.ts

@@ -0,0 +1,270 @@
+import type { MenuItem } from "../input/context-menu.js";
+import type { Player } from "../player.js";
+
+const openMenus = new WeakMap<Document, () => void>();
+
+/** The last item's caption, naming the host's build where it gives one. */
+export function aboutCaption(build: string | null): string {
+  return build ? `About swf2es (${build})` : "About swf2es";
+}
+
+/**
+ * DOM menus stay outside the canvas and exist only while open.
+ * `shown` is what the canvas shows in stage coordinates, which may reach
+ * past the stage into the margins, as Flash takes the pointer there too;
+ * the stage where it is not given.
+ */
+export function bindContextMenu(
+  canvas: HTMLCanvasElement,
+  player: Player,
+  point: (event: MouseEvent) => [number, number],
+  shown: () => { x: number; y: number; width: number; height: number } | null = () => null,
+): () => void {
+  const document = canvas.ownerDocument;
+  const window = document.defaultView;
+  const root = canvas.getRootNode();
+  const focusTarget = root instanceof ShadowRoot ? root.host : canvas;
+  const keyboardEvents = new WeakSet<MouseEvent>();
+  let dismiss: (() => void) | null = null;
+
+  const open = (event: MouseEvent) => {
+    if (event.defaultPrevented || player.destroyed) {
+      return;
+    }
+
+    const keyboard = keyboardEvents.has(event);
+    const [x, y] = keyboard
+      ? [
+          player.scripting?.mouseStageX ?? player.width / 2,
+          player.scripting?.mouseStageY ?? player.height / 2,
+        ]
+      : point(event);
+    const area = shown() ?? { x: 0, y: 0, width: player.width, height: player.height };
+    if (x < area.x || y < area.y || x >= area.x + area.width || y >= area.y + area.height) {
+      return;
+    }
+
+    event.preventDefault();
+    openMenus.get(document)?.();
+    dismiss?.();
+    const items = player.contextMenu({
+      x,
+      y,
+      ctrlKey: event.ctrlKey,
+      altKey: event.altKey,
+      shiftKey: event.shiftKey,
+    });
+    if (player.destroyed) {
+      return;
+    }
+
+    items.push({
+      caption: aboutCaption(player.build),
+      enabled: true,
+      separatorBefore: items.length > 0,
+      select: () => window?.open("https://swf2es.github.io/swf2es/", "_blank", "noopener"),
+    });
+    const lifetime = new AbortController();
+    const options = { capture: true, signal: lifetime.signal };
+    const prior = document.activeElement as HTMLElement | null;
+    const host = document.createElement("div");
+    host.dataset.swf2esContextMenu = "";
+    host.setAttribute("popover", "manual");
+    host.style.cssText =
+      "position:fixed;inset:auto;margin:0;padding:0;border:0;background:none;z-index:2147483647";
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { color-scheme: light dark; }
+      [role=menu] { box-sizing:border-box; min-width:190px; max-width:calc(100vw - 8px);
+        max-height:calc(100dvh - 8px); overflow:auto; padding:4px; border:1px solid #777;
+        border-radius:6px; background:Canvas; color:CanvasText;
+        box-shadow:0 4px 16px #0006; font:13px system-ui,sans-serif; }
+      [role=menu]:focus { outline:none; }
+      button { display:block; width:100%; box-sizing:border-box; padding:6px 18px;
+        border:0; border-radius:3px; background:transparent; color:inherit;
+        text-align:left; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; cursor:default; }
+      button:focus-visible, button:focus, button:hover:not(:disabled) {
+        outline:none; background:Highlight; color:HighlightText; }
+      button:disabled { color:GrayText; }
+      button[aria-checked=true]::before { content:"✓ "; }
+      hr { border:0; border-top:1px solid GrayText; margin:4px; }
+    `;
+    const menu = document.createElement("div");
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", "SWF context menu");
+    menu.tabIndex = -1;
+    const buttons: HTMLButtonElement[] = [];
+    let closed = false;
+    const close = (restore = false) => {
+      if (closed) {
+        return;
+      }
+
+      closed = true;
+      lifetime.abort();
+      host.remove();
+      dismiss = null;
+      if (openMenus.get(document) === close) {
+        openMenus.delete(document);
+      }
+      if (restore && prior?.isConnected) {
+        prior.focus({ preventScroll: true });
+      }
+    };
+    dismiss = close;
+    openMenus.set(document, close);
+    const select = (item: MenuItem) => {
+      if (closed) {
+        return;
+      }
+
+      close(true);
+      if (!player.destroyed) {
+        item.select();
+      }
+    };
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.separatorBefore && i > 0) {
+        const separator = document.createElement("hr");
+        separator.setAttribute("role", "separator");
+        menu.append(separator);
+      }
+
+      const button = document.createElement("button");
+      button.type = "button";
+      button.setAttribute("role", item.checked === undefined ? "menuitem" : "menuitemradio");
+      if (item.checked !== undefined) {
+        button.setAttribute("aria-checked", String(item.checked));
+      }
+
+      button.textContent = item.caption;
+      button.disabled = !item.enabled;
+      button.tabIndex = -1;
+      button.addEventListener("click", () => select(item));
+      if (item.enabled) {
+        buttons.push(button);
+      }
+
+      menu.append(button);
+    }
+
+    shadow.append(style, menu);
+    // The top layer escapes the embedding element's overflow and keeps menus in full screen.
+    const parent =
+      root instanceof ShadowRoot ? root : (document.fullscreenElement ?? document.body);
+    parent.append(host);
+    host.showPopover?.();
+    const rect = host.getBoundingClientRect();
+    const canvasRect = canvas.getBoundingClientRect();
+    const clientX = keyboard ? canvasRect.left + canvasRect.width / 2 : event.clientX;
+    const clientY = keyboard ? canvasRect.top + canvasRect.height / 2 : event.clientY;
+    host.style.left = `${Math.max(4, Math.min(clientX, (window?.innerWidth ?? 0) - rect.width - 4))}px`;
+    host.style.top = `${Math.max(4, Math.min(clientY, (window?.innerHeight ?? 0) - rect.height - 4))}px`;
+    // From the keyboard the first item takes focus; from the pointer none does, as in a native
+    // menu, so no item looks chosen before the pointer reaches it.
+    (keyboard ? (buttons[0] ?? menu) : menu).focus({ preventScroll: true });
+
+    const inside = (e: Event) => e.composedPath().includes(host);
+    document.addEventListener(
+      "pointerdown",
+      (e) => {
+        if (!inside(e)) {
+          close();
+        }
+      },
+      options,
+    );
+    host.addEventListener("pointerdown", (e) => e.stopPropagation());
+    document.addEventListener(
+      "focusin",
+      (e) => {
+        if (!inside(e)) {
+          close();
+        }
+      },
+      options,
+    );
+    host.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    window?.addEventListener("blur", () => close(), options);
+    window?.addEventListener("resize", () => close(), options);
+    document.addEventListener(
+      "scroll",
+      (e) => {
+        if (!inside(e)) {
+          close();
+        }
+      },
+      options,
+    );
+    document.addEventListener("keyup", (e) => e.stopPropagation(), options);
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        e.stopPropagation();
+        const index = buttons.indexOf(shadow.activeElement as HTMLButtonElement);
+        let next = index;
+        switch (e.key) {
+          case "ArrowDown":
+            next = (index + 1) % buttons.length;
+            break;
+          case "ArrowUp":
+            next = index < 0 ? buttons.length - 1 : (index - 1 + buttons.length) % buttons.length;
+            break;
+          case "Home":
+            next = 0;
+            break;
+          case "End":
+            next = buttons.length - 1;
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            buttons[index]?.click();
+            return;
+          case "Escape":
+            e.preventDefault();
+            close(true);
+            return;
+          case "Tab":
+            close(true);
+            return;
+          default:
+            return;
+        }
+
+        e.preventDefault();
+        buttons[next]?.focus({ preventScroll: true });
+      },
+      options,
+    );
+  };
+  const keyboardMenu = (event: Event) => {
+    const e = event as KeyboardEvent;
+    if (e.defaultPrevented || (e.key !== "ContextMenu" && !(e.key === "F10" && e.shiftKey))) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+    const menu = new MouseEvent("contextmenu", { bubbles: true, composed: true, cancelable: true });
+    keyboardEvents.add(menu);
+    canvas.dispatchEvent(menu);
+  };
+  canvas.addEventListener("contextmenu", open);
+  focusTarget.addEventListener("keydown", keyboardMenu, { capture: true });
+  if (focusTarget !== canvas) {
+    focusTarget.addEventListener("contextmenu", open as EventListener);
+  }
+
+  return () => {
+    dismiss?.();
+    canvas.removeEventListener("contextmenu", open);
+    focusTarget.removeEventListener("contextmenu", open as EventListener);
+    focusTarget.removeEventListener("keydown", keyboardMenu, { capture: true });
+  };
+}