modern-canvas 0.7.11 → 0.7.13

package/dist/index.mjs

@@ -1944,10 +1944,23 @@ class Rect2 {
     switch (args.length) {
       case 0:
         break;
-      case 1:
-        position.set(args[0].position);
-        size.set(args[0].size);
+      case 1: {
+        const arg = args[0];
+        if (arg instanceof Rect2) {
+          position.set(arg.position);
+          size.set(arg.size);
+        } else {
+          const xx = arg.map((p) => p[0]);
+          const yy = arg.map((p) => p[1]);
+          const minX = Math.min(...xx);
+          const maxX = Math.max(...xx);
+          const minY = Math.min(...yy);
+          const maxY = Math.max(...yy);
+          position.set(minX, minY);
+          size.set(maxX - minX, maxY - minY);
+        }
         break;
+      }
       case 2:
         position.set(args[0]);
         size.set(args[1]);
@@ -1969,6 +1982,14 @@ class Rect2 {
     );
     return this;
   }
+  toMinmax() {
+    return {
+      minX: this.position.x,
+      minY: this.position.y,
+      maxX: this.end.x,
+      maxY: this.end.y
+    };
+  }
   toArray() {
     return [this.x, this.y, this.width, this.height];
   }
@@ -2135,6 +2156,30 @@ class Transform2D extends Matrix3 {
       b * x + d * y + ty
     ];
   }
+  decompose(pivot = { x: 0, y: 0 }, output = {
+    position: { x: 0, y: 0 },
+    scale: { x: 0, y: 0 },
+    skew: { x: 0, y: 0 },
+    rotation: 0
+  }) {
+    const { a, b, c, d, tx, ty } = this.toObject();
+    const skewX = -Math.atan2(-c, d);
+    const skewY = Math.atan2(b, a);
+    const delta = Math.abs(skewX + skewY);
+    if (delta < 1e-5 || Math.abs(PI_2 - delta) < 1e-5) {
+      output.rotation = skewY;
+      output.skew.x = output.skew.y = 0;
+    } else {
+      output.rotation = 0;
+      output.skew.x = skewX;
+      output.skew.y = skewY;
+    }
+    output.scale.x = Math.sqrt(a * a + b * b);
+    output.scale.y = Math.sqrt(c * c + d * d);
+    output.position.x = tx + (pivot.x * a + pivot.y * c);
+    output.position.y = ty + (pivot.x * b + pivot.y * d);
+    return output;
+  }
   inverse() {
     return this.clone().invert();
   }
@@ -2143,7 +2188,17 @@ class Transform2D extends Matrix3 {
     return a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0;
   }
   toObject() {
-    const [a, c, tx, b, d, ty, , , tz] = this._array;
+    const [
+      a,
+      c,
+      tx,
+      b,
+      d,
+      ty,
+      ,
+      ,
+      tz
+    ] = this._array;
     return { a, c, tx, b, d, ty, tz };
   }
 }
