animl 0.0.0-stage → 0.1.0

package/packages/core/src/draw.js

@@ -0,0 +1,143 @@
+import { pathLength } from "./path.js";
+import { formatHex } from "./color.js";
+import { IDENTITY, mul } from "./geom.js";
+import { modules } from "./modules.js";
+const lengths = /* @__PURE__ */ new WeakMap();
+function geometryLength(g, owner = g) {
+  if (!g) return 0;
+  const signature = [g.d, g.r, g.width, g.height, g.rx];
+  const cached = lengths.get(owner);
+  if (cached && signature.every((v, i) => v === cached.signature[i])) return cached.value;
+  let value;
+  if (g.d !== void 0) value = pathLength(g.d);
+  else if (g.kind === "circle") value = 2 * Math.PI * g.r;
+  else {
+    const w = g.width, h = g.height, r = g.rx ?? 0;
+    const rx = Math.min(r, w / 2), ry = Math.min(r, h / 2);
+    value = 2 * (w + h - 2 * rx - 2 * ry) + (rx && ry ? 4 * pathLength(`M${rx} 0A${rx} ${ry} 0 0 1 0 ${ry}`) : 0);
+  }
+  lengths.set(owner, { signature, value });
+  return value;
+}
+function drawTree(model) {
+  let tree = model.draw;
+  if (!tree) {
+    const roots = [];
+    tree = {
+      nodes: model.nodes.map((n, node) => {
+        if (n.parent < 0) roots.push(node);
+        return {
+          node,
+          kind: n.type === "arc" ? "path" : n.type,
+          parent: n.parent,
+          children: n.children,
+          knockout: n.raw.knockout
+        };
+      }),
+      roots,
+      resources: []
+    };
+    model.drawModules = [...modules.values()].filter(
+      (m) => model.doc.requires?.includes(m.name) || model.doc.requires?.includes(m.name.split("@")[0])
+    );
+    for (const m of model.drawModules) m.draw?.tree?.(model, tree);
+    model.draw = tree;
+  }
+  return tree;
+}
+const drawColor = (p, value) => {
+  if (Array.isArray(value)) return formatHex(value);
+  const name = value;
+  return Object.hasOwn(p.model.colors, name) ? { slot: name, fallback: p.model.colors[name] } : name;
+};
+function drawPaint(p, i, kind, key = kind, raw = p.model.nodes[i].raw[kind]) {
+  if (!raw) return;
+  const num = (k, def) => p.num(i, key + "." + k, def);
+  return {
+    kind,
+    key,
+    color: drawColor(p, p.prop(i, key + ".color")),
+    rule: raw.rule,
+    visible: true,
+    ...kind === "stroke" ? {
+      width: num("width", 1),
+      cap: raw.cap ?? "round",
+      join: raw.join ?? "round",
+      trim: ["trimStart", "trimEnd", "trimOffset"].some(
+        (k) => k in raw || p.prop(i, key + "." + k) !== void 0
+      ) ? { start: num("trimStart", 0), end: num("trimEnd", 1), offset: num("trimOffset", 0) } : void 0
+    } : {}
+  };
+}
+const fmt = (v) => String(Math.round(v * 1e5) / 1e5 || 0);
+function geometry(p, i) {
+  const n = p.model.nodes[i], r = n.raw;
+  const num = (k) => p.num(i, k, 0);
+  if (n.type === "path") return { kind: "path", d: n.d };
+  if (n.type === "circle") return { kind: "circle", cx: r.center[0], cy: r.center[1], r: num("r") };
+  if (n.type === "rect")
+    return { kind: "rect", x: r.x0, y: r.y0, width: num("w"), height: num("h"), rx: num("rx") };
+  if (n.type === "arc") {
+    const [cx, cy] = r.center, rad = num("r");
+    let from = num("from");
+    const sweep = Math.min(360, Math.max(0, num("to") - from));
+    const pt = (deg) => `${fmt(cx + rad * Math.cos(deg * Math.PI / 180))} ${fmt(cy + rad * Math.sin(deg * Math.PI / 180))}`;
+    let d = `M${pt(from)}`;
+    for (const part of sweep > 180 ? [sweep / 2, sweep / 2] : [sweep]) {
+      from += part;
+      d += `A${fmt(rad)} ${fmt(rad)} 0 0 1 ${pt(from)}`;
+    }
+    return { kind: "path", d };
+  }
+}
+function drawFrame(p) {
+  const f = p.drawData ??= {
+    revision: -1,
+    tree: drawTree(p.model),
+    nodes: [],
+    viewBox: p.model.viewBox,
+    changed: []
+  };
+  if (f.revision === p.drawRevision) return f;
+  f.changed = [];
+  for (let i = 0; i < p.model.nodes.length; i++) {
+    const dependencies = f.tree.nodes[i].dependencies ?? [i];
+    if (dependencies.every((n) => p.drawVersions[n] <= f.revision)) continue;
+    const data = {
+      transform: p.local(i),
+      opacity: p.num(i, "opacity", 1),
+      visible: p.prop(i, "visible") !== false,
+      geometry: geometry(p, i),
+      paints: []
+    };
+    for (const kind of ["fill", "stroke"]) {
+      const paint = drawPaint(p, i, kind);
+      if (paint) data.paints.push(paint);
+    }
+    for (const m of p.model.drawModules) m.draw?.frame?.(p, i, data, f.tree.nodes[i], f);
+    f.nodes[i] = data;
+    f.changed.push(i);
+  }
+  for (const m of p.model.drawModules) m.draw?.end?.(p, f);
+  f.revision = p.drawRevision;
+  return f;
+}
+function drawOrder(f, nodes) {
+  return [...nodes].sort((a, b) => (f.order?.[a] ?? a) - (f.order?.[b] ?? b));
+}
+function drawWorld(p, i, frame = p.hitFrame?.()) {
+  if (!frame) return p.world(i);
+  let m = IDENTITY;
+  for (let n = i; n >= 0; n = p.model.nodes[n].parent) m = mul(frame.nodes[n].transform, m);
+  return m;
+}
+export {
+  drawColor,
+  drawFrame,
+  drawOrder,
+  drawPaint,
+  drawTree,
+  drawWorld,
+  fmt,
+  geometryLength
+};

