modern-text 0.2.20 → 0.2.22

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, Matrix3, Vector2, parseSvgToDom, parseSvg } from 'modern-path2d';
+import { BoundingBox, Path2D, Matrix3, Vector2, parseSvg, parseSvgToDom } from 'modern-path2d';
 import { fonts, Woff, Ttf } from 'modern-font';
 export * from 'modern-font';
 
@@ -67,7 +67,7 @@ function drawPath(options) {
     shadowColor: options.shadowColor
   };
   if (clipRect) {
-    ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
+    ctx.rect(clipRect.left, clipRect.top, clipRect.width, clipRect.height);
     ctx.clip();
     ctx.beginPath();
   }
@@ -187,8 +187,8 @@ class Character {
       return this;
     }
     const { unitsPerEm, ascender, descender, os2, post } = font;
-    const { content, computedStyle, boundingBox, isVertical } = this;
-    const { left, top, height } = boundingBox;
+    const { content, computedStyle, boundingBox } = this;
+    const { height } = boundingBox;
     const { fontSize } = computedStyle;
     const rate = unitsPerEm / fontSize;
     const glyphWidth = font.getAdvanceWidth(content, fontSize);
@@ -206,8 +206,6 @@ class Character {
     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;
   }
   updatePath() {
@@ -289,6 +287,8 @@ class Character {
       strokeWidth: computedStyle.textStrokeWidth ? computedStyle.textStrokeWidth * fontSize * 0.03 : 0
     };
     this.path = path;
+    this.glyphBox = this.getGlyphBoundingBox();
+    this.center = this.glyphBox.getCenterPoint();
     return this;
   }
   update() {
@@ -377,11 +377,11 @@ class Character {
       return cmd;
     });
   }
