modern-text 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -174,6 +174,8 @@ class Character {
     __publicField$4(this, "path", new modernPath2d.Path2D());
     __publicField$4(this, "textWidth", 0);
     __publicField$4(this, "textHeight", 0);
+    // glyph
+    __publicField$4(this, "commands", []);
   }
   get computedStyle() {
     return this.parent.computedStyle;
@@ -184,12 +186,12 @@ class Character {
   get fontSize() {
     return this.computedStyle.fontSize;
   }
-  _updateFont() {
+  _font() {
     const font = modernFont.fonts.get(this.computedStyle.fontFamily)?.font;
     if (font instanceof modernFont.Woff || font instanceof modernFont.Ttf) {
-      this.font = font.sfnt;
+      return font.sfnt;
     }
-    return this;
+    return void 0;
   }
   _updateGlyph(font) {
     const { content, computedStyle, boundingBox, isVertical } = this;
@@ -216,8 +218,85 @@ class Character {
     this.centerPoint = this.glyphBox.getCenterPoint();
     return this;
   }
+  _decoration() {
+    const { isVertical, underlinePosition, yStrikeoutPosition } = this;
+    const { textDecoration, fontSize } = this.computedStyle;
+    const { left, top, width, height } = this.boundingBox;
+    const lineWidth = 0.1 * fontSize;
+    let start;
+    switch (textDecoration) {
+      case "underline":
+        if (isVertical) {
+          start = left;
+        } else {
+          start = top + underlinePosition;
+        }
+        break;
+      case "line-through":
+        if (isVertical) {
+          start = left + width / 2;
+        } else {
+          start = top + yStrikeoutPosition;
+        }
+        break;
+      case "none":
+      default:
+        return [];
+    }
+    if (isVertical) {
+      return [
+        { type: "M", x: start, y: top },
+        { type: "L", x: start, y: top + height },
+        { type: "L", x: start + lineWidth, y: top + height },
+        { type: "L", x: start + lineWidth, y: top },
+        { type: "Z" }
+      ];
+    } else {
+      return [
+        { type: "M", x: left, y: start },
+        { type: "L", x: left + width, y: start },
+        { type: "L", x: left + width, y: start + lineWidth },
+        { type: "L", x: left, y: start + lineWidth },
+        { type: "Z" }
+      ];
+    }
+  }
+  _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;
+      }
+      return cmd;
+    });
+  }
+  _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];
+    });
+  }
   updatePath() {
-    const font = this._updateFont().font;
+    const font = this._font();
     if (!font) {
       return this;
     }
@@ -230,16 +309,14 @@ class Character {
       computedStyle,
       baseline,
       glyphHeight,
-      glyphWidth,
-      yStrikeoutPosition,
-      underlinePosition
+      glyphWidth
     } = this._updateGlyph(font);
     const { os2, ascender, descender } = font;
     const usWinAscent = ascender;
     const usWinDescent = descender;
     const typoAscender = os2.sTypoAscender;
-    const { left, top, width, height } = boundingBox;
-    const { fontSize, fontStyle, textDecoration } = computedStyle;
+    const { left, top } = boundingBox;
+    const { fontSize, fontStyle } = computedStyle;
     let x = left;
     let y = top + baseline;
     let glyphIndex;
@@ -258,119 +335,74 @@ class Character {
         x: x + glyphWidth / 2
       };
       if (fontStyle === "italic") {
-        setItalic(
+        commands = this._italic(
           commands,
           isVertical ? {
             x: point.x,
             y: top - (glyphHeight - glyphWidth) / 2 + baseline
-          } : null
+          } : void 0
         );
       }
-      set90Rotation(commands, point);
+      commands = this._rotation90(commands, point);
     } else {
       if (glyphIndex !== void 0) {
         commands = font.glyf.glyphs.get(glyphIndex).getPathCommands(x, y, fontSize);
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
             isVertical ? {
               x: x + glyphWidth / 2,
               y: top + typoAscender / (usWinAscent + Math.abs(usWinDescent)) * glyphHeight
-            } : null
+            } : void 0
           );
         }
       } else {
         commands = font.getPathCommands(content, x, y, fontSize) ?? [];
         if (fontStyle === "italic") {
-          setItalic(
+          commands = this._italic(
             commands,
-            isVertical ? { x: x + glyphHeight / 2, y } : null
+            isVertical ? { x: x + glyphHeight / 2, y } : void 0
           );
         }
       }
     }