package/packages/core/src/ease.d.ts

@@ -0,0 +1,10 @@
+/** An ease maps segment progress u ∈ [0, 1] to a weight w (spec §5). */
+export type EaseFn = (u: number) => number;
+export declare const linear: EaseFn;
+export declare const hold: EaseFn;
+/** CSS cubic-bezier through (0,0) (x1,y1) (x2,y2) (1,1). */
+export declare function cubic(x1: number, y1: number, x2: number, y2: number): EaseFn;
+/** Ease-out elastic with amplitude a and period p (spec §5). */
+export declare function elastic(a: number, p: number): EaseFn;
+/** Parse an ease string. Returns the function, or an error message. */
+export declare function parseEase(src: string): EaseFn | string;

package/packages/core/src/ease.js

@@ -0,0 +1,75 @@
+import { VERBOSE as V } from "./flags.js";
+const NUM = "\\s*(-?(?:\\d+\\.?\\d*|\\.\\d+)(?:[eE][-+]?\\d+)?)\\s*";
+const CUBIC = new RegExp(`^cubic\\(${NUM},${NUM},${NUM},${NUM}\\)$`);
+const ELASTIC = new RegExp(`^elastic\\(${NUM},${NUM}\\)$`);
+const linear = (u) => u;
+const hold = () => 0;
+function cubic(x1, y1, x2, y2) {
+  const bez = (s, p1, p2) => {
+    const r = 1 - s;
+    return 3 * r * r * s * p1 + 3 * r * s * s * p2 + s * s * s;
+  };
+  const dx = (s) => {
+    const r = 1 - s;
+    return 3 * r * r * x1 + 6 * r * s * (x2 - x1) + 3 * s * s * (1 - x2);
+  };
+  return (u) => {
+    if (u <= 0) return 0;
+    if (u >= 1) return 1;
+    let s = u;
+    for (let i = 0; i < 8; i++) {
+      const e = bez(s, x1, x2) - u;
+      const d = dx(s);
+      if (Math.abs(e) < 1e-12 && d > 1e-3) return bez(s, y1, y2);
+      if (d < 1e-6) break;
+      s -= e / d;
+      if (s < 0 || s > 1) break;
+    }
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 48; i++) {
+      s = (lo + hi) / 2;
+      if (bez(s, x1, x2) < u) lo = s;
+      else hi = s;
+    }
+    return bez((lo + hi) / 2, y1, y2);
+  };
+}
+function elastic(a, p) {
+  const A = Math.max(a, 1);
+  const s = p / (2 * Math.PI) * Math.asin(1 / A);
+  return (u) => u <= 0 ? 0 : u >= 1 ? 1 : A * 2 ** (-10 * u) * Math.sin((u - s) * 2 * Math.PI / p) + 1;
+}
+const NAMED = {
+  linear,
+  hold,
+  in: cubic(0.42, 0, 1, 1),
+  out: cubic(0, 0, 0.58, 1),
+  inOut: cubic(0.42, 0, 0.58, 1)
+};
+function parseEase(src) {
+  const named = Object.hasOwn(NAMED, src) ? NAMED[src] : void 0;
+  if (named) return named;
+  let m = CUBIC.exec(src);
+  if (m) {
+    const [x1, y1, x2, y2] = m.slice(1).map(Number);
+    if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) return V ? "cubic x1 and x2 must lie in [0, 1]" : "";
+    if (!isFinite(y1) || !isFinite(y2)) return V ? "cubic arguments must be finite" : "";
+    return cubic(x1, y1, x2, y2);
+  }
+  m = ELASTIC.exec(src);
+  if (m) {
+    const [a, p] = m.slice(1).map(Number);
+    if (!(a >= 0 && p > 0 && isFinite(a) && isFinite(p)))
+      return V ? "elastic needs finite a \u2265 0 and p > 0" : "";
+    return elastic(a, p);
+  }
+  return V ? "not an ease" : "";
+}
+export {
+  cubic,
+  elastic,
+  hold,
+  linear,
+  parseEase
+};