-  getMinMax(min, max) {
+  getGlyphMinMax(min, max) {
     return this.path.getMinMax(min, max);
   }
-  getBoundingBox() {
-    return this.path.getBoundingBox();
+  getGlyphBoundingBox(withStyle) {
+    return this.path.getBoundingBox(withStyle);
   }
   drawTo(ctx, config = {}) {
     drawPath({
@@ -501,7 +501,7 @@ class Effector extends Feature {
     const boxes = [];
     characters.forEach((character) => {
       effects?.forEach((style) => {
-        const aabb = character.boundingBox.clone();
+        const aabb = character.glyphBox.clone();
         const m = this.getTransform2D(style);
         tempV1.set(aabb.left, aabb.top);
         tempV1.applyMatrix3(m);
@@ -548,11 +548,27 @@ var __publicField$1 = (obj, key, value) => {
   __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-class Highlighter extends Feature {
+const defaultHighlightRefer = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMyLjQwMjkgMjhIMzUuMTU5NFYzMy4xNzcxQzM1Ljk4MjEgMzIuMzExNSAzNi45NzEgMzEuODczNyAzOC4wOTQ4IDMxLjg3MzdDMzkuNjY3NiAzMS44NzM3IDQwLjkxNjYgMzIuNDI5NSA0MS44MzkgMzMuNTQzN0w0MS44NDAzIDMzLjU0NTNDNDIuNjcxNyAzNC41NzA1IDQzLjA5MTUgMzUuODU1OSA0My4wOTE1IDM3LjM4NzdDNDMuMDkxNSAzOC45NzYxIDQyLjY3MjkgNDAuMzAyOCA0MS44MTgzIDQxLjMzMDRMNDEuODE3MSA0MS4zMzE4QzQwLjg3MzEgNDIuNDQ2MSAzOS41ODMyIDQzIDM3Ljk3MjEgNDNDMzYuNzQ3NyA0MyAzNS43NDg4IDQyLjY1OTkgMzQuOTk1OCA0MS45NjkzVjQyLjcyNDdIMzIuNDAyOVYyOFpNMzcuNTQyOCAzNC4wOTI0QzM2Ljg1NDkgMzQuMDkyNCAzNi4zMDE0IDM0LjM1NjEgMzUuODQ4NyAzNC45MDA0TDM1Ljg0NTIgMzQuOTA0NkMzNS4zMzU4IDM1LjQ4NTMgMzUuMDc3NiAzNi4yOTc2IDM1LjA3NzYgMzcuMzQ4NFYzNy41MDU3QzM1LjA3NzYgMzguNDY0IDM1LjI3NzIgMzkuMjQ0MyAzNS42OTQzIDM5LjgyNzlDMzYuMTQ0MSA0MC40NTg3IDM2Ljc3MjYgNDAuNzgxMyAzNy42MjQ1IDQwLjc4MTNDMzguNTg3NCA0MC43ODEzIDM5LjI3MDcgNDAuNDUyNyAzOS43MTUyIDM5LjgxMjdDNDAuMDcyOCAzOS4yNjg0IDQwLjI3MzcgMzguNDY3MyA0MC4yNzM3IDM3LjM4NzdDNDAuMjczNyAzNi4zMTA1IDQwLjA1MzMgMzUuNTMxMyAzOS42NzgzIDM1LjAwNzdDMzkuMjM3MSAzNC40MDcxIDM4LjUzNDIgMzQuMDkyNCAzNy41NDI4IDM0LjA5MjRaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZD0iTTQ5Ljg2MTQgMzEuODczN0M0OC4xNTM1IDMxLjg3MzcgNDYuODAxNiAzMi40MjM5IDQ1LjgzNDggMzMuNTM5MkM0NC45MzcgMzQuNTQ3MiA0NC40OTY2IDM1Ljg1NiA0NC40OTY2IDM3LjQyN0M0NC40OTY2IDM5LjAzNjggNDQuOTM2NyA0MC4zNjU5IDQ1Ljg1NTkgNDEuMzk0M0M0Ni44MDMxIDQyLjQ3MDYgNDguMTM0OCA0MyA0OS44MjA1IDQzQzUxLjIyNiA0MyA1Mi4zODI2IDQyLjY1NjMgNTMuMjQ3OSA0MS45Njk3QzU0LjEzNTkgNDEuMjYxNCA1NC43MDYxIDQwLjE4ODcgNTQuOTU3MyAzOC43NzkxTDU1IDM4LjUzOTdINTIuMjQ4NEw1Mi4yMjU5IDM4LjcyMDFDNTIuMTM3OSAzOS40MjUxIDUxLjg5MjUgMzkuOTI3OCA1MS41MTA5IDQwLjI1NThDNTEuMTI5NSA0MC41ODM1IDUwLjU4MzEgNDAuNzYxNiA0OS44NDA5IDQwLjc2MTZDNDkuMDAwMSA0MC43NjE2IDQ4LjM5NDkgNDAuNDcxNSA0Ny45OTA3IDM5LjkyMzdMNDcuOTg3NCAzOS45MTk0QzQ3LjUzNTYgMzkuMzQwMSA0Ny4zMTQ0IDM4LjUwNjIgNDcuMzE0NCAzNy40MDc0QzQ3LjMxNDQgMzYuMzMyMiA0Ny41NTQ0IDM1LjUxNzcgNDguMDA1OCAzNC45NTY4TDQ4LjAwNzggMzQuOTU0M0M0OC40NTM3IDM0LjM4MjUgNDkuMDYxOCAzNC4xMTIxIDQ5Ljg2MTQgMzQuMTEyMUM1MC41MjMgMzQuMTEyMSA1MS4wNDUxIDM0LjI2MTUgNTEuNDI3MiAzNC41NDA3QzUxLjc4ODQgMzQuODE5NCA1Mi4wNTMgMzUuMjQ0NyA1Mi4xODgxIDM1Ljg1NzFMNTIuMjIzOSAzNi4wMTk0SDU0Ljk1NDhMNTQuOTE3IDM1Ljc4MzVDNTQuNzA2MyAzNC40NjYgNTQuMTUzNiAzMy40NzAxIDUzLjI2MzQgMzIuODAxOUw1My4yNjAyIDMyLjc5OTVDNTIuMzk1MSAzMi4xNzU1IDUxLjI2MjEgMzEuODczNyA0OS44NjE0IDMxLjg3MzdaIiBmaWxsPSIjMjIyNTI5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS43NTYxIDI4LjI3NTNIMjIuNzQ0TDE3IDQyLjcyNDdIMjAuMDE0MUwyMS4zNDI5IDM5LjIwNDlIMjcuMTU3MkwyOC40ODYgNDIuNzI0N0gzMS41MDAxTDI1Ljc1NjEgMjguMjc1M1pNMjIuMjEyNSAzNi45MDc2TDI0LjI1OTYgMzEuNDUzOUwyNi4yODg1IDM2LjkwNzZIMjIuMjEyNVoiIGZpbGw9IiMyMjI1MjkiLz48L3N2Zz4=";
+const _Highlighter = class _Highlighter extends Feature {
   constructor() {
     super(...arguments);
     __publicField$1(this, "paths", []);
   }
+  static get refer() {
+    return this._refer;
+  }
+  static set refer(refer) {
+    this._refer = refer;
+    this.parsedRefer = parseSvg(refer);
+  }
+  getReferBoundingBox() {
+    const max = Vector2.MIN;
+    const min = Vector2.MAX;
+    _Highlighter.parsedRefer.forEach((path) => {
+      path.getMinMax(min, max);
+    });
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
   getBoundingBox() {
     if (!this.paths.length) {
       return void 0;
@@ -570,7 +586,7 @@ class Highlighter extends Feature {
     characters.forEach((character) => {
       const highlight = character.parent.highlight;
       if (highlight?.url) {
-        if (prevHighlight?.url === highlight.url && (group.length && group[0].boundingBox.top === character.boundingBox.top && group[0].fontSize === character.fontSize)) {
+        if (prevHighlight?.url === highlight.url && prevHighlight?.strokeWidth === highlight.strokeWidth && prevHighlight?.repeatXByFontsize === highlight.repeatXByFontsize && prevHighlight?.overflowXHidden === highlight.overflowXHidden && group.length && group[0].boundingBox.top === character.boundingBox.top && group[0].fontSize === character.fontSize) {
           group.push(character);
         } else {
           group = [];
@@ -582,8 +598,8 @@ class Highlighter extends Feature {
     });
     this.paths = groups.filter((characters2) => characters2.length).map((characters2) => {
       return {
-        url: characters2[0].parent.highlight.url,
-        box: BoundingBox.from(...characters2.map((c) => c.boundingBox)),
+        highlight: characters2[0].parent.highlight,
+        box: BoundingBox.from(...characters2.map((c) => c.glyphBox)),
         baseline: Math.max(...characters2.map((c) => c.baseline)),
         fontSize: characters2[0].fontSize
       };
@@ -597,60 +613,57 @@ class Highlighter extends Feature {
     paths.forEach((path) => path.getMinMax(min, max));
     return {
       paths,
-      box: new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y),
-      viewBox: new BoundingBox(...svg.getAttribute("viewBox").split(" ").map(Number))
+      box: new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y)
     };
   }
   _parseGroup(group) {
-    const { url, box: groupBox, baseline, fontSize } = group;
-    const { box, viewBox, paths } = this._parseSvg(url);
-    const centerY = viewBox.top + viewBox.height / 2;
+    const { highlight, box: groupBox, fontSize } = group;
+    const {
+      strokeWidth = 1,
+      repeatXByFontsize = 0,
+      overflowXHidden = Boolean(repeatXByFontsize)
+    } = highlight;
+    const { box, paths } = this._parseSvg(highlight.url);
     const result = [];
-    const type = centerY > box.top ? 0 : 1;
-    function transformPathStyle(path, scale) {
-      if (path.style.strokeWidth) {
-        path.style.strokeWidth *= scale;
-      }
-      if (path.style.strokeMiterlimit) {
-        path.style.strokeMiterlimit *= scale;
-      }
-      if (path.style.strokeDashoffset) {
-        path.style.strokeDashoffset *= scale;
-      }
-      if (path.style.strokeDasharray) {
-        path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * scale);
-      }
-    }
-    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);
+    const referBoundingBox = this.getReferBoundingBox();
+    const scale = {
+      x: repeatXByFontsize ? fontSize * repeatXByFontsize * (box.width / referBoundingBox.width) / box.width : groupBox.width * (box.width / referBoundingBox.width) / box.width,
+      y: groupBox.height * (box.height / referBoundingBox.height) / box.height
+    };
+    const styleScale = fontSize / box.width * 2;
+    const unitWidth = box.width * scale.x;
+    const total = Math.ceil(groupBox.width / unitWidth);
+    const offset = {
+      x: (box.left - referBoundingBox.left) * scale.x,
+      y: (box.top - referBoundingBox.top) * scale.y
+    };
+    const transform = new Matrix3().translate(-box.left, -box.top).scale(scale.x, scale.y).translate(groupBox.left, groupBox.top).translate(offset.x, offset.y);
+    for (let i = 0; i < total; i++) {
+      const _transform = transform.clone().translate(i * unitWidth, 0);
       paths.forEach((original) => {
-        const path = original.clone().transform(m);
-        transformPathStyle(path, scaleX);
-        result.push({ path });
-      });
-    } else if (type === 1) {
-      const scale = fontSize / box.width;
-      const width = box.width * scale;
-      const length = Math.ceil(groupBox.width / width);
-      const offset = {
-        x: groupBox.left,
-        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) => {
-          const path = original.clone().transform(_m);
-          transformPathStyle(path, scale);
-          result.push({ clipRect: groupBox, path });
+        const path = original.clone().transform(_transform);
+        if (path.style.strokeWidth) {
+          path.style.strokeWidth *= styleScale * strokeWidth;
+        }
+        if (path.style.strokeMiterlimit) {
+          path.style.strokeMiterlimit *= styleScale;
+        }
+        if (path.style.strokeDashoffset) {
+          path.style.strokeDashoffset *= styleScale;
+        }
+        if (path.style.strokeDasharray) {
+          path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * styleScale);
+        }
+        result.push({
+          clipRect: overflowXHidden ? new BoundingBox(
+            groupBox.left + offset.x * 2,
+            groupBox.top - groupBox.height,
+            groupBox.width - offset.x * 2,
+            groupBox.height * 3
+          ) : void 0,
+          path
         });
-      }
+      });
     }
     return result;
   }
@@ -665,7 +678,10 @@ class Highlighter extends Feature {
     });
     return this;
   }
-}
+};
+__publicField$1(_Highlighter, "_refer", defaultHighlightRefer);
+__publicField$1(_Highlighter, "parsedRefer", parseSvg(_Highlighter._refer));
+let Highlighter = _Highlighter;
 
 class Measurer extends Feature {
   _styleToDomStyle(style) {
@@ -1076,13 +1092,14 @@ class Text {
     this.boundingBox = boundingBox;
     const characters = this.characters;
     characters.forEach((c) => c.update());
-    this.highlighter.highlight();
     if (this.deformation) {
       this.deformer.deform();
+    } else {
+      this.highlighter.highlight();
     }
     const min = Vector2.MAX;
     const max = Vector2.MIN;
-    characters.forEach((c) => c.getMinMax(min, max));
+    characters.forEach((c) => c.getGlyphMinMax(min, max));
     this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     return this;
   }
@@ -1119,4 +1136,4 @@ class Text {
   }
 }
 
-export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",