modern-text 0.2.13 → 0.2.15

package/dist/index.cjs

@@ -52,28 +52,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) {
@@ -209,7 +212,6 @@ class Character {
     this.centerDiviation = 0.5 * height - baseline;
     this.glyphBox = isVertical ? new modernPath2d.BoundingBox(left, top, glyphHeight, glyphWidth) : new modernPath2d.BoundingBox(left, top, glyphWidth, glyphHeight);
     this.centerPoint = this.glyphBox.getCenterPoint();
-    this.fontMinGlyphWidth = font.getAdvanceWidth("i", fontSize);
     return this;
   }
   updatePath() {
@@ -263,7 +265,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,
@@ -370,6 +372,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;
     });
@@ -381,9 +388,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
@@ -524,7 +531,7 @@ class Highlighter extends Feature {
     }
     const min = modernPath2d.Vector2.MAX;
     const max = modernPath2d.Vector2.MIN;
-    this.paths.forEach((path) => path.getMinMax(min, max));
+    this.paths.forEach((v) => v.path.getMinMax(min, max));
     return new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
   highlight() {
@@ -550,7 +557,6 @@ class Highlighter extends Feature {
         url: characters2[0].parent.highlight.url,
         box: modernPath2d.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();
@@ -568,23 +574,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) {
@@ -597,16 +603,15 @@ class Highlighter extends Feature {
       const m = new modernPath2d.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 modernPath2d.Matrix3().translate(-box.x, -box.y).scale(scale, scale).translate(offset.x, offset.y);
@@ -614,18 +619,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;
   }
@@ -1092,7 +1100,7 @@ exports.Reflector = Reflector;
 exports.Renderer2D = Renderer2D;
 exports.Text = Text;
 exports.defaultTextStyles = defaultTextStyles;
-exports.drawPaths = drawPaths;
+exports.drawPath = drawPath;
 exports.filterEmpty = filterEmpty;
 exports.getPointPosition = getPointPosition;
 exports.getRotationPoint = getRotationPoint;

package/dist/index.d.cts

@@ -72,10 +72,11 @@ interface LinearGradient {
 
 interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
-    paths: Path2D[];
+    path: Path2D;
     fontSize: number;
+    clipRect?: BoundingBox;
 }
-declare function drawPaths(options: DrawShapePathsOptions): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -109,7 +110,6 @@ declare class Character {
     centerDiviation: number;
     glyphBox: BoundingBox;
     centerPoint: VectorLike;
-    fontMinGlyphWidth: number;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -223,10 +223,12 @@ interface HighlightGroup {
     box: BoundingBox;
     baseline: number;
     fontSize: number;
-    fontMinGlyphWidth: number;
 }
 declare class Highlighter extends Feature {
-    paths: Path2D[];
+    paths: {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     getBoundingBox(): BoundingBox;
     highlight(): void;
     protected _parseSvg(url: string): {
@@ -234,7 +236,10 @@ declare class Highlighter extends Feature {
         box: BoundingBox;
         viewBox: BoundingBox;
     };
-    protected _parseGroup(group: HighlightGroup): Path2D[];
+    protected _parseGroup(group: HighlightGroup): {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     draw({ ctx }: {
         ctx: CanvasRenderingContext2D;
     }): this;
@@ -339,4 +344,4 @@ declare function getPointPosition(point: {
     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, defaultTextStyles, drawPaths, 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, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/dist/index.d.mts

@@ -72,10 +72,11 @@ interface LinearGradient {
 
 interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
-    paths: Path2D[];
+    path: Path2D;
     fontSize: number;
+    clipRect?: BoundingBox;
 }
-declare function drawPaths(options: DrawShapePathsOptions): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -109,7 +110,6 @@ declare class Character {
     centerDiviation: number;
     glyphBox: BoundingBox;
     centerPoint: VectorLike;
-    fontMinGlyphWidth: number;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -223,10 +223,12 @@ interface HighlightGroup {
     box: BoundingBox;
     baseline: number;
     fontSize: number;
-    fontMinGlyphWidth: number;
 }
 declare class Highlighter extends Feature {
-    paths: Path2D[];
+    paths: {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     getBoundingBox(): BoundingBox;
     highlight(): void;
     protected _parseSvg(url: string): {
@@ -234,7 +236,10 @@ declare class Highlighter extends Feature {
         box: BoundingBox;
         viewBox: BoundingBox;
     };
-    protected _parseGroup(group: HighlightGroup): Path2D[];
+    protected _parseGroup(group: HighlightGroup): {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     draw({ ctx }: {
         ctx: CanvasRenderingContext2D;
     }): this;
@@ -339,4 +344,4 @@ declare function getPointPosition(point: {
     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, defaultTextStyles, drawPaths, 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, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };

package/dist/index.d.ts

@@ -72,10 +72,11 @@ interface LinearGradient {
 
 interface DrawShapePathsOptions extends Partial<TextEffect> {
     ctx: CanvasRenderingContext2D;
-    paths: Path2D[];
+    path: Path2D;
     fontSize: number;
+    clipRect?: BoundingBox;
 }
-declare function drawPaths(options: DrawShapePathsOptions): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -109,7 +110,6 @@ declare class Character {
     centerDiviation: number;
     glyphBox: BoundingBox;
     centerPoint: VectorLike;
-    fontMinGlyphWidth: number;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -223,10 +223,12 @@ interface HighlightGroup {
     box: BoundingBox;
     baseline: number;
     fontSize: number;
-    fontMinGlyphWidth: number;
 }
 declare class Highlighter extends Feature {
-    paths: Path2D[];
+    paths: {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     getBoundingBox(): BoundingBox;
     highlight(): void;
     protected _parseSvg(url: string): {
@@ -234,7 +236,10 @@ declare class Highlighter extends Feature {
         box: BoundingBox;
         viewBox: BoundingBox;
     };
-    protected _parseGroup(group: HighlightGroup): Path2D[];
+    protected _parseGroup(group: HighlightGroup): {
+        clipRect?: BoundingBox;
+        path: Path2D;
+    }[];
     draw({ ctx }: {
         ctx: CanvasRenderingContext2D;
     }): this;
@@ -339,4 +344,4 @@ declare function getPointPosition(point: {
     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, defaultTextStyles, drawPaths, 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, defaultTextStyles, drawPath, filterEmpty, getPointPosition, getRotationPoint, getScalePoint, getSkewPoint, parseColor, uploadColor };