modern-text 0.2.13 → 0.2.15

package/dist/index.mjs

@@ -51,28 +51,31 @@ function parseCssLinearGradient(css, x, y, width, height) {
   };
 }
 
-function drawPaths(options) {
-  const { ctx, paths, fontSize } = options;
-  paths.forEach((path) => {
-    ctx.save();
+function drawPath(options) {
+  const { ctx, path, fontSize, clipRect } = options;
+  ctx.save();
+  ctx.beginPath();
+  const style = path.style;
+  path.style = {
+    ...style,
+    fill: options.color ?? style.fill,
+    stroke: options.textStrokeColor ?? style.stroke,
+    strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * fontSize : style.strokeWidth,
+    shadowOffsetX: (options.shadowOffsetX ?? 0) * fontSize,
+    shadowOffsetY: (options.shadowOffsetY ?? 0) * fontSize,
+    shadowBlur: (options.shadowBlur ?? 0) * fontSize,
+    shadowColor: options.shadowColor
+  };
+  const offsetX = (options.offsetX ?? 0) * fontSize;
+  const offsetY = (options.offsetY ?? 0) * fontSize;
+  ctx.translate(offsetX, offsetY);
+  if (clipRect) {
+    ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
+    ctx.clip();
     ctx.beginPath();
-    const style = path.style;
-    path.style = {
-      ...style,
-      fill: options.color ?? style.fill,
-      stroke: options.textStrokeColor ?? style.stroke,
-      strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * fontSize : style.strokeWidth,
-      shadowOffsetX: (options.shadowOffsetX ?? 0) * fontSize,
-      shadowOffsetY: (options.shadowOffsetY ?? 0) * fontSize,
-      shadowBlur: (options.shadowBlur ?? 0) * fontSize,
-      shadowColor: options.shadowColor
-    };
-    const offsetX = (options.offsetX ?? 0) * fontSize;
-    const offsetY = (options.offsetY ?? 0) * fontSize;
-    ctx.translate(offsetX, offsetY);
-    path.drawTo(ctx);
-    ctx.restore();
-  });
+  }
+  path.drawTo(ctx);
+  ctx.restore();
 }
 
 function filterEmpty(val) {
@@ -208,7 +211,6 @@ class Character {
     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();
-    this.fontMinGlyphWidth = font.getAdvanceWidth("i", fontSize);
     return this;
   }
   updatePath() {
@@ -262,7 +264,7 @@ class Character {
       commands = this._rotation90(commands, point);
     } else {
       if (glyphIndex !== void 0) {
-        commands = font.glyf.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
+        commands = font.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
         if (fontStyle === "italic") {
           commands = this._italic(
             commands,
@@ -369,6 +371,11 @@ class Character {
           [cmd.x1, cmd.y1] = cb(cmd.x1, cmd.y1);
           [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
           break;
+        case "C":
+          [cmd.x1, cmd.y1] = cb(cmd.x1, cmd.y1);
+          [cmd.x2, cmd.y2] = cb(cmd.x2, cmd.y2);
+          [cmd.x, cmd.y] = cb(cmd.x, cmd.y);
+          break;
       }
       return cmd;
     });
@@ -380,9 +387,9 @@ class Character {
     return this.path.getBoundingBox();
   }
   drawTo(ctx, config = {}) {
-    drawPaths({
+    drawPath({
       ctx,
-      paths: [this.path],
+      path: this.path,
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
       ...config
@@ -523,7 +530,7 @@ class Highlighter extends Feature {
     }
     const min = Vector2.MAX;
     const max = Vector2.MIN;
-    this.paths.forEach((path) => path.getMinMax(min, max));
+    this.paths.forEach((v) => v.path.getMinMax(min, max));
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
   highlight() {
@@ -549,7 +556,6 @@ class Highlighter extends Feature {
         url: characters2[0].parent.highlight.url,
         box: BoundingBox.from(...characters2.map((c) => c.boundingBox)),
         baseline: Math.max(...characters2.map((c) => c.baseline)),
-        fontMinGlyphWidth: characters2[0].fontMinGlyphWidth,
         fontSize: characters2[0].fontSize
       };
     }).map((group2) => this._parseGroup(group2)).flat();
@@ -567,23 +573,23 @@ class Highlighter extends Feature {
     };
   }
   _parseGroup(group) {
-    const { url, box: groupBox, baseline, fontSize, fontMinGlyphWidth } = group;
+    const { url, box: groupBox, baseline, fontSize } = group;
     const { box, viewBox, paths } = this._parseSvg(url);
+    const centerY = viewBox.top + viewBox.height / 2;
     const result = [];
-    const type = box.height / viewBox.height > 0.3 ? 0 : 1;
-    function transformPathStyle(path) {
-      const rate = fontSize * 0.03;
+    const type = centerY > box.top ? 0 : 1;
+    function transformPathStyle(path, scale) {
       if (path.style.strokeWidth) {
-        path.style.strokeWidth *= rate;
+        path.style.strokeWidth *= scale;
       }
       if (path.style.strokeMiterlimit) {
-        path.style.strokeMiterlimit *= rate;
+        path.style.strokeMiterlimit *= scale;
       }
       if (path.style.strokeDashoffset) {
-        path.style.strokeDashoffset *= rate;
+        path.style.strokeDashoffset *= scale;
       }
       if (path.style.strokeDasharray) {
-        path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * rate);
+        path.style.strokeDasharray = path.style.strokeDasharray.map((v) => v * scale);
       }
     }
     if (type === 0) {
@@ -596,16 +602,15 @@ class Highlighter extends Feature {
       const m = new Matrix3().translate(-box.x, -box.y).scale(scaleX, scaleY).translate(offset.x, offset.y);
       paths.forEach((original) => {
         const path = original.clone().transform(m);
-        transformPathStyle(path);
-        result.push(path);
+        transformPathStyle(path, scaleX);
+        result.push({ path });
       });
     } else if (type === 1) {
-      const scale = fontMinGlyphWidth / box.width;
+      const scale = fontSize / box.width;
       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,
+        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);
@@ -613,18 +618,21 @@ class Highlighter extends Feature {
         const _m = m.clone().translate(i * width, 0);
         paths.forEach((original) => {
           const path = original.clone().transform(_m);
-          transformPathStyle(path);
-          result.push(path);
+          transformPathStyle(path, scale);
+          result.push({ clipRect: groupBox, path });
         });
       }
     }
     return result;
   }
   draw({ ctx }) {
-    drawPaths({
-      ctx,
-      paths: this.paths,
-      fontSize: this._text.computedStyle.fontSize
+    this.paths.forEach((v) => {
+      drawPath({
+        ctx,
+        path: v.path,
+        clipRect: v.clipRect,
+        fontSize: this._text.computedStyle.fontSize
+      });
     });
     return this;
   }
@@ -1079,4 +1087,4 @@ class Text {
   }
 }
 
-export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultTextStyles, drawPaths, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -57,8 +57,8 @@
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
-    "modern-font": "^0.1.5",
-    "modern-path2d": "^0.1.14"
+    "modern-font": "^0.2.0",
+    "modern-path2d": "^0.1.16"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",