modern-canvas 0.7.12 → 0.7.14

package/dist/index.cjs

@@ -1763,7 +1763,17 @@ class Matrix3 extends Matrix {
     const t13 = n23 * n12 - n22 * n13;
     const det = n11 * t11 + n21 * t12 + n31 * t13;
     if (det === 0) {
-      return this.set([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+      return this.set([
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+      ]);
     }
     const detInv = 1 / det;
     return this.set([
@@ -1950,10 +1960,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.x);
+          const yy = arg.map((p) => p.y);
+          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]);
@@ -1975,6 +1998,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];
   }
@@ -2134,22 +2165,68 @@ class Transform2D extends Matrix3 {
     ]);
     return this;
   }
-  applyToPoint(x, y) {
+  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;
+  }
+  apply(pos, newPos) {
+    newPos = newPos || new Vector2();
     const { a, c, tx, b, d, ty } = this.toObject();
-    return [
-      a * x + c * y + tx,
-      b * x + d * y + ty
-    ];
+    const x = pos.x;
+    const y = pos.y;
+    newPos.x = a * x + c * y + tx;
+    newPos.y = b * x + d * y + ty;
+    return newPos;
   }
   inverse() {
     return this.clone().invert();
   }
+  applyInverse(pos, newPos) {
+    newPos = newPos || new Vector2();
+    const { a, b, c, d, tx, ty } = this.toObject();
+    const id = 1 / (a * d + c * -b);
+    const x = pos.x;
+    const y = pos.y;
+    newPos.x = d * id * x + -c * id * y + (ty * c - tx * d) * id;
+    newPos.y = a * id * y + -b * id * x + (-ty * a + tx * b) * id;
+    return newPos;
+  }
   isIdentity() {
     const { a, b, c, d, tx, ty } = this.toObject();
     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 };
   }
 }
