modern-text 0.2.29 → 0.2.30

package/dist/index.mjs

@@ -52,7 +52,7 @@ function parseCssLinearGradient(css, x, y, width, height) {
 }
 
 function drawPath(options) {
-  const { ctx, path, fontSize, boldness = 0, clipRect } = options;
+  const { ctx, path, fontSize, clipRect } = options;
   ctx.save();
   ctx.beginPath();
   const pathStyle = path.style;
@@ -71,83 +71,10 @@ function drawPath(options) {
     ctx.clip();
     ctx.beginPath();
   }
-  if (boldness) {
-    for (let offsetX = -boldness; offsetX <= boldness; offsetX += boldness / 2) {
-      for (let offsetY = -boldness; offsetY <= boldness; offsetY += boldness / 2) {
-        ctx.save();
-        ctx.translate(Math.round(offsetX), Math.round(offsetY));
-        path.drawTo(ctx, style);
-        ctx.restore();
-      }
-    }
-  } else {
-    path.drawTo(ctx, style);
-  }
+  path.drawTo(ctx, style);
   ctx.restore();
 }
 
-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$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) => {
@@ -167,6 +94,19 @@ const set2 = /* @__PURE__ */ new Set([
   "\u2019",
   "\u02DC"
 ]);
+const fontWeightMap = {
+  100: -0.2,
+  200: -0.1,
+  300: 0,
+  400: 0,
+  normal: 0,
+  500: 0.1,
+  600: 0.2,
+  700: 0.3,
+  bold: 0.3,
+  800: 0.4,
+  900: 0.5
+};
 class Character {
   constructor(content, index, parent) {
     this.content = content;
@@ -256,7 +196,7 @@ class Character {
     let x = left;
     let y = top + baseline;
     let glyphIndex;
-    let commands;
+    const path = new Path2D();
     if (isVertical) {
       x += (glyphHeight - glyphWidth) / 2;
       if (Math.abs(textWidth - textHeight) > 0.1) {
@@ -265,27 +205,31 @@ class Character {
       glyphIndex = void 0;
     }
     if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
-      commands = font.getPathCommands(content, x, top + baseline - (glyphHeight - glyphWidth) / 2, fontSize) ?? [];
+      path.addCommands(
+        font.getPathCommands(content, x, top + baseline - (glyphHeight - glyphWidth) / 2, fontSize) ?? []
+      );
       const point = {
         y: top - (glyphHeight - glyphWidth) / 2 + glyphHeight / 2,
         x: x + glyphWidth / 2
       };
       if (fontStyle === "italic") {
-        commands = this._italic(
-          commands,
+        this._italic(
+          path,
           isVertical ? {
             x: point.x,
             y: top - (glyphHeight - glyphWidth) / 2 + baseline
           } : void 0
         );
       }
-      commands = this._rotation90(commands, point);
+      path.rotate(90, point);
     } else {
       if (glyphIndex !== void 0) {
-        commands = font.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
+        path.addCommands(
+          font.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize)
+        );
         if (fontStyle === "italic") {
-          commands = this._italic(
-            commands,
+          this._italic(
+            path,
             isVertical ? {
               x: x + glyphWidth / 2,
               y: top + typoAscender / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight
@@ -293,17 +237,19 @@ class Character {
           );
         }
       } else {
-        commands = font.getPathCommands(content, x, y, fontSize) ?? [];
+        path.addCommands(
+          font.getPathCommands(content, x, y, fontSize) ?? []
+        );
         if (fontStyle === "italic") {
-          commands = this._italic(
-            commands,
+          this._italic(
+            path,
             isVertical ? { x: x + glyphHeight / 2, y } : void 0
           );
         }
       }
     }
-    commands.push(...this._decoration());
-    const path = new Path2D(commands);
+    path.addCommands(this._decoration());
+    path.bold(fontWeightMap[computedStyle.fontWeight ?? 400] * fontSize * 0.05);
     path.style = {
       fill: computedStyle.color,
       stroke: computedStyle.textStrokeWidth ? computedStyle.textStrokeColor : "none",
@@ -361,43 +307,10 @@ class Character {
       ];
     }
   }
-  _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];
-    });
-  }
-  _rotation90(commands, point) {
-    return this._transform(commands, (x, y) => {
-      const p = getPointPosition({ x, y }, point, 90);
-      return [p.x, p.y];
-    });
-  }
-  _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;
-        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;
+  _italic(path, startPoint) {
+    path.skew(-0.24, 0, startPoint || {
+      y: this.boundingBox.top + this.baseline,
+      x: this.boundingBox.left + this.glyphWidth / 2
     });
   }
   getGlyphMinMax(min, max, withStyle) {
@@ -423,12 +336,23 @@ class Character {
       path: this.path,
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
-      boldness: this.computedStyle.fontWeight === "bold" ? 2 : 0,
       ...config
     });
   }
 }
 
+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;
+}
+
 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) => {
@@ -676,7 +600,7 @@ const _Highlighter = class _Highlighter extends Feature {
     for (let i = 0; i < total; i++) {
       const _transform = transform.clone().translate(i * unitWidth, 0);
       paths.forEach((original) => {
-        const path = original.clone().transform(_transform);
+        const path = original.clone().matrix(_transform);
         if (path.style.strokeWidth) {
           path.style.strokeWidth *= styleScale * strokeWidth;
         }
@@ -1172,4 +1096,4 @@ class Text {
   }
 }
 
-export { Character, Deformer, Effector, Fragment, Highlighter, Measurer, Paragraph, Parser, Reflector, Renderer2D, Text, defaultHighlightRefer, 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, parseColor, uploadColor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "modern-font": "^0.2.1",
-    "modern-path2d": "^0.1.18"
+    "modern-path2d": "^0.2.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",