animl 0.0.0-stage → 0.1.0

package/modules/text/core/hit.d.ts

@@ -0,0 +1,14 @@
+import type { TextLayout } from './layout.js';
+import type { TextModule } from './index.js';
+import type { Player } from '../../../packages/core/src/player.js';
+export type TextBox = [number, number, number, number];
+/** Grapheme ordinals (not UTF-16 offsets). Geometry is in text-local grid units. */
+export declare function textStops(layout: TextLayout, source: string): {
+    index: number;
+    box: TextBox;
+}[];
+export declare function textHit(layout: TextLayout, source: string, x: number, y: number): number;
+export declare function textSelection(layout: TextLayout, source: string, start: number, end?: number): TextBox[];
+export declare function textSource(text: TextModule, p: Player, i: number): string;
+/** Install the optional listener reader on the active module, without a second text registration. */
+export declare function installTextHit(text: TextModule): void;

package/modules/text/core/hit.js

@@ -0,0 +1,79 @@
+function textStops(layout, source) {
+  const segments = [...new Intl.Segmenter("und", { granularity: "grapheme" }).segment(source)];
+  let offset = 0;
+  return layout.lines.flatMap((line) => {
+    const top = line.baseline - line.ascent * layout.scale;
+    const height = (line.ascent + line.descent) * layout.scale;
+    const clusters = line.clusters;
+    const stops = clusters.map((c) => ({ offset: c.index, x: c.x }));
+    const last = clusters.at(-1);
+    const end = last ? last.index + last.text.length : offset;
+    stops.push({ offset: end, x: last ? last.x + last.advance : line.x ?? 0 });
+    offset = end + (source.slice(end).match(/^(\r\n|\r|\n)/)?.[0].length ?? 0);
+    return stops.map((s) => ({
+      index: segments.filter((g) => g.index < s.offset).length,
+      box: [s.x, top, 0, height]
+    }));
+  });
+}
+function textHit(layout, source, x, y) {
+  let bestY = Infinity, bestX = Infinity, index = 0;
+  for (const s of textStops(layout, source)) {
+    const [sx, sy, , h] = s.box;
+    const dy = Math.max(sy - y, 0, y - sy - h);
+    const dx = Math.abs(sx - x);
+    if (dy < bestY || dy === bestY && dx < bestX) {
+      bestY = dy;
+      bestX = dx;
+      index = s.index;
+    }
+  }
+  return index;
+}
+function textSelection(layout, source, start, end = start) {
+  const stops = textStops(layout, source);
+  const max = [...new Intl.Segmenter("und", { granularity: "grapheme" }).segment(source)].length;
+  const clamp = (n) => Math.max(0, Math.min(max, Math.trunc(n) || 0));
+  [start, end] = [clamp(Math.min(start, end)), clamp(Math.max(start, end))];
+  if (start === end) return [stops.reverse().find((s) => s.index <= start)?.box ?? [0, 0, 0, 0]];
+  const boxes = [];
+  for (let i = 0; i + 1 < stops.length; i++) {
+    const a = stops[i], b = stops[i + 1];
+    if (a.index < start || a.index >= end || a.box[1] !== b.box[1]) continue;
+    const x = Math.min(a.box[0], b.box[0]), right = Math.max(a.box[0], b.box[0]);
+    const previous = boxes.at(-1);
+    if (previous && previous[1] === a.box[1]) {
+      const end2 = Math.max(right, previous[0] + previous[2]);
+      previous[0] = Math.min(x, previous[0]);
+      previous[2] = end2 - previous[0];
+    } else boxes.push([x, a.box[1], right - x, a.box[3]]);
+  }
+  return boxes;
+}
+function textSource(text, p, i) {
+  return text.input(p, i).runs.map((r) => r.text).join("");
+}
+function installTextHit(text) {
+  text.outline = (p, i) => {
+    if (String(p.model.nodes[i].type) !== "text") return;
+    const layout = text.textLayout(p, i);
+    return layout.lines.map((l) => {
+      const xs = l.clusters.flatMap((c) => [c.x, c.x + c.advance]);
+      const x = xs.length ? Math.min(...xs) : 0, y = l.baseline - l.ascent * layout.scale, w = xs.length ? Math.max(...xs) - x : 0, h = (l.ascent + l.descent) * layout.scale;
+      return { pts: [x, y, x + w, y, x + w, y + h, x, y + h], closed: true };
+    });
+  };
+  text.fillContains = (p, i, outline, x, y) => {
+    if (String(p.model.nodes[i].type) !== "text") return;
+    const c = text.textLayout(p, i).clip;
+    return (!c || x >= c[0] && y >= c[1] && x <= c[0] + c[2] && y <= c[1] + c[3]) && outline.some(({ pts }) => x >= pts[0] && x <= pts[2] && y >= pts[1] && y <= pts[5]);
+  };
+  text.hitTest = (p, i, x, y) => textHit(text.textLayout(p, i), textSource(text, p, i), x, y);
+}
+export {
+  installTextHit,
+  textHit,
+  textSelection,
+  textSource,
+  textStops
+};

