modern-canvas 0.6.7 → 0.6.9

package/dist/index.cjs

@@ -2078,7 +2078,7 @@ class Vector3 extends Vector {
 }
 
 var __defProp$Q = Object.defineProperty;
-var __decorateClass$X = (decorators, target, key, kind) => {
+var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -2126,10 +2126,10 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$X([
+__decorateClass$Y([
   modernIdoc.property({ fallback: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$X([
+__decorateClass$Y([
   modernIdoc.property({ fallback: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4432,7 +4432,7 @@ class Geometry extends Resource {
 }
 
 var __defProp$P = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -4481,15 +4481,15 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ protected: true, default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$W([
+__decorateClass$X([
   modernIdoc.property({ protected: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
 var __defProp$O = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __decorateClass$W = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -4538,15 +4538,15 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ protected: true, default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$V([
+__decorateClass$W([
   modernIdoc.property({ protected: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
 var __defProp$N = Object.defineProperty;
-var __decorateClass$U = (decorators, target, key, kind) => {
+var __decorateClass$V = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -4585,25 +4585,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property({ protected: true })
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property({ fallback: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property({ fallback: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property({ fallback: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$U([
+__decorateClass$V([
   modernIdoc.property()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4848,7 +4848,7 @@ class UvGeometry extends Geometry {
 }
 
 var __defProp$M = Object.defineProperty;
-var __decorateClass$T = (decorators, target, key, kind) => {
+var __decorateClass$U = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -4979,22 +4979,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ protected: true })
 ], Texture2D.prototype, "source");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ fallback: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ fallback: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ fallback: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ fallback: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$T([
+__decorateClass$U([
   modernIdoc.property({ fallback: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5025,7 +5025,7 @@ class AnimatedTexture extends Resource {
 }
 
 var __defProp$L = Object.defineProperty;
-var __decorateClass$S = (decorators, target, key, kind) => {
+var __decorateClass$T = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -5049,11 +5049,26 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$S([
-  modernIdoc.property()
+__decorateClass$T([
+  modernIdoc.property({ fallback: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
 class ColorTexture extends Texture2D {
+  static _cached = /* @__PURE__ */ new Map();
+  static get(value) {
+    const color = new Color(value);
+    const hex = color.toHex();
+    let result = this._cached.get(hex);
+    if (!result) {
+      result = new Texture2D({
+        width: 1,
+        height: 1,
+        pixels: new Uint8Array([color.r8, color.g8, color.b8, color.a8])
+      });
+      this._cached.set(hex, result);
+    }
+    return result;
+  }
   constructor(value) {
     const color = new Color(value);
     super({
@@ -5255,7 +5270,7 @@ class PixelsTexture extends Texture2D {
 }
 
 var __defProp$K = Object.defineProperty;
-var __decorateClass$R = (decorators, target, key, kind) => {
+var __decorateClass$S = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -5504,10 +5519,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ protected: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$R([
+__decorateClass$S([
   modernIdoc.property({ protected: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5567,9 +5582,9 @@ class Children extends Array {
 }
 
 var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$R = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -5670,6 +5685,9 @@ exports.Node = class Node extends CoreObject {
     }
     return this;
   }
+  log(...args) {
+    this._tree?.log(...args);
+  }
   /** Parent */
   _parent;
   get parent() {
@@ -5758,9 +5776,6 @@ exports.Node = class Node extends CoreObject {
         return false;
     }
   }
-  _update(changed) {
-    super._update(changed);
-  }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
   }
@@ -5848,7 +5863,10 @@ exports.Node = class Node extends CoreObject {
     }
   }
   input(event, key) {
-    this._children.internal.forEach((child) => child.input(event, key));
+    const array = this._children.internal;
+    for (let i = array.length - 1; i >= 0; i--) {
+      array[i].input(event, key);
+    }
     this._input(event, key);
   }
   getIndex() {
@@ -6052,35 +6070,35 @@ exports.Node = class Node extends CoreObject {
     return node;
   }
 };
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: modernIdoc.idGenerator() })
 ], exports.Node.prototype, "id", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: modernIdoc.idGenerator() })
 ], exports.Node.prototype, "name", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ fallback: "default" })
 ], exports.Node.prototype, "internalMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   modernIdoc.property({ protected: true })
 ], exports.Node.prototype, "mask", 2);
-exports.Node = __decorateClass$Q([
+exports.Node = __decorateClass$R([
   customNode("Node")
 ], exports.Node);
 
 var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6144,26 +6162,26 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ fallback: false })
 ], exports.TimelineNode.prototype, "paused", 2);
-__decorateClass$P([
+__decorateClass$Q([
   modernIdoc.property({ protected: true, fallback: false })
 ], exports.TimelineNode.prototype, "insideTimeRange", 2);
-exports.TimelineNode = __decorateClass$P([
+exports.TimelineNode = __decorateClass$Q([
   customNode("TimelineNode")
 ], exports.TimelineNode);
 
 var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6305,26 +6323,26 @@ exports.Viewport = class Viewport extends exports.Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$O([
+__decorateClass$P([
   modernIdoc.property({ fallback: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$O([
+exports.Viewport = __decorateClass$P([
   customNode("Viewport")
 ], exports.Viewport);
 
 var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6570,27 +6588,27 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
 };
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property({ protected: true })
 ], exports.Effect.prototype, "material", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property()
 ], exports.Effect.prototype, "effectMode", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property()
 ], exports.Effect.prototype, "glsl", 2);
-__decorateClass$N([
+__decorateClass$O([
   modernIdoc.property()
 ], exports.Effect.prototype, "glslSrc", 2);
-exports.Effect = __decorateClass$N([
+exports.Effect = __decorateClass$O([
   customNode("Effect")
 ], exports.Effect);
 
 var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6654,39 +6672,39 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$M([
+__decorateClass$N([
   modernIdoc.property()
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
-exports.ColorAdjustEffect = __decorateClass$M([
+exports.ColorAdjustEffect = __decorateClass$N([
   customNode("ColorAdjustEffect")
 ], exports.ColorAdjustEffect);
 
 var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
 var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6770,18 +6788,18 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$L([
+__decorateClass$M([
   modernIdoc.property()
 ], exports.ColorFilterEffect.prototype, "filter", 2);
-exports.ColorFilterEffect = __decorateClass$L([
+exports.ColorFilterEffect = __decorateClass$M([
   customNode("ColorFilterEffect")
 ], exports.ColorFilterEffect);
 
 var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6861,21 +6879,21 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$K([
+__decorateClass$L([
   modernIdoc.property()
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$K([
+__decorateClass$L([
   modernIdoc.property()
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
-exports.ColorOverlayEffect = __decorateClass$K([
+exports.ColorOverlayEffect = __decorateClass$L([
   customNode("ColorOverlayEffect")
 ], exports.ColorOverlayEffect);
 
 var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -6946,21 +6964,21 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$J([
+__decorateClass$K([
   modernIdoc.property()
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$J([
+__decorateClass$K([
   modernIdoc.property()
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
-exports.ColorRemoveEffect = __decorateClass$J([
+exports.ColorRemoveEffect = __decorateClass$K([
   customNode("ColorRemoveEffect")
 ], exports.ColorRemoveEffect);
 
 var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7053,13 +7071,13 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$I([
+__decorateClass$J([
   modernIdoc.property()
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$I([
+__decorateClass$J([
   modernIdoc.property()
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
-exports.ColorReplaceEffect = __decorateClass$I([
+exports.ColorReplaceEffect = __decorateClass$J([
   customNode("ColorReplaceEffect")
 ], exports.ColorReplaceEffect);
 
@@ -7079,7 +7097,7 @@ class CanvasContext extends modernPath2d.Path2D {
     if (source instanceof Texture2D) {
       return source;
     } else {
-      return new ColorTexture(source);
+      return ColorTexture.get(source);
     }
   }
   stroke(options) {
@@ -7215,9 +7233,9 @@ class CanvasContext extends modernPath2d.Path2D {
 }
 
 var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7282,15 +7300,12 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   }
   requestRedraw() {
     this._redrawing = true;
-    this.requestUpdate();
   }
   requestRelayout() {
     this._relayouting = true;
-    this.requestUpdate();
   }
   requestRepaint() {
     this._repainting = true;
-    this.requestUpdate();
   }
   _updateGlobalVisible() {
     this._parentGlobalVisible = this.getParent()?.globalVisible;
@@ -7308,16 +7323,16 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     this.emit("draw");
   }
   _redraw() {
-    this._tree?.log(this.name, "drawing");
+    this.log(this.name, "drawing");
     this._draw();
     return this.context.toBatchables();
   }
   _relayout(batchables) {
-    this._tree?.log(this.name, "layouting");
+    this.log(this.name, "layouting");
     return batchables;
   }
   _repaint(batchables) {
-    this._tree?.log(this.name, "painting");
+    this.log(this.name, "painting");
     return batchables.map((batchable) => {
       return {
         ...batchable,
@@ -7329,22 +7344,14 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   _process(delta) {
     super._process(delta);
     const parent = this.getParent();
-    if (this._parentGlobalVisible !== parent?.globalVisible) {
-      this.requestUpdate();
-    }
-    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
-      this.requestUpdate();
-    }
-  }
-  _update(changed) {
-    super._update(changed);
-    const parent = this.getParent();
     if (this._parentGlobalVisible !== parent?.globalVisible) {
       this._updateGlobalVisible();
     }
     if (this._parentGlobalOpacity !== parent?.globalOpacity) {
       this._updateGlobalOpacity();
     }
+  }
+  _updateBatchables() {
     const redrawing = this._redrawing;
     let relayouting = this._relayouting;
     let repainting = this._repainting;
@@ -7373,6 +7380,7 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     }
   }
   _render(renderer) {
+    this._updateBatchables();
     this._batchables.forEach((batchable) => {
       batchable.texture?.upload(renderer);
       renderer.batch2D.render({
@@ -7383,19 +7391,19 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property()
 ], exports.CanvasItem.prototype, "modulate", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ protected: true, fallback: true })
 ], exports.CanvasItem.prototype, "visible", 2);
-__decorateClass$H([
+__decorateClass$I([
   modernIdoc.property({ protected: true, fallback: 1 })
 ], exports.CanvasItem.prototype, "opacity", 2);
-exports.CanvasItem = __decorateClass$H([
+exports.CanvasItem = __decorateClass$I([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
@@ -7426,9 +7434,9 @@ class RenderStack {
 }
 
 var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7477,24 +7485,24 @@ exports.Timeline = class Timeline extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$G([
+__decorateClass$H([
   modernIdoc.property({ fallback: 0 })
 ], exports.Timeline.prototype, "startTime", 2);
-__decorateClass$G([
+__decorateClass$H([
   modernIdoc.property({ fallback: 0 })
 ], exports.Timeline.prototype, "currentTime", 2);
-__decorateClass$G([
+__decorateClass$H([
   modernIdoc.property({ fallback: Number.MAX_SAFE_INTEGER })
 ], exports.Timeline.prototype, "endTime", 2);
-__decorateClass$G([
+__decorateClass$H([
   modernIdoc.property({ fallback: false })
 ], exports.Timeline.prototype, "loop", 2);
-exports.Timeline = __decorateClass$G([
+exports.Timeline = __decorateClass$H([
   customNode("Timeline")
 ], exports.Timeline);
 
 var __defProp$y = Object.defineProperty;
-var __decorateClass$F = (decorators, target, key, kind) => {
+var __decorateClass$G = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -7530,7 +7538,7 @@ class SceneTree extends MainLoop {
   }
   log(...args) {
     if (this.debug) {
-      console.log(`[modern-canvas]`, ...args);
+      console.log(`[modern-canvas][${performance.now().toFixed(4)}ms]`, ...args);
     }
   }
   _process(delta = 0) {
@@ -7573,19 +7581,19 @@ class SceneTree extends MainLoop {
     this.input.removeEventListeners();
   }
 }
-__decorateClass$F([
+__decorateClass$G([
   modernIdoc.property({ fallback: false })
 ], SceneTree.prototype, "processPaused");
-__decorateClass$F([
+__decorateClass$G([
   modernIdoc.property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$F([
+__decorateClass$G([
   modernIdoc.property({ protected: true, fallback: false })
 ], SceneTree.prototype, "debug");
 
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -7597,7 +7605,7 @@ exports.Transition = class Transition extends exports.Effect {
     this.setProperties(properties).append(children);
   }
 };
-exports.Transition = __decorateClass$E([
+exports.Transition = __decorateClass$F([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7606,10 +7614,10 @@ exports.Transition = __decorateClass$E([
 ], exports.Transition);
 
 var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
 var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7719,21 +7727,21 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$D([
+__decorateClass$E([
   modernIdoc.property({ default: 4 })
 ], exports.GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$D([
+__decorateClass$E([
   modernIdoc.property({ default: 3 })
 ], exports.GaussianBlurEffect.prototype, "quality", 2);
-exports.GaussianBlurEffect = __decorateClass$D([
+exports.GaussianBlurEffect = __decorateClass$E([
   customNode("GaussianBlurEffect")
 ], exports.GaussianBlurEffect);
 
 var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
 var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7801,30 +7809,30 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property()
 ], exports.DropShadowEffect.prototype, "color", 2);
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property()
 ], exports.DropShadowEffect.prototype, "blur", 2);
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property()
 ], exports.DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property()
 ], exports.DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$C([
+__decorateClass$D([
   modernIdoc.property()
 ], exports.DropShadowEffect.prototype, "shadowOnly", 2);
-exports.DropShadowEffect = __decorateClass$C([
+exports.DropShadowEffect = __decorateClass$D([
   customNode("DropShadowEffect")
 ], exports.DropShadowEffect);
 
 var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -7873,18 +7881,18 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$B([
+__decorateClass$C([
   modernIdoc.property()
 ], exports.EmbossEffect.prototype, "strength", 2);
-exports.EmbossEffect = __decorateClass$B([
+exports.EmbossEffect = __decorateClass$C([
   customNode("EmbossEffect")
 ], exports.EmbossEffect);
 
 var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8062,42 +8070,42 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "slices", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "offset", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "direction", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "seed", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "red", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "green", 2);
-__decorateClass$A([
+__decorateClass$B([
   modernIdoc.property()
 ], exports.GlitchEffect.prototype, "blue", 2);
-exports.GlitchEffect = __decorateClass$A([
+exports.GlitchEffect = __decorateClass$B([
   customNode("GlitchEffect")
 ], exports.GlitchEffect);
 
 var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
 var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8279,35 +8287,35 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "time", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "angle", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "gain", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "parallel", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "center", 2);
-__decorateClass$z([
+__decorateClass$A([
   modernIdoc.property()
 ], exports.GodrayEffect.prototype, "alpha", 2);
-exports.GodrayEffect = __decorateClass$z([
+exports.GodrayEffect = __decorateClass$A([
   customNode("GodrayEffect")
 ], exports.GodrayEffect);
 
 var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8401,24 +8409,24 @@ void main() {
     });
   }
 };
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property()
 ], exports.KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property()
 ], exports.KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$y([
+__decorateClass$z([
   modernIdoc.property()
 ], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
-exports.KawaseBlurEffect = __decorateClass$y([
+exports.KawaseBlurEffect = __decorateClass$z([
   customNode("KawaseBlurEffect")
 ], exports.KawaseBlurEffect);
 
 var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
 var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8510,21 +8518,21 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$x([
+__decorateClass$y([
   modernIdoc.property({ protected: true })
 ], exports.MaskEffect.prototype, "texture", 2);
-__decorateClass$x([
+__decorateClass$y([
   modernIdoc.property({ default: "" })
 ], exports.MaskEffect.prototype, "src", 2);
-exports.MaskEffect = __decorateClass$x([
+exports.MaskEffect = __decorateClass$y([
   customNode("MaskEffect")
 ], exports.MaskEffect);
 
 var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8615,36 +8623,36 @@ void main() {
 };
 __publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "color", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "width", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "style", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "image", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "opacity", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "quality", 2);
-__decorateClass$w([
+__decorateClass$x([
   modernIdoc.property()
 ], exports.OutlineEffect.prototype, "knockout", 2);
-exports.OutlineEffect = __decorateClass$w([
+exports.OutlineEffect = __decorateClass$x([
   customNode("OutlineEffect")
 ], exports.OutlineEffect);
 
 var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
 var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8704,18 +8712,18 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$v([
+__decorateClass$w([
   modernIdoc.property()
 ], exports.PixelateEffect.prototype, "strength", 2);
-exports.PixelateEffect = __decorateClass$v([
+exports.PixelateEffect = __decorateClass$w([
   customNode("PixelateEffect")
 ], exports.PixelateEffect);
 
 var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -8832,24 +8840,24 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$u([
+__decorateClass$v([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$u([
+__decorateClass$v([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$u([
+__decorateClass$v([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$u([
+__decorateClass$v([
   modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
-exports.ZoomBlurEffect = __decorateClass$u([
+exports.ZoomBlurEffect = __decorateClass$v([
   customNode("ZoomBlurEffect")
 ], exports.ZoomBlurEffect);
 
 var __defProp$n = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -8962,42 +8970,42 @@ class BaseElement2DFill extends CoreObject {
     });
   }
 }
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DFill.prototype, "enabled");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "color");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "image");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "linearGradient");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "radialGradient");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "cropRect");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "stretchRect");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "dpi");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$t([
+__decorateClass$u([
   modernIdoc.property()
 ], BaseElement2DFill.prototype, "opacity");
 
 var __defProp$m = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __decorateClass$t = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9012,12 +9020,12 @@ class BaseElement2DBackground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$s([
+__decorateClass$t([
   modernIdoc.property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
 var __defProp$l = Object.defineProperty;
-var __decorateClass$r = (decorators, target, key, kind) => {
+var __decorateClass$s = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9032,12 +9040,12 @@ class BaseElement2DForeground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$r([
+__decorateClass$s([
   modernIdoc.property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
 var __defProp$k = Object.defineProperty;
-var __decorateClass$q = (decorators, target, key, kind) => {
+var __decorateClass$r = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9075,18 +9083,18 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.stroke({ disableWrapMode });
   }
 }
-__decorateClass$q([
+__decorateClass$r([
   modernIdoc.property({ fallback: "#00000000" })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$q([
+__decorateClass$r([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$q([
+__decorateClass$r([
   modernIdoc.property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
 
 var __defProp$j = Object.defineProperty;
-var __decorateClass$p = (decorators, target, key, kind) => {
+var __decorateClass$q = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9131,24 +9139,24 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DShadow.prototype, "enabled");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: "#000000FF" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$p([
+__decorateClass$q([
   modernIdoc.property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
 var __defProp$i = Object.defineProperty;
-var __decorateClass$o = (decorators, target, key, kind) => {
+var __decorateClass$p = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9228,19 +9236,19 @@ class BaseElement2DShape extends CoreObject {
     }
   }
 }
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DShape.prototype, "enabled");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "preset");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "svg");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "viewBox");
-__decorateClass$o([
+__decorateClass$p([
   modernIdoc.property()
 ], BaseElement2DShape.prototype, "paths");
 
@@ -9257,7 +9265,7 @@ for (const key in defaultStyles$1) {
 }
 
 var __defProp$h = Object.defineProperty;
-var __decorateClass$n = (decorators, target, key, kind) => {
+var __decorateClass$o = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -9337,26 +9345,26 @@ class BaseElement2DText extends CoreObject {
     });
   }
 }
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ fallback: true })
 ], BaseElement2DText.prototype, "enabled");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ alias: "base.content", fallback: () => [] })
 ], BaseElement2DText.prototype, "content");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ alias: "base.effects" })
 ], BaseElement2DText.prototype, "effects");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ protected: true, alias: "base.measureDOM" })
 ], BaseElement2DText.prototype, "measureDOM");
-__decorateClass$n([
+__decorateClass$o([
   modernIdoc.property({ protected: true, alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
 var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -9446,8 +9454,9 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     return newVertices;
   }
   _relayout(batchables) {
+    batchables = super._relayout(batchables);
     this.updateGlobalTransform();
-    return super._relayout(batchables).map((batchable) => {
+    return batchables.map((batchable) => {
       return {
         ...batchable,
         vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
@@ -9462,19 +9471,19 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     }
   }
 };
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ protected: true, fallback: 0 })
 ], exports.Node2D.prototype, "rotation", 2);
-__decorateClass$m([
+__decorateClass$n([
   modernIdoc.property({ protected: true, fallback: 0 })
 ], exports.Node2D.prototype, "globalRotation", 2);
-exports.Node2D = __decorateClass$m([
+exports.Node2D = __decorateClass$n([
   customNode("Node2D")
 ], exports.Node2D);
 
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -9758,8 +9767,9 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     return this.style.pointerEvents !== "none";
   }
   input(event, key) {
-    for (let i = this._children.length - 1; i >= 0; i--) {
-      this._children[i].input(event, key);
+    const array = this._children.internal;
+    for (let i = array.length - 1; i >= 0; i--) {
+      array[i].input(event, key);
     }
     if (this.isVisibleInTree()) {
       this._input(event, key);
@@ -9808,7 +9818,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     });
   }
 };
-exports.BaseElement2D = __decorateClass$l([
+exports.BaseElement2D = __decorateClass$m([
   customNode("BaseElement2D")
 ], exports.BaseElement2D);
 
@@ -9828,9 +9838,9 @@ for (const key in defaultStyles) {
   modernIdoc.defineProperty(Element2DStyle, key, { fallback: defaultStyles[key] });
 }
 
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -9881,7 +9891,7 @@ exports.Element2D = class Element2D extends exports.BaseElement2D {
     }
   }
 };
-exports.Element2D = __decorateClass$k([
+exports.Element2D = __decorateClass$l([
   customNode("Element2D")
 ], exports.Element2D);
 
@@ -10133,9 +10143,9 @@ class FlexLayout {
   }
 }
 
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -10212,14 +10222,14 @@ exports.FlexElement2D = class FlexElement2D extends exports.BaseElement2D {
     }
   }
 };
-exports.FlexElement2D = __decorateClass$j([
+exports.FlexElement2D = __decorateClass$k([
   customNode("FlexElement2D")
 ], exports.FlexElement2D);
 
 var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -10359,19 +10369,19 @@ exports.Image2D = class Image2D extends exports.Element2D {
     });
   }
 };
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ protected: true })
 ], exports.Image2D.prototype, "texture", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ fallback: "" })
 ], exports.Image2D.prototype, "src", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property()
 ], exports.Image2D.prototype, "srcRect", 2);
-__decorateClass$i([
+__decorateClass$j([
   modernIdoc.property({ fallback: false })
 ], exports.Image2D.prototype, "gif", 2);
-exports.Image2D = __decorateClass$i([
+exports.Image2D = __decorateClass$j([
   customNode("Image2D")
 ], exports.Image2D);
 
@@ -10396,9 +10406,9 @@ class TextureRect2D extends exports.Element2D {
 }
 
 var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -10445,17 +10455,17 @@ exports.Lottie2D = class Lottie2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$h([
+__decorateClass$i([
   modernIdoc.property({ fallback: "" })
 ], exports.Lottie2D.prototype, "src", 2);
-exports.Lottie2D = __decorateClass$h([
+exports.Lottie2D = __decorateClass$i([
   customNode("Lottie2D")
 ], exports.Lottie2D);
 
 var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -10609,27 +10619,27 @@ exports.Text2D = class Text2D extends TextureRect2D {
     }
   }
 };
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ fallback: false })
 ], exports.Text2D.prototype, "split", 2);
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ alias: "base.content" })
 ], exports.Text2D.prototype, "content", 2);
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ alias: "base.effects" })
 ], exports.Text2D.prototype, "effects", 2);
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ protected: true, alias: "base.measureDOM" })
 ], exports.Text2D.prototype, "measureDOM", 2);
-__decorateClass$g([
+__decorateClass$h([
   modernIdoc.property({ protected: true, alias: "base.fonts" })
 ], exports.Text2D.prototype, "fonts", 2);
-exports.Text2D = __decorateClass$g([
+exports.Text2D = __decorateClass$h([
   customNode("Text2D")
 ], exports.Text2D);
 
 var __defProp$c = Object.defineProperty;
-var __decorateClass$f = (decorators, target, key, kind) => {
+var __decorateClass$g = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -10680,14 +10690,14 @@ class TransformRect2D extends exports.Element2D {
     this._drawEllipse(width, height / 2);
   }
 }
-__decorateClass$f([
+__decorateClass$g([
   modernIdoc.property({ fallback: 6 })
 ], TransformRect2D.prototype, "handleSize");
 
 var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -10744,17 +10754,17 @@ exports.Video2D = class Video2D extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$e([
+__decorateClass$f([
   modernIdoc.property({ fallback: "" })
 ], exports.Video2D.prototype, "src", 2);
-exports.Video2D = __decorateClass$e([
+exports.Video2D = __decorateClass$f([
   customNode("Video2D")
 ], exports.Video2D);
 
 var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -11077,19 +11087,19 @@ exports.Animation = class Animation extends exports.TimelineNode {
     });
   }
 };
-__decorateClass$d([
+__decorateClass$e([
   modernIdoc.property()
 ], exports.Animation.prototype, "effectMode", 2);
-__decorateClass$d([
+__decorateClass$e([
   modernIdoc.property()
 ], exports.Animation.prototype, "loop", 2);
-__decorateClass$d([
+__decorateClass$e([
   modernIdoc.property()
 ], exports.Animation.prototype, "keyframes", 2);
-__decorateClass$d([
+__decorateClass$e([
   modernIdoc.property()
 ], exports.Animation.prototype, "easing", 2);
-exports.Animation = __decorateClass$d([
+exports.Animation = __decorateClass$e([
   customNode("Animation", {
     renderMode: "disabled",
     processMode: "pausable",
@@ -11974,10 +11984,10 @@ class WebAudio extends AudioPipeline {
 }
 
 var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
 var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12188,7 +12198,7 @@ exports.Audio = class Audio extends exports.TimelineNode {
   }
 };
 __publicField$4(exports.Audio, "_soundPool", []);
-exports.Audio = __decorateClass$c([
+exports.Audio = __decorateClass$d([
   customNode("Audio")
 ], exports.Audio);
 
@@ -12197,9 +12207,9 @@ class AudioSpectrum extends exports.Node2D {
 }
 
 var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -12294,22 +12304,22 @@ exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
     }
   }
 };
-__decorateClass$b([
+__decorateClass$c([
   modernIdoc.property()
 ], exports.AudioWaveform.prototype, "src", 2);
-__decorateClass$b([
+__decorateClass$c([
   modernIdoc.property()
 ], exports.AudioWaveform.prototype, "gap", 2);
-__decorateClass$b([
+__decorateClass$c([
   modernIdoc.property()
 ], exports.AudioWaveform.prototype, "color", 2);
-exports.AudioWaveform = __decorateClass$b([
+exports.AudioWaveform = __decorateClass$c([
   customNode("AudioWaveform")
 ], exports.AudioWaveform);
 
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12356,14 +12366,14 @@ exports.Control = class Control extends exports.Element2D {
   _guiInput(event, key) {
   }
 };
-exports.Control = __decorateClass$a([
+exports.Control = __decorateClass$b([
   customNode("Control")
 ], exports.Control);
 
 var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -12390,35 +12400,35 @@ exports.Range = class Range extends exports.Control {
     }
   }
 };
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: false })
 ], exports.Range.prototype, "allowGreater", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: false })
 ], exports.Range.prototype, "allowLesser", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 1 })
 ], exports.Range.prototype, "page", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 0 })
 ], exports.Range.prototype, "minValue", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 100 })
 ], exports.Range.prototype, "maxValue", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 0.01 })
 ], exports.Range.prototype, "step", 2);
-__decorateClass$9([
+__decorateClass$a([
   modernIdoc.property({ fallback: 0 })
 ], exports.Range.prototype, "value", 2);
-exports.Range = __decorateClass$9([
+exports.Range = __decorateClass$a([
   customNode("Range")
 ], exports.Range);
 
 var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -12570,41 +12580,41 @@ exports.Ruler = class Ruler extends exports.Control {
     }
   }
 };
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 0 })
 ], exports.Ruler.prototype, "offsetX", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 0 })
 ], exports.Ruler.prototype, "offsetY", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 20 })
 ], exports.Ruler.prototype, "thickness", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 3 })
 ], exports.Ruler.prototype, "markHeight", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: "#b2b6bc" })
 ], exports.Ruler.prototype, "color", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: "#f9f9fa" })
 ], exports.Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: "#b2b6bc" })
 ], exports.Ruler.prototype, "markColor", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 300 })
 ], exports.Ruler.prototype, "gap", 2);
-__decorateClass$8([
+__decorateClass$9([
   modernIdoc.property({ fallback: 1 })
 ], exports.Ruler.prototype, "gapScale", 2);
-exports.Ruler = __decorateClass$8([
+exports.Ruler = __decorateClass$9([
   customNode("Ruler")
 ], exports.Ruler);
 
 var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -12667,16 +12677,16 @@ exports.ScrollBar = class ScrollBar extends exports.Range {
     return false;
   }
 };
-__decorateClass$7([
+__decorateClass$8([
   modernIdoc.property({ fallback: "vertical" })
 ], exports.ScrollBar.prototype, "direction", 2);
-exports.ScrollBar = __decorateClass$7([
+exports.ScrollBar = __decorateClass$8([
   customNode("ScrollBar")
 ], exports.ScrollBar);
 
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12688,15 +12698,15 @@ exports.XScrollBar = class XScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.XScrollBar = __decorateClass$6([
+exports.XScrollBar = __decorateClass$7([
   customNode("XScrollBar", {
     direction: "horizontal"
   })
 ], exports.XScrollBar);
 
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12708,16 +12718,16 @@ exports.YScrollBar = class YScrollBar extends exports.ScrollBar {
     this.setProperties(properties).append(children);
   }
 };
-exports.YScrollBar = __decorateClass$5([
+exports.YScrollBar = __decorateClass$6([
   customNode("YScrollBar", {
     direction: "vertical"
   })
 ], exports.YScrollBar);
 
 var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -12739,21 +12749,22 @@ exports.Scaler = class Scaler extends exports.Node {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "value":
+      case "translateY":
+      case "translateX":
+      case "scale":
       case "min":
       case "max": {
-        this.value = clamp(this.minValue, this.value, this.maxValue);
-        this._updateScale();
+        this.scale = clamp(this.minScale, this.scale, this.maxScale);
+        this._updateTarget();
         break;
       }
     }
   }
-  _updateScale() {
+  _updateTarget() {
     const target = this.target;
     if (target) {
-      target.style.scaleX = this.value;
-      target.style.scaleY = this.value;
-      this.emit("updateScale", this.value);
+      target.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
+      this.emit("updateScale", this.scale);
     }
   }
   _onWheel(e) {
@@ -12761,12 +12772,15 @@ exports.Scaler = class Scaler extends exports.Node {
     if (!target)
       return;
     e.preventDefault();
-    const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
-    if (!isTouchPad && e.ctrlKey) {
-      e.preventDefault();
-      let distance = e.deltaY / (e.ctrlKey ? 1 : 100);
-      distance *= -0.015;
-      this.value += distance;
+    if (e.ctrlKey) {
+      const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
+      if (!isTouchPad) {
+        e.preventDefault();
+        this.scale += e.deltaY * -0.015;
+      }
+    } else {
+      this.translateX -= e.deltaX;
+      this.translateY -= e.deltaY;
     }
   }
   _input(event, key) {
@@ -12778,16 +12792,22 @@ exports.Scaler = class Scaler extends exports.Node {
     }
   }
 };
-__decorateClass$4([
+__decorateClass$5([
+  modernIdoc.property({ default: 1 })
+], exports.Scaler.prototype, "translateX", 2);
+__decorateClass$5([
   modernIdoc.property({ default: 1 })
-], exports.Scaler.prototype, "value", 2);
-__decorateClass$4([
+], exports.Scaler.prototype, "translateY", 2);
+__decorateClass$5([
+  modernIdoc.property({ default: 1 })
+], exports.Scaler.prototype, "scale", 2);
+__decorateClass$5([
   modernIdoc.property({ default: 0.05 })
-], exports.Scaler.prototype, "minValue", 2);
-__decorateClass$4([
+], exports.Scaler.prototype, "minScale", 2);
+__decorateClass$5([
   modernIdoc.property({ default: 10 })
-], exports.Scaler.prototype, "maxValue", 2);
-exports.Scaler = __decorateClass$4([
+], exports.Scaler.prototype, "maxScale", 2);
+exports.Scaler = __decorateClass$5([
   customNode("Scaler", {
     processMode: "disabled",
     renderMode: "disabled"
@@ -12795,10 +12815,10 @@ exports.Scaler = __decorateClass$4([
 ], exports.Scaler);
 
 var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12886,15 +12906,15 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-exports.KawaseTransition = __decorateClass$3([
+exports.KawaseTransition = __decorateClass$4([
   customNode("KawaseTransition")
 ], exports.KawaseTransition);
 
 var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12939,15 +12959,15 @@ void main() {
   gl_FragColor = mix(src2Color, src1Color, mixPercent);
 }`
 }));
-exports.LeftEraseTransition = __decorateClass$2([
+exports.LeftEraseTransition = __decorateClass$3([
   customNode("LeftEraseTransition")
 ], exports.LeftEraseTransition);
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13046,15 +13066,15 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-exports.TiltShiftTransition = __decorateClass$1([
+exports.TiltShiftTransition = __decorateClass$2([
   customNode("TiltShiftTransition")
 ], exports.TiltShiftTransition);
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13140,7 +13160,7 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-exports.TwistTransition = __decorateClass([
+exports.TwistTransition = __decorateClass$1([
   customNode("TwistTransition")
 ], exports.TwistTransition);
 
@@ -13504,7 +13524,15 @@ class Assets {
 }
 const assets = new Assets().use(new FontLoader()).use(new GIFLoader()).use(new JSONLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
 
-class CanvasItemEditor extends exports.Control {
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+exports.CanvasItemEditor = class CanvasItemEditor extends exports.Control {
   _pointerStart;
   _pointerOffset;
   selected;
@@ -13530,6 +13558,7 @@ class CanvasItemEditor extends exports.Control {
     }
   });
   scaler = new exports.Scaler({
+    name: "Scaler",
     internalMode: "back"
   }).on("updateScale", (scale) => {
     this.ruler.gapScale = scale;
@@ -13537,12 +13566,14 @@ class CanvasItemEditor extends exports.Control {
     this._updateSelectionRect();
   });
   xScrollBar = new exports.XScrollBar({
+    name: "XScrollBar",
     internalMode: "back",
     style: {
       visibility: "hidden"
     }
   });
   yScrollBar = new exports.YScrollBar({
+    name: "yScrollBar",
     internalMode: "back",
     style: {
       visibility: "hidden"
@@ -13554,9 +13585,9 @@ class CanvasItemEditor extends exports.Control {
       width: 500,
       height: 500,
       backgroundColor: "#FFFFFFFF",
-      overflow: "hidden",
-      pointerEvents: "none",
-      boxShadow: "2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
+      // overflow: 'hidden',
+      pointerEvents: "none"
+      // boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)',
     }
   }, [
     this.scaler
@@ -13611,10 +13642,10 @@ class CanvasItemEditor extends exports.Control {
   }
   _onPointerdown(e) {
     let target = e.target;
-    if (target?.is(this)) {
+    if (target?.equal(this)) {
       target = void 0;
     }
-    if (target?.is(this.transformRect)) {
+    if (target?.equal(this.transformRect)) {
       target = this.selected;
     }
     this._pointerOffset = { x: e.offsetX, y: e.offsetY };
@@ -13630,22 +13661,22 @@ class CanvasItemEditor extends exports.Control {
   }
   _onPointermove(e) {
     let target = e.target;
-    if (target?.is(this)) {
+    if (target?.equal(this)) {
       target = void 0;
     }
-    if (target?.is(this.transformRect)) {
+    if (target?.equal(this.transformRect)) {
       target = this.selected;
     }
     const { selected, dragging, _pointerStart, _pointerOffset } = this;
-    if (selected && target?.is(selected)) {
+    if (selected && target?.equal(selected)) {
       this.hovered = void 0;
     } else {
       this.hovered = target;
     }
     const offset = _pointerOffset ? { x: e.offsetX - _pointerOffset.x, y: e.offsetY - _pointerOffset.y } : { x: 0, y: 0 };
     if (dragging && _pointerStart) {
-      dragging.style.left = _pointerStart.left + offset.x / this.scaler.value;
-      dragging.style.top = _pointerStart.top + offset.y / this.scaler.value;
+      dragging.style.left = _pointerStart.left + offset.x / this.scaler.scale;
+      dragging.style.top = _pointerStart.top + offset.y / this.scaler.scale;
       dragging.update();
     }
     this._updateHover();
@@ -13702,7 +13733,10 @@ class CanvasItemEditor extends exports.Control {
       this.xScrollBar.style.visibility = "hidden";
     }
   }
-}
+};
+exports.CanvasItemEditor = __decorateClass([
+  customNode("CanvasItemEditor")
+], exports.CanvasItemEditor);
 
 const defaultOptions = {
   alpha: true,
@@ -13944,7 +13978,6 @@ exports.BaseElement2DShape = BaseElement2DShape;
 exports.BaseElement2DStyle = BaseElement2DStyle;
 exports.BaseElement2DText = BaseElement2DText;
 exports.CanvasContext = CanvasContext;
-exports.CanvasItemEditor = CanvasItemEditor;
 exports.CanvasTexture = CanvasTexture;
 exports.Color = Color;
 exports.ColorMatrix = ColorMatrix;