animl 0.0.0-stage → 0.1.0

package/modules/mesh/core/index.js

@@ -0,0 +1,131 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { imageRect } from "./fitting.js";
+import { tupleBindings } from "./binding.js";
+import { after } from "../manifest.js";
+const number = { k: "num" };
+const uv = { k: "num", min: 0, max: 1 };
+const compiled = /* @__PURE__ */ new WeakMap();
+const pointers = /* @__PURE__ */ new WeakMap();
+function gridMesh(r, g = r.mesh.grid) {
+  const [cols, rows] = g, vertices = [], triangles = [];
+  for (let y = 0; y <= rows; y++)
+    for (let x = 0; x <= cols; x++) {
+      vertices.push([
+        r.x0 + r.width * x / cols,
+        r.y0 + r.height * y / rows,
+        x / cols,
+        y / rows
+      ]);
+      if (x < cols && y < rows) {
+        const a = y * (cols + 1) + x, b = a + cols + 1;
+        triangles.push([a, a + 1, b + 1], [a, b + 1, b]);
+      }
+    }
+  return { vertices, triangles };
+}
+const mesh = {
+  name: "mesh",
+  after,
+  init(registry) {
+    const bind = registry.get("bind");
+    if (bind) Object.assign(bind, tupleBindings(bind));
+    return { ...this, init: void 0 };
+  },
+  entries: [
+    {
+      target: "node",
+      shapes: {
+        mesh: {
+          k: "obj",
+          markup: "mesh",
+          p: {
+            grid: {
+              k: "tup",
+              min: 2,
+              of: [
+                { k: "num", int: true, min: 1, max: 128 },
+                { k: "num", int: true, min: 1, max: 128 }
+              ]
+            },
+            vertices: { k: "arr", min: 3, of: { k: "tup", min: 4, of: [number, number, uv, uv] } },
+            triangles: { k: "arr", of: { k: "tup", min: 3, of: [number, number, number] } }
+          }
+        }
+      }
+    }
+  ],
+  prepare(model, d) {
+    if (!model.doc.requires?.includes("mesh")) return;
+    const visit = (nodes, base) => nodes.forEach((n, i) => {
+      const at = base + "/" + i, r = n, m = r.mesh;
+      if (m) {
+        const p = at + "/mesh";
+        if (r.type !== "image")
+          d.err(
+            "rig-mesh-host",
+            p,
+            V && "mesh requires an image",
+            V && "put mesh on an image node"
+          );
+        else if (m.grid ? m.vertices || m.triangles : !m.vertices || !m.triangles)
+          d.err(
+            "bad-value",
+            p,
+            V && "choose grid or vertices and triangles",
+            V && "use one mesh form"
+          );
+        else {
+          const data = m.grid ? gridMesh(r) : m;
+          compiled.set(r, data);
+          if (V) pointers.set(r, at);
+          if (!data.triangles.length || data.triangles.some(
+            (t) => t.some((k) => !Number.isInteger(k) || k < 0 || k >= data.vertices.length)
+          ))
+            d.err(
+              "rig-mesh-index",
+              p + "/triangles",
+              V && "mesh needs triangles with valid vertex indices",
+              V && "use at least one triangle and zero-based indices below the vertex count"
+            );
+        }
+      }
+      if (r.children) visit(r.children, at + "/children");
+    });
+    visit(model.doc.nodes, "/nodes");
+  },
+  model(n, key) {
+    const match = /^mesh\.vertex\.(0|[1-9]\d*)$/.exec(key), v = match && compiled.get(n.raw)?.vertices[+match[1]];
+    if (v)
+      return { prop: { type: "point", feature: "mesh" }, rest: v.slice(0, 2) };
+  },
+  value(_a, v, p, d) {
+    if (typeof v === "string") {
+      try {
+        v = JSON.parse(v);
+      } catch {
+      }
+    }
+    if (Array.isArray(v) && v.length === 2 && v.every((x) => typeof x === "number" && Number.isFinite(x)))
+      return v;
+    d.err("value-type", p, V && "mesh vertex needs [x, y]", V && "use two finite numbers");
+  },
+  draw: {
+    frame(p, i, data, entry) {
+      const r = p.model.nodes[i].raw, m = compiled.get(r);
+      if (!m) return;
+      if (V) entry.pointer ??= pointers.get(r);
+      const g = data.geometry;
+      const points = m.vertices.flatMap(
+        (v, k) => p.prop(i, "mesh.vertex." + k) ?? (r.mesh.grid ? [r.x0 + v[2] * g.width, r.y0 + v[3] * g.height] : v.slice(0, 2))
+      );
+      p.skinPoints?.(i, points);
+      const [x, y, w, h] = r.mesh.grid ? imageRect(g) : [];
+      const uv2 = r.mesh.grid ? m.vertices.flatMap((v) => [(v[2] * g.width - x) / w, (v[3] * g.height - y) / h]) : m.vertices.flatMap((v) => v.slice(2));
+      data.mesh = { points, uv: uv2, triangles: m.triangles };
+    }
+  }
+};
+export {
+  gridMesh,
+  mesh
+};