@@ -6885,10 +6940,10 @@ __decorateClass$O([
   property()
 ], Effect.prototype, "effectMode", 2);
 __decorateClass$O([
-  property()
+  property({ fallback: "" })
 ], Effect.prototype, "glsl", 2);
 __decorateClass$O([
-  property()
+  property({ fallback: "" })
 ], Effect.prototype, "glslSrc", 2);
 Effect = __decorateClass$O([
   customNode("Effect")
@@ -7164,25 +7219,27 @@ let Node2D = class extends CanvasItem {
     const parent = this.getParent();
     if (parent?.globalTransform) {
       this._parentTransformDirtyId = parent.globalTransform.dirtyId;
-      this.globalScale.set(parent.globalScale.x * this.scale.x, parent.globalScale.y * this.scale.y);
+      this.globalPosition.set(
+        parent.globalPosition.x + this.position.x,
+        parent.globalPosition.y + this.position.y
+      );
+      this.globalScale.set(
+        parent.globalScale.x * this.scale.x,
+        parent.globalScale.y * this.scale.y
+      );
+      this.globalSkew.set(
+        parent.globalSkew.x * this.skew.x,
+        parent.globalSkew.y * this.skew.y
+      );
       this.globalRotation = parent.globalRotation + this.rotation;
       parent.globalTransform.multiply(this.transform, this.globalTransform);
     } else {
+      this.globalPosition.copy(this.position);
       this.globalScale.copy(this.scale);
+      this.globalSkew.copy(this.skew);
       this.globalRotation = this.rotation;
       this.globalTransform.copy(this.transform);
     }
-    const [
-      a,
-      c,
-      tx,
-      b,
-      d,
-      ty
-    ] = this.globalTransform.toArray();
-    this.globalPosition.set(tx, ty);
-    this.globalSkew.x = Math.atan2(c, a) - this.globalRotation;
-    this.globalSkew.y = Math.atan2(b, d) - this.globalRotation;
     this.requestRelayout();
   }
   _transformVertices(vertices, vertTransform) {
@@ -7283,7 +7340,7 @@ let Camera2D = class extends Node2D {
       }
     } else if (key === "pointerdown") {
       const e = event;
-      if (!this.grabbing && this.spaceKey) {
+      if (!this.grabbing && (this.spaceKey || e.button === 1)) {
         this.grabbing = true;
         e.cursor = "grabbing";
         this._screenOffset = { x: e.screenX, y: e.screenY };
@@ -7301,7 +7358,11 @@ let Camera2D = class extends Node2D {
       const e = event;
       if (this.grabbing) {
         this.grabbing = false;
-        e.cursor = "grab";
+        if (this.spaceKey) {
+          e.cursor = "grab";
+        } else {
+          e.cursor = "default";
+        }
       }
     } else if (key === "wheel") {
       this._onWheel(event);
@@ -7565,28 +7626,28 @@ void main(void) {
 }`
 }));
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "saturation", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "contrast", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "brightness", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "red", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "green", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "blue", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "alpha", 2);
 __decorateClass$H([
-  property()
+  property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "gamma", 2);
 ColorAdjustEffect = __decorateClass$H([
   customNode("ColorAdjustEffect")
@@ -7772,10 +7833,10 @@ void main(void) {
 }`
 }));
 __decorateClass$F([
-  property()
+  property({ default: () => [] })
 ], ColorOverlayEffect.prototype, "colors", 2);
 __decorateClass$F([
-  property()
+  property({ fallback: 0.5 })
 ], ColorOverlayEffect.prototype, "alpha", 2);
 ColorOverlayEffect = __decorateClass$F([
   customNode("ColorOverlayEffect")
@@ -7857,10 +7918,10 @@ void main(void) {
 }`
 }));
 __decorateClass$E([
-  property()
+  property({ default: () => [] })
 ], ColorRemoveEffect.prototype, "colors", 2);
 __decorateClass$E([
-  property()
+  property({ fallback: 0.5 })
 ], ColorRemoveEffect.prototype, "epsilon", 2);
 ColorRemoveEffect = __decorateClass$E([
   customNode("ColorRemoveEffect")
@@ -7964,10 +8025,10 @@ void main(void) {
 }`
 }));
 __decorateClass$D([
-  property()
+  property({ default: () => [] })
 ], ColorReplaceEffect.prototype, "colors", 2);
 __decorateClass$D([
-  property()
+  property({ fallback: 0.05 })
 ], ColorReplaceEffect.prototype, "epsilon", 2);
 ColorReplaceEffect = __decorateClass$D([
   customNode("ColorReplaceEffect")
@@ -8088,10 +8149,10 @@ void main(void) {
   frag: frag$2
 }));
 __decorateClass$C([
-  property({ default: 4 })
+  property({ fallback: 4 })
 ], GaussianBlurEffect.prototype, "strength", 2);
 __decorateClass$C([
-  property({ default: 3 })
+  property({ fallback: 3 })
 ], GaussianBlurEffect.prototype, "quality", 2);
 GaussianBlurEffect = __decorateClass$C([
   customNode("GaussianBlurEffect")
@@ -8170,19 +8231,19 @@ void main(void) {
 }`
 }));
 __decorateClass$B([
-  property()
+  property({ fallback: "#000000FF" })
 ], DropShadowEffect.prototype, "color", 2);
 __decorateClass$B([
-  property()
+  property({ fallback: 4 })
 ], DropShadowEffect.prototype, "blur", 2);
 __decorateClass$B([
-  property()
+  property({ fallback: 4 })
 ], DropShadowEffect.prototype, "offsetX", 2);
 __decorateClass$B([
-  property()
+  property({ fallback: 4 })
 ], DropShadowEffect.prototype, "offsetY", 2);
 __decorateClass$B([
-  property()
+  property({ fallback: false })
 ], DropShadowEffect.prototype, "shadowOnly", 2);
 DropShadowEffect = __decorateClass$B([
   customNode("DropShadowEffect")
@@ -8242,7 +8303,7 @@ void main(void) {
 }`
 }));
 __decorateClass$A([
-  property()
+  property({ fallback: 5 })
 ], EmbossEffect.prototype, "strength", 2);
 EmbossEffect = __decorateClass$A([
   customNode("EmbossEffect")
@@ -8431,31 +8492,31 @@ void main(void) {
 }`
 }));
 __decorateClass$z([
-  property()
+  property({ fallback: 10 })
 ], GlitchEffect.prototype, "slices", 2);
 __decorateClass$z([
-  property()
+  property({ fallback: 512 })
 ], GlitchEffect.prototype, "sampleSize", 2);
 __decorateClass$z([
-  property()
+  property({ fallback: 100 })
 ], GlitchEffect.prototype, "offset", 2);
 __decorateClass$z([
-  property()
+  property({ fallback: 0 })
 ], GlitchEffect.prototype, "direction", 2);
 __decorateClass$z([
-  property()
+  property({ fallback: 2 })
 ], GlitchEffect.prototype, "fillMode", 2);
 __decorateClass$z([
-  property()
+  property({ fallback: 0 })
 ], GlitchEffect.prototype, "seed", 2);
 __decorateClass$z([
-  property()
+  property({ default: () => [2, 2] })
 ], GlitchEffect.prototype, "red", 2);
 __decorateClass$z([
-  property()
+  property({ default: () => [-10, 4] })
 ], GlitchEffect.prototype, "green", 2);
 __decorateClass$z([
-  property()
+  property({ default: () => [10, -4] })
 ], GlitchEffect.prototype, "blue", 2);
 GlitchEffect = __decorateClass$z([
   customNode("GlitchEffect")
@@ -8648,25 +8709,25 @@ void main(void) {
 }`
 }));
 __decorateClass$y([
-  property()
+  property({ fallback: 0 })
 ], GodrayEffect.prototype, "time", 2);
 __decorateClass$y([
-  property()
+  property({ fallback: 30 })
 ], GodrayEffect.prototype, "angle", 2);
 __decorateClass$y([
-  property()
+  property({ fallback: 0.5 })
 ], GodrayEffect.prototype, "gain", 2);
 __decorateClass$y([
-  property()
+  property({ fallback: 2.5 })
 ], GodrayEffect.prototype, "lacunarity", 2);
 __decorateClass$y([
-  property()
+  property({ fallback: true })
 ], GodrayEffect.prototype, "parallel", 2);
 __decorateClass$y([
-  property()
+  property({ default: () => [0, 0] })
 ], GodrayEffect.prototype, "center", 2);
 __decorateClass$y([
-  property()
+  property({ fallback: 1 })
 ], GodrayEffect.prototype, "alpha", 2);
 GodrayEffect = __decorateClass$y([
   customNode("GodrayEffect")
@@ -8770,13 +8831,13 @@ void main() {
   }
 };
 __decorateClass$x([
-  property()
+  property({ fallback: 4 })
 ], KawaseBlurEffect.prototype, "strength", 2);
 __decorateClass$x([
-  property()
+  property({ fallback: 3 })
 ], KawaseBlurEffect.prototype, "quality", 2);
 __decorateClass$x([
-  property()
+  property({ default: () => [1, 1] })
 ], KawaseBlurEffect.prototype, "pixelSize", 2);
 KawaseBlurEffect = __decorateClass$x([
   customNode("KawaseBlurEffect")
@@ -8882,7 +8943,7 @@ __decorateClass$w([
   property({ protected: true })
 ], MaskEffect.prototype, "texture", 2);
 __decorateClass$w([
-  property({ default: "" })
+  property({ fallback: "" })
 ], MaskEffect.prototype, "src", 2);
 MaskEffect = __decorateClass$w([
   customNode("MaskEffect")
@@ -8984,25 +9045,25 @@ void main() {
 __publicField$7(OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(OutlineEffect, "MAX_SAMPLES", 100);
 __decorateClass$v([
-  property()
+  property({ fallback: "#000000ff" })
 ], OutlineEffect.prototype, "color", 2);
 __decorateClass$v([
-  property()
+  property({ fallback: 1 })
 ], OutlineEffect.prototype, "width", 2);
 __decorateClass$v([
-  property()
+  property({ fallback: "solid" })
 ], OutlineEffect.prototype, "style", 2);
 __decorateClass$v([
   property()
 ], OutlineEffect.prototype, "image", 2);
 __decorateClass$v([
-  property()
+  property({ fallback: 1 })
 ], OutlineEffect.prototype, "opacity", 2);
 __decorateClass$v([
-  property()
+  property({ fallback: 0.1 })
 ], OutlineEffect.prototype, "quality", 2);
 __decorateClass$v([
-  property()
+  property({ fallback: false })
 ], OutlineEffect.prototype, "knockout", 2);
 OutlineEffect = __decorateClass$v([
   customNode("OutlineEffect")
@@ -9073,7 +9134,7 @@ void main(void) {
 }`
 }));
 __decorateClass$u([
-  property()
+  property({ fallback: 10 })
 ], PixelateEffect.prototype, "strength", 2);
 PixelateEffect = __decorateClass$u([
   customNode("PixelateEffect")
@@ -9204,13 +9265,13 @@ __decorateClass$t([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
 __decorateClass$t([
-  property()
+  property({ fallback: 20 })
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
 __decorateClass$t([
-  property()
+  property({ fallback: -1 })
 ], ZoomBlurEffect.prototype, "radius", 2);
 __decorateClass$t([
-  property()
+  property({ fallback: 0.1 })
 ], ZoomBlurEffect.prototype, "strength", 2);
 ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
@@ -9952,36 +10013,67 @@ let BaseElement2D = class extends Node2D {
     this._updateOverflow();
   }
   getRect() {
-    const { width: w, height: h } = this.size;
+    return this.getGlobalAabb();
+  }
+  _getPointArray() {
+    const { width, height } = this.size;
     const x1 = 0;
     const y1 = 0;
-    const x2 = x1 + w;
-    const y2 = y1 + h;
-    const [a, c, tx, b, d, ty] = this.globalTransform.toArray();
-    const points = [
+    const x2 = x1 + width;
+    const y2 = y1 + height;
+    return [
       [x1, y1],
       [x1, y2],
       [x2, y1],
       [x2, y2]
-    ].map((p) => {
-      return [
-        a * p[0] + c * p[1] + tx,
-        b * p[0] + d * p[1] + ty
-      ];
-    });
-    const xx = points.map((p) => p[0]);
-    const yy = points.map((p) => p[1]);
-    const minX = Math.min(...xx);
-    const maxX = Math.max(...xx);
-    const minY = Math.min(...yy);
-    const maxY = Math.max(...yy);
+    ];
+  }
+  getAabb() {
     return new Rect2(
-      minX,
-      minY,
-      maxX - minX,
-      maxY - minY
+      this._getPointArray().map((p) => {
+        return this.transform.applyToPoint(p[0], p[1]);
+      })
+    );
+  }
+  getGlobalAabb() {
+    return new Rect2(
+      this._getPointArray().map((p) => {
+        return this.globalTransform.applyToPoint(p[0], p[1]);
+      })
     );
   }
+  getObb() {
+    const origin = this.getTransformOrigin();
+    const _origin = this.transform.applyToPoint(origin.x, origin.y);
+    const offset = [_origin[0] - origin.x, _origin[1] - origin.y];
+    return {
+      rect: new Rect2(
+        this._getPointArray().map((p) => {
+          return [
+            p[0] + offset[0],
+            p[1] + offset[1]
+          ];
+        })
+      ),
+      rotation: this.rotation
+    };
+  }
+  getGlobalObb() {
+    const origin = this.getTransformOrigin();
+    const _origin = this.globalTransform.applyToPoint(origin.x, origin.y);
+    const offset = [_origin[0] - origin.x, _origin[1] - origin.y];
+    return {
+      rect: new Rect2(
+        this._getPointArray().map((p) => {
+          return [
+            p[0] + offset[0],
+            p[1] + offset[1]
+          ];
+        })
+      ),
+      rotation: this.globalRotation
+    };
+  }
   // protected _rectsOverlap(r1: any, r2: any): boolean {
   //   return (
   //     r1.x < r2.x + r2.width

package/package.json

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