modern-text 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -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 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
@@ -979,7 +981,7 @@ function render() {
       return boxes.length ? 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 BoundingBox());
+    __publicField(this, "glyphBox", new BoundingBox());
+    __publicField(this, "pathBox", new BoundingBox());
     __publicField(this, "boundingBox", new BoundingBox());
-    __publicField(this, "renderBoundingBox", new 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 = 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);
@@ -1151,30 +1171,47 @@ class Text {
         max.max(a, b);
       }
     });
-    this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
-    this.renderBoundingBox = BoundingBox.from(
-      this.renderBoundingBox,
+    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.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 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-text",
   "type": "module",
-  "version": "0.3.0",
+  "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",