modern-canvas 0.8.3 → 0.8.5

package/dist/index.mjs

@@ -9733,7 +9733,7 @@ class BaseElement2DShape extends CoreObject {
     }
     if (!viewBox) {
       const bbox = this._path2DSet.getBoundingBox();
-      viewBox = bbox ? [bbox.x, bbox.y, bbox.width, bbox.height] : [0, 0, 1, 1];
+      viewBox = bbox ? [bbox.x, bbox.y, bbox.width || 1, bbox.height || 1] : [0, 0, 1, 1];
     }
     const [x, y, w, h] = viewBox;
     this._path2DSet.paths.forEach((path) => {
@@ -9883,6 +9883,15 @@ class BaseElement2DText extends CoreObject {
       this.enabled && !/^\s*$/.test(this.base.toString())
     );
   }
+  _getVertTransform() {
+    const parent = this.parent;
+    if (parent.scale.x > 0 && parent.scale.y > 0) {
+      return void 0;
+    }
+    const scale = parent.scale.x * parent.scale.y;
+    const origin = parent.getTransformOrigin();
+    return new Transform2D().translate(-origin.x, -origin.y).scale(scale > 0 ? 1 : -1, 1).translate(origin.x, origin.y);
+  }
   draw() {
     const ctx = this.parent.context;
     this.base.update();
@@ -9900,11 +9909,13 @@ class BaseElement2DText extends CoreObject {
               ctx.strokeStyle = this._textures[0] ?? outline.color;
               ctx.lineCap = outline.lineCap;
               ctx.lineJoin = outline.lineJoin;
+              ctx.vertTransform = this._getVertTransform();
               ctx.stroke({ disableWrapMode });
             }
           } else {
             ctx.addPath(path);
             ctx.style = { ...path.style };
+            ctx.vertTransform = this._getVertTransform();
             ctx.stroke();
           }
         }
@@ -9917,13 +9928,13 @@ class BaseElement2DText extends CoreObject {
               ctx.style = { ...path.style };
               ctx.uvTransform = uvTransform;
               ctx.fillStyle = this._textures[1] ?? fill.color;
-              ctx.fill({
-                disableWrapMode
-              });
+              ctx.vertTransform = this._getVertTransform();
+              ctx.fill({ disableWrapMode });
             }
           } else {
             ctx.addPath(path);
             ctx.style = { ...path.style };
+            ctx.vertTransform = this._getVertTransform();
             ctx.fill();
           }
         }
@@ -10058,16 +10069,22 @@ let BaseElement2D = class extends Node2D {
     }
     return this;
   }
-  _updateStyleProperty(key, value, _oldValue, _declaration) {
+  _updateStyleProperty(key, value, oldValue, _declaration) {
     switch (key) {
       case "rotate":
         this.rotation = this.style.rotate * DEG_TO_RAD;
         break;
       case "scaleX":
         this.scale.x = this.style.scaleX;
+        if (this.text.canDraw() && (value ^ oldValue) < 0) {
+          this.requestRedraw();
+        }
         break;
       case "scaleY":
         this.scale.y = this.style.scaleY;
+        if (this.text.canDraw() && (value ^ oldValue) < 0) {
+          this.requestRedraw();
+        }
         break;
       case "skewX":
         this.skew.x = this.style.skewX;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",