modern-text 0.2.29 → 0.2.30

package/dist/index.cjs

@@ -53,7 +53,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;
@@ -72,83 +72,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) => {
@@ -168,6 +95,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;
@@ -257,7 +197,7 @@ class Character {
     let x = left;
     let y = top + baseline;
     let glyphIndex;
-    let commands;
+    const path = new modernPath2d.Path2D();
     if (isVertical) {
       x += (glyphHeight - glyphWidth) / 2;
       if (Math.abs(textWidth - textHeight) > 0.1) {
@@ -266,27 +206,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
@@ -294,17 +238,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 modernPath2d.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",
@@ -362,43 +308,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) {
@@ -424,12 +337,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) => {
@@ -677,7 +601,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;
         }
@@ -1188,10 +1112,6 @@ exports.defaultHighlightRefer = defaultHighlightRefer;
 exports.defaultTextStyles = defaultTextStyles;
 exports.drawPath = drawPath;
 exports.filterEmpty = filterEmpty;
-exports.getPointPosition = getPointPosition;
-exports.getRotationPoint = getRotationPoint;
-exports.getScalePoint = getScalePoint;
-exports.getSkewPoint = getSkewPoint;
 exports.parseColor = parseColor;
 exports.uploadColor = uploadColor;
 Object.keys(modernFont).forEach(function (k) {

package/dist/index.d.cts

@@ -4,7 +4,7 @@ export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
-type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
 type FontKerning = 'auto' | 'none' | 'normal';
 type TextWrap = 'wrap' | 'nowrap';
@@ -79,7 +79,6 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
     path: Path2D;
     fontSize: number;
-    boldness?: number;
     clipRect?: BoundingBox;
 }
 declare function drawPath(options: DrawShapePathsOptions): void;
@@ -125,9 +124,7 @@ declare class Character {
     updatePath(): this;
     update(): this;
     protected _decoration(): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
         max: Vector2;
@@ -334,27 +331,5 @@ declare class Renderer2D extends Feature {
 }
 
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
-declare function getRotationPoint(point: any, rotation: number): {
-    x: number;
-    y: number;
-};
-declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
-    x: number;
-    y: number;
-};
-declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
-    x: number;
-    y: number;
-};
-declare function getPointPosition(point: {
-    x: number;
-    y: number;
-}, startPoint: {
-    x: number;
-    y: number;
-}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
-    x: number;
-    y: number;
-};
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, parseColor, uploadColor };

package/dist/index.d.mts

@@ -4,7 +4,7 @@ export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
-type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
 type FontKerning = 'auto' | 'none' | 'normal';
 type TextWrap = 'wrap' | 'nowrap';
@@ -79,7 +79,6 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
     path: Path2D;
     fontSize: number;
-    boldness?: number;
     clipRect?: BoundingBox;
 }
 declare function drawPath(options: DrawShapePathsOptions): void;
@@ -125,9 +124,7 @@ declare class Character {
     updatePath(): this;
     update(): this;
     protected _decoration(): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
         max: Vector2;
@@ -334,27 +331,5 @@ declare class Renderer2D extends Feature {
 }
 
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
-declare function getRotationPoint(point: any, rotation: number): {
-    x: number;
-    y: number;
-};
-declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
-    x: number;
-    y: number;
-};
-declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
-    x: number;
-    y: number;
-};
-declare function getPointPosition(point: {
-    x: number;
-    y: number;
-}, startPoint: {
-    x: number;
-    y: number;
-}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
-    x: number;
-    y: number;
-};
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, parseColor, uploadColor };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
 type TextOrientation = 'mixed' | 'upright' | 'sideways-right' | 'sideways';
-type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontWeight = 'normal' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type FontStyle = 'normal' | 'italic' | 'oblique' | `oblique ${string}`;
 type FontKerning = 'auto' | 'none' | 'normal';
 type TextWrap = 'wrap' | 'nowrap';
@@ -79,7 +79,6 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
     path: Path2D;
     fontSize: number;
-    boldness?: number;
     clipRect?: BoundingBox;
 }
 declare function drawPath(options: DrawShapePathsOptions): void;
@@ -125,9 +124,7 @@ declare class Character {
     updatePath(): this;
     update(): this;
     protected _decoration(): GlyphPathCommand[];
-    protected _italic(commands: GlyphPathCommand[], startPoint?: VectorLike): GlyphPathCommand[];
-    protected _rotation90(commands: GlyphPathCommand[], point: VectorLike): GlyphPathCommand[];
-    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(path: Path2D, startPoint?: VectorLike): void;
     getGlyphMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
         min: Vector2;
         max: Vector2;
@@ -334,27 +331,5 @@ declare class Renderer2D extends Feature {
 }
 
 declare function filterEmpty(val: Record<string, any> | undefined): Record<string, any> | undefined;
-declare function getRotationPoint(point: any, rotation: number): {
-    x: number;
-    y: number;
-};
-declare function getSkewPoint(point: any, startPoint: any, skewX: number, skewY: number): {
-    x: number;
-    y: number;
-};
-declare function getScalePoint(point: any, startPoint: any, scaleX: number, scaleY: number): {
-    x: number;
-    y: number;
-};
-declare function getPointPosition(point: {
-    x: number;
-    y: number;
-}, startPoint: {
-    x: number;
-    y: number;
-}, rotation?: number, skewX?: number, skewY?: number, scaleX?: number, scaleY?: number): {
-    x: number;
-    y: number;
-};
 
-export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };
+export { Character, Deformer, type DrawShapePathsOptions, type EffectOptions, Effector, type FontKerning, type FontStyle, type FontWeight, Fragment, type FragmentContent, type FragmentHighlight, Highlighter, type LinearGradient, type MeasuredCharacter, type MeasuredFragment, type MeasuredParagraph, type MeasuredResult, Measurer, Paragraph, type ParagraphContent, Parser, Reflector, type Render2dOptions, Renderer2D, Text, type TextAlign, type TextContent, type TextDecoration, type TextDeformation, type TextDrawStyle, type TextEffect, type TextLayoutStyle, type TextOptions, type TextOrientation, type TextRenderOptions, type TextStyle, type TextTransform, type TextWrap, type VerticalAlign, type WritingMode, defaultHighlightRefer, defaultTextStyles, drawPath, filterEmpty, parseColor, uploadColor };