modern-text 0.2.2 → 0.2.4

package/dist/index.mjs

@@ -1,18 +1,7 @@
-import { BoundingBox, Point2D, parseSvgToDom, parseSvg, Matrix3, Path2D } from 'modern-path2d';
+import { BoundingBox, Path2D, Point2D, parseSvgToDom, parseSvg, Matrix3 } 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);
@@ -94,43 +83,66 @@ function drawPaths(options) {
   });
 }
 
-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);
-      });
+function filterEmpty(val) {
+  if (!val)
+    return val;
+  const res = {};
+  for (const key in val) {
+    if (val[key] !== "" && val[key] !== void 0) {
+      res[key] = val[key];
+    }
+  }
+  return res;
+}
+function getRotationPoint(point, rotation) {
+  const { x, y } = point;
+  const sin = Math.sin(rotation);
+  const cos = Math.cos(rotation);
+  return {
+    x: x * cos - y * sin,
+    y: x * sin + y * cos
+  };
+}
+function getSkewPoint(point, startPoint, skewX, skewY) {
+  const dx = point.x - startPoint.x;
+  const dy = point.y - startPoint.y;
+  return {
+    x: startPoint.x + (dx + Math.tan(skewX) * dy),
+    y: startPoint.y + (dy + Math.tan(skewY) * dx)
+  };
+}
+function getScalePoint(point, startPoint, scaleX, scaleY) {
+  const x = scaleX < 0 ? startPoint.x - point.x + startPoint.x : point.x;
+  const y = scaleY < 0 ? startPoint.y - point.y + startPoint.y : point.y;
+  return {
+    x: x * Math.abs(scaleX),
+    y: y * Math.abs(scaleY)
+  };
+}
+function getPointPosition(point, startPoint, rotation = 0, skewX = 0, skewY = 0, scaleX = 1, scaleY = 1) {
+  let points = Array.isArray(point) ? point : [point];
+  const _rotation = -rotation / 180 * Math.PI;
+  const { x, y } = startPoint;
+  if (scaleX !== 1 || scaleY !== 1) {
+    points = points.map((point2) => {
+      return getScalePoint(point2, startPoint, scaleX, scaleY);
     });
-    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;
+  if (skewX || skewY) {
+    points = points.map((point2) => {
+      return getSkewPoint(point2, startPoint, skewX, skewY);
+    });
   }
+  points = points.map((d) => {
+    const h = d.x - x;
+    const f = -(d.y - y);
+    d = getRotationPoint({ x: h, y: f }, _rotation);
+    return {
+      x: x + d.x,
+      y: y - d.y
+    };
+  });
+  return points[0];
 }
 
 var __defProp$4 = Object.defineProperty;
@@ -139,448 +151,149 @@ 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", []);
+const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
+const set2 = /* @__PURE__ */ new Set([
+  "\u2014",
+  "\u2026",
+  "\u201C",
+  "\u201D",
+  "\uFE4F",
+  "\uFE4B",
+  "\uFE4C",
+  "\u2018",
+  "\u2019",
+  "\u02DC"
+]);
+class Character {
+  constructor(content, index, parent) {
+    this.content = content;
+    this.index = index;
+    this.parent = parent;
+    __publicField$4(this, "boundingBox", new BoundingBox());
+    __publicField$4(this, "path", new Path2D());
+    __publicField$4(this, "textWidth", 0);
+    __publicField$4(this, "textHeight", 0);
   }
-  getBoundingBox() {
-    if (!this.paths.length) {
-      return new BoundingBox();
+  get computedStyle() {
+    return this.parent.computedStyle;
+  }
+  get isVertical() {
+    return this.computedStyle.writingMode.includes("vertical");
+  }
+  get fontSize() {
+    return this.computedStyle.fontSize;
+  }
+  _font() {
+    const font = fonts.get(this.computedStyle.fontFamily)?.font;
+    if (font instanceof Woff || font instanceof Ttf) {
+      return font.sfnt;
     }
-    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);
+    return void 0;
   }
-  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);
+  _updateGlyph(font) {
+    const { content, computedStyle, boundingBox, isVertical } = this;
+    const { left, top, height } = boundingBox;
+    const { fontSize } = computedStyle;
+    const { unitsPerEm, ascender, descender, os2, post } = font;
+    const rate = unitsPerEm / fontSize;
+    const glyphWidth = font.getAdvanceWidth(content, fontSize);
+    const glyphHeight = (ascender + Math.abs(descender)) / rate;
+    const baseline = ascender / rate;
+    const yStrikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
+    const yStrikeoutSize = os2.yStrikeoutSize / rate;
+    const underlinePosition = (ascender - post.underlinePosition) / rate;
+    const underlineThickness = post.underlineThickness / rate;
+    this.glyphWidth = glyphWidth;
+    this.glyphHeight = glyphHeight;
+    this.underlinePosition = underlinePosition;
+    this.underlineThickness = underlineThickness;
+    this.yStrikeoutPosition = yStrikeoutPosition;
+    this.yStrikeoutSize = yStrikeoutSize;
+    this.baseline = baseline;
+    this.centerDiviation = 0.5 * height - baseline;
+    this.glyphBox = isVertical ? new BoundingBox(left, top, glyphHeight, glyphWidth) : new BoundingBox(left, top, glyphWidth, glyphHeight);
+    this.centerPoint = this.glyphBox.getCenterPoint();
+    return this;
+  }
+  _decoration() {
+    const { isVertical, underlinePosition, yStrikeoutPosition } = this;
+    const { textDecoration, fontSize } = this.computedStyle;
+    const { left, top, width, height } = this.boundingBox;
+    const lineWidth = 0.1 * fontSize;
+    let start;
+    switch (textDecoration) {
+      case "underline":
+        if (isVertical) {
+          start = left;
         } else {
-          group = [];
-          group.push(character);
-          groups.push(group);
+          start = top + underlinePosition;
+        }
+        break;
+      case "line-through":
+        if (isVertical) {
+          start = left + width / 2;
+        } else {
+          start = top + yStrikeoutPosition;
         }
+        break;
+      case "none":
+      default:
+        return [];
+    }
+    if (isVertical) {
+      return [
+        { type: "M", x: start, y: top },
+        { type: "L", x: start, y: top + height },
+        { type: "L", x: start + lineWidth, y: top + height },
+        { type: "L", x: start + lineWidth, y: top },
+        { type: "Z" }
+      ];
+    } else {
+      return [
+        { type: "M", x: left, y: start },
+        { type: "L", x: left + width, y: start },
+        { type: "L", x: left + width, y: start + lineWidth },
+        { type: "L", x: left, y: start + lineWidth },
+        { type: "Z" }
+      ];
+    }
+  }
+  _transform(commands, cb) {
+    return commands.map((rawCmd) => {
+      const cmd = { ...rawCmd };
+      switch (cmd.type) {
+        case "L":
+        case "M":
+          [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
+          break;
+        case "Q":
+          [cmd.x1, cmd.y1] = cb(cmd.x1, cmd.y1);
+          [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
+          break;
       }
-      prevHighlight = highlight;
+      return cmd;
     });
-    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)
+  _italic(commands, startPoint) {
+    const { baseline, glyphWidth } = this;
+    const { left, top } = this.boundingBox;
+    const _startPoint = startPoint || {
+      y: top + baseline,
+      x: left + glyphWidth / 2
     };
+    return this._transform(commands, (x, y) => {
+      const p = getSkewPoint({ x, y }, _startPoint, -0.24, 0);
+      return [p.x, p.y];
+    });
   }
-  _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 result = this.measureDom(dom);
-    destory?.();
-    return result;
-  }
-}
-
-function filterEmpty(val) {
-  if (!val)
-    return val;
-  const res = {};
-  for (const key in val) {
-    if (val[key] !== "" && val[key] !== void 0) {
-      res[key] = val[key];
-    }
-  }
-  return res;
-}
-function getRotationPoint(point, rotation) {
-  const { x, y } = point;
-  const sin = Math.sin(rotation);
-  const cos = Math.cos(rotation);
-  return {
-    x: x * cos - y * sin,
-    y: x * sin + y * cos
-  };
-}
-function getSkewPoint(point, startPoint, skewX, skewY) {
-  const dx = point.x - startPoint.x;
-  const dy = point.y - startPoint.y;
-  return {
-    x: startPoint.x + (dx + Math.tan(skewX) * dy),
-    y: startPoint.y + (dy + Math.tan(skewY) * dx)
-  };
-}
-function getScalePoint(point, startPoint, scaleX, scaleY) {
-  const x = scaleX < 0 ? startPoint.x - point.x + startPoint.x : point.x;
-  const y = scaleY < 0 ? startPoint.y - point.y + startPoint.y : point.y;
-  return {
-    x: x * Math.abs(scaleX),
-    y: y * Math.abs(scaleY)
-  };
-}
-function getPointPosition(point, startPoint, rotation = 0, skewX = 0, skewY = 0, scaleX = 1, scaleY = 1) {
-  let points = Array.isArray(point) ? point : [point];
-  const _rotation = -rotation / 180 * Math.PI;
-  const { x, y } = startPoint;
-  if (scaleX !== 1 || scaleY !== 1) {
-    points = points.map((point2) => {
-      return getScalePoint(point2, startPoint, scaleX, scaleY);
-    });
-  }
-  if (skewX || skewY) {
-    points = points.map((point2) => {
-      return getSkewPoint(point2, startPoint, skewX, skewY);
-    });
-  }
-  points = points.map((d) => {
-    const h = d.x - x;
-    const f = -(d.y - y);
-    d = getRotationPoint({ x: h, y: f }, _rotation);
-    return {
-      x: x + d.x,
-      y: y - d.y
-    };
-  });
-  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);
-  return value;
-};
-const set1 = /* @__PURE__ */ new Set(["\xA9", "\xAE", "\xF7"]);
-const set2 = /* @__PURE__ */ new Set([
-  "\u2014",
-  "\u2026",
-  "\u201C",
-  "\u201D",
-  "\uFE4F",
-  "\uFE4B",
-  "\uFE4C",
-  "\u2018",
-  "\u2019",
-  "\u02DC"
-]);
-class Character {
-  constructor(content, index, parent) {
-    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);
-  }
-  get computedStyle() {
-    return this.parent.computedStyle;
-  }
-  get isVertical() {
-    return this.computedStyle.writingMode.includes("vertical");
-  }
-  get fontSize() {
-    return this.computedStyle.fontSize;
-  }
-  _updateFont() {
-    const font = fonts.get(this.computedStyle.fontFamily)?.font;
-    if (font instanceof Woff || font instanceof Ttf) {
-      this.font = font.sfnt;
-    }
-    return this;
-  }
-  _updateGlyph(font) {
-    const { content, computedStyle, boundingBox, isVertical } = this;
-    const { left, top, height } = boundingBox;
-    const { fontSize } = computedStyle;
-    const { unitsPerEm, ascender, descender, os2, post } = font;
-    const rate = unitsPerEm / fontSize;
-    const glyphWidth = font.getAdvanceWidth(content, fontSize);
-    const glyphHeight = (ascender + Math.abs(descender)) / rate;
-    const baseline = ascender / rate;
-    const yStrikeoutPosition = (ascender - os2.yStrikeoutPosition) / rate;
-    const yStrikeoutSize = os2.yStrikeoutSize / rate;
-    const underlinePosition = (ascender - post.underlinePosition) / rate;
-    const underlineThickness = post.underlineThickness / rate;
-    this.glyphWidth = glyphWidth;
-    this.glyphHeight = glyphHeight;
-    this.underlinePosition = underlinePosition;
-    this.underlineThickness = underlineThickness;
-    this.yStrikeoutPosition = yStrikeoutPosition;
-    this.yStrikeoutSize = yStrikeoutSize;
-    this.baseline = baseline;
-    this.centerDiviation = 0.5 * height - baseline;
-    this.glyphBox = isVertical ? new BoundingBox(left, top, glyphHeight, glyphWidth) : new BoundingBox(left, top, glyphWidth, glyphHeight);
-    this.centerPoint = this.glyphBox.getCenterPoint();
-    return this;
+  _rotation90(commands, point) {
+    return this._transform(commands, (x, y) => {
+      const p = getPointPosition({ x, y }, point, 90);
+      return [p.x, p.y];
+    });
   }
   updatePath() {
-    const font = this._updateFont().font;
+    const font = this._font();
     if (!font) {
       return this;
     }
@@ -593,16 +306,14 @@ class Character {
       computedStyle,
       baseline,
       glyphHeight,
-      glyphWidth,
-      yStrikeoutPosition,
-      underlinePosition
+      glyphWidth
     } = this._updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
     const typoAscender = os2.sTypoAscender;
-    const { left, top, width, height } = boundingBox;
-    const { fontSize, fontStyle, textDecoration } = computedStyle;
+    const { left, top } = boundingBox;
+    const { fontSize, fontStyle } = computedStyle;
     let x = left;
     let y = top + baseline;
     let glyphIndex;
@@ -621,192 +332,512 @@ class Character {
         x: x + glyphWidth / 2
       };
       if (fontStyle === "italic") {
-        setItalic(
+        commands = this._italic(
           commands,
           isVertical ? {
             x: point.x,
             y: top - (glyphHeight - glyphWidth) / 2 + baseline
-          } : null
+          } : void 0
         );
       }
-      set90Rotation(commands, point);
+      commands = this._rotation90(commands, point);
     } else {
       if (glyphIndex !== void 0) {
         commands = font.glyf.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
             isVertical ? {
               x: x + glyphWidth / 2,
               y: top + typoAscender / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight
-            } : null
+            } : void 0
           );
         }
       } else {
         commands = font.getPathCommands(content, x, y, fontSize) ?? [];
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
-            isVertical ? { x: x + glyphHeight / 2, y } : null
+            isVertical ? { x: x + glyphHeight / 2, y } : void 0
           );
         }
       }
     }
