modern-text 0.2.17 → 0.2.18

package/dist/index.cjs

@@ -52,52 +52,27 @@ function parseCssLinearGradient(css, x, y, width, height) {
   };
 }
 
-const _tempM1 = new modernPath2d.Matrix3();
-const _tempM2 = new modernPath2d.Matrix3();
-function drawPath(options, isText = false) {
+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,
+  const pathStyle = path.style;
+  const style = {
+    ...pathStyle,
+    fill: options.color ?? pathStyle.fill,
+    stroke: options.textStrokeColor ?? pathStyle.stroke,
+    strokeWidth: options.textStrokeWidth ? options.textStrokeWidth * fontSize : pathStyle.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;
-  const skewX = (options.skewX ?? 0) / 180 * Math.PI;
-  const skewY = (options.skewY ?? 0) / 180 * Math.PI;
-  if (offsetX || offsetY || skewX || skewY) {
-    _tempM1.makeTranslation(offsetX, offsetY);
-    _tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
-    const [a, c, e, b, d, f] = _tempM1.multiply(_tempM2).transpose().elements;
-    ctx.transform(a, b, c, d, e, f);
-  }
   if (clipRect) {
     ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
     ctx.clip();
     ctx.beginPath();
   }
-  if (isText && path.style.strokeWidth) {
-    const scale = path.style.strokeWidth / fontSize + 1;
-    const box = path.getBoundingBox();
-    ctx.translate(
-      box.left * (1 - scale) + box.width * (1 - scale) / 2,
-      box.top * (1 - scale) + box.height * (1 - scale) / 2
-    );
-    ctx.scale(scale, scale);
-    const clone = path.clone();
-    clone.style.strokeWidth /= scale * 2;
-    clone.drawTo(ctx);
-  } else {
-    path.drawTo(ctx);
-  }
+  path.drawTo(ctx, style);
   ctx.restore();
 }
 
@@ -416,7 +391,7 @@ class Character {
       fontSize: this.computedStyle.fontSize,
       color: this.computedStyle.color,
       ...config
-    }, true);
+    });
   }
 }
 
@@ -497,21 +472,51 @@ class Deformer extends Feature {
   }
 }
 