package/packages/core/src/event-capture.d.ts

@@ -0,0 +1,14 @@
+import type { Model } from './load.js';
+import type { AnimaEvent } from './player.js';
+export declare let capturing: boolean;
+export declare function beginStep(dt: number): void;
+export declare function endStep(): void;
+export declare function stampEntryEvent(event: AnimaEvent, offset: number): AnimaEvent;
+export declare function capture<T>(op: () => T): T;
+export declare const occurrence: unique symbol;
+export declare const eventSource: unique symbol;
+export type CapturedEvent = AnimaEvent & {
+    [occurrence]?: number;
+    [eventSource]?: Model;
+};
+export declare function stampEvent(event: AnimaEvent, fraction: number): AnimaEvent;

package/packages/core/src/event-capture.js

@@ -0,0 +1,39 @@
+let capturing = false;
+const steps = [];
+function beginStep(dt) {
+  if (capturing) steps.push(dt);
+}
+function endStep() {
+  if (capturing) steps.pop();
+}
+function stampEntryEvent(event, offset) {
+  const dt = steps.at(-1) ?? 0;
+  return stampEvent(event, dt ? 1 + offset / dt : 0);
+}
+function capture(op) {
+  const previous = capturing;
+  const depth = steps.length;
+  capturing = true;
+  try {
+    return op();
+  } finally {
+    capturing = previous;
+    steps.length = depth;
+  }
+}
+const occurrence = /* @__PURE__ */ Symbol("anima event fraction");
+const eventSource = /* @__PURE__ */ Symbol("anima event source");
+function stampEvent(event, fraction) {
+  if (capturing) event[occurrence] = Number.isFinite(fraction) ? fraction : 0;
+  return event;
+}
+export {
+  beginStep,
+  capture,
+  capturing,
+  endStep,
+  eventSource,
+  occurrence,
+  stampEntryEvent,
+  stampEvent
+};

