animl 0.0.0-stage → 0.1.0

package/modules/mix/core/svg.js

@@ -0,0 +1,112 @@
+import { fmt } from "../../../packages/core/src/draw.js";
+class UnsupportedMixRenderError extends Error {
+  code = "unsupported-render";
+  hint = "use the canvas renderer for this compositing mode";
+  pointer;
+  constructor(pointer, feature = "additive blending") {
+    super(`SVG cannot faithfully render ${feature} across supported renderers`);
+    this.pointer = pointer;
+  }
+}
+const group = (role, el, kids, index) => ({
+  tag: "g",
+  role: "module:mix-" + role,
+  node: el.node,
+  kids,
+  index
+});
+const mixSVG = {
+  tree(draw, tree) {
+    if (!draw.resources.some((r) => r.kind === "mix-paints")) return;
+    const visit = (els, clips = []) => {
+      for (let j = 0; j < els.length; j++) {
+        const el = els[j];
+        const active = el.role === "module:composite" && ["clip-wrap", "position-wrap"].includes(el.key) ? [
+          ...clips,
+          {
+            ...el,
+            key: el.key === "clip-wrap" ? "clip" : "position",
+            tag: el.key === "position-wrap" && draw.nodes[el.node].position === "outside" ? "mask" : "clip-path"
+          }
+        ] : clips;
+        const image = el.role === "module:image-box";
+        if (el.role === "module:surface" && el.key === "source") continue;
+        if (!image) visit(el.kids, active);
+        const leaf = image || !el.kids.length && (el.role === "shape" || el.role === "module:contour" || el.role === "module:composite" && ["paint", "stroke-only", "fill-only", "outline", "black"].includes(el.key) || el.role === "module:surface" && (el.key?.startsWith("leaf:") || el.key === "patch"));
+        if (!leaf) continue;
+        const paints = el.role === "shape" ? ["fill", "stroke"] : [void 0];
+        const children = paints.map((paint) => {
+          const child = paint ? { ...el, role: "module:mix-paint", key: paint } : el;
+          const at = el.role === "module:composite" && el.key === "paint" ? el.index : void 0;
+          const key = paint ?? (el.key === "stroke-only" ? "stroke" : el.key === "fill-only" ? "fill" : el.key?.startsWith("leaf:") ? el.key.slice(5) : el.key);
+          let inner = group("transform", el, [child]);
+          for (const clip of active)
+            inner = {
+              ...group("clip", clip, [inner]),
+              key: clip.key,
+              tag: "g",
+              index: clip.tag === "mask" ? 1 : 0
+            };
+          const wrapper = group("blend", el, [inner], at);
+          wrapper.key = key;
+          return wrapper;
+        });
+        els.splice(j, 1, ...children);
+        j += children.length - 1;
+      }
+    };
+    visit(tree.root);
+    visit(tree.defs);
+  },
+  attrs(frame, el, paint, id, attrs, render) {
+    const n = frame.nodes[el.node];
+    const pointer = frame.tree.nodes[el.node].pointer ?? `/nodes/${el.node}`;
+    if (n.blend === "additive") throw new UnsupportedMixRenderError(`${pointer}/mix`);
+    const additivePaint = n.paints.find((p) => p.blend === "additive");
+    if (additivePaint)
+      throw new UnsupportedMixRenderError(
+        `${pointer}/${(additivePaint.key ?? additivePaint.kind).replaceAll(".", "/")}`,
+        "additive paint blending"
+      );
+    if (!frame.tree.resources.some((r) => r.kind === "mix-paints")) return;
+    if (el.role === "node") attrs.transform = null;
+    if (el.role === "cutg" || el.role === "module:mix-transform")
+      attrs.transform = `matrix(${n.world.map(fmt).join(" ")})`;
+    if (el.role === "module:mix-clip")
+      attrs[el.index ? "mask" : "clip-path"] = `url(#${id}c${el.node}-${el.key})`;
+    if (el.role === "module:mix-blend")
+      attrs.style = `mix-blend-mode:${(el.index === void 0 ? n.paints.find((p) => p.kind === el.key) : n.paints[el.index])?.blend ?? "normal"}`;
+    if (el.role === "module:mix-paint") {
+      const nodes = frame.nodes.slice(), selected = n.paints.find((p) => p.kind === el.key);
+      if (!selected) {
+        attrs.display = "none";
+        return;
+      }
+      nodes[el.node] = { ...n, paints: [selected] };
+      Object.assign(attrs, render({ ...frame, nodes }, { ...el, role: "shape" }, paint, id));
+      attrs[selected.kind === "fill" ? "stroke" : "fill"] = "none";
+    }
+    if (el.role === "module:composite") {
+      if (el.key === "paint") {
+        const selected = n.paints[el.index];
+        attrs[selected.kind === "fill" ? "stroke" : "fill"] = "none";
+      }
+      if (el.key === "clip-wrap" || el.key === "position-wrap") {
+        attrs.mask = null;
+        attrs["clip-path"] = null;
+      }
+      if (el.key?.startsWith("relative:") || el.key?.startsWith("inverted:"))
+        attrs.transform = null;
+      if (el.key?.startsWith("clip-outline:")) {
+        const target = +el.key.split(":")[1];
+        const parent = frame.tree.nodes[target].parent;
+        if (parent >= 0)
+          attrs.transform = `matrix(${frame.nodes[parent].world.map(fmt).join(" ")})`;
+      }
+    }
+  }
+};
+export {
+  UnsupportedMixRenderError,
+  mixSVG
+};

