animl 0.0.0-stage → 0.1.0

package/modules/text/core/layout.js

@@ -0,0 +1,189 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { overflowText } from "./overflow.js";
+import {
+  graphemes,
+  words,
+  measure,
+  missingTextDependency
+} from "./measure.js";
+const styleDefaults = {
+  font: "sans-serif",
+  size: 1,
+  weight: 400,
+  tracking: 0,
+  lineHeight: 0
+};
+const fontSpec = (s, scale = 1) => ({
+  family: s.font ?? styleDefaults.font,
+  size: (s.size ?? styleDefaults.size) * scale,
+  weight: s.weight ?? styleDefaults.weight,
+  style: s.style ?? "normal",
+  tracking: s.tracking ?? styleDefaults.tracking,
+  axes: s.axes,
+  features: s.features
+});
+const textSizing = ({
+  sizing,
+  width,
+  height
+}) => sizing ?? (width !== void 0 && height !== void 0 ? "fixed" : "auto-width");
+function layoutText(input, overflow = V ? overflowText : null) {
+  const sizing = textSizing(input);
+  const limit = sizing === "auto-width" ? Infinity : input.width ?? Infinity;
+  const boxHeight = sizing === "fixed" ? input.height ?? Infinity : Infinity;
+  const build = (factor) => {
+    const glyphs = [];
+    let offset = 0;
+    const full = input.runs.map((r) => r.text).join("");
+    const breaks = new Set([...words.segment(full)].map((w) => w.index + w.segment.length));
+    const normalized = input.runs.map((r) => ({ ...r, text: "" }));
+    const ends = [];
+    let total = 0, owner = 0;
+    for (const r of input.runs) ends.push(total += r.text.length);
+    for (const g of graphemes.segment(full)) {
+      while (owner < ends.length - 1 && g.index >= ends[owner]) owner++;
+      normalized[owner].text += g.segment;
+    }
+    normalized.forEach((run, ri) => {
+      const style = input.styles[run.style ?? ""] ?? {};
+      const font = fontSpec(style, factor);
+      let start = 0;
+      for (const part of run.text.split(/(\r\n|\n|\r)/)) {
+        const segments = [...graphemes.segment(part)];
+        const newline = /^(\r\n|\n|\r)$/.test(part);
+        const metrics = measure(font, newline ? "" : part);
+        segments.forEach(
+          (g, gi) => glyphs.push({
+            text: g.segment,
+            index: offset + start + g.index,
+            run: ri,
+            x: 0,
+            y: 0,
+            font,
+            metrics,
+            advance: newline ? 0 : (metrics.advances[gi] ?? 0) - (metrics.advances[gi - 1] ?? 0),
+            lineHeight: (style.lineHeight ?? input.lineHeight ?? 0) * font.size,
+            breakAfter: breaks.has(offset + start + g.index + g.segment.length)
+          })
+        );
+        start += part.length;
+      }
+      offset += run.text.length;
+    });
+    const fallback = fontSpec(input.styles[input.runs[0]?.style ?? ""] ?? {}, factor);
+    const fm = measure(fallback, "");
+    const lines = [];
+    let y = 0;
+    const remeasure = (gs) => {
+      for (let i = 0; i < gs.length; ) {
+        let j = i;
+        while (j < gs.length && gs[j].run === gs[i].run) j++;
+        const m = measure(
+          gs[i].font,
+          gs.slice(i, j).map((g) => g.text).join("")
+        ).advances;
+        for (let k = i; k < j; k++) gs[k].advance = m[k - i] - (m[k - i - 1] ?? 0);
+        i = j;
+      }
+      return gs;
+    };
+    const emit = (gs, paragraph = false) => {
+      remeasure(gs);
+      let ascent = gs.length ? 0 : fm.ascent, descent = gs.length ? 0 : fm.descent, height = 0, x = 0;
+      for (const g of gs) {
+        ascent = Math.max(ascent, g.metrics.ascent);
+        descent = Math.max(descent, g.metrics.descent);
+        height = Math.max(
+          height,
+          g.lineHeight || g.metrics.ascent + g.metrics.descent + g.metrics.lineGap
+        );
+      }
+      if (!height)
+        height = (input.lineHeight ?? 0) * fallback.size || ascent + descent + fm.lineGap;
+      const baseline = y + ascent + Math.max(0, height - ascent - descent) / 2;
+      gs.forEach((g, i) => {
+        g.x = x;
+        g.y = baseline;
+        x += g.advance + (i + 1 < gs.length ? g.font.tracking : 0);
+      });
+      lines.push({ clusters: gs, baseline, width: x, ascent, descent, height });
+      y += height + (paragraph ? input.paragraphSpacing ?? 0 : 0);
+    };
+    let pending = [], width = 0;
+    for (const glyph of glyphs) {
+      if (/^[\r\n]/.test(glyph.text)) {
+        emit(pending, true);
+        pending = [];
+        width = 0;
+        continue;
+      }
+      pending.push(glyph);
+      width += glyph.advance + (pending.length > 1 ? pending[pending.length - 2].font.tracking : 0);
+      if (input.wrap === false || width <= limit || pending.length === 1) continue;
+      let at = input.wordBreak === "break-all" ? pending.length - 1 : 0;
+      if (!at) {
+        for (let i = 0; i < pending.length - 1; i++) if (pending[i].breakAfter) at = i + 1;
+      }
+      if (!at && input.wordBreak === "break-word") at = pending.length - 1;
+      if (!at) continue;
+      emit(pending.slice(0, at));
+      pending = remeasure(pending.slice(at));
+      width = pending.reduce(
+        (n, g, i) => n + g.advance + (i ? pending[i - 1].font.tracking : 0),
+        0
+      );
+    }
+    emit(pending);
+    const first = lines[0], last = lines[lines.length - 1];
+    const topTrim = input.verticalTrimTop === "cap" ? first.baseline - (first.clusters[0]?.metrics.capHeight ?? fm.capHeight) : input.verticalTrimTop === "x-height" ? first.baseline - (first.clusters[0]?.metrics.xHeight ?? fm.xHeight) : 0;
+    const bottomTrim = input.verticalTrimBottom === "baseline" ? y - last.baseline : 0;
+    const contentHeight = y - topTrim - bottomTrim;
+    const contentWidth = Math.max(0, ...lines.map((l) => l.width));
+    return {
+      lines,
+      width: sizing === "auto-width" ? contentWidth : input.width ?? contentWidth,
+      height: sizing === "fixed" ? input.height ?? contentHeight : contentHeight,
+      contentWidth,
+      contentHeight,
+      fittedSize: fallback.size,
+      scale: 1,
+      // Internal trim shift is applied before alignment below.
+      ...{ topTrim }
+    };
+  };
+  let out = build(1);
+  if (input.overflow && input.overflow !== "visible" && input.overflow !== "clipped") {
+    if (!overflow)
+      missingTextDependency(
+        "text-overflow",
+        V && "anima: text-overflow: register overflow policies before measuring overflow text",
+        V && "import 'animl/web/text-overflow' before measuring overflow text"
+      );
+    out = overflow(input, out, build, limit, boxHeight, measure);
+  }
+  const origin = input.origin ?? "top-left";
+  const ox = Array.isArray(origin) ? -origin[0] * out.width : 0;
+  const sy = input.valign === "middle" ? (out.height - out.contentHeight * out.scale) / 2 : input.valign === "bottom" ? out.height - out.contentHeight * out.scale : 0;
+  const trim = out.topTrim;
+  const oy = Array.isArray(origin) ? -origin[1] * out.height : origin === "baseline" ? -((out.lines[0]?.baseline ?? 0) - trim) * out.scale - sy : 0;
+  for (const line of out.lines) {
+    const dx = ox + (input.align === "center" ? (out.width - line.width * out.scale) / 2 : input.align === "right" || input.align === "end" ? out.width - line.width * out.scale : 0);
+    if (!line.clusters.length) line.x = dx;
+    line.baseline = (line.baseline - trim) * out.scale + sy + oy;
+    line.width *= out.scale;
+    for (const g of line.clusters) {
+      g.x = g.x * out.scale + dx;
+      g.y = line.baseline;
+      g.advance *= out.scale;
+    }
+  }
+  if (input.overflow === "clipped") out.clip = [ox, oy, out.width, out.height];
+  delete out.topTrim;
+  return out;
+}
+export {
+  fontSpec,
+  layoutText,
+  styleDefaults,
+  textSizing
+};

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

