modern-text 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -1,18 +1,8 @@
-import { BoundingBox, Point2D, parseSvgToDom, parseSvg, Matrix3, Path2D } from 'modern-path2d';
+import { BoundingBox, Path2D, Point2D, parseSvgToDom, parseSvg, Matrix3 } from 'modern-path2d';
+export * from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
-class Feature {
-  constructor(_text) {
-    this._text = _text;
-  }
-}
-
-class Deformer extends Feature {
-  deform() {
-  }
-}
-
 function parseColor(ctx, source, box) {
   if (typeof source === "string" && source.startsWith("linear-gradient")) {
     const { x0, y0, x1, y1, stops } = parseCssLinearGradient(source, box.left, box.top, box.width, box.height);
@@ -63,388 +53,35 @@ function parseCssLinearGradient(css, x, y, width, height) {
 }
 
 function drawPaths(options) {
-  const { ctx, paths, fontSize } = options;
-  paths.forEach((path) => {
-    ctx.save();
-    ctx.beginPath();
-    const style = path.userData?.style ?? {};
-    const fillStyle = options.color ?? style.fill ?? "none";
-    const strokeStyle = options.textStrokeColor ?? style.stroke ?? "none";
-    ctx.fillStyle = fillStyle !== "none" ? fillStyle : "#000";
-    ctx.strokeStyle = strokeStyle !== "none" ? strokeStyle : "#000";
-    ctx.lineWidth = options.textStrokeWidth ? options.textStrokeWidth * fontSize : style.strokeWidth ? style.strokeWidth * fontSize * 0.03 : 0;
-    ctx.lineCap = style.strokeLineCap ?? "round";
-    ctx.lineJoin = style.strokeLineJoin ?? "miter";
-    ctx.miterLimit = style.strokeMiterLimit ?? 0;
-    ctx.shadowOffsetX = (options.shadowOffsetX ?? 0) * fontSize;
-    ctx.shadowOffsetY = (options.shadowOffsetY ?? 0) * fontSize;
-    ctx.shadowBlur = (options.shadowBlur ?? 0) * fontSize;
-    ctx.shadowColor = options.shadowColor ?? "rgba(0, 0, 0, 0)";
-    const offsetX = (options.offsetX ?? 0) * fontSize;
-    const offsetY = (options.offsetY ?? 0) * fontSize;
-    ctx.translate(offsetX, offsetY);
-    path.drawTo(ctx);
-    if (fillStyle !== "none") {
-      ctx.fill();
-    }
-    if (strokeStyle !== "none") {
-      ctx.stroke();
-    }
-    ctx.restore();
-  });
-}
-
-class Effector extends Feature {
-  getBoundingBox() {
-    const { characters, effects } = this._text;
-    const boxes = [];
-    characters.forEach((character) => {
-      const fontSize = character.computedStyle.fontSize;
-      effects?.forEach((effect) => {
-        const offsetX = (effect.offsetX ?? 0) * fontSize;
-        const offsetY = (effect.offsetY ?? 0) * fontSize;
-        const shadowOffsetX = (effect.shadowOffsetX ?? 0) * fontSize;
-        const shadowOffsetY = (effect.shadowOffsetY ?? 0) * fontSize;
-        const textStrokeWidth = Math.max(0.1, effect.textStrokeWidth ?? 0) * fontSize;
-        const aabb = character.boundingBox.clone();
-        aabb.left += offsetX + shadowOffsetX - textStrokeWidth;
-        aabb.top += offsetY + shadowOffsetY - textStrokeWidth;
-        aabb.width += textStrokeWidth * 2;
-        aabb.height += textStrokeWidth * 2;
-        boxes.push(aabb);
-      });
-    });
-    return BoundingBox.from(...boxes);
-  }
-  draw(options) {
-    const { ctx } = options;
-    const { effects, characters, boundingBox } = this._text;
-    if (effects) {
-      effects.forEach((effect) => {
-        uploadColor(effect, boundingBox, ctx);
-      });
-      characters.forEach((character) => {
-        effects.forEach((effect) => {
-          character.drawTo(ctx, effect);
-        });
-      });
-    }
-    return this;
-  }
-}
-
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Highlighter extends Feature {
-  constructor() {
-    super(...arguments);
-    __publicField$4(this, "paths", []);
-  }
-  getBoundingBox() {
-    if (!this.paths.length) {
-      return new BoundingBox();
-    }
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
-    this.paths.forEach((path) => path.getMinMax(min, max));
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-  }
-  highlight() {
-    const { characters, computedStyle: style } = this._text;
-    const fontSize = style.fontSize;
-    let group;
-    const groups = [];
-    let prevHighlight;
-    characters.forEach((character) => {
-      const highlight = character.parent.highlight;
-      if (highlight?.url) {
-        if (prevHighlight?.url === highlight.url) {
-          group.push(character);
-        } else {
-          group = [];
-          group.push(character);
-          groups.push(group);
-        }
-      }
-      prevHighlight = highlight;
-    });
-    this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
-      return {
-        url: characters2[0].parent.highlight.url,
-        box: BoundingBox.from(...characters2.map((c) => c.glyphBox)),
-        baseline: Math.max(...characters2.map((c) => c.baseline))
-      };
-    }).map((group2) => this._parseGroup(group2, fontSize)).flat();
-  }
-  _parseSvg(url) {
-    const svg = parseSvgToDom(url);
-    const paths = parseSvg(svg);
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
-    paths.forEach((path) => path.getMinMax(min, max));
-    const { x, y, width, height } = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-    const viewBox = svg.getAttribute("viewBox").split(" ").map(Number);
-    return {
-      paths,
-      box: new BoundingBox(x, y, width, height),
-      viewBox: new BoundingBox(...viewBox)
-    };
-  }
-  _parseGroup(group, fontSize) {
-    const { url, box: groupBox, baseline } = group;
-    const { box, viewBox, paths } = this._parseSvg(url);
-    const result = [];
-    const type = box.height / viewBox.height > 0.3 ? 0 : 1;
-    if (type === 0) {
-      const offset = {
-        x: groupBox.left - fontSize * 0.2,
-        y: groupBox.top
-      };
-      const scaleX = (groupBox.width + fontSize * 0.2 * 2) / box.width;
-      const scaleY = groupBox.height / box.height;
-      const m = new Matrix3().translate(-box.x, -box.y).scale(scaleX, scaleY).translate(offset.x, offset.y);
-      paths.forEach((original) => {
-        result.push(original.clone().transform(m));
-      });
-    } else if (type === 1) {
-      const scale = fontSize / box.width * 2;
-      const width = box.width * scale;
-      const length = Math.ceil(groupBox.width / width);
-      const totalWidth = width * length;
-      const offset = {
-        x: groupBox.left + (groupBox.width - totalWidth) / 2 + fontSize * 0.1,
-        y: groupBox.top + baseline + fontSize * 0.1
-      };
-      const m = new Matrix3().translate(-box.x, -box.y).scale(scale, scale).translate(offset.x, offset.y);
-      for (let i = 0; i < length; i++) {
-        const _m = m.clone().translate(i * width, 0);
-        paths.forEach((original) => {
-          result.push(original.clone().transform(_m));
-        });
-      }
-    }
-    return result;
-  }
-  draw({ ctx }) {
-    drawPaths({
-      ctx,
-      paths: this.paths,
-      fontSize: this._text.computedStyle.fontSize,
-      fill: false
-    });
-    return this;
-  }
-}
-
-class Measurer extends Feature {
-  _styleToDomStyle(style) {
-    const _style = { ...style };
-    for (const key in style) {
-      if ([
-        "width",
-        "height",
-        "fontSize",
-        "letterSpacing",
-        "textStrokeWidth",
-        "shadowOffsetX",
-        "shadowOffsetY",
-        "shadowBlur"
-      ].includes(key)) {
-        _style[key] = `${style[key]}px`;
-      } else {
-        _style[key] = style[key];
-      }
-    }
-    return _style;
-  }
-  /**
-   * <div style="...">
-   *   <ul>
-   *     <li style="...">
-   *       <div>
-   *         <span style="...">...</span>
-   *         <span>...</span>
-   *       </div>
-   *     </li>
-   *   </ul>
-   * </div>
-   */
-  createDom() {
-    const { paragraphs, computedStyle: style } = this._text;
-    const documentFragment = document.createDocumentFragment();
-    const dom = document.createElement("div");
-    Object.assign(dom.style, this._styleToDomStyle(style));
-    dom.style.position = "absolute";
-    dom.style.visibility = "hidden";
-    const ul = document.createElement("ul");
-    ul.style.listStyle = "none";
-    ul.style.padding = "0";
-    ul.style.margin = "0";
-    paragraphs.forEach((paragraph) => {
-      const li = document.createElement("li");
-      const div = document.createElement("div");
-      Object.assign(li.style, this._styleToDomStyle(paragraph.style));
-      paragraph.fragments.forEach((fragment) => {
-        const span = document.createElement("span");
-        Object.assign(span.style, this._styleToDomStyle(fragment.style));
-        span.appendChild(document.createTextNode(fragment.content));
-        div.appendChild(span);
-      });
-      ul.appendChild(li);
-      li.appendChild(div);
-    });
-    dom.appendChild(ul);
-    documentFragment.appendChild(dom);
-    document.body.appendChild(documentFragment);
-    return {
-      dom,
-      destory: () => dom.parentNode?.removeChild(dom)
-    };
-  }
-  _measureDom(dom) {
-    const paragraphs = [];
-    const fragments = [];
-    const characters = [];
-    dom.querySelectorAll("li").forEach((li, paragraphIndex) => {
-      const pBox = li.getBoundingClientRect();
-      paragraphs.push({
-        paragraphIndex,
-        left: pBox.left,
-        top: pBox.top,
-        width: pBox.width,
-        height: pBox.height
-      });
-      li.querySelectorAll("span").forEach((span, fragmentIndex) => {
-        const fBox = li.getBoundingClientRect();
-        fragments.push({
-          paragraphIndex,
-          fragmentIndex,
-          left: fBox.left,
-          top: fBox.top,
-          width: fBox.width,
-          height: fBox.height
-        });
-        const text = span.firstChild;
-        if (text instanceof window.Text) {
-          const range = document.createRange();
-          range.selectNodeContents(text);
-          const len = text.data ? text.data.length : 0;
-          let i = 0;
-          for (; i <= len; ) {
-            range.setStart(text, Math.max(i - 1, 0));
-            range.setEnd(text, i);
-            const rects = range.getClientRects?.() ?? [range.getBoundingClientRect()];
-            let rect = rects[rects.length - 1];
-            if (rects.length > 1 && rect.width < 2) {
-              rect = rects[rects.length - 2];
-            }
-            const content = range.toString();
-            if (content !== "" && rect && rect.width + rect.height !== 0) {
-              characters.push({
-                content,
-                newParagraphIndex: -1,
-                paragraphIndex,
-                fragmentIndex,
-                characterIndex: i - 1,
-                top: rect.top,
-                left: rect.left,
-                height: rect.height,
-                width: rect.width,
-                textWidth: -1,
-                textHeight: -1
-              });
-            }
-            i++;
-          }
-        }
-      });
-    });
-    return {
-      paragraphs,
-      fragments,
-      characters
-    };
-  }
-  measureDom(dom) {
-    const { paragraphs } = this._text;
-    const rect = dom.getBoundingClientRect();
-    const innerEl = dom.querySelector("ul");
-    const isVertical = window.getComputedStyle(dom).writingMode.includes("vertical");
-    const oldLineHeight = innerEl.style.lineHeight;
-    innerEl.style.lineHeight = "4000px";
-    const _paragraphs = [[]];
-    let fragments = _paragraphs[0];
-    const { characters: oldCharacters } = this._measureDom(dom);
-    if (oldCharacters.length > 0) {
-      fragments.push(oldCharacters[0]);
-      oldCharacters.reduce((prev, current) => {
-        const attr = isVertical ? "left" : "top";
-        if (Math.abs(current[attr] - prev[attr]) > 4e3 / 2) {
-          fragments = [];
-          _paragraphs.push(fragments);
-        }
-        fragments.push(current);
-        return current;
-      });
-    }
-    innerEl.style.lineHeight = oldLineHeight;
-    const measured = this._measureDom(dom);
-    measured.paragraphs.forEach((p) => {
-      const _p = paragraphs[p.paragraphIndex];
-      _p.boundingBox.left = p.left;
-      _p.boundingBox.top = p.top;
-      _p.boundingBox.width = p.width;
-      _p.boundingBox.height = p.height;
-    });
-    measured.fragments.forEach((f) => {
-      const _f = paragraphs[f.paragraphIndex].fragments[f.fragmentIndex];
-      _f.boundingBox.left = f.left;
-      _f.boundingBox.top = f.top;
-      _f.boundingBox.width = f.width;
-      _f.boundingBox.height = f.height;
-    });
-    const results = [];
-    let i = 0;
-    _paragraphs.forEach((oldCharacters2) => {
-      oldCharacters2.forEach((oldCharacter) => {
-        const character = measured.characters[i];
-        const { paragraphIndex, fragmentIndex, characterIndex } = character;
-        results.push({
-          ...character,
-          newParagraphIndex: paragraphIndex,
-          textWidth: oldCharacter.width,
-          textHeight: oldCharacter.height,
-          left: character.left - rect.left,
-          top: character.top - rect.top
-        });
-        const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
-        item.boundingBox.left = results[i].left;
-        item.boundingBox.top = results[i].top;
-        item.boundingBox.width = results[i].width;
-        item.boundingBox.height = results[i].height;
-        item.textWidth = results[i].textWidth;
-        item.textHeight = results[i].textHeight;
-        i++;
-      });
-    });
-    return {
-      paragraphs,
-      boundingBox: new BoundingBox(0, 0, rect.width, rect.height)
-    };
-  }
-  measure(dom) {
-    let destory;
-    if (!dom) {
-      ({ dom, destory } = this.createDom());
+  const { ctx, paths, fontSize } = options;
+  paths.forEach((path) => {
+    ctx.save();
+    ctx.beginPath();
+    const style = path.userData?.style ?? {};
+    const fillStyle = options.color ?? style.fill ?? "none";
+    const strokeStyle = options.textStrokeColor ?? style.stroke ?? "none";
+    ctx.fillStyle = fillStyle !== "none" ? fillStyle : "#000";
+    ctx.strokeStyle = strokeStyle !== "none" ? strokeStyle : "#000";
+    ctx.lineWidth = options.textStrokeWidth ? options.textStrokeWidth * fontSize : style.strokeWidth ? style.strokeWidth * fontSize * 0.03 : 0;
+    ctx.lineCap = style.strokeLineCap ?? "round";
+    ctx.lineJoin = style.strokeLineJoin ?? "miter";
+    ctx.miterLimit = style.strokeMiterLimit ?? 0;
+    ctx.shadowOffsetX = (options.shadowOffsetX ?? 0) * fontSize;
+    ctx.shadowOffsetY = (options.shadowOffsetY ?? 0) * fontSize;
+    ctx.shadowBlur = (options.shadowBlur ?? 0) * fontSize;
+    ctx.shadowColor = options.shadowColor ?? "rgba(0, 0, 0, 0)";
+    const offsetX = (options.offsetX ?? 0) * fontSize;
+    const offsetY = (options.offsetY ?? 0) * fontSize;
+    ctx.translate(offsetX, offsetY);
+    path.drawTo(ctx);
+    if (fillStyle !== "none") {
+      ctx.fill();
     }
-    const result = this.measureDom(dom);
-    destory?.();
-    return result;
-  }
+    if (strokeStyle !== "none") {
+      ctx.stroke();
+    }
+    ctx.restore();
+  });
 }
 
 function filterEmpty(val) {
@@ -509,10 +146,10 @@ function getPointPosition(point, startPoint, rotation = 0, skewX = 0, skewY = 0,
   return points[0];
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
@@ -533,10 +170,10 @@ class Character {
     this.content = content;
     this.index = index;
     this.parent = parent;
-    __publicField$3(this, "boundingBox", new BoundingBox());
-    __publicField$3(this, "path", new Path2D());
-    __publicField$3(this, "textWidth", 0);
-    __publicField$3(this, "textHeight", 0);
+    __publicField$4(this, "boundingBox", new BoundingBox());
+    __publicField$4(this, "path", new Path2D());
+    __publicField$4(this, "textWidth", 0);
+    __publicField$4(this, "textHeight", 0);
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -734,79 +371,443 @@ class Character {
     this.updatePath();
     return this;
   }
-  drawTo(ctx, config = {}) {
+  drawTo(ctx, config = {}) {
+    drawPaths({
+      ctx,
+      paths: [this.path],
+      fontSize: this.computedStyle.fontSize,
+      color: this.computedStyle.color,
+      ...config
+    });
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Fragment {
+  constructor(content, style = {}, parent) {
+    this.content = content;
+    this.style = style;
+    this.parent = parent;
+    __publicField$3(this, "boundingBox", new BoundingBox());
+    __publicField$3(this, "highlight");
+    this.updateComputedStyle().initCharacters();
+  }
+  get computedContent() {
+    const style = this.computedStyle;
+    return style.textTransform === "uppercase" ? this.content.toUpperCase() : style.textTransform === "lowercase" ? this.content.toLowerCase() : this.content;
+  }
+  updateComputedStyle() {
+    this.computedStyle = {
+      ...this.parent.computedStyle,
+      ...filterEmpty(this.style)
+    };
+    return this;
+  }
+  initCharacters() {
+    const characters = [];
+    let index = 0;
+    for (const c of this.computedContent) {
+      characters.push(new Character(c, index++, this));
+    }
+    this.characters = characters;
+    return this;
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Paragraph {
+  constructor(style, parentStyle) {
+    this.style = style;
+    this.parentStyle = parentStyle;
+    __publicField$2(this, "boundingBox", new BoundingBox());
+    __publicField$2(this, "fragments", []);
+    this.updateComputedStyle();
+  }
+  updateComputedStyle() {
+    this.computedStyle = {
+      ...filterEmpty(this.parentStyle),
+      ...filterEmpty(this.style)
+    };
+    return this;
+  }
+  addFragment(content, style) {
+    const fragment = new Fragment(content, style, this);
+    this.fragments.push(fragment);
+    return fragment;
+  }
+}
+
+class Feature {
+  constructor(_text) {
+    this._text = _text;
+  }
+}
+
+class Deformer extends Feature {
+  deform() {
+  }
+}
+
+class Effector extends Feature {
+  getBoundingBox() {
+    const { characters, effects } = this._text;
+    const boxes = [];
+    characters.forEach((character) => {
+      const fontSize = character.computedStyle.fontSize;
+      effects?.forEach((effect) => {
+        const offsetX = (effect.offsetX ?? 0) * fontSize;
+        const offsetY = (effect.offsetY ?? 0) * fontSize;
+        const shadowOffsetX = (effect.shadowOffsetX ?? 0) * fontSize;
+        const shadowOffsetY = (effect.shadowOffsetY ?? 0) * fontSize;
+        const textStrokeWidth = Math.max(0.1, effect.textStrokeWidth ?? 0) * fontSize;
+        const aabb = character.boundingBox.clone();
+        aabb.left += offsetX + shadowOffsetX - textStrokeWidth;
+        aabb.top += offsetY + shadowOffsetY - textStrokeWidth;
+        aabb.width += textStrokeWidth * 2;
+        aabb.height += textStrokeWidth * 2;
+        boxes.push(aabb);
+      });
+    });
+    return BoundingBox.from(...boxes);
+  }
+  draw(options) {
+    const { ctx } = options;
+    const { effects, characters, boundingBox } = this._text;
+    if (effects) {
+      effects.forEach((effect) => {
+        uploadColor(effect, boundingBox, ctx);
+      });
+      characters.forEach((character) => {
+        effects.forEach((effect) => {
+          character.drawTo(ctx, effect);
+        });
+      });
+    }
+    return this;
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Highlighter extends Feature {
+  constructor() {
+    super(...arguments);
+    __publicField$1(this, "paths", []);
+  }
+  getBoundingBox() {
+    if (!this.paths.length) {
+      return new BoundingBox();
+    }
+    const min = Point2D.MAX;
+    const max = Point2D.MIN;
+    this.paths.forEach((path) => path.getMinMax(min, max));
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  highlight() {
+    const { characters, computedStyle: style } = this._text;
+    const fontSize = style.fontSize;
+    let group;
+    const groups = [];
+    let prevHighlight;
+    characters.forEach((character) => {
+      const highlight = character.parent.highlight;
+      if (highlight?.url) {
+        if (prevHighlight?.url === highlight.url) {
+          group.push(character);
+        } else {
+          group = [];
+          group.push(character);
+          groups.push(group);
+        }
+      }
+      prevHighlight = highlight;
+    });
+    this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
+      return {
+        url: characters2[0].parent.highlight.url,
+        box: BoundingBox.from(...characters2.map((c) => c.glyphBox)),
+        baseline: Math.max(...characters2.map((c) => c.baseline))
+      };
+    }).map((group2) => this._parseGroup(group2, fontSize)).flat();
+  }
+  _parseSvg(url) {
+    const svg = parseSvgToDom(url);
+    const paths = parseSvg(svg);
+    const min = Point2D.MAX;
+    const max = Point2D.MIN;
+    paths.forEach((path) => path.getMinMax(min, max));
+    const { x, y, width, height } = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    const viewBox = svg.getAttribute("viewBox").split(" ").map(Number);
+    return {
+      paths,
+      box: new BoundingBox(x, y, width, height),
+      viewBox: new BoundingBox(...viewBox)
+    };
+  }
+  _parseGroup(group, fontSize) {
+    const { url, box: groupBox, baseline } = group;
+    const { box, viewBox, paths } = this._parseSvg(url);
+    const result = [];
+    const type = box.height / viewBox.height > 0.3 ? 0 : 1;
+    if (type === 0) {
+      const offset = {
+        x: groupBox.left - fontSize * 0.2,
+        y: groupBox.top
+      };
+      const scaleX = (groupBox.width + fontSize * 0.2 * 2) / box.width;
+      const scaleY = groupBox.height / box.height;
+      const m = new Matrix3().translate(-box.x, -box.y).scale(scaleX, scaleY).translate(offset.x, offset.y);
+      paths.forEach((original) => {
+        result.push(original.clone().transform(m));
+      });
+    } else if (type === 1) {
+      const scale = fontSize / box.width * 2;
+      const width = box.width * scale;
+      const length = Math.ceil(groupBox.width / width);
+      const totalWidth = width * length;
+      const offset = {
+        x: groupBox.left + (groupBox.width - totalWidth) / 2 + fontSize * 0.1,
+        y: groupBox.top + baseline + fontSize * 0.1
+      };
+      const m = new Matrix3().translate(-box.x, -box.y).scale(scale, scale).translate(offset.x, offset.y);
+      for (let i = 0; i < length; i++) {
+        const _m = m.clone().translate(i * width, 0);
+        paths.forEach((original) => {
+          result.push(original.clone().transform(_m));
+        });
+      }
+    }
+    return result;
+  }
+  draw({ ctx }) {
     drawPaths({
       ctx,
-      paths: [this.path],
-      fontSize: this.computedStyle.fontSize,
-      color: this.computedStyle.color,
-      ...config
+      paths: this.paths,
+      fontSize: this._text.computedStyle.fontSize,
+      fill: false
     });
+    return this;
   }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Fragment {
-  constructor(content, style = {}, parent) {
-    this.content = content;
-    this.style = style;
-    this.parent = parent;
-    __publicField$2(this, "boundingBox", new BoundingBox());
-    __publicField$2(this, "highlight");
-    this.updateComputedStyle().initCharacters();
-  }
-  get computedContent() {
-    const style = this.computedStyle;
-    return style.textTransform === "uppercase" ? this.content.toUpperCase() : style.textTransform === "lowercase" ? this.content.toLowerCase() : this.content;
+class Measurer extends Feature {
+  _styleToDomStyle(style) {
+    const _style = { ...style };
+    for (const key in style) {
+      if ([
+        "width",
+        "height",
+        "fontSize",
+        "letterSpacing",
+        "textStrokeWidth",
+        "shadowOffsetX",
+        "shadowOffsetY",
+        "shadowBlur"
+      ].includes(key)) {
+        _style[key] = `${style[key]}px`;
+      } else {
+        _style[key] = style[key];
+      }
+    }
+    return _style;
   }
-  updateComputedStyle() {
-    this.computedStyle = {
-      ...this.parent.computedStyle,
-      ...filterEmpty(this.style)
+  /**
+   * <section style="...">
+   *   <ul>
+   *     <li style="...">
+   *       <span style="...">...</span>
+   *       <span>...</span>
+   *     </li>
+   *   </ul>
+   * </section>
+   */
+  createDom() {
+    const { paragraphs, computedStyle } = this._text;
+    const documentFragment = document.createDocumentFragment();
+    const dom = document.createElement("section");
+    Object.assign(dom.style, {
+      ...this._styleToDomStyle(computedStyle),
+      position: "absolute",
+      visibility: "hidden"
+    });
+    const ul = document.createElement("ul");
+    Object.assign(ul.style, {
+      listStyle: "none",
+      padding: "0",
+      margin: "0"
+    });
+    paragraphs.forEach((paragraph) => {
+      const li = document.createElement("li");
+      Object.assign(li.style, this._styleToDomStyle(paragraph.style));
+      paragraph.fragments.forEach((fragment) => {
+        const span = document.createElement("span");
+        Object.assign(span.style, this._styleToDomStyle(fragment.style));
+        span.appendChild(document.createTextNode(fragment.content));
+        li.appendChild(span);
+      });
+      ul.appendChild(li);
+    });
+    dom.appendChild(ul);
+    documentFragment.appendChild(dom);
+    document.body.appendChild(documentFragment);
+    return {
+      dom,
+      destory: () => dom.parentNode?.removeChild(dom)
     };
-    return this;
   }
-  initCharacters() {
+  _measureDom(dom) {
+    const paragraphs = [];
+    const fragments = [];
     const characters = [];
-    let index = 0;
-    for (const c of this.computedContent) {
-      characters.push(new Character(c, index++, this));
-    }
-    this.characters = characters;
-    return this;
-  }
-}
-
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Paragraph {
-  constructor(style, parentStyle) {
-    this.style = style;
-    this.parentStyle = parentStyle;
-    __publicField$1(this, "boundingBox", new BoundingBox());
-    __publicField$1(this, "fragments", []);
-    this.updateComputedStyle();
+    dom.querySelectorAll("li").forEach((li, paragraphIndex) => {
+      const pBox = li.getBoundingClientRect();
+      paragraphs.push({
+        paragraphIndex,
+        left: pBox.left,
+        top: pBox.top,
+        width: pBox.width,
+        height: pBox.height
+      });
+      li.querySelectorAll("span").forEach((span, fragmentIndex) => {
+        const fBox = li.getBoundingClientRect();
+        fragments.push({
+          paragraphIndex,
+          fragmentIndex,
+          left: fBox.left,
+          top: fBox.top,
+          width: fBox.width,
+          height: fBox.height
+        });
+        const text = span.firstChild;
+        if (text instanceof window.Text) {
+          const range = document.createRange();
+          range.selectNodeContents(text);
+          const len = text.data ? text.data.length : 0;
+          let i = 0;
+          for (; i <= len; ) {
+            range.setStart(text, Math.max(i - 1, 0));
+            range.setEnd(text, i);
+            const rects = range.getClientRects?.() ?? [range.getBoundingClientRect()];
+            let rect = rects[rects.length - 1];
+            if (rects.length > 1 && rect.width < 2) {
+              rect = rects[rects.length - 2];
+            }
+            const content = range.toString();
+            if (content !== "" && rect && rect.width + rect.height !== 0) {
+              characters.push({
+                content,
+                newParagraphIndex: -1,
+                paragraphIndex,
+                fragmentIndex,
+                characterIndex: i - 1,
+                top: rect.top,
+                left: rect.left,
+                height: rect.height,
+                width: rect.width,
+                textWidth: -1,
+                textHeight: -1
+              });
+            }
+            i++;
+          }
+        }
+      });
+    });
+    return {
+      paragraphs,
+      fragments,
+      characters
+    };
   }
-  updateComputedStyle() {
-    this.computedStyle = {
-      ...filterEmpty(this.parentStyle),
-      ...filterEmpty(this.style)
+  measureDom(dom) {
+    const { paragraphs } = this._text;
+    const rect = dom.getBoundingClientRect();
+    const innerEl = dom.querySelector("ul");
+    const isVertical = window.getComputedStyle(dom).writingMode.includes("vertical");
+    const oldLineHeight = innerEl.style.lineHeight;
+    innerEl.style.lineHeight = "4000px";
+    const _paragraphs = [[]];
+    let fragments = _paragraphs[0];
+    const { characters: oldCharacters } = this._measureDom(dom);
+    if (oldCharacters.length > 0) {
+      fragments.push(oldCharacters[0]);
+      oldCharacters.reduce((prev, current) => {
+        const attr = isVertical ? "left" : "top";
+        if (Math.abs(current[attr] - prev[attr]) > 4e3 / 2) {
+          fragments = [];
+          _paragraphs.push(fragments);
+        }
+        fragments.push(current);
+        return current;
+      });
+    }
+    innerEl.style.lineHeight = oldLineHeight;
+    const measured = this._measureDom(dom);
+    measured.paragraphs.forEach((p) => {
+      const _p = paragraphs[p.paragraphIndex];
+      _p.boundingBox.left = p.left;
+      _p.boundingBox.top = p.top;
+      _p.boundingBox.width = p.width;
+      _p.boundingBox.height = p.height;
+    });
+    measured.fragments.forEach((f) => {
+      const _f = paragraphs[f.paragraphIndex].fragments[f.fragmentIndex];
+      _f.boundingBox.left = f.left;
+      _f.boundingBox.top = f.top;
+      _f.boundingBox.width = f.width;
+      _f.boundingBox.height = f.height;
+    });
+    const results = [];
+    let i = 0;
+    _paragraphs.forEach((oldCharacters2) => {
+      oldCharacters2.forEach((oldCharacter) => {
+        const character = measured.characters[i];
+        const { paragraphIndex, fragmentIndex, characterIndex } = character;
+        results.push({
+          ...character,
+          newParagraphIndex: paragraphIndex,
+          textWidth: oldCharacter.width,
+          textHeight: oldCharacter.height,
+          left: character.left - rect.left,
+          top: character.top - rect.top
+        });
+        const item = paragraphs[paragraphIndex].fragments[fragmentIndex].characters[characterIndex];
+        item.boundingBox.left = results[i].left;
+        item.boundingBox.top = results[i].top;
+        item.boundingBox.width = results[i].width;
+        item.boundingBox.height = results[i].height;
+        item.textWidth = results[i].textWidth;
+        item.textHeight = results[i].textHeight;
+        i++;
+      });
+    });
+    return {
+      paragraphs,
+      boundingBox: new BoundingBox(0, 0, rect.width, rect.height)
     };
-    return this;
   }
-  addFragment(content, style) {
-    const fragment = new Fragment(content, style, this);
-    this.fragments.push(fragment);
-    return fragment;
+  measure(dom) {
+    let destory;
+    if (!dom) {
+      ({ dom, destory } = this.createDom());
+    }
+    const result = this.measureDom(dom);
+    destory?.();
+    return result;
   }
 }
 
@@ -865,6 +866,10 @@ class Parser extends Feature {
   }
 }
 
+class Reflector extends Feature {
+  // TODO
+}
+
 class Renderer2D extends Feature {
   setupView(options) {
     const { ctx, pixelRatio } = options;
@@ -960,11 +965,12 @@ const defaultTextStyles = {
   textOrientation: "mixed"
 };
 class Text {
-  constructor(options) {
+  constructor(options = {}) {
     __publicField(this, "content");
     __publicField(this, "style");
     __publicField(this, "effects");
     __publicField(this, "deformation");
+    __publicField(this, "measureDom");
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
@@ -976,16 +982,17 @@ class Text {
     __publicField(this, "_effector", new Effector(this));
     __publicField(this, "_highlighter", new Highlighter(this));
     __publicField(this, "_renderer2D", new Renderer2D(this));
-    const { content, style = {}, effects, deformation } = options;
+    const { content = "", style = {}, effects, deformation, measureDom } = options;
     this.content = content;
     this.style = style;
     this.effects = effects;
     this.deformation = deformation;
+    this.measureDom = measureDom;
   }
   get characters() {
     return this.paragraphs.flatMap((p) => p.fragments.flatMap((f) => f.characters));
   }
-  measure(dom) {
+  measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     this.paragraphs = this._parser.parse();
     return this._measurer.measure(dom);
@@ -1025,23 +1032,23 @@ class Text {
         this._effector.getBoundingBox(),
         this._highlighter.getBoundingBox()
       );
-      this._renderer2D.setupView({ pixelRatio, ctx });
-      this._renderer2D.uploadColors({ ctx });
-      this._highlighter.draw({ ctx });
-      this._effector.draw({ ctx });
     } else {
       this.renderBoundingBox = BoundingBox.from(
         this.boundingBox,
         this.renderBoundingBox,
         this._highlighter.getBoundingBox()
       );
-      this._renderer2D.setupView({ pixelRatio, ctx });
-      this._renderer2D.uploadColors({ ctx });
-      this._highlighter.draw({ ctx });
+    }
+    this._renderer2D.setupView({ pixelRatio, ctx });
+    this._renderer2D.uploadColors({ ctx });
+    this._highlighter.draw({ ctx });
+    if (this.effects?.length) {
+      this._effector.draw({ ctx });
+    } else {
       this._renderer2D.draw({ ctx });
     }
     return this;
   }
 }
 
-export { Text, defaultTextStyles };
+export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };