modern-text 0.3.1 → 0.3.2

package/dist/index.mjs

@@ -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 BoundingBox());
     __publicField$3(this, "inlineBox", new 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 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,10 @@ class Text {
     __publicField(this, "needsUpdate", true);
     __publicField(this, "computedStyle", { ...defaultTextStyles });
     __publicField(this, "paragraphs", []);
-    __publicField(this, "boundingBox", new BoundingBox());
+    __publicField(this, "lineBox", new BoundingBox());
     __publicField(this, "glyphBox", new BoundingBox());
+    __publicField(this, "pathBox", new BoundingBox());
+    __publicField(this, "boundingBox", new BoundingBox());
     __publicField(this, "parser", new Parser(this));
     __publicField(this, "measurer", new Measurer(this));
     __publicField(this, "plugins", /* @__PURE__ */ new Map());
@@ -1132,22 +1136,33 @@ class Text {
     this.computedStyle = { ...defaultTextStyles, ...this.style };
     const old = {
       paragraphs: this.paragraphs,
-      boundingBox: this.boundingBox,
-      glyphBox: this.glyphBox
+      lineBox: this.lineBox,
+      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();
+    });
     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 = Vector2.MAX;
     const max = Vector2.MIN;
-    characters.forEach((c) => {
+    this.characters.forEach((c) => {
       if (!c.getGlyphMinMax(min, max)) {
         const { inlineBox } = c;
         const a = new Vector2(inlineBox.left, inlineBox.top);
@@ -1156,37 +1171,47 @@ class Text {
         max.max(a, b);
       }
     });
-    this.glyphBox = new 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 = BoundingBox.from(
+    this.glyphBox = new BoundingBox(
+      min.x,
+      min.y,
+      max.x - min.x,
+      max.y - min.y
+    );
+    return this;
+  }
+  updatePathBox() {
+    const plugins = [...this.plugins.values()];
+    this.pathBox = BoundingBox.from(
       this.glyphBox,
       ...plugins.map((plugin) => {
-        if (plugin.getBoundingBox) {
-          return plugin.getBoundingBox(this);
-        }
-        return getPathsBoundingBox(plugin.paths ?? []);
+        return plugin.getBoundingBox ? plugin.getBoundingBox(this) : 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, 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 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "packageManager": "pnpm@9.9.0",
   "description": "Measure and render text in a way that describes the DOM.",
   "author": "wxm",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "modern-font": "^0.2.1",
-    "modern-path2d": "^0.2.4"
+    "modern-path2d": "^0.2.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",