@@ -0,0 +1,31 @@
+/** The shared P6 measurer contract. Advances exclude tracking; layout adds it between clusters. */
+export type FontSpec = {
+    family: string;
+    size: number;
+    weight: number;
+    style: 'normal' | 'italic';
+    axes?: Record<string, number>;
+    features?: Record<string, number>;
+    tracking: number;
+};
+export type Measured = {
+    advances: Float64Array;
+    ascent: number;
+    descent: number;
+    capHeight: number;
+    xHeight: number;
+    lineGap: number;
+};
+export interface TextMeasurer {
+    measure(font: FontSpec, text: string): Measured;
+}
+export declare let fontRevision: number;
+/** Without an argument, keeps the active measurer and only bumps the font revision. */
+export declare function registerTextMeasurer(measurer?: TextMeasurer): void;
+/** Compatibility with the independently shipped P6-2 installer. */
+export declare const setTextMeasurer: typeof registerTextMeasurer;
+export declare function measure(font: FontSpec, text: string): Measured;
+/** Shared diagnostic for missing optional text implementations. */
+export declare function missingTextDependency(code: string, message: string | false, hint: string | false): never;
+export declare const graphemes: Intl.Segmenter;
+export declare const words: Intl.Segmenter;

package/modules/text/core/measure.js

