modern-text 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -79,21 +79,22 @@ 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) {
-  const { paragraphs, computedStyle: style, renderBoundingBox } = text;
-  uploadColor(style, renderBoundingBox, ctx);
+  const { paragraphs, computedStyle: style, glyphBox } = text;
+  uploadColor(style, glyphBox, ctx);
   paragraphs.forEach((paragraph) => {
     uploadColor(paragraph.computedStyle, paragraph.lineBox, ctx);
     paragraph.fragments.forEach((fragment) => {
@@ -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
@@ -979,7 +981,7 @@ function render() {
       return boxes.length ? modernPath2d.BoundingBox.from(...boxes) : void 0;
     },
     render: (ctx, text) => {
-      const { characters, paragraphs, renderBoundingBox, effects, style } = text;
+      const { characters, paragraphs, glyphBox, effects, style } = text;
       function fillBackground(color, box) {
         ctx.fillStyle = color;
         ctx.fillRect(box.left, box.top, box.width, box.height);
@@ -994,7 +996,7 @@ function render() {
       });
       if (effects) {
         effects.forEach((style2) => {
-          uploadColor(style2, renderBoundingBox, ctx);
+          uploadColor(style2, glyphBox, ctx);
           ctx.save();
           const [a, c, e, b, d, f] = getTransform2D(text, style2).transpose().elements;
           ctx.transform(a, b, c, d, e, f);
@@ -1022,13 +1024,13 @@ function render() {
   });
 }
 function getTransform2D(text, style) {
-  const { fontSize, renderBoundingBox } = text;
+  const { fontSize, glyphBox } = text;
   const translateX = (style.translateX ?? 0) * fontSize;
   const translateY = (style.translateY ?? 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 { left, top, width, height } = glyphBox;
   const centerX = left + width / 2;
   const centerY = top + height / 2;
   tempM1.identity();
@@ -1103,8 +1105,10 @@ class Text {
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
+    __publicField(this, "lineBox", new modernPath2d.BoundingBox());
+    __publicField(this, "glyphBox", new modernPath2d.BoundingBox());
+    __publicField(this, "pathBox", new modernPath2d.BoundingBox());
     __publicField(this, "boundingBox", new modernPath2d.BoundingBox());
-    __publicField(this, "renderBoundingBox", new modernPath2d.BoundingBox());
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
@@ -1130,19 +1134,35 @@ class Text {
   }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
-    const oldParagraphs = this.paragraphs;
-    const oldRenderBoundingBox = this.renderBoundingBox;
+    const old = {
+      paragraphs: this.paragraphs,
+      lineBox: this.lineBox,
+      glyphBox: this.glyphBox,
+      pathBox: this.pathBox,
+      boundingBox: this.boundingBox
+    };
     this.paragraphs = this.parser.parse();
     const result = this.measurer.measure(dom);
-    const characters = this.characters;
-    characters.forEach((c) => c.update());
+    this.paragraphs = result.paragraphs;
+    this.lineBox = result.boundingBox;
+    this.characters.forEach((c) => {
+      c.update();
+    });
     const plugins = [...this.plugins.values()];
     plugins.sort((a, b) => (a.updateOrder ?? 0) - (b.updateOrder ?? 0)).forEach((plugin) => {
       plugin.update?.(this);
     });
+    this.updateGlyphBox().updatePathBox().updateBoundingBox();
+    for (const key in old) {
+      result[key] = this[key];
+      this[key] = old[key];
+    }
+    return result;
+  }
+  updateGlyphBox() {
     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);
@@ -1151,30 +1171,47 @@ class Text {
         max.max(a, b);
       }
     });
-    this.renderBoundingBox = new modernPath2d.BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-    this.renderBoundingBox = modernPath2d.BoundingBox.from(
-      this.renderBoundingBox,
+    this.glyphBox = new modernPath2d.BoundingBox(
+      min.x,
+      min.y,
+      max.x - min.x,
+      max.y - min.y
+    );
+    return this;
+  }
+  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.renderBoundingBox = this.renderBoundingBox;
-    this.paragraphs = oldParagraphs;
-    this.renderBoundingBox = oldRenderBoundingBox;
-    return result;
+    return this;
+  }
+  updateBoundingBox() {
+    const { lineBox, glyphBox, pathBox } = this;
+    const left = pathBox.left + lineBox.left - glyphBox.left;
+    const top = pathBox.top + lineBox.top - glyphBox.top;
+    const right = pathBox.right + Math.max(0, lineBox.right - glyphBox.right);
+    const bottom = pathBox.bottom + Math.max(0, lineBox.bottom - glyphBox.bottom);
+    this.boundingBox = new modernPath2d.BoundingBox(
+      left,
+      top,
+      right - left,
+      bottom - top
+    );
+    return this;
   }
   requestUpdate() {
     this.needsUpdate = true;
     return this;
   }
   update() {
-    const { paragraphs, boundingBox, renderBoundingBox } = this.measure();
-    this.paragraphs = paragraphs;
-    this.boundingBox = boundingBox;
-    this.renderBoundingBox = renderBoundingBox;
+    const result = this.measure();
+    for (const key in result) {
+      this[key] = result[key];
+    }
     return this;
   }
   render(options) {
@@ -1186,7 +1223,7 @@ class Text {
     if (this.needsUpdate) {
       this.update();
     }
-    setupView(ctx, pixelRatio, this.renderBoundingBox);
+    setupView(ctx, pixelRatio, this.boundingBox);
     uploadColors(ctx, this);
     const plugins = [...this.plugins.values()];
     plugins.sort((a, b) => (a.renderOrder ?? 0) - (b.renderOrder ?? 0)).forEach((plugin) => {

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,13 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
-};
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +258,10 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +271,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    updateGlyphBox(): this;
+    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,13 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
-};
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +258,10 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +271,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    updateGlyphBox(): this;
+    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,13 @@ interface TextOptions {
     measureDom?: HTMLElement;
     effects?: Partial<TextStyle>[];
 }
-type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
-};
+interface MeasureResult {
+    paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
+    boundingBox: BoundingBox;
+}
 declare const defaultTextStyles: TextStyle;
 declare class Text {
     content: TextContent;
@@ -254,8 +258,10 @@ declare class Text {
     needsUpdate: boolean;
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
+    lineBox: BoundingBox;
+    glyphBox: BoundingBox;
+    pathBox: BoundingBox;
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;
@@ -265,6 +271,9 @@ declare class Text {
     constructor(options?: TextOptions);
     use(plugin: Plugin): this;
     measure(dom?: HTMLElement | undefined): MeasureResult;
+    updateGlyphBox(): this;
+    updatePathBox(): this;
+    updateBoundingBox(): this;
     requestUpdate(): this;
     update(): this;
     render(options: TextRenderOptions): this;