modern-text 0.3.1 → 0.3.3

package/dist/index.cjs

@@ -79,16 +79,17 @@ function drawPath(options) {
 function setupView(ctx, pixelRatio, boundingBox) {
   const { left, top, width, height } = boundingBox;
   const view = ctx.canvas;
-  view.dataset.viewbox = String(`${left} ${top} ${width} ${height}`);
+  view.dataset.viewBox = String(`${left} ${top} ${width} ${height}`);
   view.dataset.pixelRatio = String(pixelRatio);
-  const canvasWidth = width + left;
-  const canvasHeight = height + top;
+  const canvasWidth = width + Math.abs(left);
+  const canvasHeight = height + Math.abs(top);
   view.width = Math.max(1, Math.ceil(canvasWidth * pixelRatio));
   view.height = Math.max(1, Math.ceil(canvasHeight * pixelRatio));
   view.style.width = `${canvasWidth}px`;
   view.style.height = `${canvasHeight}px`;
-  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.clearRect(0, 0, view.width, view.height);
   ctx.scale(pixelRatio, pixelRatio);
+  ctx.translate(-Math.min(0, left), -Math.min(0, top));
 }
 
 function uploadColors(ctx, text) {
@@ -150,7 +151,6 @@ class Character {
     __publicField$3(this, "lineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "inlineBox", new modernPath2d.BoundingBox());
     __publicField$3(this, "glyphBox");
-    __publicField$3(this, "center");
     __publicField$3(this, "underlinePosition", 0);
     __publicField$3(this, "underlineThickness", 0);
     __publicField$3(this, "yStrikeoutPosition", 0);
@@ -159,6 +159,9 @@ class Character {
     __publicField$3(this, "centerDiviation", 0);
     __publicField$3(this, "path", new modernPath2d.Path2D());
   }
+  get center() {
+    return this.glyphBox?.center;
+  }
   get computedStyle() {
     return this.parent.computedStyle;
   }
@@ -288,7 +291,6 @@ class Character {
     };
     this.path = path;
     this.glyphBox = this.getGlyphBoundingBox();
-    this.center = this.glyphBox?.getCenterPoint();
     return this;
   }
   update() {
@@ -747,8 +749,8 @@ function getTransformMatrix(a, b, c, isVertical) {
       y: c.height / b.width
     };
   }
-  const offset = c.getCenterPoint().add(
-    a.getCenterPoint().sub(b.getCenterPoint()).scale(scale.x, scale.y)
+  const offset = c.center.add(
+    a.center.sub(b.center).scale(scale.x, scale.y)
   ).sub({
     x: a.width / 2 * scale.x,
     y: a.height / 2 * scale.y
@@ -1103,8 +1105,11 @@ class Text {
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
-    __publicField(this, "boundingBox", new modernPath2d.BoundingBox());
+    __publicField(this, "lineBox", new modernPath2d.BoundingBox());
+    __publicField(this, "rawGlyphBox", new modernPath2d.BoundingBox());
     __publicField(this, "glyphBox", new modernPath2d.BoundingBox());
+    __publicField(this, "pathBox", new modernPath2d.BoundingBox());
+    __publicField(this, "boundingBox", new modernPath2d.BoundingBox());
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
@@ -1132,22 +1137,36 @@ class Text {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = {
       paragraphs: this.paragraphs,
-      boundingBox: this.boundingBox,
-      glyphBox: this.glyphBox
+      lineBox: this.lineBox,
+      rawGlyphBox: this.rawGlyphBox,
+      glyphBox: this.glyphBox,
+      pathBox: this.pathBox,
+      boundingBox: this.boundingBox
     };
     this.paragraphs = this.parser.parse();
     const result = this.measurer.measure(dom);
     this.paragraphs = result.paragraphs;
-    this.boundingBox = result.boundingBox;
-    const characters = this.characters;
-    characters.forEach((c) => c.update());
+    this.lineBox = result.boundingBox;
+    this.characters.forEach((c) => {
+      c.update();
+    });
+    this.rawGlyphBox = this.getGlyphBox();
     const plugins = [...this.plugins.values()];
     plugins.sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0)).forEach((plugin) => {
       plugin.update?.(this);
     });
+    this.glyphBox = this.getGlyphBox();
+    this.updatePathBox().updateBoundingBox();
+    for (const key in old) {
+      result[key] = this[key];
+      this[key] = old[key];
+    }
+    return result;
+  }
+  getGlyphBox() {
     const min = modernPath2d.Vector2.MAX;
     const max = modernPath2d.Vector2.MIN;
-    characters.forEach((c) => {
+    this.characters.forEach((c) => {
       if (!c.getGlyphMinMax(min, max)) {
         const { inlineBox } = c;
         const a = new modernPath2d.Vector2(inlineBox.left, inlineBox.top);
@@ -1156,37 +1175,46 @@ class Text {
         max.max(a, b);
       }
     });
-    this.glyphBox = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-    const dLeft = this.glyphBox.left - result.boundingBox.left;
-    const dRight = result.boundingBox.right - this.glyphBox.right;
-    const dTop = this.glyphBox.top - result.boundingBox.top;
-    const dBottom = result.boundingBox.bottom - this.glyphBox.bottom;
-    this.glyphBox = modernPath2d.BoundingBox.from(
+    return new modernPath2d.BoundingBox(
+      min.x,
+      min.y,
+      max.x - min.x,
+      max.y - min.y
+    );
+  }
+  updatePathBox() {
+    const plugins = [...this.plugins.values()];
+    this.pathBox = modernPath2d.BoundingBox.from(
       this.glyphBox,
       ...plugins.map((plugin) => {
-        if (plugin.getBoundingBox) {
-          return plugin.getBoundingBox(this);
-        }
-        return modernPath2d.getPathsBoundingBox(plugin.paths ?? []);
+        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : modernPath2d.getPathsBoundingBox(plugin.paths ?? []);
       }).filter(Boolean)
     );
-    result.glyphBox = this.glyphBox;
-    result.boundingBox.width = this.glyphBox.width + dLeft + dRight;
-    result.boundingBox.height = this.glyphBox.height + dTop + dBottom;
-    this.paragraphs = old.paragraphs;
-    this.boundingBox = old.boundingBox;
-    this.glyphBox = old.glyphBox;
-    return result;
+    return this;
+  }
+  updateBoundingBox() {
+    const { lineBox, rawGlyphBox, pathBox } = this;
+    const left = pathBox.left + lineBox.left - rawGlyphBox.left;
+    const top = pathBox.top + lineBox.top - rawGlyphBox.top;
+    const right = pathBox.right + Math.max(0, lineBox.right - rawGlyphBox.right);
+    const bottom = pathBox.bottom + Math.max(0, lineBox.bottom - rawGlyphBox.bottom);
+    this.boundingBox = new modernPath2d.BoundingBox(
+      left,
+      top,
+      right - left,
+      bottom - top
+    );
+    return this;
   }
   requestUpdate() {
     this.needsUpdate = true;
     return this;
   }
   update() {
-    const { paragraphs, boundingBox, glyphBox } = this.measure();
-    this.paragraphs = paragraphs;
-    this.boundingBox = boundingBox;
-    this.glyphBox = glyphBox;
+    const result = this.measure();
+    for (const key in result) {
+      this[key] = result[key];
+    }
     return this;
   }
   render(options) {

package/dist/index.d.cts

@@ -117,7 +117,6 @@ declare class Character {
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
-    center: Vector2 | undefined;
     underlinePosition: number;
     underlineThickness: number;
     yStrikeoutPosition: number;
@@ -125,6 +124,7 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     path: Path2D;
+    get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -155,6 +155,18 @@ declare class Paragraph {
     addFragment(content: string, style?: Partial<TextStyle>): Fragment;
 }
 
+type PromiseLike<T> = T | Promise<T>;
+interface Plugin {
+    name: string;
+    paths?: Path2D[];
+    getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    updateOrder?: number;
+    update?: (text: Text) => PromiseLike<void>;
+    renderOrder?: number;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+}
+declare function definePlugin(options: Plugin): Plugin;
+
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -214,18 +226,6 @@ declare class Measurer {
     measure(dom?: HTMLElement): MeasureDomResult;
 }
 
-type PromiseLike<T> = T | Promise<T>;
-interface Plugin {
-    name: string;
-    paths?: Path2D[];
-    getBoundingBox?: (text: Text) => BoundingBox | undefined;
-    updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
-    renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
-}
-declare function definePlugin(options: Plugin): Plugin;
-
 declare class Parser {
     protected _text: Text;
     constructor(_text: Text);
@@ -242,9 +242,14 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
-};
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +259,11 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
-    boundingBox: BoundingBox;
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +273,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    getGlyphBox(): BoundingBox;
+    updatePathBox(): this;
+    updateBoundingBox(): this;
     requestUpdate(): this;
     update(): this;
     render(options: TextRenderOptions): this;

package/dist/index.d.mts

@@ -117,7 +117,6 @@ declare class Character {
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
-    center: Vector2 | undefined;
     underlinePosition: number;
     underlineThickness: number;
     yStrikeoutPosition: number;
@@ -125,6 +124,7 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     path: Path2D;
+    get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -155,6 +155,18 @@ declare class Paragraph {
     addFragment(content: string, style?: Partial<TextStyle>): Fragment;
 }
 
+type PromiseLike<T> = T | Promise<T>;
+interface Plugin {
+    name: string;
+    paths?: Path2D[];
+    getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    updateOrder?: number;
+    update?: (text: Text) => PromiseLike<void>;
+    renderOrder?: number;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+}
+declare function definePlugin(options: Plugin): Plugin;
+
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -214,18 +226,6 @@ declare class Measurer {
     measure(dom?: HTMLElement): MeasureDomResult;
 }
 
-type PromiseLike<T> = T | Promise<T>;
-interface Plugin {
-    name: string;
-    paths?: Path2D[];
-    getBoundingBox?: (text: Text) => BoundingBox | undefined;
-    updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
-    renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
-}
-declare function definePlugin(options: Plugin): Plugin;
-
 declare class Parser {
     protected _text: Text;
     constructor(_text: Text);
@@ -242,9 +242,14 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
-};
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +259,11 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
-    boundingBox: BoundingBox;
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +273,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    getGlyphBox(): BoundingBox;
+    updatePathBox(): this;
+    updateBoundingBox(): this;
     requestUpdate(): this;
     update(): this;
     render(options: TextRenderOptions): this;

package/dist/index.d.ts

@@ -117,7 +117,6 @@ declare class Character {
     lineBox: BoundingBox;
     inlineBox: BoundingBox;
     glyphBox: BoundingBox | undefined;
-    center: Vector2 | undefined;
     underlinePosition: number;
     underlineThickness: number;
     yStrikeoutPosition: number;
@@ -125,6 +124,7 @@ declare class Character {
     baseline: number;
     centerDiviation: number;
     path: Path2D;
+    get center(): Vector2 | undefined;
     get computedStyle(): TextStyle;
     get isVertical(): boolean;
     get fontSize(): number;
@@ -155,6 +155,18 @@ declare class Paragraph {
     addFragment(content: string, style?: Partial<TextStyle>): Fragment;
 }
 
+type PromiseLike<T> = T | Promise<T>;
+interface Plugin {
+    name: string;
+    paths?: Path2D[];
+    getBoundingBox?: (text: Text) => BoundingBox | undefined;
+    updateOrder?: number;
+    update?: (text: Text) => PromiseLike<void>;
+    renderOrder?: number;
+    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
+}
+declare function definePlugin(options: Plugin): Plugin;
+
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -214,18 +226,6 @@ declare class Measurer {
     measure(dom?: HTMLElement): MeasureDomResult;
 }
 
-type PromiseLike<T> = T | Promise<T>;
-interface Plugin {
-    name: string;
-    paths?: Path2D[];
-    getBoundingBox?: (text: Text) => BoundingBox | undefined;
-    updateOrder?: number;
-    update?: (text: Text) => PromiseLike<void>;
-    renderOrder?: number;
-    render?: (ctx: CanvasRenderingContext2D, text: Text) => PromiseLike<void>;
-}
-declare function definePlugin(options: Plugin): Plugin;
-
 declare class Parser {
     protected _text: Text;
     constructor(_text: Text);
@@ -242,9 +242,14 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
-};
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +259,11 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
-    boundingBox: BoundingBox;
+    lineBox: BoundingBox;
+    rawGlyphBox: BoundingBox;
     glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +273,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    getGlyphBox(): BoundingBox;
+    updatePathBox(): this;
+    updateBoundingBox(): this;
     requestUpdate(): this;
     update(): this;
     render(options: TextRenderOptions): this;