@@ -0,0 +1,35 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+let current;
+let fontRevision = 0;
+function registerTextMeasurer(measurer = current) {
+  current = measurer;
+  fontRevision++;
+}
+const setTextMeasurer = registerTextMeasurer;
+function measure(font, text) {
+  if (!current)
+    missingTextDependency(
+      "text-measurer",
+      V && "anima: text-measurer: register a text measurer before drawing",
+      V && "import the text web entry or register a tool measurer"
+    );
+  return current.measure({ ...font, tracking: 0 }, text);
+}
+function missingTextDependency(code, message, hint) {
+  throw Object.assign(new Error(V ? message || code : code), {
+    code,
+    pointer: "/requires",
+    ...V ? { hint } : {}
+  });
+}
+const graphemes = new Intl.Segmenter("und", { granularity: "grapheme" });
+const words = new Intl.Segmenter("und", { granularity: "word" });
+export {
+  fontRevision,
+  graphemes,
+  measure,
+  missingTextDependency,
+  registerTextMeasurer,
+  setTextMeasurer,
+  words
+};

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

@@ -0,0 +1,7 @@
+import type { LayoutInput, TextLayout } from './layout.js';
+export type UnalignedTextLayout = TextLayout & {
+    topTrim: number;
+};
+export type TextOverflow = (input: LayoutInput, out: UnalignedTextLayout, build: (factor: number) => UnalignedTextLayout, limit: number, boxHeight: number, measure: typeof import('./measure.js').measure) => UnalignedTextLayout;
+/** Optional overflow policies; the original layout builder owns measurement and rewrapping. */
+export declare const overflowText: TextOverflow;

package/modules/text/core/overflow.js