package/modules/mesh/core/static.d.ts

@@ -0,0 +1,8 @@
+import { toSVG as serialize } from '../../../packages/core/src/svg.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import { type Mat } from '../../../packages/core/src/geom.js';
+export declare function affine(points: number[], uv: number[], tri: number[]): Mat | undefined;
+/** Tooling only: no triangle serializer is imported by a browser entry. */
+export declare function toSVG(p: Player, opts?: Parameters<typeof serialize>[1] & {
+    meshTriangles?: boolean;
+}): string;

package/modules/mesh/core/static.js

@@ -0,0 +1,85 @@
+import {
+  toSVG as serialize,
+  registerSVGBackend,
+  svgBackends,
+  fmt
+} from "../../../packages/core/src/svg.js";
+import { drawFrame } from "../../../packages/core/src/draw.js";
+import { mul, invert } from "../../../packages/core/src/geom.js";
+function affine(points, uv, tri) {
+  const matrix = (xy) => {
+    const [a, b, c] = tri.map((k) => xy.slice(2 * k, 2 * k + 2));
+    return [b[0] - a[0], b[1] - a[1], c[0] - a[0], c[1] - a[1], a[0], a[1]];
+  };
+  const inverse = invert(matrix(uv));
+  return inverse ? mul(matrix(points), inverse) : void 0;
+}
+function toSVG(p, opts = {}) {
+  if (!opts.meshTriangles) return serialize(p, opts);
+  const frame = drawFrame(p);
+  const backend = {
+    tree(_draw, tree) {
+      const visit = (els) => {
+        for (const el of els) {
+          const m = frame.nodes[el.node]?.mesh;
+          if (el.role === "module:image-box" && m) {
+            el.tag = "g";
+            el.role = "module:mesh";
+            el.kids = [];
+            for (let k = 0; k < m.triangles.length; k++) {
+              if (!affine(m.points, m.uv, m.triangles[k])) continue;
+              const node = el.node, index = k;
+              tree.defs.push({
+                tag: "clipPath",
+                role: "module:mesh-clip",
+                node,
+                index,
+                kids: [{ tag: "path", role: "module:mesh-path", node, index, kids: [] }]
+              });
+              el.kids.push({
+                tag: "g",
+                role: "module:mesh-triangle",
+                node,
+                index,
+                kids: [{ tag: "image", role: "module:mesh-image", node, index, kids: [] }]
+              });
+            }
+          } else visit(el.kids);
+        }
+      };
+      visit(tree.root);
+      visit([...tree.defs]);
+    },
+    attrs(f, el, _paint, id, a) {
+      if (!el.role.startsWith("module:mesh")) return;
+      const n = f.nodes[el.node], m = n.mesh, t = m.triangles[el.index ?? 0];
+      const clip = `${id}mesh${el.node}-${el.index}`;
+      if (el.role === "module:mesh-clip")
+        Object.assign(a, { id: clip, clipPathUnits: "userSpaceOnUse" });
+      if (el.role === "module:mesh-path")
+        a.d = "M" + t.map(
+          (k) => m.points.slice(2 * k, 2 * k + 2).map(fmt).join(" ")
+        ).join("L") + "Z";
+      if (el.role === "module:mesh-triangle") a["clip-path"] = `url(#${clip})`;
+      if (el.role === "module:mesh-image")
+        Object.assign(a, {
+          href: n.geometry.image.source,
+          width: "1",
+          height: "1",
+          preserveAspectRatio: "none",
+          transform: `matrix(${affine(m.points, m.uv, t).map(fmt).join(" ")})`,
+          "image-rendering": n.geometry.image.sampling === "nearest" ? "pixelated" : "auto"
+        });
+    }
+  };
+  registerSVGBackend("mesh-tool", backend);
+  try {
+    return serialize(p, opts);
+  } finally {
+    svgBackends.delete("mesh-tool");
+  }
+}
+export {
+  affine,
+  toSVG
+};