+const tempM1 = new modernPath2d.Matrix3();
+const tempM2 = new modernPath2d.Matrix3();
+const tempV1 = new modernPath2d.Vector2();
 class Effector extends Feature {
+  getTransform2D(style) {
+    const { fontSize, renderBoundingBox } = this._text;
+    const offsetX = (style.offsetX ?? 0) * fontSize;
+    const offsetY = (style.offsetY ?? 0) * fontSize;
+    const PI_2 = Math.PI * 2;
+    const skewX = (style.skewX ?? 0) / 360 * PI_2;
+    const skewY = (style.skewY ?? 0) / 360 * PI_2;
+    const { left, top, width, height } = renderBoundingBox;
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    tempM1.identity();
+    tempM2.makeTranslation(offsetX, offsetY);
+    tempM1.multiply(tempM2);
+    tempM2.makeTranslation(centerX, centerY);
+    tempM1.multiply(tempM2);
+    tempM2.set(1, Math.tan(skewX), 0, Math.tan(skewY), 1, 0, 0, 0, 1);
+    tempM1.multiply(tempM2);
+    tempM2.makeTranslation(-centerX, -centerY);
+    tempM1.multiply(tempM2);
+    return tempM1.clone();
+  }
   getBoundingBox() {
-    const { characters, effects } = this._text;
+    const { characters, effects, fontSize } = this._text;
     const boxes = [];
     characters.forEach((character) => {
-      const fontSize = character.computedStyle.fontSize;
-      effects?.forEach((effect) => {
-        const offsetX = (effect.offsetX ?? 0) * fontSize;
-        const offsetY = (effect.offsetY ?? 0) * fontSize;
-        const shadowOffsetX = (effect.shadowOffsetX ?? 0) * fontSize;
-        const shadowOffsetY = (effect.shadowOffsetY ?? 0) * fontSize;
-        const textStrokeWidth = Math.max(0.1, effect.textStrokeWidth ?? 0) * fontSize;
+      effects?.forEach((style) => {
         const aabb = character.boundingBox.clone();
-        aabb.left += offsetX + shadowOffsetX - textStrokeWidth;
-        aabb.top += offsetY + shadowOffsetY - textStrokeWidth;
+        const m = this.getTransform2D(style);
+        tempV1.set(aabb.left, aabb.top);
+        tempV1.applyMatrix3(m);
+        aabb.left = tempV1.x;
+        aabb.top = tempV1.y;
+        tempV1.set(aabb.right, aabb.bottom);
+        tempV1.applyMatrix3(m);
+        aabb.width = tempV1.x - aabb.left;
+        aabb.height = tempV1.y - aabb.top;
+        const shadowOffsetX = (style.shadowOffsetX ?? 0) * fontSize;
+        const shadowOffsetY = (style.shadowOffsetY ?? 0) * fontSize;
+        const textStrokeWidth = Math.max(0.1, style.textStrokeWidth ?? 0) * fontSize;
+        aabb.left += shadowOffsetX - textStrokeWidth;
+        aabb.top += shadowOffsetY - textStrokeWidth;
         aabb.width += textStrokeWidth * 2;
         aabb.height += textStrokeWidth * 2;
         boxes.push(aabb);
@@ -521,15 +526,17 @@ class Effector extends Feature {
   }
   draw(options) {
     const { ctx } = options;
-    const { effects, characters, boundingBox } = this._text;
+    const { effects, characters, renderBoundingBox } = this._text;
     if (effects) {
-      effects.forEach((effect) => {
-        uploadColor(effect, boundingBox, ctx);
-      });
-      characters.forEach((character) => {
-        effects.forEach((style) => {
+      effects.forEach((style) => {
+        uploadColor(style, renderBoundingBox, ctx);
+        ctx.save();
+        const [a, c, e, b, d, f] = this.getTransform2D(style).transpose().elements;
+        ctx.transform(a, b, c, d, e, f);
+        characters.forEach((character) => {
           character.drawTo(ctx, style);
         });
+        ctx.restore();
       });
     }
     return this;
@@ -1046,6 +1053,9 @@ class Text {
     this.deformation = deformation;
     this.measureDom = measureDom;
   }
+  get fontSize() {
+    return this.computedStyle.fontSize;
+  }
   get characters() {
     return this.paragraphs.flatMap((p) => p.fragments.flatMap((f) => f.characters));
   }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2, Matrix3 } from 'modern-path2d';
 import { Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
@@ -78,7 +78,7 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     fontSize: number;
     clipRect?: BoundingBox;
 }
-declare function drawPath(options: DrawShapePathsOptions, isText?: boolean): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -195,6 +195,7 @@ declare class Text {
     effector: Effector;
     highlighter: Highlighter;
     renderer2D: Renderer2D;
+    get fontSize(): number;
     get characters(): Character[];
     constructor(options?: TextOptions);
     measure(dom?: HTMLElement | undefined): MeasuredResult;
@@ -216,6 +217,7 @@ interface EffectOptions {
     ctx: CanvasRenderingContext2D;
 }
 declare class Effector extends Feature {
+    getTransform2D(style: TextEffect): Matrix3;
     getBoundingBox(): BoundingBox;
     draw(options: EffectOptions): this;
 }

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2, Matrix3 } from 'modern-path2d';
 import { Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
@@ -78,7 +78,7 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     fontSize: number;
     clipRect?: BoundingBox;
 }
-declare function drawPath(options: DrawShapePathsOptions, isText?: boolean): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -195,6 +195,7 @@ declare class Text {
     effector: Effector;
     highlighter: Highlighter;
     renderer2D: Renderer2D;
+    get fontSize(): number;
     get characters(): Character[];
     constructor(options?: TextOptions);
     measure(dom?: HTMLElement | undefined): MeasuredResult;
@@ -216,6 +217,7 @@ interface EffectOptions {
     ctx: CanvasRenderingContext2D;
 }
 declare class Effector extends Feature {
+    getTransform2D(style: TextEffect): Matrix3;
     getBoundingBox(): BoundingBox;
     draw(options: EffectOptions): this;
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BoundingBox, Path2D, VectorLike, Vector2 } from 'modern-path2d';
+import { BoundingBox, Path2D, VectorLike, Vector2, Matrix3 } from 'modern-path2d';
 import { Sfnt, GlyphPathCommand } from 'modern-font';
 export * from 'modern-font';
 
@@ -78,7 +78,7 @@ interface DrawShapePathsOptions extends Partial<TextEffect> {
     fontSize: number;
     clipRect?: BoundingBox;
 }
-declare function drawPath(options: DrawShapePathsOptions, isText?: boolean): void;
+declare function drawPath(options: DrawShapePathsOptions): void;
 
 declare class Fragment {
     content: string;
@@ -195,6 +195,7 @@ declare class Text {
     effector: Effector;
     highlighter: Highlighter;
     renderer2D: Renderer2D;
+    get fontSize(): number;
     get characters(): Character[];
     constructor(options?: TextOptions);
     measure(dom?: HTMLElement | undefined): MeasuredResult;
@@ -216,6 +217,7 @@ interface EffectOptions {
     ctx: CanvasRenderingContext2D;
 }
 declare class Effector extends Feature {
+    getTransform2D(style: TextEffect): Matrix3;
     getBoundingBox(): BoundingBox;
     draw(options: EffectOptions): this;
 }