@@ -0,0 +1,58 @@
+const overflowText = (input, out, build, limit, boxHeight, measure) => {
+  const fitting = input.overflow === "fit-font-size";
+  const fitHeight = (l) => input.fitFromBaseline ? l.contentHeight - l.lines[0].baseline + l.topTrim : l.contentHeight;
+  const ratio = (box, content) => content > 0 ? box / content : 1;
+  const zero = !limit || !boxHeight;
+  let lo = +!zero;
+  if (fitting && lo && (out.contentWidth > limit || fitHeight(out) > boxHeight)) {
+    let hi = 1;
+    lo = 0;
+    for (let i = 0; i < 20; i++) {
+      const mid = (lo + hi) / 2, test = build(mid);
+      if (test.contentWidth <= limit && fitHeight(test) <= boxHeight) lo = mid;
+      else hi = mid;
+    }
+    if (lo) out = build(lo);
+  }
+  if (fitting && !lo) {
+    out.lines = [];
+    out.contentWidth = out.contentHeight = out.fittedSize = 0;
+  }
+  if (input.overflow === "fit") {
+    out.scale = zero ? 0 : Math.min(1, ratio(limit, out.contentWidth), ratio(boxHeight, fitHeight(out)));
+    if (!out.scale) out.lines = [];
+  }
+  if (fitting && input.fitFontSizeResizesBox) {
+    out.width = out.contentWidth;
+    out.height = out.contentHeight;
+  }
+  if (input.overflow === "hidden" || input.overflow === "ellipsis") {
+    const all = out.lines;
+    out.lines = all.filter((l) => l.baseline - out.topTrim + l.descent <= boxHeight);
+    if (input.overflow === "ellipsis") {
+      const line = out.lines.at(-1);
+      if (line && (out.lines.length < all.length || line.width > limit)) {
+        const last = line.clusters.at(-1);
+        if (last) {
+          const advance = measure(last.font, "\u2026").advances[0] ?? 0;
+          while (line.clusters.length && line.clusters.at(-1).x + line.clusters.at(-1).advance + line.clusters.at(-1).font.tracking + advance > limit)
+            line.clusters.pop();
+          const tail = line.clusters.at(-1), x = tail ? tail.x + tail.advance + tail.font.tracking : 0;
+          if (advance <= limit)
+            line.clusters.push({
+              ...last,
+              text: "\u2026",
+              index: tail ? tail.index + tail.text.length : last.index,
+              x,
+              advance
+            });
+          line.width = advance <= limit ? x + advance : 0;
+        }
+      }
+    }
+  }
+  return out;
+};
+export {
+  overflowText
+};

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

@@ -0,0 +1,6 @@
+import type { ModuleEntry } from '../../../packages/core/src/modules.js';
+import { type Shape, type ObjShape } from '../../../packages/core/src/registry.js';
+export declare const styleShape: ObjShape;
+export declare const runShape: ObjShape;
+export declare const textShapes: Record<string, Shape>;
+export declare const entries: ModuleEntry[];

package/modules/text/core/registry.js

@@ -0,0 +1,82 @@
+import { FILL, STROKE } from "../../../packages/core/src/registry.js";
+const n = (min) => ({ k: "num", min });
+const s = (of, markup) => ({ k: "str", of, markup });
+const styleShape = {
+  k: "obj",
+  p: {
+    font: s(),
+    size: { k: "num", gt: 0 },
+    weight: { k: "num", min: 1, max: 1e3 },
+    style: s(["normal", "italic"]),
+    tracking: n(),
+    lineHeight: { ...n(0), markup: "line-height" },
+    fill: FILL,
+    stroke: STROKE
+  }
+};
+const styleElement = { k: "obj", p: { id: s(), ...styleShape.p }, req: ["id"] };
+const runShape = {
+  k: "obj",
+  req: ["text"],
+  p: { id: s(), text: s(), style: s() }
+};
+const textShapes = {
+  runs: { k: "alt", of: [{ k: "arr", of: runShape }, s()] },
+  styles: { k: "map", of: styleShape },
+  width: n(0),
+  height: n(0),
+  sizing: s(["fixed", "auto-width", "auto-height"]),
+  align: s(["left", "center", "right", "start", "end"]),
+  valign: s(["top", "middle", "bottom"]),
+  overflow: s(["visible", "hidden", "clipped", "ellipsis", "fit", "fit-font-size"]),
+  wrap: { k: "bool" },
+  wordBreak: s(["normal", "break-word", "break-all"], "word-break"),
+  origin: { k: "alt", of: [s(["top-left", "baseline"]), { k: "tup", of: [n(), n()], min: 2 }] },
+  lineHeight: { ...n(0), markup: "line-height" },
+  paragraphSpacing: { ...n(0), markup: "paragraph-spacing" },
+  verticalTrimTop: s(["none", "cap", "x-height"], "vertical-trim-top"),
+  verticalTrimBottom: s(["none", "baseline"], "vertical-trim-bottom"),
+  fitFromBaseline: { k: "bool", markup: "fit-from-baseline" },
+  fitFontSizeResizesBox: { k: "bool", markup: "fit-font-size-resizes-box" },
+  textField: { ...s(), markup: "text-field" },
+  styleField: { ...s(), markup: "style-field" }
+};
+const entries = [
+  {
+    target: "text",
+    node: { painted: true },
+    shapes: textShapes,
+    props: {
+      width: { type: "number", min: 0 },
+      height: { type: "number", min: 0 },
+      lineHeight: { type: "number", min: 0, markup: "line-height" },
+      paragraphSpacing: { type: "number", min: 0, markup: "paragraph-spacing" }
+    },
+    required: ["id", "type", "runs"],
+    elements: {
+      run: {
+        shape: runShape,
+        target: { attribute: "target", default: "runs", choices: ["runs"], array: true }
+      },
+      style: {
+        shape: styleElement,
+        target: { attribute: "target", default: "styles", choices: ["styles"], mapKey: "id" }
+      },
+      "text-style": {
+        shape: styleElement,
+        root: "textStyles",
+        mapKey: "id"
+      }
+    }
+  },
+  {
+    target: "document",
+    shapes: { textStyles: { k: "map", of: styleShape, markup: "text-styles" } }
+  }
+];
+export {
+  entries,
+  runShape,
+  styleShape,
+  textShapes
+};

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