-    const lineWidth = 0.1 * fontSize;
-    if (isVertical) {
-      const create = (start, len) => [
-        { type: "M", x: start, y: top },
-        { type: "L", x: start, y: top + height },
-        { type: "L", x: start + len, y: top + height },
-        { type: "L", x: start + len, y: top },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(left, lineWidth));
-          break;
-        case "line-through":
-          commands.push(...create(left + width / 2, lineWidth));
-          break;
-      }
-    } else {
-      const create = (start, len) => [
-        { type: "M", x: left, y: start },
-        { type: "L", x: left + width, y: start },
-        { type: "L", x: left + width, y: start + len },
-        { type: "L", x: left, y: start + len },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(top + underlinePosition, lineWidth));
+    commands.push(...this._decoration());
+    this.commands = commands;
+    this.path = new Path2D(commands);
+    return this;
+  }
+  update() {
+    this.updatePath();
+    return this;
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    let last = { x: 0, y: 0 };
+    this.commands.forEach((cmd) => {
+      switch (cmd.type) {
+        case "L":
+        case "M":
+          min.x = Math.min(min.x, cmd.x);
+          min.y = Math.min(min.y, cmd.y);
+          max.x = Math.max(max.x, cmd.x);
+          max.y = Math.max(max.y, cmd.y);
+          last = { x: cmd.x, y: cmd.y };
           break;
-        case "line-through":
-          commands.push(...create(top + yStrikeoutPosition, lineWidth));
+        case "Q": {
+          const x1 = 0.5 * (last.x + cmd.x1);
+          const y1 = 0.5 * (last.y + cmd.y1);
+          const x2 = 0.5 * (last.x + cmd.x);
+          const y2 = 0.5 * (last.y + cmd.y);
+          min.x = Math.min(min.x, last.x, cmd.x, x1, x2);
+          min.y = Math.min(min.y, last.y, cmd.y, y1, y2);
+          max.x = Math.max(max.x, last.x, cmd.x, x1, x2);
+          max.y = Math.max(max.y, last.y, cmd.y, y1, y2);
+          last = { x: cmd.x, y: cmd.y };
           break;
+        }
       }
+    });
+    return { min, max };
+  }
+  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.path = new Path2D(commands);
+    this.characters = characters;
     return this;