-    const lineWidth = 0.1 * fontSize;
-    if (isVertical) {
-      const create = (start, len) => [
-        { type: "M", x: start, y: top },
-        { type: "L", x: start, y: top + height },
-        { type: "L", x: start + len, y: top + height },
-        { type: "L", x: start + len, y: top },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(left, lineWidth));
-          break;
-        case "line-through":
-          commands.push(...create(left + width / 2, lineWidth));
-          break;
-      }
-    } else {
-      const create = (start, len) => [
-        { type: "M", x: left, y: start },
-        { type: "L", x: left + width, y: start },
-        { type: "L", x: left + width, y: start + len },
-        { type: "L", x: left, y: start + len },
-        { type: "Z" }
-      ];
-      switch (textDecoration) {
-        case "underline":
-          commands.push(...create(top + underlinePosition, lineWidth));
-          break;
-        case "line-through":
-          commands.push(...create(top + yStrikeoutPosition, lineWidth));
-          break;
-      }
-    }
+    commands.push(...this._decoration());
+    this.commands = commands;
     this.path = new modernPath2d.Path2D(commands);
     return this;
-    function setItalic(commands2, startPoint) {
-      const _startPoint = startPoint || {
-        y: top + baseline,
-        x: left + glyphWidth / 2
-      };
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getSkewPoint(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              _startPoint,
-              -0.24,
-              0
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
-        });
-      });
-    }
-    function set90Rotation(commands2, point) {
-      commands2.forEach((command) => {
-        ["", "1", "2"].forEach((arg) => {
-          if (command[`x${arg}`]) {
-            const pos = getPointPosition(
-              {
-                x: command[`x${arg}`],
-                y: command[`y${arg}`]
-              },
-              point,
-              90
-            );
-            command[`x${arg}`] = pos.x;
-            command[`y${arg}`] = pos.y;
-          }
-        });
-      });
-    }
   }
   update() {
     this.updatePath();
     return this;
   }