@@ -0,0 +1,6 @@
+import type { SVGBackend, El, Attrs, Paint } from '../../../packages/core/src/svg.js';
+import type { DrawFrame } from '../../../packages/core/src/draw.js';
+/** Build the live text subtree; both static SVG and DOM consume these same elements/attributes. */
+export declare function textElements(frame: DrawFrame, node: number): El[];
+export declare function textAttrs(f: DrawFrame, el: El, paint: Paint, id: string, a: Attrs): void;
+export declare const textSVG: SVGBackend;

package/modules/text/core/svg.js

@@ -0,0 +1,128 @@
+import { paintAttrs } from "../../../packages/core/src/svg.js";
+import { fmt } from "../../../packages/core/src/draw.js";
+import { gradientTree, gradientAttrs } from "../../paint/core/svg.js";
+function textElements(frame, node) {
+  const data = frame.nodes[node].text;
+  if (!data) return [];
+  const { layout, paints } = data;
+  const defs = [];
+  paints.forEach(
+    (ps, ri) => ps.forEach((p) => {
+      if (p.type) {
+        const g = gradientTree(node, ri + "-" + p.kind, p);
+        const mark = (e) => {
+          e.role = "module:text-gradient";
+          e.key = ri + "-" + p.kind;
+          e.kids.forEach(mark);
+        };
+        mark(g);
+        defs.push(g);
+      }
+    })
+  );
+  if (layout.clip)
+    defs.push({
+      tag: "clipPath",
+      role: "module:text-clip",
+      node,
+      kids: [{ tag: "rect", role: "module:text-clip-box", node, kids: [] }]
+    });
+  const lines = layout.lines.map((_line, li) => ({
+    tag: "text",
+    role: "module:text-line",
+    node,
+    index: li,
+    kids: []
+  }));
+  layout.lines.forEach((line, li) => {
+    for (let ci = 0; ci < line.clusters.length; ) {
+      const first = line.clusters[ci], start = ci;
+      while (ci < line.clusters.length && line.clusters[ci].run === first.run) ci++;
+      lines[li].kids.push({
+        tag: "tspan",
+        role: "module:text-run",
+        node,
+        index: li,
+        key: String(start),
+        text: line.clusters.slice(start, ci).map((c) => c.text).join(""),
+        kids: []
+      });
+    }
+  });
+  return [...defs, { tag: "g", role: "module:text-content", node, kids: lines }];
+}
+function textAttrs(f, el, paint, id, a) {
+  const data = f.nodes[el.node].text;
+  if (!data) return;
+  const { layout } = data;
+  const clipId = id + "text-clip-" + el.node;
+  if (el.role === "module:text") {
+    el.kids = textElements(f, el.node);
+    return;
+  }
+  if (el.role === "module:text-clip") {
+    a.id = clipId;
+    return;
+  }
+  if (el.role === "module:text-clip-box") {
+    const [x, y, width, height] = layout.clip;
+    Object.assign(a, { x: fmt(x), y: fmt(y), width: fmt(width), height: fmt(height) });
+    return;
+  }
+  if (el.role === "module:text-content") {
+    a["clip-path"] = layout.clip ? `url(#${clipId})` : null;
+    return;
+  }
+  if (el.role === "module:text-line") {
+    a.style = "white-space:pre";
+    a["text-rendering"] = "geometricPrecision";
+    return;
+  }
+  if (el.role === "module:text-gradient") {
+    const [run, kind] = el.key.split("-");
+    const p = data.paints[+run].find((p2) => p2.kind === kind);
+    gradientAttrs(p, el.node, el.key, el.index, paint, id, a);
+    return;
+  }
+  if (el.role !== "module:text-run") return;
+  const cluster = layout.lines[el.index].clusters[+el.key];
+  const font = cluster.font, ps = data.paints[cluster.run];
+  paintAttrs(
+    ps.find((p) => p.kind === "fill"),
+    ps.find((p) => p.kind === "stroke"),
+    paint,
+    a
+  );
+  for (const p of ps) if (p.type) a[p.kind] = `url(#${id}p${el.node}-${cluster.run}-${p.kind})`;
+  Object.assign(a, {
+    x: fmt(cluster.x / layout.scale),
+    y: fmt(cluster.y / layout.scale),
+    "font-family": font.family,
+    "font-size": fmt(font.size),
+    "font-weight": String(font.weight),
+    "font-style": font.style,
+    "letter-spacing": fmt(font.tracking),
+    transform: layout.scale === 1 ? null : `scale(${fmt(layout.scale)})`
+  });
+}
+const textSVG = {
+  tree(draw, tree) {
+    const walk = (els) => {
+      for (const el of els) {
+        if (el.role === "shape" && draw.nodes[el.node].kind === "text") {
+          el.tag = "g";
+          el.role = "module:text";
+        } else walk(el.kids);
+      }
+    };
+    walk(tree.root);
+  },
+  attrs(f, el, paint, id, a) {
+    if (el.role.startsWith("module:text")) textAttrs(f, el, paint, id, a);
+  }
+};
+export {
+  textAttrs,
+  textElements,
+  textSVG
+};