package/modules/mesh/core/svg.d.ts

@@ -0,0 +1,2 @@
+import type { SVGBackend } from '../../../packages/core/src/svg.js';
+export declare const meshSVG: SVGBackend;

package/modules/mesh/core/svg.js

@@ -0,0 +1,19 @@
+import { drawFrame } from "../../../packages/core/src/draw.js";
+import { svgBackends } from "../../../packages/core/src/svg.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+const meshSVG = V ? {
+  checkStatic(player) {
+    if (svgBackends.has("mesh-tool")) return;
+    const frame = drawFrame(player), node = frame.nodes.findIndex((n) => n.mesh);
+    if (node < 0) return;
+    throw Object.assign(new Error("mesh requires canvas or static triangle output"), {
+      code: "unsupported-render",
+      feature: "mesh",
+      pointer: frame.tree.nodes[node].pointer + "/mesh",
+      hint: 'use renderer="canvas" or the CLI render command (meshTriangles: true)'
+    });
+  }
+} : {};
+export {
+  meshSVG
+};

package/modules/mesh/manifest.d.ts

@@ -0,0 +1,41 @@
+export declare const after: string[];
+declare const _default: {
+    name: string;
+    summary: string;
+    after: string[];
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: ({
+        name: string;
+        budget: number;
+        heavy: boolean;
+        over?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        heavy: boolean;
+    })[];
+    adapters: {
+        'packages/core/src/modules/mesh/index.ts': string;
+        'packages/core/src/modules/mesh/svg.ts': string;
+        'packages/core/src/modules/mesh/static.ts': string;
+        'packages/web/src/mesh.ts': string;
+        'packages/web/src/canvas-mesh.ts': string;
+    };
+    exports: {
+        'core:./mesh': string;
+        'core:./mesh-svg': string;
+        'core:./mesh-static': string;
+        'web:./mesh': string;
+        'web:./canvas-mesh': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/mesh/manifest.js

@@ -0,0 +1,40 @@
+const after = ["assets", "bind"];
+var manifest_default = {
+  name: "mesh",
+  summary: "Meshes: deform an image with a grid or explicit triangle mesh whose vertices can be animated or bound.",
+  after,
+  core: { entry: "core/index.ts", export: "mesh", svg: "core/svg.ts", svgExport: "meshSVG" },
+  web: [
+    // P3c reset rule after P8-5 (1,325 B measured; decided, owner may revisit).
+    { name: "mesh", budget: 1472, heavy: true },
+    { name: "canvas-mesh", budget: 768, over: "canvas", heavy: true }
+  ],
+  adapters: {
+    "packages/core/src/modules/mesh/index.ts": "core/index.ts",
+    "packages/core/src/modules/mesh/svg.ts": "core/svg.ts",
+    "packages/core/src/modules/mesh/static.ts": "core/static.ts",
+    "packages/web/src/mesh.ts": "web/index.ts",
+    "packages/web/src/canvas-mesh.ts": "web/canvas.ts"
+  },
+  exports: {
+    "core:./mesh": "packages/core/src/modules/mesh/index.ts",
+    "core:./mesh-svg": "packages/core/src/modules/mesh/svg.ts",
+    "core:./mesh-static": "packages/core/src/modules/mesh/static.ts",
+    "web:./mesh": "packages/web/src/mesh.ts",
+    "web:./canvas-mesh": "packages/web/src/canvas-mesh.ts"
+  },
+  tests: [
+    "modules/mesh/test/**/*.test.ts",
+    "packages/markup/test/module-fields.test.ts",
+    "packages/markup/test/compile.test.ts",
+    "packages/markup/test/decompile.test.ts",
+    "packages/markup/test/corpus.test.ts",
+    "packages/markup/test/names.test.ts"
+  ],
+  conformance: ["rigging-mesh", "rigging-mesh-animation"],
+  docs: ["spec/SPEC.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/mesh/web/canvas.d.ts

@@ -0,0 +1,2 @@
+import '../../canvas/web/index.js';
+import '../../../packages/web/src/index.js';

package/modules/mesh/web/canvas.js

@@ -0,0 +1,93 @@
+import "../../canvas/web/index.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+let active;
+const factory = Icon.renderers.canvas;
+Icon.renderers.canvas = (icon) => {
+  const renderer = factory(icon);
+  if (!icon.player.model.doc.requires?.includes("mesh")) return renderer;
+  const own = { images: /* @__PURE__ */ new Map(), pending: /* @__PURE__ */ new Set(), redraw: () => icon.invalidate() };
+  const draw = renderer.draw.bind(renderer), destroy = renderer.destroy.bind(renderer);
+  const ready = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(renderer), "ready").get;
+  Object.defineProperty(renderer, "ready", {
+    get: () => Promise.all([ready.call(renderer), ...own.pending])
+  });
+  renderer.draw = (...args) => {
+    const before = active;
+    active = own;
+    try {
+      draw(...args);
+    } finally {
+      active = before;
+    }
+  };
+  renderer.destroy = () => {
+    own.redraw = () => {
+    };
+    own.images.clear();
+    destroy();
+  };
+  return renderer;
+};
+(Icon.canvasShapes ??= []).push((ctx, node) => {
+  const m = node.mesh;
+  if (!m) return false;
+  const src = node.geometry.image.source;
+  let image = active.images.get(src);
+  if (!image) {
+    image = new Image();
+    image.crossOrigin = "anonymous";
+    image.src = src;
+    active.images.set(src, image);
+    const own = active, pending = image.decode().then(
+      () => own.redraw(),
+      () => {
+      }
+    ).finally(() => own.pending.delete(pending));
+    own.pending.add(pending);
+  }
+  if (!image.complete || !image.naturalWidth) return true;
+  ctx.imageSmoothingEnabled = node.geometry.image.sampling !== "nearest";
+  const transform = ctx.getTransform();
+  for (const tri of m.triangles) {
+    const q = tri.map(
+      (k) => new DOMPoint(m.points[k * 2], m.points[k * 2 + 1]).matrixTransform(transform)
+    );
+    const [a, b, c] = tri.map((k) => m.uv.slice(k * 2, k * 2 + 2));
+    const u = b[0] - a[0], v = b[1] - a[1], s = c[0] - a[0], t = c[1] - a[1], det = u * t - v * s;
+    if (!det) continue;
+    const [A, B, C] = q, x = B.x - A.x, y = B.y - A.y, xx = C.x - A.x, yy = C.y - A.y;
+    const sx = (x * t - xx * v) / det, sy = (y * t - yy * v) / det, tx = (xx * u - x * s) / det, ty = (yy * u - y * s) / det;
+    ctx.save();
+    ctx.resetTransform();
+    ctx.beginPath();
+    const area = (B.x - A.x) * (C.y - A.y) - (B.y - A.y) * (C.x - A.x);
+    if (!area) {
+      ctx.restore();
+      continue;
+    }
+    const normals = q.map((p, k) => {
+      const n = q[(k + 1) % 3], dx = n.x - p.x, dy = n.y - p.y, len = Math.hypot(dx, dy) * Math.sign(area);
+      return [dy / len, -dx / len];
+    });
+    q.forEach((p, k) => {
+      const n = normals[(k + 2) % 3], o = normals[k], d = 2 * (1 + n[0] * o[0] + n[1] * o[1]);
+      const x2 = p.x + (n[0] + o[0]) / d, y2 = p.y + (n[1] + o[1]) / d;
+      if (k) ctx.lineTo(x2, y2);
+      else ctx.moveTo(x2, y2);
+    });
+    ctx.closePath();
+    ctx.clip();
+    ctx.setTransform(
+      sx,
+      sy,
+      tx,
+      ty,
+      A.x - sx * a[0] - tx * a[1],
+      A.y - sy * a[0] - ty * a[1]
+    );
+    ctx.drawImage(image, 0, 0, 1, 1);
+    ctx.restore();
+  }
+  return true;
+});

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

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/mesh/web/index.js

@@ -0,0 +1,35 @@
+import { mesh } from "../core/index.js";
+import { meshSVG } from "../core/svg.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(mesh);
+Icon.registerSVGBackend("mesh", meshSVG);
+const previous = Icon.eventHook;
+const reported = /* @__PURE__ */ new WeakSet();
+Icon.eventHook = (icon, kind, detail) => {
+  previous?.(icon, kind, detail);
+  const p = icon.player;
+  if (kind !== "draw" || !p || reported.has(p) || icon.getAttribute("renderer") === "canvas" || !p.model.doc.requires?.includes("mesh"))
+    return;
+  reported.add(p);
+  const visit = (nodes, base) => nodes.forEach((n, i) => {
+    const path = base + "/" + i;
+    if (n.mesh)
+      icon.dispatchEvent(
+        new CustomEvent("anima:error", {
+          detail: [
+            {
+              code: "unsupported-render",
+              severity: "warning",
+              feature: "mesh",
+              pointer: path + "/mesh",
+              message: "SVG draws the undeformed image",
+              hint: 'use renderer="canvas" and import @anima-format/web/canvas-mesh'
+            }
+          ]
+        })
+      );
+    if (n.children) visit(n.children, path + "/children");
+  });
+  visit(p.model.doc.nodes, "/nodes");
+};

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

@@ -0,0 +1,2 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+export declare const mix: Module;

package/modules/mix/core/index.js

@@ -0,0 +1,92 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { after } from "../manifest.js";
+const modes = "normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity additive".split(
+  " "
+);
+const amount = { k: "num", min: 0, max: 1 };
+const mix = {
+  name: "mix",
+  after,
+  entries: [
+    {
+      target: "node",
+      shapes: {
+        mix: { k: "obj", p: { mode: { k: "str", of: modes }, strength: amount }, req: ["mode"] }
+      }
+    },
+    ...["fill", "stroke"].map((target) => ({
+      target,
+      shapes: {
+        blend: { k: "str", of: ["inherit", ...modes], markup: target + "-blend" },
+        blendAmount: { ...amount, markup: target + "-blend-amount" }
+      },
+      props: { blendAmount: { type: "number", min: 0, max: 1, def: 1 } }
+    }))
+  ],
+  model(n, key) {
+    if (key === "mix.strength" && n.raw.mix)
+      return {
+        prop: { type: "number", min: 0, max: 1, feature: "mix" },
+        rest: n.raw.mix.strength ?? 1
+      };
+  },
+  load(model, _raw, d) {
+    const paths = [], counts = /* @__PURE__ */ new Map();
+    model.nodes.forEach((n, i) => {
+      const j = counts.get(n.parent) ?? 0;
+      counts.set(n.parent, j + 1);
+      const pointer = paths[i] = (n.parent < 0 ? "/nodes" : paths[n.parent] + "/children") + "/" + j;
+      if (n.raw.mix && n.raw.blend)
+        d.err(
+          "paint-conflict",
+          pointer + "/mix",
+          V && "mix replaces node blend",
+          V && "choose one node compositing declaration"
+        );
+    });
+  },
+  draw: {
+    tree(model, tree) {
+      const paths = [], counts = /* @__PURE__ */ new Map();
+      model.nodes.forEach((n, node) => {
+        const j = counts.get(n.parent) ?? 0;
+        counts.set(n.parent, j + 1);
+        paths[node] = (n.parent < 0 ? "/nodes" : paths[n.parent] + "/children") + "/" + j;
+        tree.nodes[node].pointer = paths[node];
+        const paints = n.raw.paints?.map(
+          (p) => p.fill ?? p.stroke
+        ) ?? [n.raw.fill, n.raw.stroke];
+        if (paints.some(
+          (p) => p?.blend !== void 0 || p?.blendAmount !== void 0
+        ))
+          tree.resources.push({ node, kind: "mix-paints" });
+      });
+    },
+    frame(p, i, data) {
+      const raw = p.model.nodes[i].raw;
+      data.world = p.world(i);
+      if (raw.mix) {
+        data.blend = raw.mix.mode;
+        data.blendAmount = p.num(i, "mix.strength", 1);
+      }
+      const override = data.paints.some(
+        (paint) => ["blend", "blendAmount"].some(
+          (key) => (paint.key ?? paint.kind).split(".").reduce((o, k) => o?.[k], raw)?.[key] !== void 0
+        )
+      );
+      if (override) {
+        const inherit = data.blend ?? "normal", amount2 = data.blendAmount ?? 1;
+        for (const paint of data.paints) {
+          const authored = (paint.key ?? paint.kind).split(".").reduce((o, k) => o?.[k], raw);
+          paint.blend = authored.blend && authored.blend !== "inherit" ? authored.blend : inherit;
+          paint.blendAmount = p.num(i, (paint.key ?? paint.kind) + ".blendAmount", amount2);
+        }
+        data.blend = "normal";
+        data.blendAmount = 1;
+      }
+    }
+  }
+};
+export {
+  mix
+};

package/modules/mix/core/svg.d.ts

@@ -0,0 +1,8 @@
+import type { SVGBackend } from '../../../packages/core/src/svg.js';
+export declare class UnsupportedMixRenderError extends Error {
+    readonly code = "unsupported-render";
+    readonly hint = "use the canvas renderer for this compositing mode";
+    readonly pointer: string;
+    constructor(pointer: string, feature?: string);
+}
+export declare const mixSVG: SVGBackend;