package/modules/text/core/host.d.ts

@@ -0,0 +1,6 @@
+import type { Player } from '../../../packages/core/src/player.js';
+import type { TextModule } from './index.js';
+export type TextRunAccess = (player: Player, node: string, run: string | number, value?: string) => string | undefined;
+/** Optional legacy host editing; data-bound text does not pay for this state. */
+export declare function createTextRunAccess(module: TextModule): TextRunAccess;
+export declare function textRun(player: Player, node: string, run: string | number, value?: string): string | undefined;

package/modules/text/core/host.js

@@ -0,0 +1,44 @@
+import { modules } from "../../../packages/core/src/modules.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+function createTextRunAccess(module) {
+  if (module.textRun) return module.textRun;
+  const overrides = /* @__PURE__ */ new WeakMap();
+  const key = (node, run) => node + ":" + typeof run + ":" + run;
+  const previous = module.override;
+  module.override = (p, i, run) => overrides.get(p)?.get(key(i, run)) ?? previous?.(p, i, run);
+  return module.textRun = (p, node, run, value) => {
+    const ancestors = [];
+    const path = node.split(/[/.]/);
+    while (path.length > 1) {
+      const name = path.shift();
+      ancestors.push([p, p.model.ids.get(name)]);
+      const child = p.nested?.players?.get(name);
+      if (!child) return;
+      p = child;
+    }
+    const i = p.model.ids.get(path[0]);
+    if (i === void 0 || String(p.model.nodes[i].type) !== "text") return;
+    const input = module.input(p, i), index = input.runs.findIndex(
+      (r, ri) => typeof run === "number" ? ri === run : r.id === run
+    );
+    if (index < 0) return;
+    if (value !== void 0) {
+      if (typeof value !== "string")
+        throw new TypeError(V ? "anima: text-run requires a string" : "text-run");
+      let state = overrides.get(p);
+      if (!state) overrides.set(p, state = /* @__PURE__ */ new Map());
+      state.set(key(i, input.runs[index].id ?? index), value);
+      module.invalidateText(p);
+      for (const [parent, index2] of ancestors) parent.drawVersions[index2] = ++parent.drawRevision;
+    }
+    return value ?? input.runs[index].text;
+  };
+}
+function textRun(player, node, run, value) {
+  const text = modules.get("text");
+  return text && createTextRunAccess(text)(player, node, run, value);
+}
+export {
+  createTextRunAccess,
+  textRun
+};

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