package/packages/core/src/flags.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Build flag. When false (the browser build, see tools/size.ts and packages/web/build.ts),
+ * diagnostics keep their code, severity and pointer but drop message and hint text, so the
+ * strict loader fits the size budget. Tooling (`anima validate`) always runs with it true.
+ */
+export declare const VERBOSE: boolean;

package/packages/core/src/flags.js

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

package/packages/core/src/format.d.ts

@@ -0,0 +1,2 @@
+/** Canonical text of a parsed document. */
+export declare function formatAni(doc: unknown): string;

package/packages/core/src/format.js

@@ -0,0 +1,40 @@
+import { DOC, NODE_TYPES, nodeShape } from "./registry.js";
+const NODE_ORDER = "id type glyph subpaths d center x0 y0 w h r rx from to pivot x y rotate scale scaleX scaleY opacity visible fill stroke knockout children";
+const isPlain = (v) => v === null || typeof v !== "object";
+function order(keys, wanted) {
+  const rank = (k) => k === "$comment" ? -1 : wanted.indexOf(k) < 0 ? 1e6 : wanted.indexOf(k);
+  return [...keys].sort((a, b) => rank(a) - rank(b));
+}
+function print(v, s, indent) {
+  s = s?.format ?? s;
+  if (isPlain(v)) return JSON.stringify(v);
+  const inner = indent + "  ";
+  if (Array.isArray(v)) {
+    if (v.every(isPlain)) return `[${v.map((x) => JSON.stringify(x)).join(", ")}]`;
+    const of = s?.k === "arr" ? s.of : void 0;
+    return `[
+${v.map((x, i) => inner + print(x, s?.k === "tup" ? s.of[i] : of, inner)).join(",\n")}
+${indent}]`;
+  }
+  const o = v;
+  let keys = Object.keys(o);
+  let child = (_k) => void 0;
+  if (s?.k === "node" && typeof o.type === "string" && NODE_TYPES.includes(o.type)) {
+    const ns = nodeShape(o.type);
+    keys = order(keys, NODE_ORDER.split(" "));
+    child = (k) => ns.p[k];
+  } else if (s?.k === "obj") {
+    keys = order(keys, Object.keys(s.p));
+    child = (k) => s.p[k];
+  } else if (s?.k === "map") child = () => s.of;
+  if (!keys.length) return "{}";
+  return `{
+${keys.map((k) => `${inner}${JSON.stringify(k)}: ${print(o[k], child(k), inner)}`).join(",\n")}
+${indent}}`;
+}
+function formatAni(doc) {
+  return print(doc, DOC, "") + "\n";
+}
+export {
+  formatAni
+};

package/packages/core/src/geom.d.ts

@@ -0,0 +1,28 @@
+export type Mat = [number, number, number, number, number, number];
+/** Clamp a numeric value to inclusive bounds. */
+export declare const clamp: (v: number, min: number, max: number) => number;
+export declare const IDENTITY: Mat;
+export declare const mul: (m: Mat, n: Mat) => Mat;
+/** Spec §4: T(x, y) · T(px, py) · R(rotate) · S(sx, sy) · T(−px, −py). */
+export declare function localMatrix(x: number, y: number, px: number, py: number, deg: number, sx: number, sy: number): Mat;
+export declare function invert(m: Mat): Mat | null;
+export declare const apply: (m: Mat, x: number, y: number) => [number, number];
+/** Point in closed polylines by fill rule. */
+export declare function inside(polys: number[][], x: number, y: number, evenodd: boolean): boolean;
+/**
+ * The visible part of a stroke trimmed to `len` (< 1) of its outline length from fraction `start`,
+ * wrapping around 1 (spec §4 trims), as open polylines. As SVG dashes it, the pattern's period is the
+ * whole outline's length and its phase restarts at each contour (a segment after Z starts one).
+ */
+export declare function trimPolys(polys: {
+    pts: number[];
+    closed: boolean;
+}[], start: number, len: number): {
+    pts: number[];
+    closed: boolean;
+}[];
+/** Distance from a point to polylines (closed ones include their closing edge). */
+export declare function distance(polys: {
+    pts: number[];
+    closed: boolean;
+}[], x: number, y: number): number;

