modern-text 1.12.0 → 2.0.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { T as Text } from './shared/modern-text.CrFHIJtB.mjs';
-export { C as Canvas2DRenderer, a as Character, F as Fragment, M as Measurer, P as Paragraph, b as backgroundPlugin, c as createSvgLoader, d as createSvgParser, g as getEffectTransform2D, e as getHighlightStyle, h as highlightPlugin, i as isEqualObject, f as isEqualValue, l as listStylePlugin, o as outlinePlugin, p as parseColormap, j as parseTransformOrigin, k as parseValueNumber, r as renderPlugin, t as textDecorationPlugin, m as textDefaultStyle } from './shared/modern-text.CrFHIJtB.mjs';
+import { T as Text } from './shared/modern-text.ChzjFjsk.mjs';
+export { C as Canvas2DRenderer, a as Character, D as DomMeasurer, F as FontMeasurer, b as Fragment, P as Paragraph, c as backgroundPlugin, d as createSvgLoader, e as createSvgParser, g as getEffectTransform2D, f as getHighlightStyle, h as highlightPlugin, i as isEqualObject, j as isEqualValue, l as listStylePlugin, o as outlinePlugin, p as parseColormap, k as parseTransformOrigin, m as parseValueNumber, r as renderPlugin, t as textDecorationPlugin, n as textDefaultStyle } from './shared/modern-text.ChzjFjsk.mjs';
 export { d as defineDeformation, a as definePlugin, b as deformationPlugin, g as getDeformationNames, r as removeDeformation } from './shared/modern-text.JF1ny7A-.mjs';
 export { C as CircleCurve, E as EllipseCurve, H as HeartCurve, P as PolygonCurve, R as RectangularCurve } from './shared/modern-text.fT17R5HY.mjs';
 import 'modern-idoc';

package/dist/shared/{modern-text.d-RdVkZg.d.cts → modern-text.BD7PBYt7.d.cts}

@@ -1,5 +1,5 @@
 import { Vector2Like, BoundingBox, Vector2 } from 'modern-path2d';