@@ -0,0 +1,41 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { DrawNode, DrawPaint } from '../../../packages/core/src/draw.js';
+import type { TextRunAccess } from './host.js';
+export { textRun, createTextRunAccess } from './host.js';
+import { layoutText, type LayoutInput, type TextLayout, type TextRun, type TextStyle } from './layout.js';
+export * from './measure.js';
+export * from './layout.js';
+export interface TextDrawing {
+    opacity?: number;
+    layout: TextLayout;
+    styles: Record<string, TextStyle>;
+    runs: TextRun[];
+    paints: DrawPaint[][];
+}
+export type TextDrawNode = DrawNode & {
+    text?: TextDrawing;
+};
+export declare function invalidateText(p: Player): void;
+export declare function textLayout(p: Player, i: number): TextLayout;
+/** Text-local box and first visible baseline; constrained probes do not replace drawing layout. */
+export declare function measureText(p: Player, nodeId: string | number, maxWidth?: number): {
+    width: number;
+    height: number;
+    baseline: number;
+} | undefined;
+declare function textInput(p: Player, i: number): LayoutInput;
+declare const paint: (p: Player, raw: Record<string, unknown> | undefined, kind: "fill" | "stroke") => DrawPaint | undefined;
+export interface TextModule extends Module {
+    overflow?: import('./overflow.js').TextOverflow;
+    fonts?: import('../../fonts/core/index.js').FontModule;
+    hitTest?: (p: Player, i: number, x: number, y: number) => number;
+    layout: typeof layoutText;
+    invalidateText: typeof invalidateText;
+    textLayout: typeof textLayout;
+    input: typeof textInput;
+    paint: typeof paint;
+    override?: (player: Player, node: number, run: string | number) => string | undefined;
+    textRun?: TextRunAccess;
+}
+export declare const text: TextModule;

package/modules/text/core/index.js

