modern-text 0.2.44 → 0.3.1

package/dist/index.cjs

@@ -81,20 +81,19 @@ function setupView(ctx, pixelRatio, boundingBox) {
   const view = ctx.canvas;
   view.dataset.viewbox = String(`${left} ${top} ${width} ${height}`);
   view.dataset.pixelRatio = String(pixelRatio);
-  view.width = Math.max(1, Math.ceil(width * pixelRatio));
-  view.height = Math.max(1, Math.ceil(height * pixelRatio));
-  view.style.marginTop = `${top}px`;
-  view.style.marginLeft = `${left}px`;
-  view.style.width = `${width}px`;
-  view.style.height = `${height}px`;
+  const canvasWidth = width + left;
+  const canvasHeight = height + 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.scale(pixelRatio, pixelRatio);
-  ctx.translate(-left, -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) => {
@@ -980,7 +979,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);
@@ -995,7 +994,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);
@@ -1023,13 +1022,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();
@@ -1105,7 +1104,7 @@ class Text {
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
     __publicField(this, "boundingBox", new modernPath2d.BoundingBox());
-    __publicField(this, "renderBoundingBox", new modernPath2d.BoundingBox());
+    __publicField(this, "glyphBox", new modernPath2d.BoundingBox());
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
@@ -1131,10 +1130,15 @@ class Text {
   }
   measure(dom = this.measureDom) {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
-    const oldParagraphs = this.paragraphs;
-    const oldRenderBoundingBox = this.renderBoundingBox;
+    const old = {
+      paragraphs: this.paragraphs,
+      boundingBox: this.boundingBox,
+      glyphBox: this.glyphBox
+    };
     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());
     const plugins = [...this.plugins.values()];
@@ -1152,9 +1156,13 @@ 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);
+    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(
+      this.glyphBox,
       ...plugins.map((plugin) => {
         if (plugin.getBoundingBox) {
           return plugin.getBoundingBox(this);
@@ -1162,9 +1170,12 @@ class Text {
         return modernPath2d.getPathsBoundingBox(plugin.paths ?? []);
       }).filter(Boolean)
     );
-    result.renderBoundingBox = this.renderBoundingBox;
-    this.paragraphs = oldParagraphs;
-    this.renderBoundingBox = oldRenderBoundingBox;
+    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;
   }
   requestUpdate() {
@@ -1172,10 +1183,10 @@ class Text {
     return this;
   }
   update() {
-    const { paragraphs, boundingBox, renderBoundingBox } = this.measure();
+    const { paragraphs, boundingBox, glyphBox } = this.measure();
     this.paragraphs = paragraphs;
     this.boundingBox = boundingBox;
-    this.renderBoundingBox = renderBoundingBox;
+    this.glyphBox = glyphBox;
     return this;
   }
   render(options) {
@@ -1187,7 +1198,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

@@ -243,7 +243,7 @@ interface TextOptions {
     effects?: Partial<TextStyle>[];
 }
 type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
 };
 declare const defaultTextStyles: TextStyle;
 declare class Text {
@@ -255,7 +255,7 @@ declare class Text {
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;

package/dist/index.d.mts

@@ -243,7 +243,7 @@ interface TextOptions {
     effects?: Partial<TextStyle>[];
 }
 type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
 };
 declare const defaultTextStyles: TextStyle;
 declare class Text {
@@ -255,7 +255,7 @@ declare class Text {
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;

package/dist/index.d.ts

@@ -243,7 +243,7 @@ interface TextOptions {
     effects?: Partial<TextStyle>[];
 }
 type MeasureResult = MeasureDomResult & {
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
 };
 declare const defaultTextStyles: TextStyle;
 declare class Text {
@@ -255,7 +255,7 @@ declare class Text {
     computedStyle: TextStyle;
     paragraphs: Paragraph[];
     boundingBox: BoundingBox;
-    renderBoundingBox: BoundingBox;
+    glyphBox: BoundingBox;
     parser: Parser;
     measurer: Measurer;
     plugins: Map<string, Plugin>;