package/modules/text/manifest.d.ts

@@ -0,0 +1,72 @@
+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;
+        over?: undefined;
+        heavy?: undefined;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        heavy?: undefined;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        heavy: boolean;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        authoring: boolean;
+        heavy?: undefined;
+    })[];
+    adapters: {
+        'packages/core/src/modules/text/index.ts': string;
+        'packages/core/src/modules/text/svg.ts': string;
+        'packages/core/src/modules/text/host.ts': string;
+        'packages/core/src/modules/text/hit.ts': string;
+        'packages/markup/src/text.ts': string;
+        'packages/web/src/text.ts': string;
+        'packages/web/src/text-overflow.ts': string;
+        'packages/web/src/text-canvas.ts': string;
+        'packages/web/src/text-host.ts': string;
+        'packages/web/src/text-hit.ts': string;
+        'packages/web/src/markup-text.ts': string;
+    };
+    exports: {
+        'core:./text': string;
+        'core:./text-hit': string;
+        'core:./text-host': string;
+        'markup:./text': string;
+        'web:./text': string;
+        'web:./text-overflow': string;
+        'web:./text-canvas': string;
+        'web:./text-hit': string;
+        'web:./text-host': string;
+        'web:./markup-text': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+    markupHook: {
+        slot: string;
+        type: string;
+        value: string;
+        browserName: string;
+    };
+};
+export default _default;