package/modules/mix/manifest.d.ts

@@ -0,0 +1,31 @@
+export declare const after: string[];
+declare const _default: {
+    after: string[];
+    name: string;
+    summary: string;
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: {
+        name: string;
+        budget: number;
+    }[];
+    adapters: {
+        'packages/core/src/modules/mix/index.ts': string;
+        'packages/core/src/modules/mix/svg.ts': string;
+        'packages/markup/src/mix.ts': string;
+        'packages/web/src/mix.ts': string;
+    };
+    exports: {
+        'core:./mix': string;
+        'markup:./mix': string;
+        'web:./mix': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/mix/manifest.js

@@ -0,0 +1,39 @@
+const after = ["composite", "contour", "surface"];
+var manifest_default = {
+  ...{
+    name: "mix",
+    summary: "Paint mixing: additive blending, blend strength and per-paint blend overrides in the drawing backends.",
+    after: [],
+    core: { entry: "core/index.ts", export: "mix", svg: "core/svg.ts", svgExport: "mixSVG" },
+    web: [{ name: "mix", budget: 1856 }],
+    adapters: {
+      "packages/core/src/modules/mix/index.ts": "core/index.ts",
+      "packages/core/src/modules/mix/svg.ts": "core/svg.ts",
+      "packages/markup/src/mix.ts": "markup/index.ts",
+      "packages/web/src/mix.ts": "web/index.ts"
+    },
+    exports: {
+      "core:./mix": "packages/core/src/modules/mix/index.ts",
+      "markup:./mix": "packages/markup/src/mix.ts",
+      "web:./mix": "packages/web/src/mix.ts"
+    },
+    tests: [
+      "modules/mix/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts"
+    ],
+    conformance: [
+      "drawing-paint-blend-additive",
+      "drawing-paint-additive-strength",
+      "drawing-paint-paint-blend-override",
+      "host-api-renderer",
+      "host-api-factory"
+    ],
+    docs: ["spec/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/modules/mix/web/index.js

@@ -0,0 +1,5 @@
+import { mix } from "../core/index.js";
+import { mixSVG } from "../core/svg.js";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerModule(mix);
+customElements.get("anima-icon").registerSVGBackend("mix", mixSVG);

package/modules/motion/capabilities/data-bind-keyframes/registry.d.ts

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

package/modules/motion/capabilities/data-bind-keyframes/registry.js

@@ -0,0 +1,18 @@
+const entries = [
+  {
+    target: "timeline",
+    shapes: {},
+    elements: {
+      key: {
+        shape: {
+          k: "obj",
+          p: { t: { k: "num" }, value: { k: "any" }, ease: { k: "str" } },
+          req: ["t", "value"]
+        }
+      }
+    }
+  }
+];
+export {
+  entries
+};

package/modules/motion/core/api.d.ts

@@ -0,0 +1,119 @@
+import { resolveAddress } from '../../../packages/core/src/load.js';
+import type { Model, Value, TimelineM, PlaybackPolicy, StateM, TransitionM } from '../../../packages/core/src/load.js';
+import type { Player, AnimaEvent } from '../../../packages/core/src/player.js';
+import { sampleTrack, mixValues } from '../../../packages/core/src/player.js';
+import type { NodeType } from '../../../packages/core/src/registry.js';
+import { StateClocks } from './control.js';
+import { type Loop } from './clock.js';
+export interface AnimationInfo {
+    name: string;
+    duration: number;
+    speed: number;
+    quantize: number | null;
+    work: [number, number];
+    loop: Loop;
+}
+export interface TimelineOptions {
+    name?: string;
+    mix?: number;
+    speed?: number;
+    loop?: Loop;
+}
+export declare function metadata(t: TimelineM): AnimationInfo;
+export declare class TimelineInstance {
+    #private;
+    readonly animation: TimelineM;
+    readonly name: string;
+    didLoop: boolean;
+    constructor(owner: MotionRuntime, t: TimelineM, options?: TimelineOptions);
+    get info(): AnimationInfo;
+    get time(): number;
+    set time(value: number);
+    get playing(): boolean;
+    get finished(): boolean;
+    get mix(): number;
+    set mix(value: number);
+    get speed(): number;
+    set speed(value: number);
+    get loop(): Loop;
+    set loop(value: Loop | null);
+    seek(seconds: number): this;
+    scrub(progress: number): this;
+    play(): this;
+    pause(): this;
+    stop(): this;
+    advance(dt: number): AnimaEvent[];
+    apply(mix?: number): this;
+    sampleInto(values: Value[]): void;
+}
+export declare class MachineInstance {
+    #private;
+    readonly name: string;
+    readonly player: Player;
+    constructor(owner: MotionRuntime, name: string, player: Player);
+    get mix(): number;
+    set mix(v: number);
+    set(name: string, value: number | boolean): void;
+    fire(name: string): void;
+    get(name: string): import('../../../packages/core/src/load.js').Value | undefined;
+    states(): Record<string, string>;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    compose(dt: number, values: Value[], events: AnimaEvent[]): boolean;
+}
+export interface NodeHandle<T extends NodeType = NodeType> {
+    readonly id: string;
+    readonly type: T;
+    get(key: string): number | boolean | string | readonly number[] | undefined;
+    readonly local: readonly number[];
+    readonly world: readonly number[];
+}
+export interface MotionAPI {
+    readonly animations: AnimationInfo[];
+    timeline(name: string): TimelineInstance;
+    createTimeline(name: string, options?: TimelineOptions): TimelineInstance;
+    machine(name: string): MachineInstance;
+    node<T extends NodeType>(id: string, type?: T): NodeHandle<T> | undefined;
+    seek(name: string, seconds: number): TimelineInstance;
+    scrub(name: string, progress: number): TimelineInstance;
+    applyTimeline(name: string, seconds: number, options?: {
+        mix?: number;
+    }): TimelineInstance;
+}
+declare module '../../../packages/core/src/player.ts' {
+    interface Player extends MotionAPI {
+        readonly animations: MotionAPI['animations'];
+    }
+}
+export declare const exits: WeakMap<object, number>;
+export declare class MotionRuntime implements PlaybackPolicy {
+    #private;
+    readonly player: Player;
+    readonly slots: Map<string, number>;
+    readonly instances: (TimelineInstance | MachineInstance)[];
+    readonly timelines: Map<string, TimelineInstance>;
+    readonly machines: Map<string, MachineInstance>;
+    readonly definitions: Map<string, Model>;
+    readonly PlayerClass: typeof Player;
+    readonly clocks: StateClocks;
+    constructor(player: Player, definitions: Map<string, Model>, PlayerClass: typeof Player);
+    get busy(): boolean;
+    states(): Record<string, string>;
+    inspect(): import('../../../packages/core/src/player.js').LayerInspect[];
+    wake(): void;
+    enter: (run: object, from: StateM | undefined, to: StateM, tr: TransitionM | undefined, carry: number) => void;
+    prepare: (run: object, s: StateM, dt: number, eligible: (t: TransitionM) => boolean) => void;
+    rest: (_run: object, s: StateM) => boolean;
+    local(t: TimelineM, elapsed: number, _speed: number, run: object): number;
+    duration: (t: TimelineM, speed: number, run: object) => number;
+    finished: (t: TimelineM, elapsed: number, run: object) => boolean;
+    resume: (run: object, time: number) => void;
+    reduce(t: TimelineM, speed: number, end: boolean, layer: string, events: AnimaEvent[], effective?: number): number;
+    events(t: TimelineM, a: number, b: number, closed: boolean, layer: string, out: AnimaEvent[], _speed: number, run: object, source?: [number, string][]): void;
+    gate(t: TransitionM, st: StateM, elapsed: number, run: object): boolean;
+    carry(t: TransitionM, st: StateM, elapsed: number, run: object): number | undefined;
+    pivot(p: Player, node: number): [number, number];
+    compose(dt: number, values: Value[], events: AnimaEvent[]): boolean;
+}
+export declare function install(PlayerClass: typeof Player, sampler: typeof sampleTrack, mixer: typeof mixValues, resolver: typeof resolveAddress): void;