package/packages/core/src/geom.js

@@ -0,0 +1,111 @@
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+const mul = (m, n) => [
+  m[0] * n[0] + m[2] * n[1],
+  m[1] * n[0] + m[3] * n[1],
+  m[0] * n[2] + m[2] * n[3],
+  m[1] * n[2] + m[3] * n[3],
+  m[0] * n[4] + m[2] * n[5] + m[4],
+  m[1] * n[4] + m[3] * n[5] + m[5]
+];
+function localMatrix(x, y, px, py, deg, sx, sy) {
+  const r = deg * Math.PI / 180;
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  const a = cos * sx;
+  const b = sin * sx;
+  const c = -sin * sy;
+  const d = cos * sy;
+  return [a, b, c, d, x + px - a * px - c * py, y + py - b * px - d * py];
+}
+function invert(m) {
+  const det = m[0] * m[3] - m[1] * m[2];
+  if (!det) return null;
+  return [
+    m[3] / det,
+    -m[1] / det,
+    -m[2] / det,
+    m[0] / det,
+    (m[2] * m[5] - m[3] * m[4]) / det,
+    (m[1] * m[4] - m[0] * m[5]) / det
+  ];
+}
+const apply = (m, x, y) => [
+  m[0] * x + m[2] * y + m[4],
+  m[1] * x + m[3] * y + m[5]
+];
+function inside(polys, x, y, evenodd) {
+  let wind = 0;
+  for (const p of polys) {
+    const n = p.length;
+    for (let i = 0; i < n; i += 2) {
+      const x0 = p[i], y0 = p[i + 1];
+      const x1 = p[(i + 2) % n], y1 = p[(i + 3) % n];
+      if (y0 <= y ? y1 > y : y1 <= y) {
+        const t = x0 + (y - y0) / (y1 - y0) * (x1 - x0);
+        if (t > x) wind += y1 > y0 ? 1 : -1;
+      }
+    }
+  }
+  return evenodd ? wind % 2 !== 0 : wind !== 0;
+}
+function trimPolys(polys, start, len) {
+  const out = [];
+  if (len <= 0) return out;
+  const contours = polys.map(({ pts, closed }) => {
+    const p = closed ? [...pts, pts[0], pts[1]] : pts;
+    const at = [0];
+    for (let i = 2; i < p.length; i += 2)
+      at.push(at[at.length - 1] + Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]));
+    return { p, at };
+  });
+  const total = contours.reduce((sum, c) => sum + c.at[c.at.length - 1], 0);
+  const s = (start % 1 + 1) % 1 * total, e = s + len * total;
+  for (const { p, at } of contours) {
+    const cut = (a, b) => {
+      const q = [];
+      for (let j = 0; j < at.length - 1; j++) {
+        const l0 = at[j], l1 = at[j + 1];
+        if (l1 < a || l0 > b) continue;
+        const f = (l) => l1 > l0 ? (Math.min(Math.max(l, l0), l1) - l0) / (l1 - l0) : 0;
+        for (const t of q.length ? [f(b)] : [f(a), f(b)])
+          q.push(
+            p[2 * j] + (p[2 * j + 2] - p[2 * j]) * t,
+            p[2 * j + 1] + (p[2 * j + 3] - p[2 * j + 1]) * t
+          );
+      }
+      if (q.length) out.push({ pts: q, closed: false });
+    };
+    cut(s, e);
+    if (e > total) cut(0, e - total);
+  }
+  return out;
+}
+function distance(polys, x, y) {
+  let best = Infinity;
+  for (const { pts, closed } of polys) {
+    const n = pts.length;
+    const last = closed ? n : n - 2;
+    if (n === 2) best = Math.min(best, Math.hypot(x - pts[0], y - pts[1]));
+    for (let i = 0; i < last; i += 2) {
+      const x0 = pts[i], y0 = pts[i + 1];
+      const x1 = pts[(i + 2) % n], y1 = pts[(i + 3) % n];
+      const dx = x1 - x0, dy = y1 - y0;
+      const l2 = dx * dx + dy * dy;
+      const t = l2 ? Math.max(0, Math.min(1, ((x - x0) * dx + (y - y0) * dy) / l2)) : 0;
+      best = Math.min(best, Math.hypot(x - x0 - t * dx, y - y0 - t * dy));
+    }
+  }
+  return best;
+}
+export {
+  IDENTITY,
+  apply,
+  clamp,
+  distance,
+  inside,
+  invert,
+  localMatrix,
+  mul,
+  trimPolys
+};