@@ -5581,7 +5658,7 @@ class CanvasContext extends modernPath2d.Path2D {
   }
   buildUvs(start, vertices, uvs, texture, uvTransform) {
     if (texture) {
-      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
+      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.apply({ x, y }).toArray() : uvTransform;
       const w = texture.width;
       const h = texture.height;
       for (let len = vertices.length, i = start; i < len; i += 2) {
@@ -6488,7 +6565,7 @@ exports.Viewport = class Viewport extends exports.Node {
     this.projection.flipY(flipY);
   }
   projection = new Projection2D();
-  canvasTransform = new Transform2D();
+  worldTransform = new Transform2D();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new ViewportTexture(), needsUpload: false },
@@ -6603,7 +6680,7 @@ exports.Viewport = class Viewport extends exports.Node {
   render(renderer, next) {
     const oldViewport = this._tree?.getCurrentViewport();
     renderer.program.uniforms.projectionMatrix = this.projection.toArray(true);
-    renderer.program.uniforms.worldTransformMatrix = this.canvasTransform.toArray(true);
+    renderer.program.uniforms.worldTransformMatrix = this.worldTransform.toArray(true);
     this.activate(renderer);
     renderer.clear();
     super.render(renderer, next);
@@ -6618,6 +6695,12 @@ exports.Viewport = class Viewport extends exports.Node {
   getRect() {
     return new Rect2(this.x, this.y, this.width, this.height);
   }
+  toGlobal(worldPos, newPos) {
+    return this.worldTransform.applyInverse(worldPos, newPos);
+  }
+  toWorld(globalPos, newPos) {
+    return this.worldTransform.apply(globalPos, newPos);
+  }
 };
 __decorateClass$P([
   modernIdoc.property({ fallback: 0 })
@@ -6891,10 +6974,10 @@ __decorateClass$O([
   modernIdoc.property()
 ], exports.Effect.prototype, "effectMode", 2);
 __decorateClass$O([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "" })
 ], exports.Effect.prototype, "glsl", 2);
 __decorateClass$O([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "" })
 ], exports.Effect.prototype, "glslSrc", 2);
 exports.Effect = __decorateClass$O([
   customNode("Effect")
@@ -7170,25 +7253,27 @@ exports.Node2D = class Node2D extends exports.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) {
@@ -7228,6 +7313,12 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
       this.requestRelayout();
     }
   }
+  toLocal(globalPos, newPos) {
+    return this.globalTransform.applyInverse(globalPos, newPos);
+  }
+  toGlobal(localPos, newPos) {
+    return this.globalTransform.apply(localPos, newPos);
+  }
 };
 __decorateClass$J([
   modernIdoc.property({ protected: true, fallback: 0 })
@@ -7250,7 +7341,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
   return result;
 };
 exports.Camera2D = class Camera2D extends exports.Node2D {
-  zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
+  zoom = new Vector2(1, 1).on("update", () => this.updateWorldTransform());
   maxZoom = new Vector2(6, 6);
   minZoom = new Vector2(0.1, 0.1);
   _screenOffset = { x: 0, y: 0 };
@@ -7337,14 +7428,14 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
   }
   updateTransform() {
     super.updateTransform();
-    this.updateCanvasTransform();
+    this.updateWorldTransform();
   }
-  updateCanvasTransform() {
+  updateWorldTransform() {
     const viewport = this.getViewport();
     if (!viewport)
       return;
-    viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
-    this.emit("updateCanvasTransform");
+    viewport.worldTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
+    this.emit("updateWorldTransform");
   }
 };
 __decorateClass$I([
@@ -7575,28 +7666,28 @@ void main(void) {
 }`
 }));
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "red", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "green", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
 __decorateClass$H([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
 exports.ColorAdjustEffect = __decorateClass$H([
   customNode("ColorAdjustEffect")
@@ -7782,10 +7873,10 @@ void main(void) {
 }`
 }));
 __decorateClass$F([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [] })
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
 __decorateClass$F([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.5 })
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
 exports.ColorOverlayEffect = __decorateClass$F([
   customNode("ColorOverlayEffect")
@@ -7867,10 +7958,10 @@ void main(void) {
 }`
 }));
 __decorateClass$E([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [] })
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
 __decorateClass$E([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.5 })
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
 exports.ColorRemoveEffect = __decorateClass$E([
   customNode("ColorRemoveEffect")
@@ -7974,10 +8065,10 @@ void main(void) {
 }`
 }));
 __decorateClass$D([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [] })
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
 __decorateClass$D([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.05 })
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
 exports.ColorReplaceEffect = __decorateClass$D([
   customNode("ColorReplaceEffect")
@@ -8098,10 +8189,10 @@ void main(void) {
   frag: frag$2
 }));
 __decorateClass$C([
-  modernIdoc.property({ default: 4 })
+  modernIdoc.property({ fallback: 4 })
 ], exports.GaussianBlurEffect.prototype, "strength", 2);
 __decorateClass$C([
-  modernIdoc.property({ default: 3 })
+  modernIdoc.property({ fallback: 3 })
 ], exports.GaussianBlurEffect.prototype, "quality", 2);
 exports.GaussianBlurEffect = __decorateClass$C([
   customNode("GaussianBlurEffect")
@@ -8180,19 +8271,19 @@ void main(void) {
 }`
 }));
 __decorateClass$B([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "#000000FF" })
 ], exports.DropShadowEffect.prototype, "color", 2);
 __decorateClass$B([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "blur", 2);
 __decorateClass$B([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "offsetX", 2);
 __decorateClass$B([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 4 })
 ], exports.DropShadowEffect.prototype, "offsetY", 2);
 __decorateClass$B([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: false })
 ], exports.DropShadowEffect.prototype, "shadowOnly", 2);
 exports.DropShadowEffect = __decorateClass$B([
   customNode("DropShadowEffect")
@@ -8252,7 +8343,7 @@ void main(void) {
 }`
 }));
 __decorateClass$A([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 5 })
 ], exports.EmbossEffect.prototype, "strength", 2);
 exports.EmbossEffect = __decorateClass$A([
   customNode("EmbossEffect")
@@ -8441,31 +8532,31 @@ void main(void) {
 }`
 }));
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 10 })
 ], exports.GlitchEffect.prototype, "slices", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 512 })
 ], exports.GlitchEffect.prototype, "sampleSize", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 100 })
 ], exports.GlitchEffect.prototype, "offset", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0 })
 ], exports.GlitchEffect.prototype, "direction", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 2 })
 ], exports.GlitchEffect.prototype, "fillMode", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0 })
 ], exports.GlitchEffect.prototype, "seed", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [2, 2] })
 ], exports.GlitchEffect.prototype, "red", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [-10, 4] })
 ], exports.GlitchEffect.prototype, "green", 2);
 __decorateClass$z([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [10, -4] })
 ], exports.GlitchEffect.prototype, "blue", 2);
 exports.GlitchEffect = __decorateClass$z([
   customNode("GlitchEffect")
@@ -8658,25 +8749,25 @@ void main(void) {
 }`
 }));
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0 })
 ], exports.GodrayEffect.prototype, "time", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 30 })
 ], exports.GodrayEffect.prototype, "angle", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.5 })
 ], exports.GodrayEffect.prototype, "gain", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 2.5 })
 ], exports.GodrayEffect.prototype, "lacunarity", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: true })
 ], exports.GodrayEffect.prototype, "parallel", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [0, 0] })
 ], exports.GodrayEffect.prototype, "center", 2);
 __decorateClass$y([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.GodrayEffect.prototype, "alpha", 2);
 exports.GodrayEffect = __decorateClass$y([
   customNode("GodrayEffect")
@@ -8780,13 +8871,13 @@ void main() {
   }
 };
 __decorateClass$x([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 4 })
 ], exports.KawaseBlurEffect.prototype, "strength", 2);
 __decorateClass$x([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 3 })
 ], exports.KawaseBlurEffect.prototype, "quality", 2);
 __decorateClass$x([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [1, 1] })
 ], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
 exports.KawaseBlurEffect = __decorateClass$x([
   customNode("KawaseBlurEffect")
@@ -8892,7 +8983,7 @@ __decorateClass$w([
   modernIdoc.property({ protected: true })
 ], exports.MaskEffect.prototype, "texture", 2);
 __decorateClass$w([
-  modernIdoc.property({ default: "" })
+  modernIdoc.property({ fallback: "" })
 ], exports.MaskEffect.prototype, "src", 2);
 exports.MaskEffect = __decorateClass$w([
   customNode("MaskEffect")
@@ -8994,25 +9085,25 @@ void main() {
 __publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "#000000ff" })
 ], exports.OutlineEffect.prototype, "color", 2);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.OutlineEffect.prototype, "width", 2);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "solid" })
 ], exports.OutlineEffect.prototype, "style", 2);
 __decorateClass$v([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "image", 2);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 1 })
 ], exports.OutlineEffect.prototype, "opacity", 2);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.1 })
 ], exports.OutlineEffect.prototype, "quality", 2);
 __decorateClass$v([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: false })
 ], exports.OutlineEffect.prototype, "knockout", 2);
 exports.OutlineEffect = __decorateClass$v([
   customNode("OutlineEffect")
@@ -9083,7 +9174,7 @@ void main(void) {
 }`
 }));
 __decorateClass$u([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 10 })
 ], exports.PixelateEffect.prototype, "strength", 2);
 exports.PixelateEffect = __decorateClass$u([
   customNode("PixelateEffect")
@@ -9214,13 +9305,13 @@ __decorateClass$t([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
 __decorateClass$t([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 20 })
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
 __decorateClass$t([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: -1 })
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
 __decorateClass$t([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0.1 })
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
 exports.ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
@@ -9706,7 +9797,10 @@ class BaseElement2DText extends CoreObject {
         break;
     }
   }
-  _updateText() {
+  setContent(content) {
+    this.content = modernIdoc.normalizeTextContent(content);
+  }
+  measure() {
     this.base.style = {
       justifyContent: "center",
       alignItems: "center",
@@ -9714,12 +9808,6 @@ class BaseElement2DText extends CoreObject {
       ...this.parent.style.toJSON()
     };
     this.base.requestUpdate();
-  }
-  setContent(content) {
-    this.content = modernIdoc.normalizeTextContent(content);
-  }
-  measure() {
-    this._updateText();
     return this.base.measure();
   }
   updateMeasure() {
@@ -9962,36 +10050,63 @@ exports.BaseElement2D = class BaseElement2D extends exports.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 = [
-      [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);
+    const x2 = x1 + width;
+    const y2 = y1 + height;
+    return [
+      { x: x1, y: y1 },
+      { x: x1, y: y2 },
+      { x: x2, y: y1 },
+      { x: x2, y: y2 }
+    ];
+  }
+  getAabb() {
     return new Rect2(
-      minX,
-      minY,
-      maxX - minX,
-      maxY - minY
+      this._getPointArray().map((p) => {
+        return this.transform.apply(p);
+      })
+    );
+  }
+  getGlobalAabb() {
+    return new Rect2(
+      this._getPointArray().map((p) => {
+        return this.globalTransform.apply(p);
+      })
     );
   }
+  getObb() {
+    const origin = this.getTransformOrigin();
+    const _origin = this.transform.apply(origin).sub(origin);
+    return {
+      rect: new Rect2(
+        this._getPointArray().map((p) => {
+          p.x += _origin.x;
+          p.y += _origin.y;
+          return p;
+        })
+      ),
+      rotation: this.rotation
+    };
+  }
+  getGlobalObb() {
+    const origin = this.getTransformOrigin();
+    const _origin = this.globalTransform.apply(origin).sub(origin);
+    return {
+      rect: new Rect2(
+        this._getPointArray().map((p) => {
+          p.x += _origin.x;
+          p.y += _origin.y;
+          return p;
+        })
+      ),
+      rotation: this.globalRotation
+    };
+  }
   // protected _rectsOverlap(r1: any, r2: any): boolean {
   //   return (
   //     r1.x < r2.x + r2.width
@@ -10004,12 +10119,12 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   // override isVisibleInTree(): boolean {
   //   if (this._tree) {
   //     const root = this._tree.root
-  //     const camera = root.canvasTransform.inverse()
+  //     const camera = root.worldTransform.inverse()
   //     const { x, y, width, height } = root
-  //     const p1 = camera.applyToPoint(x, y)
-  //     const p2 = camera.applyToPoint(x + width, y)
-  //     const p3 = camera.applyToPoint(x + width, y + height)
-  //     const p4 = camera.applyToPoint(x, y + height)
+  //     const p1 = camera.apply(x, y)
+  //     const p2 = camera.apply(x + width, y)
+  //     const p3 = camera.apply(x + width, y + height)
+  //     const p4 = camera.apply(x, y + height)
   //     const pts = [p1, p2, p3, p4]
   //     const xs = pts.map(p => p[0])
   //     const ys = pts.map(p => p[1])
@@ -10099,9 +10214,9 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     }
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
-  _pointerInput(point, key) {
+  _positionInput(localPos, key) {
     const { width, height } = this.size;
-    return point.x >= 0 && point.x < width && point.y >= 0 && point.y < height;
+    return localPos.x >= 0 && localPos.x < width && localPos.y >= 0 && localPos.y < height;
   }
   _input(event, key) {
     switch (key) {
@@ -10109,14 +10224,15 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       case "pointermove":
       case "pointerup": {
         if (this.canPointerEvents()) {
-          let { screenX, screenY } = event;
+          const { screenX, screenY } = event;
           if (screenX && screenY) {
+            const pos = new Vector2(screenX, screenY);
             const viewport = this.getViewport();
             if (viewport) {
-              [screenX, screenY] = viewport.canvasTransform.inverse().applyToPoint(screenX, screenY);
+              viewport.toGlobal(pos, pos);
             }
-            [screenX, screenY] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
-            if (this._pointerInput({ x: screenX, y: screenY }, key)) {
+            this.toLocal(pos, pos);
+            if (this._positionInput(pos, key)) {
               if (!event.target) {
                 event.target = this;
               }