@@ -0,0 +1,301 @@
+import { parseHex } from "../../../packages/core/src/color.js";
+import { drawColor } from "../../../packages/core/src/draw.js";
+import { nodePointer } from "../../components/core/node-pointer.js";
+import { ptr } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { after } from "../manifest.js";
+import { entries, styleShape } from "./registry.js";
+import { installTextHit } from "./hit.js";
+import { textRun, createTextRunAccess } from "./host.js";
+import { fontRevision, registerTextMeasurer } from "./measure.js";
+import {
+  layoutText,
+  textSizing,
+  styleDefaults
+} from "./layout.js";
+export * from "./measure.js";
+export * from "./layout.js";
+let fonts;
+let data;
+const cache = /* @__PURE__ */ new WeakMap();
+const nodes = (m) => m.nodes.flatMap((n, i) => n.type === "text" ? [i] : []);
+function invalidateText(p) {
+  cache.delete(p);
+  for (const i of nodes(p.model)) p.drawVersions[i] = ++p.drawRevision;
+}
+function textLayout(p, i) {
+  return resolveText(p, i).layout;
+}
+function measureText(p, nodeId, maxWidth) {
+  const module = p.model.drawModules?.find((m) => m.name === "text");
+  const i = typeof nodeId === "number" ? nodeId : p.model.ids.get(nodeId);
+  if (!module || i === void 0 || String(p.model.nodes[i]?.type) !== "text") return;
+  let layout;
+  if (maxWidth === void 0) layout = module.textLayout(p, i);
+  else {
+    const input = module.input(p, i);
+    const sizing = textSizing(input);
+    input.sizing = sizing === "fixed" ? "fixed" : "auto-height";
+    input.width = sizing === "auto-width" ? maxWidth : Math.min(input.width ?? Infinity, maxWidth);
+    layout = module.fonts?.prepareText?.(p, input)?.layout ?? module.layout(input, module.overflow);
+  }
+  return { width: layout.width, height: layout.height, baseline: layout.lines[0]?.baseline ?? 0 };
+}
+function textInput(p, i) {
+  const raw = p.model.nodes[i].raw;
+  const read = (v) => v.startsWith("$") ? data?.dataState(p)?.read(v) : v;
+  const source = typeof raw.runs === "string" ? read(raw.runs) : raw.runs;
+  const value = (r, ri, key) => {
+    if (typeof raw.runs === "string")
+      return r[raw[key === "text" ? "textField" : "styleField"] ?? key];
+    const authored = r[key] ?? "";
+    return authored[0] === "$" ? read(authored) : p.prop(i, `runs.${ri}.${key}`) ?? authored;
+  };
+  const runs = Array.isArray(source) ? source.map((r, ri) => ({
+    id: r.id,
+    text: text.override?.(p, i, r.id ?? ri) ?? String(value(r, ri, "text") ?? ""),
+    style: String(value(r, ri, "style") ?? "")
+  })) : [];
+  const styles = { ...p.model.doc.textStyles, ...raw.styles };
+  for (const [id, style] of Object.entries(styles))
+    styles[id] = Object.fromEntries(
+      Object.entries({ ...styleDefaults, ...style }).map(([k, v]) => [
+        k,
+        p.prop(i, `styles.${id}.${k}`) ?? (k === "lineHeight" ? style.lineHeight : v)
+      ])
+    );
+  const input = { ...raw, runs, styles };
+  for (const k of ["width", "height", "lineHeight", "paragraphSpacing"])
+    input[k] = p.prop(i, k);
+  return input;
+}
+function resolveText(p, i) {
+  const input = textInput(p, i);
+  const prepared = fonts?.prepareText?.(p, input);
+  const signature = JSON.stringify([fontRevision, prepared?.revision, input]);
+  let state = cache.get(p);
+  if (!state) cache.set(p, state = /* @__PURE__ */ new Map());
+  let value = state.get(i);
+  if (!value || value.signature !== signature) {
+    value = { signature, input, layout: prepared?.layout ?? layoutText(input, text.overflow) };
+    state.set(i, value);
+    p.drawVersions[i] = ++p.drawRevision;
+  }
+  return value;
+}
+const paint = (p, raw, kind) => raw ? {
+  ...raw,
+  kind,
+  key: kind,
+  visible: true,
+  color: raw.color ? drawColor(p, raw.color) : void 0,
+  coordinates: Object.fromEntries(
+    ["x1", "y1", "x2", "y2", "cx", "cy", "r", "fx", "fy"].filter((k) => raw[k] !== void 0).map((k) => [k, raw[k]])
+  ),
+  stops: raw.stops?.map((s) => ({
+    ...s,
+    color: drawColor(p, s.color)
+  })),
+  width: raw.width ?? 1,
+  cap: raw.cap ?? "round",
+  join: raw.join ?? "round"
+} : void 0;
+const text = {
+  name: "text",
+  after,
+  entries,
+  layout: layoutText,
+  invalidateText,
+  textLayout,
+  input: textInput,
+  paint,
+  init(registry, shared) {
+    styleShape.p.fill = shared.FILL;
+    styleShape.p.stroke = shared.STROKE;
+    Object.assign(entries[0].elements.style.shape.p, styleShape.p);
+    if (V) installTextHit(text);
+    data = registry.get("data");
+    text.fonts = fonts = registry.get("fonts");
+    fonts?.use(entries, registerTextMeasurer);
+    if (data) {
+      const models = shared.DOC.p.data.p.models;
+      const properties = models.of.p.properties;
+      const type = properties.of.p.type;
+      type.of = [...type.of.filter((v) => v !== "text-style"), "text-style"];
+    }
+    return text;
+  },
+  model(node, key) {
+    if (node.type !== "text") return;
+    const m = /^(?:runs\.(\d+)\.(text|style)|styles\.([\w-]+)\.(size|weight|tracking|lineHeight|font))$/.exec(
+      key
+    );
+    if (!m) return;
+    const source = m[1] === void 0 ? node.raw.styles?.[m[3]] : Array.isArray(node.raw.runs) ? node.raw.runs[+m[1]] : void 0;
+    if (!source) return;
+    const field = m[2] ?? m[4];
+    const rest = source[field] ?? styleDefaults[field] ?? "";
+    const bounds = styleShape.p[field];
+    return {
+      prop: {
+        min: bounds?.gt === 0 ? Number.MIN_VALUE : bounds?.min,
+        max: bounds?.max,
+        type: typeof rest === "number" ? "number" : "string",
+        discrete: typeof rest !== "number",
+        feature: "text"
+      },
+      rest
+    };
+  },
+  track(track, addr, keys, pointer, d) {
+    if (addr.prop.feature !== "text" || addr.prop.type !== "string") return;
+    keys.forEach((key, i) => {
+      if (key[2] !== void 0 && key[2] !== "hold")
+        d.err(
+          "bad-ease",
+          pointer + "/" + i + "/2",
+          V && "text strings are hold-only",
+          V && "omit ease or use hold"
+        );
+    });
+    track.sample = (time, player) => {
+      let i = 0;
+      while (i < track.times.length - 1 && time >= track.times[i + 1] - 1e-9) i++;
+      const value = track.values[i];
+      return typeof value === "function" ? value(player) : value;
+    };
+  },
+  value(a, v) {
+    if (a.prop.type === "string" && typeof v === "string") return v;
+  },
+  ...V ? {
+    load(model, _raw, d) {
+      for (const diagnostic of d.list) {
+        if (diagnostic.code !== "unknown-address") continue;
+        const address = diagnostic.pointer.split("/").at(-1);
+        const m = /^([^.]+)\.styles\.[^.]+\.(fill|stroke)(?:\.|$)/.exec(address);
+        if (m && String(model.nodes[model.ids.get(m[1]) ?? -1]?.type) === "text")
+          diagnostic.hint = `local style paints are static; move ${m[2]} to the text node, omit it from the style, and bind ${m[1]}.${m[2]}.color; or bind ${m[1]}.runs.0.style to a text-style property naming a shared style`;
+      }
+    }
+  } : {},
+  resolve(model, d) {
+    const indices = nodes(model);
+    if (!indices.length) return;
+    for (const i of indices) {
+      if (V) {
+        for (let j = d.list.length - 1; j >= 0; j--)
+          if (d.list[j].code === "no-paint" && d.list[j].pointer === nodePointer(model, i))
+            d.list.splice(j, 1);
+      }
+      const r = model.nodes[i].raw, at = nodePointer(model, i);
+      const sizing = textSizing(r);
+      const error = (key, code, message, hint) => d.err(code, at + "/" + key, V && message, V && hint);
+      if (sizing === "fixed" && (r.width === void 0 || r.height === void 0) || sizing === "auto-height" && r.width === void 0)
+        error(
+          "sizing",
+          "text-box",
+          "sizing needs box dimensions",
+          "set width and height for fixed; width for auto-height"
+        );
+      if (r.overflow && r.overflow !== "visible" && sizing !== "fixed")
+        error(
+          "overflow",
+          "text-box",
+          "overflow needs a fixed box",
+          'set width and height, or use sizing="fixed" with both dimensions'
+        );
+      if (typeof r.runs === "string" && (!r.runs.startsWith("$") || !model.doc.requires?.includes("data")))
+        error(
+          "runs",
+          "text-source",
+          "run list needs a data path",
+          'declare data and use runs="$items"'
+        );
+      const styles = { ...model.doc.textStyles, ...r.styles };
+      for (const [name, style] of Object.entries(styles))
+        for (const kind of ["fill", "stroke"]) {
+          const paint2 = style[kind];
+          for (const color of [paint2?.color, ...paint2?.stops?.map((s) => s.color) ?? []])
+            if (color && color !== "currentColor" && !model.colors[color] && !parseHex(color))
+              d.err(
+                "text-paint",
+                ptr(ptr(r.styles?.[name] ? at + "/styles" : "/textStyles", name), kind),
+                V && "invalid text paint color",
+                V && "use a hex color, currentColor or declared color slot"
+              );
+        }
+      const source = (path, point, expected) => {
+        const ref = data?.compiled.get(model)?.refs.get(path);
+        if (!ref || ref.property.type !== expected)
+          error(
+            point,
+            "text-source",
+            "unknown or incompatible text source",
+            "use a declared " + expected + " data path"
+          );
+      };
+      if (typeof r.runs === "string") {
+        const c = data?.compiled.get(model), m = /^\$(?:([\w-]+):)?([\w.-]+)$/.exec(r.runs);
+        let v = m && c?.defaults[m[1] ?? c.defaultName];
+        for (const k of m?.[2]?.split(".") ?? [])
+          v = v && typeof v === "object" ? v[k] : void 0;
+        if (!Array.isArray(v))
+          error("runs", "text-source", "unknown run list", "use a declared list data path");
+      }
+      if (Array.isArray(r.runs))
+        r.runs.forEach((run, ri) => {
+          if (run.text.startsWith("$")) source(run.text, `runs/${ri}/text`, "string");
+          if (run.style?.startsWith("$")) source(run.style, `runs/${ri}/style`, "text-style");
+          if (run.style && !run.style.startsWith("$") && !styles[run.style])
+            error(
+              `runs/${ri}/style`,
+              "text-style",
+              "unknown text style",
+              "declare a local style or shared text-style"
+            );
+          if ((run.text.startsWith("$") || run.style?.startsWith("$")) && !model.doc.requires?.includes("data"))
+            error(
+              `runs/${ri}`,
+              "text-source",
+              "bound runs require data",
+              "add data to requires and declare the source path"
+            );
+        });
+    }
+    const previous = model.afterStep;
+    model.afterStep = (p) => {
+      previous?.(p);
+      for (const i of indices) {
+        if (cache.get(p)?.has(i)) resolveText(p, i);
+      }
+    };
+  },
+  draw: {
+    frame(p, i, node) {
+      if (p.model.nodes[i].type !== "text") return;
+      const { layout, input } = resolveText(p, i);
+      node.text = {
+        layout,
+        styles: input.styles,
+        runs: input.runs,
+        paints: input.runs.map((r) => {
+          const style = input.styles[r.style ?? ""] ?? {};
+          const paints = [
+            paint(p, style.fill, "fill"),
+            paint(p, style.stroke, "stroke")
+          ].filter((v) => !!v);
+          return paints.length ? paints : node.paints.length ? node.paints : [{ kind: "fill", color: "#000", visible: true }];
+        })
+      };
+    }
+  }
+};
+export {
+  createTextRunAccess,
+  invalidateText,
+  measureText,
+  text,
+  textLayout,
+  textRun
+};

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