package/packages/core/src/index.d.ts

@@ -0,0 +1,18 @@
+export * from './load.js';
+export { registerModule, modules, type Module, type ModuleEntry } from './modules.js';
+export type { Diagnostic } from './diag.js';
+export { parsePath, selectPath, flatten, formatSegs, PathError, type Subpath } from './path.js';
+export { parseEase, cubic, elastic, type EaseFn } from './ease.js';
+export { parseHex, formatHex, lerpColor, type RGBA } from './color.js';
+export { parseCondition, type Term } from './cond.js';
+export { Player, sampleTrack, type AnimaEvent, type LayerInspect, type StepResult, type PointerKind, } from './player.js';
+export { runScript, ScriptError, type Snapshot } from './script.js';
+export { localMatrix, mul, invert, apply, clamp, IDENTITY, type Mat } from './geom.js';
+export { sceneTree, sceneOrder, attrs, svgAttrs, toSVG, cssSlots, staticSlots, type El, type Attrs, type Paint, } from './svg.js';
+export * from './registry.js';
+export { jsonSchema } from './schema.js';
+export { VERBOSE } from './flags.js';
+export { formatAni } from './format.js';
+export { suggest, ptr } from './diag.js';
+export * from './draw.js';
+export { registerSVGBackend, svgBackends, type SVGBackend } from './svg.js';

package/packages/core/src/index.js

@@ -0,0 +1,68 @@
+export * from "./load.js";
+import { registerModule, modules } from "./modules.js";
+import { parsePath, selectPath, flatten, formatSegs, PathError } from "./path.js";
+import { parseEase, cubic, elastic } from "./ease.js";
+import { parseHex, formatHex, lerpColor } from "./color.js";
+import { parseCondition } from "./cond.js";
+import {
+  Player,
+  sampleTrack
+} from "./player.js";
+import { runScript, ScriptError } from "./script.js";
+import { localMatrix, mul, invert, apply, clamp, IDENTITY } from "./geom.js";
+import {
+  sceneTree,
+  sceneOrder,
+  attrs,
+  svgAttrs,
+  toSVG,
+  cssSlots,
+  staticSlots
+} from "./svg.js";
+export * from "./registry.js";
+import { jsonSchema } from "./schema.js";
+import { VERBOSE } from "./flags.js";
+import { formatAni } from "./format.js";
+import { suggest, ptr } from "./diag.js";
+export * from "./draw.js";
+import { registerSVGBackend, svgBackends } from "./svg.js";
+export {
+  IDENTITY,
+  PathError,
+  Player,
+  ScriptError,
+  VERBOSE,
+  apply,
+  attrs,
+  clamp,
+  cssSlots,
+  cubic,
+  elastic,
+  flatten,
+  formatAni,
+  formatHex,
+  formatSegs,
+  invert,
+  jsonSchema,
+  lerpColor,
+  localMatrix,
+  modules,
+  mul,
+  parseCondition,
+  parseEase,
+  parseHex,
+  parsePath,
+  ptr,
+  registerModule,
+  registerSVGBackend,
+  runScript,
+  sampleTrack,
+  sceneOrder,
+  sceneTree,
+  selectPath,
+  staticSlots,
+  suggest,
+  svgAttrs,
+  svgBackends,
+  toSVG
+};