animl 0.0.0-stage → 0.1.0

package/modules/input/manifest.js

@@ -0,0 +1,100 @@
+const after = ["components"];
+var manifest_default = {
+  ...{
+    name: "input",
+    summary: "Input: pointer, keyboard, wheel and gamepad listeners, cursors, dragging and hit testing.",
+    after: [],
+    core: { entry: "core/index.ts", export: "input", svg: "core/svg.ts", svgExport: "inputSVG" },
+    web: [{ name: "input", budget: 7104 }],
+    adapters: {
+      "packages/core/src/modules/input/index.ts": "core/index.ts",
+      "packages/core/src/modules/input/svg.ts": "core/svg.ts",
+      "packages/markup/src/input.ts": "markup/index.ts",
+      "packages/web/src/input.ts": "web/index.ts"
+    },
+    exports: {
+      "core:./input": "packages/core/src/modules/input/index.ts",
+      "markup:./input": "packages/markup/src/input.ts",
+      "web:./input": "packages/web/src/input.ts"
+    },
+    tests: [
+      "modules/input/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts",
+      "packages/markup/test/module-fields.test.ts",
+      "packages/markup/test/decompile.test.ts"
+    ],
+    conformance: [
+      "input-bf4-data-writes",
+      "input-focus-machine-integration",
+      "input-key-focused-component",
+      "host-api-coordinate-mapping",
+      "host-api-dom-listener-control",
+      "host-api-gamepad",
+      "host-api-low-level-pointer",
+      "host-api-low-level-scroll",
+      "host-api-manual-gamepad-batch",
+      "host-api-multitouch",
+      "host-api-pointer-exit",
+      "host-api-scroll-hit-policy",
+      "host-api-scroll-latching",
+      "input-align-preserve",
+      "input-align-snap",
+      "input-bounded-hit-tests",
+      "input-button-middle",
+      "input-button-secondary",
+      "input-capture-phase",
+      "input-cursor-arrow",
+      "input-cursor-hidden",
+      "input-cursor-intent",
+      "input-cursor-pointer",
+      "input-cursor-resize-horizontal",
+      "input-cursor-resize-vertical",
+      "input-cursor-text",
+      "input-disable-listeners",
+      "input-gamepad-axis",
+      "input-gamepad-button",
+      "input-gamepad-button-phases",
+      "input-gamepad-connected",
+      "input-gamepad-disconnected",
+      "input-gamepad-host",
+      "input-gamepad-index-mapping",
+      "input-hit-draw-order",
+      "input-focus-pointer-draw-order",
+      "input-hit-occlusion-query",
+      "input-hit-parent-chain",
+      "input-hit-shape-geometry",
+      "input-hit-test-host",
+      "input-key-down",
+      "input-key-filter",
+      "input-key-modifiers",
+      "input-key-repeat",
+      "input-key-up",
+      "input-keyboard-bubbling",
+      "input-multi-touch",
+      "input-multi-trigger-listener",
+      "input-opaque-targets",
+      "input-pointer-cancel",
+      "input-pointer-drag",
+      "input-pointer-drag-end",
+      "input-pointer-drag-start",
+      "input-pointer-enable",
+      "input-touch-page-scroll",
+      "input-trackpad-scroll",
+      "input-wheel-scroll",
+      "transforms-collapse",
+      "transforms-solo",
+      "input-write-key-pressed",
+      "input-write-pointer-x",
+      "input-write-pointer-y",
+      "input-write-pointer-delta-x",
+      "input-write-pointer-delta-y"
+    ],
+    docs: ["spec/SPEC.md", "spec/ANIML.md", "docs/WEB.md", "modules/input/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/input/markup/index.d.ts

@@ -0,0 +1 @@
+export declare const inputMarkup: {};

package/modules/input/markup/index.js

@@ -0,0 +1,4 @@
+const inputMarkup = {};
+export {
+  inputMarkup
+};

package/modules/input/web/index.d.ts

@@ -0,0 +1,24 @@
+import type { InputController } from '../core/runtime.js';
+import type { GamepadRecord, PointerEventKind, PointerOptions, KeyOptions, ScrollOptions } from '../core/types.js';
+import '../../../packages/web/src/index.js';
+export { inputMatrix } from './mapping.js';
+export interface InputOptions {
+    listeners: boolean;
+    multitouch: boolean;
+    pointerExit: boolean;
+    touchScroll: boolean;
+    gamepads: boolean;
+    requireFocus: boolean;
+}
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        input(): InputController;
+        inputPoint(x: number, y: number): DOMPoint;
+        get inputOptions(): InputOptions;
+        set inputOptions(value: Partial<InputOptions>);
+        inputPointer(kind: PointerEventKind, x?: number, y?: number, options?: PointerOptions): boolean;
+        inputKey(kind: 'down' | 'up', key: string, options?: KeyOptions): boolean;
+        inputScroll(x: number, y: number, dx: number, dy: number, options?: ScrollOptions): boolean;
+        inputGamepads(batch: readonly GamepadRecord[]): void;
+    }
+}

package/modules/input/web/index.js

@@ -0,0 +1,252 @@
+import { input } from "../core/index.js";
+import { inputMatrix } from "./mapping.js";
+import "../../../packages/web/src/index.js";
+import { inputMatrix as inputMatrix2 } from "./mapping.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(input);
+const defaults = {
+  listeners: true,
+  multitouch: true,
+  pointerExit: true,
+  touchScroll: true,
+  gamepads: false,
+  requireFocus: true
+};
+const options = /* @__PURE__ */ new WeakMap();
+const attached = /* @__PURE__ */ new WeakMap();
+const polling = /* @__PURE__ */ new Set();
+const hooked = /* @__PURE__ */ new WeakSet();
+let frame = 0;
+const config = (i) => options.get(i) ?? defaults;
+const active = (i) => i.player?.model.doc.requires?.includes("input");
+function flush(i) {
+  if (!i.hasAttribute("paused")) {
+    i.pause();
+    i.play();
+  }
+  i.invalidate();
+}
+function point(i, x, y) {
+  const svg = i.shadowRoot?.querySelector("svg");
+  if (svg) {
+    const m2 = svg.getScreenCTM();
+    if (m2) return new DOMPoint(x, y).matrixTransform(m2.inverse());
+  }
+  if (!i.player) throw Error("anima: empty icon");
+  const fitted = Icon.viewBox && Icon.canvasBox?.(i, [0, 0, 1, 1]);
+  if (fitted) return new DOMPoint((x - fitted.x) / fitted.width, (y - fitted.y) / fitted.height);
+  const canvas = i.shadowRoot?.querySelector("canvas");
+  const rect = canvas?.getBoundingClientRect() ?? i.getBoundingClientRect();
+  const width = canvas ? parseFloat(getComputedStyle(canvas).width) : rect.width;
+  const height = canvas ? parseFloat(getComputedStyle(canvas).height) : rect.height;
+  const m = inputMatrix(
+    i.player.model.viewBox,
+    width,
+    height,
+    i.getAttribute("fit") ?? "contain",
+    i.getAttribute("align") ?? "center"
+  );
+  return new DOMPoint(
+    (x - rect.left) * width / rect.width,
+    (y - rect.top) * height / rect.height
+  ).matrixTransform(new DOMMatrix(m).inverse());
+}
+const cursorCSS = {
+  arrow: "default",
+  hidden: "none",
+  pointer: "pointer",
+  "resize-horizontal": "ew-resize",
+  "resize-vertical": "ns-resize",
+  text: "text"
+};
+function attach(i) {
+  if (attached.has(i) || !active(i)) return;
+  const abort = new AbortController();
+  attached.set(i, abort);
+  const listen = (type, fn, passive = false) => i.addEventListener(type, fn, { capture: true, passive, signal: abort.signal });
+  for (const [event, kind] of [
+    ["pointermove", "move"],
+    ["pointerdown", "down"],
+    ["pointerup", "up"],
+    ["pointerleave", "leave"],
+    ["pointercancel", "cancel"],
+    ["lostpointercapture", "cancel"]
+  ])
+    listen(event, (e) => {
+      if (!active(i)) return;
+      const ev = e, o = config(i), c = i.input();
+      Icon.inputEvents.add(e);
+      if (e.composedPath()[0].hasAttribute("data-semantic")) return;
+      if (!o.listeners || !o.multitouch && ev.isPrimary === false || !o.pointerExit && kind === "leave")
+        return;
+      const p = kind === "leave" || kind === "cancel" ? { x: 0, y: 0 } : point(i, ev.clientX, ev.clientY);
+      c.pointer(kind, p.x, p.y, { id: ev.pointerId, button: ev.button < 0 ? 0 : ev.button });
+      if (kind === "down") {
+        if (i.player?.focused) e.preventDefault();
+        try {
+          i.setPointerCapture(ev.pointerId);
+        } catch {
+        }
+      }
+      const intent = c.cursor;
+      i.style.cursor = intent ? cursorCSS[intent] : i.player.model.doc.a11y?.role === "button" ? "pointer" : "";
+      flush(i);
+    });
+  for (const [type, kind] of [
+    ["keydown", "down"],
+    ["keyup", "up"]
+  ])
+    listen(type, (e) => {
+      if (!active(i) || e.composedPath()[0]?.hasAttribute("data-semantic")) return;
+      if (!config(i).listeners) {
+        Icon.inputEvents.add(e);
+        return;
+      }
+      const k = e;
+      const handled = i.input().key(kind, k.key, {
+        repeat: k.repeat,
+        shift: k.shiftKey,
+        control: k.ctrlKey,
+        alt: k.altKey,
+        meta: k.metaKey
+      });
+      if (handled) {
+        e.preventDefault();
+      }
+    });
+  for (const type of ["keydown", "keyup"])
+    i.addEventListener(
+      type,
+      () => {
+        if (active(i) && config(i).listeners) flush(i);
+      },
+      { signal: abort.signal }
+    );
+  listen("wheel", (e) => {
+    if (!active(i)) return;
+    if (!config(i).listeners) return;
+    const w = e, p = point(i, w.clientX, w.clientY);
+    const unit = w.deltaMode === 1 ? 16 : w.deltaMode === 2 ? i.getBoundingClientRect().height : 1;
+    const handled = i.input().scroll(p.x, p.y, w.deltaX * unit, w.deltaY * unit, { time: performance.now() / 1e3 });
+    if (handled) {
+      e.preventDefault();
+      flush(i);
+    }
+  });
+  i.style.touchAction = config(i).touchScroll ? "pan-x pan-y" : "none";
+}
+function poll() {
+  frame = 0;
+  for (const i of polling) {
+    const o = config(i);
+    if (!i.isConnected || !active(i) || !o.gamepads) {
+      polling.delete(i);
+      continue;
+    }
+    if (document.hidden || o.requireFocus && i !== document.activeElement && !i.contains(document.activeElement))
+      continue;
+    const pads = Array.from(navigator.getGamepads?.() ?? []).filter((p) => !!p);
+    const batch = pads.map((p) => ({
+      index: p.index,
+      connected: p.connected,
+      mapping: p.mapping,
+      axes: Array.from(p.axes),
+      buttons: p.buttons.map((b) => ({ value: b.value, pressed: b.pressed }))
+    }));
+    for (const index of i.input().pads.keys())
+      if (!batch.some((r) => r.index === index)) batch.push({ index, connected: false });
+    i.input().gamepads(batch);
+    flush(i);
+  }
+  if (polling.size) frame = requestAnimationFrame(poll);
+}
+const load = Icon.prototype.load, loadModel = Icon.prototype.loadModel, destroy = Icon.prototype.destroy;
+Icon.prototype.loadModel = function(...args) {
+  attached.get(this)?.abort();
+  attached.delete(this);
+  later(this);
+  loadModel.apply(this, args);
+  attach(this);
+};
+const later = (i) => {
+  if (!hooked.has(i)) {
+    hooked.add(i);
+    i.addEventListener("anima:load", () => attach(i));
+  }
+};
+Icon.prototype.load = function(...args) {
+  attached.get(this)?.abort();
+  attached.delete(this);
+  const result = load.apply(this, args);
+  attach(this);
+  later(this);
+  return result;
+};
+Icon.prototype.destroy = function() {
+  if (active(this)) this.input().cancel();
+  attached.get(this)?.abort();
+  attached.delete(this);
+  polling.delete(this);
+  if (!polling.size && frame) {
+    cancelAnimationFrame(frame);
+    frame = 0;
+  }
+  destroy.call(this);
+};
+const previous = Icon.eventHook;
+Icon.eventHook = (icon, kind, detail) => {
+  if (kind === "cleanup" && active(icon)) icon.input().cancel();
+  previous?.(icon, kind, detail);
+};
+for (const [host, method] of [
+  ["inputPointer", "pointer"],
+  ["inputKey", "key"],
+  ["inputScroll", "scroll"],
+  ["inputGamepads", "gamepads"]
+])
+  Object.defineProperty(Icon.prototype, host, {
+    configurable: true,
+    value: function(...args) {
+      const controller = this.input(), result = Reflect.apply(controller[method], controller, args);
+      flush(this);
+      return result;
+    }
+  });
+Object.defineProperties(Icon.prototype, {
+  input: {
+    configurable: true,
+    value: function() {
+      if (!this.player) throw Error("anima: empty icon");
+      return this.player.input();
+    }
+  },
+  inputPoint: {
+    configurable: true,
+    value: function(x, y) {
+      return point(this, x, y);
+    }
+  },
+  inputOptions: {
+    configurable: true,
+    get: function() {
+      return { ...config(this) };
+    },
+    set: function(value) {
+      const next = { ...config(this), ...value };
+      options.set(this, next);
+      if (active(this)) {
+        if (!next.listeners) this.input().cancel();
+        attach(this);
+      }
+      this.style.touchAction = next.touchScroll ? "pan-x pan-y" : "none";
+      if (next.gamepads) {
+        polling.add(this);
+        if (!frame) frame = requestAnimationFrame(poll);
+      } else polling.delete(this);
+    }
+  }
+});
+for (const i of document.querySelectorAll("anima-icon")) attach(i);
+export {
+  inputMatrix2 as inputMatrix
+};

package/modules/input/web/mapping.d.ts

@@ -0,0 +1,3 @@
+import type { Mat } from '../../../packages/core/src/geom.js';
+/** Source viewBox to a CSS viewport, independent of device pixel ratio. */
+export declare function inputMatrix(box: readonly number[], width: number, height: number, fit?: string, align?: string): Mat;

package/modules/input/web/mapping.js

@@ -0,0 +1,20 @@
+function inputMatrix(box, width, height, fit = "contain", align = "center") {
+  const [x, y, w, h] = box;
+  if (![x, y, w, h, width, height].every(Number.isFinite) || w <= 0 || h <= 0 || width <= 0 || height <= 0)
+    throw Error("anima: invalid input viewport");
+  let sx = width / w, sy = height / h;
+  if (fit === "none") sx = sy = 1;
+  else if (fit !== "fill") sx = sy = (fit === "cover" ? Math.max : Math.min)(sx, sy);
+  const factor = (lo, hi) => align.includes(lo) ? 0 : align.includes(hi) ? 1 : 0.5;
+  return [
+    sx,
+    0,
+    0,
+    sy,
+    (width - w * sx) * factor("left", "right") - x * sx,
+    (height - h * sy) * factor("top", "bottom") - y * sy
+  ];
+}
+export {
+  inputMatrix
+};

package/modules/layout/core/algorithm.d.ts

@@ -0,0 +1,21 @@
+export type Box = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Size = [number, number];
+export interface Item {
+    id: number;
+    size: Size;
+    mode: unknown[];
+    min: Size;
+    max: Size;
+    margin: number[];
+    align: string;
+    baseline: number;
+}
+export declare function edges(value: unknown): number[];
+export declare const weight: (v: unknown) => number;
+export declare const clamp: (n: number, min: number, max: number) => number;
+export declare function arrange(items: Item[], size: Size, padding: number[], direction: string, gap: number, justify: string, align: string): Box[];

package/modules/layout/core/algorithm.js

@@ -0,0 +1,72 @@
+function edges(value) {
+  const v = typeof value === "number" ? [value] : Array.isArray(value) ? value : [0];
+  return [v[0], v[1] ?? v[0], v[2] ?? v[0], v[3] ?? v[1] ?? v[0]];
+}
+const weight = (v) => typeof v === "string" && /^fill(?:\((.+)\))?$/.test(v) ? Number(v.slice(5, -1) || 1) : 0;
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+function arrange(items, size, padding, direction, gap, justify, align) {
+  const a = direction.startsWith("column") ? 1 : 0, b = 1 - a;
+  const start = [3, 0], end = [1, 2];
+  const available = size.map((v, k) => Math.max(0, v - padding[start[k]] - padding[end[k]]));
+  const margin = (i, k) => i.margin[start[k]] + i.margin[end[k]];
+  const sizes = items.map((i) => [...i.size]);
+  let free = available[a] - Math.max(0, items.length - 1) * gap;
+  let pending = items.map((i, k) => weight(i.mode[a]) ? k : -1).filter((k) => k >= 0);
+  items.forEach((i, k) => {
+    free -= margin(i, a);
+    if (!weight(i.mode[a])) free -= sizes[k][a];
+  });
+  while (pending.length) {
+    const largest = Math.max(...pending.map((k) => weight(items[k].mode[a])));
+    const total = pending.reduce((v, k) => v + weight(items[k].mode[a]) / largest, 0);
+    const proposed = pending.map(
+      (k) => Math.max(0, free) * (weight(items[k].mode[a]) / largest / total)
+    );
+    pending.forEach((k, j) => {
+      sizes[k][a] = clamp(proposed[j], items[k].min[a], items[k].max[a]);
+    });
+    const totalViolation = pending.reduce((sum, k, j) => sum + sizes[k][a] - proposed[j], 0);
+    const frozen = pending.filter(
+      (k, j) => totalViolation > 0 ? sizes[k][a] > proposed[j] : totalViolation < 0 ? sizes[k][a] < proposed[j] : true
+    );
+    if (!frozen.length) break;
+    frozen.forEach((k) => {
+      free -= sizes[k][a];
+    });
+    pending = pending.filter((k) => !frozen.includes(k));
+  }
+  const baseline = Math.max(
+    0,
+    ...items.map((i) => (i.align || align) === "baseline" ? i.margin[0] + i.baseline : 0)
+  );
+  const rest = available[a] - Math.max(0, items.length - 1) * gap - items.reduce((s, i, k) => s + margin(i, a) + sizes[k][a], 0);
+  let offset = justify === "end" ? rest : justify === "center" ? rest / 2 : 0;
+  let spacing = gap;
+  if (rest > 0 && justify.startsWith("space-")) {
+    const n = items.length, divisor = justify === "space-between" ? n - 1 : justify === "space-around" ? n : n + 1;
+    if (divisor > 0) {
+      const extra = rest / divisor;
+      spacing += extra;
+      offset = justify === "space-around" ? extra / 2 : justify === "space-evenly" ? extra : 0;
+    }
+  }
+  const reverse = direction.endsWith("reverse");
+  return items.map((i, k) => {
+    const s = sizes[k], alignment = i.align || align;
+    if (weight(i.mode[b]) || alignment === "stretch" && i.mode[b] === void 0)
+      s[b] = clamp(Math.max(0, available[b] - margin(i, b)), i.min[b], i.max[b]);
+    const remaining = available[b] - margin(i, b) - s[b];
+    const cross = alignment === "end" ? remaining : alignment === "center" ? remaining / 2 : alignment === "baseline" && a === 0 ? baseline - i.margin[0] - i.baseline : 0;
+    const pos = [0, 0];
+    pos[a] = padding[start[a]] + (reverse ? available[a] - offset - i.margin[end[a]] - s[a] : offset + i.margin[start[a]]);
+    pos[b] = padding[start[b]] + i.margin[start[b]] + cross;
+    offset += margin(i, a) + s[a] + spacing;
+    return { x: pos[0], y: pos[1], width: s[0], height: s[1] };
+  });
+}
+export {
+  arrange,
+  clamp,
+  edges,
+  weight
+};

package/modules/layout/core/index.d.ts

@@ -0,0 +1,20 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import { type Box, type Size } from './algorithm.js';
+import { reflow, validateReflow } from './reflow.js';
+export type { Box } from './algorithm.js';
+export interface LayoutModule extends Module {
+    refresh?: (p: Player) => void;
+    reflow?: typeof reflow;
+    validateReflow?: typeof validateReflow;
+}
+export declare function layoutBox(p: Player, id: string, visual?: boolean): Box | undefined;
+declare module '../../../packages/core/src/player.ts' {
+    interface Player {
+        layoutBox(id: string): Box | undefined;
+        drawnLayoutBox(id: string): Box | undefined;
+        layoutSize?: Size;
+    }
+}
+export declare function resolveLayout(p: Player): void;
+export declare const layout: LayoutModule;