-    function setItalic(commands2, startPoint) {
-      const _startPoint = startPoint || {
-        y: top + baseline,
-        x: left + glyphWidth / 2
-      };
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getSkewPoint(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              _startPoint,
-              -0.24,
-              0
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
-        });
+  }
+}
+
+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() {
+    this._text.deformation?.();
+  }
+}
+
+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);
       });
-    }
-    function set90Rotation(commands2, point) {
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getPointPosition(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              point,
-              90
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
+    });
+    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);
         });
       });
     }
-  }
-  update() {
-    this.updatePath();
     return this;
   }
-  drawTo(ctx, config = {}) {
+}
+
+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 +896,10 @@ class Parser extends Feature {
   }
 }
 
+class Reflector extends Feature {
+  // TODO
+}
+
 class Renderer2D extends Feature {
   setupView(options) {
     const { ctx, pixelRatio } = options;
@@ -965,6 +1000,7 @@ class Text {
     __publicField(this, "style");
     __publicField(this, "effects");
     __publicField(this, "deformation");
+    __publicField(this, "measureDom");
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
@@ -976,19 +1012,23 @@ 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 };
+    const old = this.paragraphs;
     this.paragraphs = this._parser.parse();
-    return this._measurer.measure(dom);
+    const result = this._measurer.measure(dom);
+    this.paragraphs = old;
+    return result;
   }
   requestUpdate() {
     this.needsUpdate = true;
@@ -1005,7 +1045,7 @@ class Text {
     this._highlighter.highlight();
     const min = Point2D.MAX;
     const max = Point2D.MIN;
-    this.characters.forEach((c) => c.path.getMinMax(min, max));
+    this.characters.forEach((c) => c.getMinMax(min, max));
     this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     return this;
   }
@@ -1025,23 +1065,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 };