@@ -0,0 +1,79 @@
+import { type TextOverflow } from './overflow.js';
+import { type FontSpec } from './measure.js';
+export interface TextStyle {
+    font?: string;
+    size?: number;
+    weight?: number;
+    style?: 'normal' | 'italic';
+    tracking?: number;
+    lineHeight?: number;
+    axes?: Record<string, number>;
+    features?: Record<string, number>;
+    fill?: unknown;
+    stroke?: unknown;
+}
+export interface TextRun {
+    id?: string;
+    text: string;
+    style?: string;
+}
+export interface LayoutInput {
+    runs: TextRun[];
+    styles: Record<string, TextStyle>;
+    width?: number;
+    height?: number;
+    sizing?: 'fixed' | 'auto-width' | 'auto-height';
+    align?: 'left' | 'center' | 'right' | 'start' | 'end';
+    valign?: 'top' | 'middle' | 'bottom';
+    origin?: 'top-left' | 'baseline' | [number, number];
+    overflow?: 'visible' | 'hidden' | 'clipped' | 'ellipsis' | 'fit' | 'fit-font-size';
+    wrap?: boolean;
+    wordBreak?: 'normal' | 'break-word' | 'break-all';
+    lineHeight?: number;
+    paragraphSpacing?: number;
+    verticalTrimTop?: 'none' | 'cap' | 'x-height';
+    verticalTrimBottom?: 'none' | 'baseline';
+    fitFromBaseline?: boolean;
+    fitFontSizeResizesBox?: boolean;
+}
+export interface Cluster {
+    text: string;
+    /** UTF-16 offset in the concatenated logical input, also suitable for DOM selection. */
+    index: number;
+    run: number;
+    x: number;
+    y: number;
+    advance: number;
+    font: FontSpec;
+}
+export interface TextLine {
+    clusters: Cluster[];
+    baseline: number;
+    width: number;
+    ascent: number;
+    descent: number;
+    height: number;
+    /** Aligned, origin-shifted start of a line without clusters (its caret position). */
+    x?: number;
+}
+export interface TextLayout {
+    lines: TextLine[];
+    width: number;
+    height: number;
+    contentWidth: number;
+    contentHeight: number;
+    fittedSize: number;
+    scale: number;
+    clip?: [number, number, number, number];
+}
+export declare const styleDefaults: {
+    font: string;
+    size: number;
+    weight: number;
+    tracking: number;
+    lineHeight: number;
+};
+export declare const fontSpec: (s: TextStyle, scale?: number) => FontSpec;
+export declare const textSizing: ({ sizing, width, height, }: Pick<LayoutInput, "sizing" | "width" | "height">) => "fixed" | "auto-width" | "auto-height";
+/** One pure algorithm shared by browser and tooling. No system font assumptions. */
+export declare function layoutText(input: LayoutInput, overflow?: TextOverflow | null): TextLayout;