-import { a as Character } from './modern-text.C8g4NZgY.cjs';
+import { a as Character } from './modern-text.D4WopQCu.cjs';
 
 /** 逐字沿形状排布所需的曲线最小接口（实现了这三个方法即可当作变形曲线） */
 interface DeformationCurve {

package/dist/shared/{modern-text.Bo2MzSls.d.ts → modern-text.BxijkspX.d.ts}

@@ -1,5 +1,5 @@
 import { Vector2Like, BoundingBox, Vector2 } from 'modern-path2d';
-import { a as Character } from './modern-text.C8g4NZgY.js';
+import { a as Character } from './modern-text.D4WopQCu.js';
 
 /** 逐字沿形状排布所需的曲线最小接口（实现了这三个方法即可当作变形曲线） */
 interface DeformationCurve {

package/dist/shared/{modern-text.DR1hbjgA.cjs → modern-text.CBgc-cQ1.cjs}

@@ -2,8 +2,8 @@
 
 const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
-const deformation = require('./modern-text.B2xfrqDc.cjs');
 const modernFont = require('modern-font');
+const deformation = require('./modern-text.B2xfrqDc.cjs');
 
 function createSvgLoader() {
   const loaded = /* @__PURE__ */ new Map();
@@ -531,6 +531,18 @@ class Character {
     this.fontStyle = fsSelectionMap[os2.fsSelection] ?? macStyleMap[head.macStyle];
     return this;
   }
+  /**
+   * Populate glyph metrics only (advance width/height, ascender/descender,
+   * baseline, …) without building the glyph `path` or touching boxes.
+   *
+   * The DOM {@link DomMeasurer} never needs this — it reads positions back from the
+   * browser. A pure-JS measurer (e.g. `FontMeasurer`) must know advances *before*
+   * it can place characters, so it calls this ahead of layout. `update()` later
+   * recomputes the same metrics while building the path, so this is idempotent.
+   */
+  measureGlyph(fonts) {
+    return this.updateGlyph(this._getFontSFNT(fonts));
+  }
   update(fonts) {
     const sfnt = this._getFontSFNT(fonts);
     if (!sfnt) {
@@ -723,7 +735,7 @@ function getSharedContainer() {
   sharedContainer = container;
   return container;
 }
-class Measurer {
+class DomMeasurer {
   static notZeroStyles = /* @__PURE__ */ new Set([
     "width",
     "height"
@@ -758,7 +770,7 @@ class Measurer {
       return cached;
     }
     const domStyle = {};
-    const { notZeroStyles, pxStyles } = Measurer;
+    const { notZeroStyles, pxStyles } = DomMeasurer;
     for (const key in style) {
       const value = style[key];
       if (notZeroStyles.has(key) && value === 0) {
@@ -1067,6 +1079,253 @@ class Measurer {
   }
 }
 
+function side(style, name, edge) {
+  return style[`${name}${edge}`] ?? style[name] ?? 0;
+}
+class FontMeasurer {
+  measure(paragraphs, rootStyle, _dom, fonts) {
+    const _fonts = fonts ?? modernFont.fonts;
+    for (const paragraph of paragraphs) {
+      for (const fragment of paragraph.fragments) {
+        for (const character of fragment.characters) {
+          character.measureGlyph(_fonts);
+        }
+      }
+    }
+    return rootStyle.writingMode.includes("vertical") ? this._measureVertical(paragraphs, rootStyle) : this._measureHorizontal(paragraphs, rootStyle);
+  }
+  _rootPadding(rootStyle) {
+    return {
+      top: side(rootStyle, "padding", "Top"),
+      right: side(rootStyle, "padding", "Right"),
+      bottom: side(rootStyle, "padding", "Bottom"),
+      left: side(rootStyle, "padding", "Left")
+    };
+  }
+  _measureHorizontal(paragraphs, rootStyle) {
+    const rootPad = this._rootPadding(rootStyle);
+    const hasWidth = typeof rootStyle.width === "number";
+    const availWidth = hasWidth ? rootStyle.width - rootPad.left - rootPad.right : Infinity;
+    let y = rootPad.top;
+    let maxRight = rootPad.left;
+    for (const paragraph of paragraphs) {
+      const pStyle = paragraph.computedStyle;
+      const pBox = paragraph.style;
+      const mTop = side(pBox, "margin", "Top");
+      const mBottom = side(pBox, "margin", "Bottom");
+      const mLeft = side(pBox, "margin", "Left");
+      const mRight = side(pBox, "margin", "Right");
+      const pTop = side(pBox, "padding", "Top");
+      const pBottom = side(pBox, "padding", "Bottom");
+      const pLeft = side(pBox, "padding", "Left");
+      const pRight = side(pBox, "padding", "Right");
+      const liLeft = rootPad.left + mLeft + pLeft;
+      const liAvail = availWidth === Infinity ? Infinity : availWidth - mLeft - mRight - pLeft - pRight;
+      y += mTop + pTop;
+      const paraTop = y;
+      let paraRight = liLeft;
+      const lines = this._breakLines(paragraph, liAvail);
+      const align = pStyle.textAlign;
+      const indent = pStyle.textIndent ?? 0;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const lineIndent = i === 0 ? indent : 0;
+        let lineHeight = pStyle.fontSize * pStyle.lineHeight;
+        let contentWidth = 0;
+        for (const c of line) {
+          if (c.fontHeight > lineHeight) {
+            lineHeight = c.fontHeight;
+          }
+          contentWidth += this._advance(c);
+        }
+        let x = liLeft + lineIndent;
+        if (liAvail !== Infinity) {
+          const slack = liAvail - lineIndent - contentWidth;
+          if (align === "center") {
+            x += slack / 2;
+          } else if (align === "end" || align === "right") {
+            x += slack;
+          }
+        }
+        for (const c of line) {
+          const adv = c.advanceWidth;
+          const contentHeight = c.advanceHeight;
+          const fontHeight = c.fontHeight;
+          c.inlineBox.left = x;
+          c.inlineBox.top = y + (lineHeight - contentHeight) / 2;
+          c.inlineBox.width = adv;
+          c.inlineBox.height = contentHeight;
+          c.lineBox.left = x;
+          c.lineBox.top = c.inlineBox.top + (contentHeight - fontHeight) / 2;
+          c.lineBox.width = adv;
+          c.lineBox.height = fontHeight;
+          x += this._advance(c);
+        }
+        if (x > paraRight) {
+          paraRight = x;
+        }
+        y += lineHeight;
+      }
+      if (paraRight > maxRight) {
+        maxRight = paraRight;
+      }
+      for (const fragment of paragraph.fragments) {
+        this._unionInto(fragment.inlineBox, fragment.characters.map((c) => c.inlineBox));
+      }
+      paragraph.lineBox.left = liLeft;
+      paragraph.lineBox.top = paraTop;
+      paragraph.lineBox.width = liAvail === Infinity ? paraRight - liLeft : liAvail;
+      paragraph.lineBox.height = y - paraTop;
+      y += pBottom + mBottom;
+    }
+    const contentBottom = y + rootPad.bottom;
+    const totalWidth = hasWidth ? rootStyle.width : maxRight + rootPad.right;
+    const totalHeight = typeof rootStyle.height === "number" ? rootStyle.height : contentBottom;
+    if (typeof rootStyle.height === "number") {
+      const slack = totalHeight - contentBottom;
+      const va = rootStyle.verticalAlign;
+      const dy = va === "middle" ? slack / 2 : va === "bottom" ? slack : 0;
+      if (dy) {
+        this._shiftAll(paragraphs, dy);
+      }
+    }
+    return {
+      paragraphs,
+      boundingBox: new modernPath2d.BoundingBox(0, 0, totalWidth, totalHeight)
+    };
+  }
+  /**
+   * Vertical writing-mode (`vertical-rl`): columns stack right-to-left, glyphs
+   * flow top→bottom. It is the horizontal layout with the inline and block axes
+   * swapped — the inline (down-column) advance is `advanceWidth` (CJK upright = em;
+   * Latin is rotated, so its advance ≈ its width), the cross-axis content box is
+   * `advanceHeight`, and the column thickness is `fontHeight`. The lineBox is
+   * derived exactly as DomMeasurer.measureParagraphDom's vertical branch, so it
+   * stays accurate even though inlineBox carries the content-box rounding residual.
+   *
+   * v1: `vertical-rl` only; no per-paragraph margin/padding or block alignment.
+   */
+  _measureVertical(paragraphs, rootStyle) {
+    const rootPad = this._rootPadding(rootStyle);
+    const hasHeight = typeof rootStyle.height === "number";
+    const availHeight = hasHeight ? rootStyle.height - rootPad.top - rootPad.bottom : Infinity;
+    const columns = [];
+    for (const paragraph of paragraphs) {
+      const strut = paragraph.computedStyle.fontSize * paragraph.computedStyle.lineHeight;
+      for (const line of this._breakLines(paragraph, availHeight)) {
+        let thickness = strut;
+        for (const c of line) {
+          if (c.fontHeight > thickness) {
+            thickness = c.fontHeight;
+          }
+        }
+        columns.push({ chars: line, thickness });
+      }
+    }
+    const totalThickness = columns.reduce((sum, c) => sum + c.thickness, 0);
+    const hasWidth = typeof rootStyle.width === "number";
+    const blockWidth = hasWidth ? Math.max(rootStyle.width - rootPad.left - rootPad.right, totalThickness) : totalThickness;
+    let xRight = rootPad.left + blockWidth;
+    let maxBottom = rootPad.top;
+    for (const column of columns) {
+      xRight -= column.thickness;
+      const colLeft = xRight;
+      let y = rootPad.top;
+      for (const c of column.chars) {
+        const advance = c.advanceWidth;
+        const contentWidth = c.advanceHeight;
+        const fontHeight = c.fontHeight;
+        c.inlineBox.top = y;
+        c.inlineBox.height = advance;
+        c.inlineBox.width = contentWidth;
+        c.inlineBox.left = colLeft + (column.thickness - contentWidth) / 2;
+        c.lineBox.left = c.inlineBox.left + (contentWidth - fontHeight) / 2;
+        c.lineBox.top = y;
+        c.lineBox.width = fontHeight;
+        c.lineBox.height = advance;
+        y += this._advance(c);
+      }
+      if (y > maxBottom) {
+        maxBottom = y;
+      }
+    }
+    for (const paragraph of paragraphs) {
+      for (const fragment of paragraph.fragments) {
+        this._unionInto(fragment.inlineBox, fragment.characters.map((c) => c.inlineBox));
+      }
+      this._unionInto(
+        paragraph.lineBox,
+        paragraph.fragments.flatMap((f) => f.characters.map((c) => c.inlineBox))
+      );
+    }
+    const totalWidth = hasWidth ? rootStyle.width : blockWidth + rootPad.left + rootPad.right;
+    const totalHeight = hasHeight ? rootStyle.height : maxBottom + rootPad.bottom;
+    return {
+      paragraphs,
+      boundingBox: new modernPath2d.BoundingBox(0, 0, totalWidth, totalHeight)
+    };
+  }
+  /** Advance step including CSS letter-spacing (px). */
+  _advance(character) {
+    return character.advanceWidth + (character.computedStyle.letterSpacing ?? 0);
+  }
+  /**
+   * Break a paragraph's characters into visual lines.
+   * v1: `word-break: break-all` (break before any character that would overflow)
+   * plus explicit `\n`/`\r` hard breaks. The newline itself occupies no line box.
+   */
+  _breakLines(paragraph, avail) {
+    const lines = [];
+    let current = [];
+    let width = 0;
+    const flush = () => {
+      lines.push(current);
+      current = [];
+      width = 0;
+    };
+    for (const fragment of paragraph.fragments) {
+      for (const c of fragment.characters) {
+        if (c.content === "\n" || c.content === "\r") {
+          flush();
+          continue;
+        }
+        if (avail !== Infinity && current.length > 0 && width + c.advanceWidth > avail) {
+          flush();
+        }
+        current.push(c);
+        width += this._advance(c);
+      }
+    }
+    flush();
+    return lines;
+  }
+  _unionInto(target, boxes) {
+    const used = boxes.filter((b) => b.width !== 0 || b.height !== 0);
+    if (!used.length) {
+      return;
+    }
+    const u = modernPath2d.BoundingBox.from(...used);
+    target.left = u.left;
+    target.top = u.top;
+    target.width = u.width;
+    target.height = u.height;
+  }
+  _shiftAll(paragraphs, dy) {
+    for (const paragraph of paragraphs) {
+      paragraph.lineBox.top += dy;
+      for (const fragment of paragraph.fragments) {
+        fragment.inlineBox.top += dy;
+        for (const character of fragment.characters) {
+          character.inlineBox.top += dy;
+          character.lineBox.top += dy;
+        }
+      }
+    }
+  }
+  dispose() {
+  }
+}
+
 function backgroundPlugin() {
   const pathSet = new modernPath2d.Path2DSet();
   const loader = createSvgLoader();
@@ -1825,7 +2084,7 @@ class Text extends modernIdoc.Reactivable {
   glyphBox = new modernPath2d.BoundingBox();
   pathBox = new modernPath2d.BoundingBox();
   boundingBox = new modernPath2d.BoundingBox();
-  measurer = new Measurer();
+  measurer = new DomMeasurer();
   plugins = /* @__PURE__ */ new Map();
   pathSets = [];
   _paragraphs = [];
@@ -1883,6 +2142,12 @@ class Text extends modernIdoc.Reactivable {
       outline,
       deformation: deformation$1
     } = modernIdoc.normalizeText(options);
+    if (options.measurer && typeof options.measurer !== "string") {
+      this.measurer = options.measurer;
+    } else {
+      const kind = options.measurer ?? (fonts ? "font" : "dom");
+      this.measurer = kind === "font" ? new FontMeasurer() : new DomMeasurer();
+    }
     this.debug = options.debug ?? false;
     this.content = content;
     this.effects = effects;
@@ -1957,6 +2222,9 @@ class Text extends modernIdoc.Reactivable {
   }
   createDom() {
     this._update();
+    if (!this.measurer.createDom) {
+      throw new Error("current measurer does not support createDom()");
+    }
     return this.measurer.createDom(this.paragraphs, this.computedStyle);
   }
   measure(dom = this.measureDom) {
@@ -1970,7 +2238,7 @@ class Text extends modernIdoc.Reactivable {
       boundingBox: this.boundingBox
     };
     this._update();
-    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom);
+    const result = this.measurer.measure(this.paragraphs, this.computedStyle, dom, this.fonts);
     this.paragraphs = result.paragraphs;
     this.lineBox = result.boundingBox;
     const characters = this.characters;
@@ -2102,7 +2370,7 @@ class Text extends modernIdoc.Reactivable {
     options.onContext?.(ctx);
   }
   dispose() {
-    this.measurer.dispose();
+    this.measurer.dispose?.();
     this._renderer = void 0;
     this._rendererCtx = void 0;
   }
@@ -2140,8 +2408,9 @@ __decorateClass([
 
 exports.Canvas2DRenderer = Canvas2DRenderer;
 exports.Character = Character;
+exports.DomMeasurer = DomMeasurer;
+exports.FontMeasurer = FontMeasurer;
 exports.Fragment = Fragment;
-exports.Measurer = Measurer;
 exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.backgroundPlugin = backgroundPlugin;

package/dist/shared/{modern-text.w5MRHZDB.d.mts → modern-text.CYa4lfoG.d.mts}

@@ -1,5 +1,5 @@
 import { Vector2Like, BoundingBox, Vector2 } from 'modern-path2d';
-import { a as Character } from './modern-text.C8g4NZgY.mjs';
+import { a as Character } from './modern-text.D4WopQCu.mjs';
 
 /** 逐字沿形状排布所需的曲线最小接口（实现了这三个方法即可当作变形曲线） */
 interface DeformationCurve {