+  getMinMax(min = modernPath2d.Point2D.MAX, max = modernPath2d.Point2D.MIN) {
+    let last = { x: 0, y: 0 };
+    this.commands.forEach((cmd) => {
+      switch (cmd.type) {
+        case "L":
+        case "M":
+          min.x = Math.min(min.x, cmd.x);
+          min.y = Math.min(min.y, cmd.y);
+          max.x = Math.max(max.x, cmd.x);
+          max.y = Math.max(max.y, cmd.y);
+          last = { x: cmd.x, y: cmd.y };
+          break;
+        case "Q": {
+          const x1 = 0.5 * (last.x + cmd.x1);
+          const y1 = 0.5 * (last.y + cmd.y1);
+          const x2 = 0.5 * (last.x + cmd.x);
+          const y2 = 0.5 * (last.y + cmd.y);
+          min.x = Math.min(min.x, last.x, cmd.x, x1, x2);
+          min.y = Math.min(min.y, last.y, cmd.y, y1, y2);
+          max.x = Math.max(max.x, last.x, cmd.x, x1, x2);
+          max.y = Math.max(max.y, last.y, cmd.y, y1, y2);
+          last = { x: cmd.x, y: cmd.y };
+          break;
+        }
+      }
+    });
+    return { min, max };
+  }
   drawTo(ctx, config = {}) {
     drawPaths({
       ctx,
@@ -455,6 +487,7 @@ class Feature {
 
 class Deformer extends Feature {
   deform() {
+    this._text.deformation?.();
   }
 }
 
@@ -994,8 +1027,11 @@ class Text {
   }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
+    const old = this.paragraphs;
     this.paragraphs = this._parser.parse();
-    return this._measurer.measure(dom);
+    const result = this._measurer.measure(dom);
+    this.paragraphs = old;
+    return result;
   }
   requestUpdate() {
     this.needsUpdate = true;
@@ -1012,7 +1048,7 @@ class Text {
     this._highlighter.highlight();
     const min = modernPath2d.Point2D.MAX;
     const max = modernPath2d.Point2D.MIN;
-    this.characters.forEach((c) => c.path.getMinMax(min, max));
+    this.characters.forEach((c) => c.getMinMax(min, max));
     this.renderBoundingBox = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
     return this;
   }
@@ -1071,9 +1107,6 @@ exports.getScalePoint = getScalePoint;
 exports.getSkewPoint = getSkewPoint;
 exports.parseColor = parseColor;
 exports.uploadColor = uploadColor;
-Object.keys(modernPath2d).forEach(function (k) {
-  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = modernPath2d[k];
-});
 Object.keys(modernFont).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = modernFont[k];
 });

package/dist/index.d.cts

@@ -1,6 +1,5 @@
-import { BoundingBox, Path2D } from 'modern-path2d';
-export * from 'modern-path2d';
-import { Sfnt } from 'modern-font';
+import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
@@ -53,10 +52,7 @@ type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
     offsetY: number;
 }>;
-interface TextDeformation {
-    type: string;
-    intensities?: number[];
-}
+type TextDeformation = () => void;
 interface FragmentHighlight {
     url: string;
 }
@@ -104,7 +100,7 @@ declare class Character {
     path: Path2D<any>;
     textWidth: number;
     textHeight: number;
-    font: Sfnt;
+    commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
     underlinePosition: number;
@@ -122,10 +118,24 @@ declare class Character {
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _updateFont(): this;
+    protected _font(): Sfnt | undefined;
     protected _updateGlyph(font: Sfnt): this;
+    protected _decoration(): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
     updatePath(): this;
     update(): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 

package/dist/index.d.mts

@@ -1,6 +1,5 @@
-import { BoundingBox, Path2D } from 'modern-path2d';
-export * from 'modern-path2d';
-import { Sfnt } from 'modern-font';
+import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
@@ -53,10 +52,7 @@ type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
     offsetY: number;
 }>;
-interface TextDeformation {
-    type: string;
-    intensities?: number[];
-}
+type TextDeformation = () => void;
 interface FragmentHighlight {
     url: string;
 }
@@ -104,7 +100,7 @@ declare class Character {
     path: Path2D<any>;
     textWidth: number;
     textHeight: number;
-    font: Sfnt;
+    commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
     underlinePosition: number;
@@ -122,10 +118,24 @@ declare class Character {
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _updateFont(): this;
+    protected _font(): Sfnt | undefined;
     protected _updateGlyph(font: Sfnt): this;
+    protected _decoration(): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
     updatePath(): this;
     update(): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }
 

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-import { BoundingBox, Path2D } from 'modern-path2d';
-export * from 'modern-path2d';
-import { Sfnt } from 'modern-font';
+import { BoundingBox, Path2D, Point2D } from 'modern-path2d';
+import { GlyphPathCommand, Sfnt } from 'modern-font';
 export * from 'modern-font';
 
 type WritingMode = 'horizontal-tb' | 'vertical-lr' | 'vertical-rl';
@@ -53,10 +52,7 @@ type TextEffect = Partial<TextDrawStyle & {
     offsetX: number;
     offsetY: number;
 }>;
-interface TextDeformation {
-    type: string;
-    intensities?: number[];
-}
+type TextDeformation = () => void;
 interface FragmentHighlight {
     url: string;
 }
@@ -104,7 +100,7 @@ declare class Character {
     path: Path2D<any>;
     textWidth: number;
     textHeight: number;
-    font: Sfnt;
+    commands: GlyphPathCommand[];
     glyphHeight: number;
     glyphWidth: number;
     underlinePosition: number;
@@ -122,10 +118,24 @@ declare class Character {
     get isVertical(): boolean;
     get fontSize(): number;
     constructor(content: string, index: number, parent: Fragment);
-    protected _updateFont(): this;
+    protected _font(): Sfnt | undefined;
     protected _updateGlyph(font: Sfnt): this;
+    protected _decoration(): GlyphPathCommand[];
+    protected _transform(commands: GlyphPathCommand[], cb: (x: number, y: number) => number[]): GlyphPathCommand[];
+    protected _italic(commands: GlyphPathCommand[], startPoint?: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
+    protected _rotation90(commands: GlyphPathCommand[], point: {
+        x: number;
+        y: number;
+    }): GlyphPathCommand[];
     updatePath(): this;
     update(): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D, config?: Partial<TextEffect>): void;
 }