modern-canvas 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1918,6 +1918,12 @@ class Rect2 {
   get top() {
     return this.position.y;
   }
+  get right() {
+    return this.x + this.width;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
   get width() {
     return this.size.x;
   }
@@ -1958,6 +1964,9 @@ class Rect2 {
     );
     return this;
   }
+  toArray() {
+    return [this.x, this.y, this.width, this.height];
+  }
 }
 
 class Transform2D extends Matrix3 {
@@ -2189,13 +2198,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$I = Object.defineProperty;
-var __decorateClass$I = (decorators, target, key, kind) => {
+var __defProp$L = Object.defineProperty;
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$I(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2236,10 +2245,10 @@ class MainLoop extends CoreObject {
     }
   }
 }
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4383,13 +4392,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$H = Object.defineProperty;
-var __decorateClass$H = (decorators, target, key, kind) => {
+var __defProp$K = Object.defineProperty;
+var __decorateClass$K = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$H(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4433,20 +4442,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$H([
+__decorateClass$K([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$H([
+__decorateClass$K([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$G = Object.defineProperty;
-var __decorateClass$G = (decorators, target, key, kind) => {
+var __defProp$J = Object.defineProperty;
+var __decorateClass$J = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$G(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4490,20 +4499,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$G([
+__decorateClass$J([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$G([
+__decorateClass$J([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$F = Object.defineProperty;
-var __decorateClass$F = (decorators, target, key, kind) => {
+var __defProp$I = Object.defineProperty;
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$F(target, key, result);
+  if (result) __defProp$I(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4540,25 +4549,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$F([
+__decorateClass$I([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4808,13 +4817,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$E = Object.defineProperty;
-var __decorateClass$E = (decorators, target, key, kind) => {
+var __defProp$H = Object.defineProperty;
+var __decorateClass$H = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$E(target, key, result);
+  if (result) __defProp$H(target, key, result);
   return result;
 };
 const style2DFilterDefault = {
@@ -5027,64 +5036,64 @@ class CanvasItemStyle extends Resource {
     return m;
   }
 }
-__decorateClass$E([
+__decorateClass$H([
   property()
 ], CanvasItemStyle.prototype, "backgroundColor");
-__decorateClass$E([
+__decorateClass$H([
   property()
 ], CanvasItemStyle.prototype, "backgroundImage");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "" })
 ], CanvasItemStyle.prototype, "filter");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "inherit" })
 ], CanvasItemStyle.prototype, "direction");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "shadowColor");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "shadowOffsetX");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "shadowOffsetY");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "shadowBlur");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 1 })
 ], CanvasItemStyle.prototype, "opacity");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderWidth");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "borderRadius");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "borderColor");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "borderStyle");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineWidth");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0 })
 ], CanvasItemStyle.prototype, "outlineOffset");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "#000000" })
 ], CanvasItemStyle.prototype, "outlineColor");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "none" })
 ], CanvasItemStyle.prototype, "outlineStyle");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "visibility");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "visible" })
 ], CanvasItemStyle.prototype, "overflow");
-__decorateClass$E([
+__decorateClass$H([
   property({ default: "auto" })
 ], CanvasItemStyle.prototype, "pointerEvents");
 const transformStyle = getDefaultTransformStyle();
@@ -5096,13 +5105,13 @@ for (const key in textStyle) {
   defineProperty(CanvasItemStyle, key, { default: textStyle[key] });
 }
 
-var __defProp$D = Object.defineProperty;
-var __decorateClass$D = (decorators, target, key, kind) => {
+var __defProp$G = Object.defineProperty;
+var __decorateClass$G = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$D(target, key, result);
+  if (result) __defProp$G(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5228,32 +5237,32 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$D([
+__decorateClass$G([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$D([
+__decorateClass$G([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$D([
+__decorateClass$G([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$D([
+__decorateClass$G([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$D([
+__decorateClass$G([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$D([
+__decorateClass$G([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
-var __defProp$C = Object.defineProperty;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __defProp$F = Object.defineProperty;
+var __decorateClass$F = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$C(target, key, result);
+  if (result) __defProp$F(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5263,16 +5272,16 @@ class CanvasTexture extends Texture2D {
   _updateProperty(key, value, oldValue, declaration) {
     switch (key) {
       case "width":
-        this.source.width = value * this.pixelRatio;
+        this.source.width = Math.max(1, Math.ceil(value * this.pixelRatio));
         break;
       case "height":
-        this.source.height = value * this.pixelRatio;
+        this.source.height = Math.max(1, Math.ceil(value * this.pixelRatio));
         break;
     }
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$C([
+__decorateClass$F([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5430,13 +5439,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$E = Object.defineProperty;
+var __decorateClass$E = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$E(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5680,10 +5689,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$B([
+__decorateClass$E([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$B([
+__decorateClass$E([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5853,14 +5862,14 @@ class CanvasContext extends Path2D {
   }
 }
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let Node = class extends CoreObject {
@@ -5960,9 +5969,6 @@ let Node = class extends CoreObject {
   }
   /** Children */
   _children = [];
-  get children() {
-    return this.getChildren();
-  }
   get siblingIndex() {
     return this.getIndex();
   }
@@ -6227,17 +6233,17 @@ let Node = class extends CoreObject {
     return this;
   }
   removeChildren() {
-    this.children.forEach((child) => this.removeChild(child));
+    this.getChildren().forEach((child) => this.removeChild(child));
   }
   remove() {
     this._parent?.removeChild(this);
   }
   forEach(fn) {
-    this.children.forEach(fn);
+    this.getChildren().forEach(fn);
     return this;
   }
   deepForEach(fn) {
-    this.children.forEach((child) => {
+    this.getChildren().forEach((child) => {
       fn(child);
       child.deepForEach(fn);
     });
@@ -6274,7 +6280,7 @@ let Node = class extends CoreObject {
     return {
       tag: this.tag,
       props: super.toJSON(),
-      children: this.children.map((child) => child.toJSON())
+      children: this.getChildren().map((child) => child.toJSON())
     };
   }
   static parse(JSON) {
@@ -6288,33 +6294,33 @@ let Node = class extends CoreObject {
     return node;
   }
 };
-__decorateClass$A([
+__decorateClass$D([
   property()
 ], Node.prototype, "name", 2);
-__decorateClass$A([
+__decorateClass$D([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$A([
+__decorateClass$D([
   property({ default: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$A([
+__decorateClass$D([
   property({ default: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$A([
+__decorateClass$D([
   property({ default: "default" })
 ], Node.prototype, "internalMode", 2);
-Node = __decorateClass$A([
+Node = __decorateClass$D([
   customNode("Node")
 ], Node);
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6373,27 +6379,27 @@ let TimelineNode = class extends Node {
     super._process(delta);
   }
 };
-__decorateClass$z([
+__decorateClass$C([
   property({ default: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$z([
+__decorateClass$C([
   property({ default: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$z([
+__decorateClass$C([
   property({ default: false })
 ], TimelineNode.prototype, "paused", 2);
-TimelineNode = __decorateClass$z([
+TimelineNode = __decorateClass$C([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -6411,11 +6417,11 @@ let CanvasItem = class extends TimelineNode {
   }
   /** @internal */
   opacity = 1;
-  size = { width: 0, height: 0 };
+  visible = true;
   _parentOpacity;
+  _parentVisible;
   _modulate = new Color(4294967295);
   _backgroundImage;
-  _computedVisible = true;
   // Batch render
   context = new CanvasContext();
   _resetContext = true;
@@ -6449,9 +6455,6 @@ let CanvasItem = class extends TimelineNode {
         this._modulate.value = value;
         this.requestRepaint();
         break;
-      case "visible":
-        this._updateVisible();
-        break;
     }
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -6473,23 +6476,10 @@ let CanvasItem = class extends TimelineNode {
         this.requestRedraw();
         break;
       case "visibility":
-        this.visible = value === "visible";
-        break;
-      case "width":
-      case "height":
-        this._updateSize();
+        this._updateVisible();
         break;
     }
   }
-  _updateSize() {
-    if (this.inheritSize) {
-      this.size.width = this.style.width || this._parent?.size?.width || this._parent?.width;
-      this.size.height = this.style.height || this._parent?.size?.height || this._parent?.height;
-    } else {
-      this.size.width = this.style.width;
-      this.size.height = this.style.height;
-    }
-  }
   _updateBackgroundColor() {
     const backgroundColor = this.style.getComputedBackgroundColor();
     if (this._originalBatchables.length) {
@@ -6503,31 +6493,31 @@ let CanvasItem = class extends TimelineNode {
     this.requestRedraw();
   }
   _updateOpacity() {
-    const parentOpacity = this._parent?.opacity;
-    if (parentOpacity !== this._parentOpacity) {
-      this._parentOpacity = parentOpacity;
-      const opacity = this.style.getComputedOpacity() * (this._parent?.opacity ?? 1);
-      if (this.opacity !== opacity) {
-        this.opacity = opacity;
-        this.requestRepaint();
-      }
+    const opacity = this.style.getComputedOpacity() * (this.getParent()?.opacity ?? 1);
+    if (this.opacity !== opacity) {
+      this.opacity = opacity;
+      this.requestRepaint();
     }
   }
+  _updateCurrentTime(force = false) {
+    super._updateCurrentTime(force);
+    this._updateVisible();
+  }
   _updateVisible() {
-    let visible = this.visible ?? this._parent?._computedVisible ?? true;
+    let visible = this.style.visibility === "visible" && (this.getParent()?.visible ?? true);
     if (visible && !this.isInsideTimeRange()) {
       visible = false;
     }
-    this._computedVisible = visible;
+    this.visible = visible;
   }
   show() {
-    this.visible = true;
+    this.style.visibility = "visible";
   }
   hide() {
-    this.visible = false;
+    this.style.visibility = "hidden";
   }
   isVisibleInTree() {
-    return this.opacity > 0 && this._computedVisible;
+    return this.opacity > 0 && this.visible;
   }
   canRender() {
     return super.canRender() && this.isVisibleInTree();
@@ -6542,10 +6532,14 @@ let CanvasItem = class extends TimelineNode {
     this._repainting = true;
   }
   _process(delta) {
-    this._updateVisible();
-    this._updateOpacity();
-    if (this.inheritSize && (!this.size.width || !this.size.height || this.size.width !== this.style.width || this.size.height !== this.style.height)) {
-      this._updateSize();
+    const parent = this.getParent();
+    if (this._parentVisible !== parent?.visible) {
+      this._parentVisible = parent?.visible;
+      this._updateVisible();
+    }
+    if (this._parentOpacity !== parent?.opacity) {
+      this._parentOpacity = parent?.opacity;
+      this._updateOpacity();
     }
     super._process(delta);
   }
@@ -6584,8 +6578,7 @@ let CanvasItem = class extends TimelineNode {
     }
   }
   _drawBoundingRect() {
-    const { borderRadius } = this.style;
-    const { width, height } = this.size;
+    const { borderRadius, width, height } = this.style;
     if (width && height) {
       if (borderRadius) {
         this.context.roundRect(0, 0, width, height, borderRadius);
@@ -6664,19 +6657,13 @@ let CanvasItem = class extends TimelineNode {
     };
   }
 };
-__decorateClass$y([
-  property({ default: true })
-], CanvasItem.prototype, "visible", 2);
-__decorateClass$y([
+__decorateClass$B([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$y([
+__decorateClass$B([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$y([
-  property()
-], CanvasItem.prototype, "inheritSize", 2);
-CanvasItem = __decorateClass$y([
+CanvasItem = __decorateClass$B([
   customNode("CanvasItem")
 ], CanvasItem);
 
@@ -6706,14 +6693,14 @@ class RenderStack extends Node {
   }
 }
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -6758,30 +6745,30 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$x([
+__decorateClass$A([
   property({ default: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$x([
+__decorateClass$A([
   property({ default: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$x([
+__decorateClass$A([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$x([
+__decorateClass$A([
   property({ default: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$x([
+Timeline = __decorateClass$A([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6837,11 +6824,13 @@ let Viewport = class extends Node {
       case "y":
         this.requestUpload();
         this._projection.translate(this.x, this.y);
+        this.emit("updateRect");
         break;
       case "width":
       case "height":
         this.requestUpload();
         this._projection.resize(this.width, this.height);
+        this.emit("updateRect");
         break;
     }
   }
@@ -6910,33 +6899,36 @@ let Viewport = class extends Node {
       this._tree?.setCurrentViewport(undefined);
     }
   }
+  getRect() {
+    return new Rect2(this.x, this.y, this.width, this.height);
+  }
   toProjectionArray(transpose = false) {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$w([
+Viewport = __decorateClass$z([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$v = Object.defineProperty;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = undefined ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$v(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -6997,21 +6989,21 @@ class SceneTree extends MainLoop {
     renderer.texture.unbind(texture);
   }
 }
-__decorateClass$v([
+__decorateClass$y([
   property({ default: false })
 ], SceneTree.prototype, "paused");
-__decorateClass$v([
+__decorateClass$y([
   property()
 ], SceneTree.prototype, "backgroundColor");
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$x(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;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -7143,18 +7135,18 @@ let Node2D = class extends CanvasItem {
     );
   }
 };
-Node2D = __decorateClass$u([
+Node2D = __decorateClass$x([
   customNode("Node2D")
 ], Node2D);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 function proxy(options) {
@@ -7199,61 +7191,61 @@ let Graphics2D = class extends Node2D {
     return this;
   }
 };
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "lineCap", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "lineJoin", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "fillStyle", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "strokeStyle", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "lineWidth", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy()
 ], Graphics2D.prototype, "miterLimit", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "rect", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fillRect", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "strokeRect", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "roundRect", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "ellipse", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "arc", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "beginPath", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "moveTo", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "lineTo", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true })
 ], Graphics2D.prototype, "closePath", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "fill", 2);
-__decorateClass$t([
+__decorateClass$w([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "stroke", 2);
-Graphics2D = __decorateClass$t([
+Graphics2D = __decorateClass$w([
   customNode("Graphics2D")
 ], Graphics2D);
 
@@ -7283,14 +7275,14 @@ class Image2DResource extends Resource {
   }
 }
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 let Image2D = class extends Node2D {
@@ -7424,16 +7416,16 @@ let Image2D = class extends Node2D {
     );
   }
 };
-__decorateClass$s([
+__decorateClass$v([
   protectedProperty()
 ], Image2D.prototype, "resource", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: false })
 ], Image2D.prototype, "gif", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: "" })
 ], Image2D.prototype, "src", 2);
-Image2D = __decorateClass$s([
+Image2D = __decorateClass$v([
   customNode("Image2D")
 ], Image2D);
 
@@ -7467,14 +7459,14 @@ class TextureRect2D extends Node2D {
   }
 }
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 let Lottie2D = class extends TextureRect2D {
@@ -7517,21 +7509,21 @@ let Lottie2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$r([
+__decorateClass$u([
   property({ default: "" })
 ], Lottie2D.prototype, "src", 2);
-Lottie2D = __decorateClass$r([
+Lottie2D = __decorateClass$u([
   customNode("Lottie2D")
 ], Lottie2D);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 const textStyles = new Set(Object.keys(textDefaultStyle));
@@ -7654,7 +7646,7 @@ let Text2D = class extends TextureRect2D {
   }
   _drawContent() {
     if (!this.split) {
-      const onText2DRender = this.children?.find((child) => "onText2DRender" in child)?.onText2DRender;
+      const onText2DRender = this.getChildren()?.find((child) => "onText2DRender" in child)?.onText2DRender;
       if (onText2DRender) {
         onText2DRender();
       } else {
@@ -7669,33 +7661,33 @@ let Text2D = class extends TextureRect2D {
     }
   }
 };
-__decorateClass$q([
+__decorateClass$t([
   property({ default: false })
 ], Text2D.prototype, "split", 2);
-__decorateClass$q([
+__decorateClass$t([
   property({ default: "" })
 ], Text2D.prototype, "content", 2);
-__decorateClass$q([
+__decorateClass$t([
   property()
 ], Text2D.prototype, "effects", 2);
-__decorateClass$q([
+__decorateClass$t([
   protectedProperty()
 ], Text2D.prototype, "measureDom", 2);
-__decorateClass$q([
+__decorateClass$t([
   protectedProperty()
 ], Text2D.prototype, "fonts", 2);
-Text2D = __decorateClass$q([
+Text2D = __decorateClass$t([
   customNode("Text2D")
 ], Text2D);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 let Video2D = class extends TextureRect2D {
@@ -7748,21 +7740,21 @@ let Video2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$p([
+__decorateClass$s([
   property({ default: "" })
 ], Video2D.prototype, "src", 2);
-Video2D = __decorateClass$p([
+Video2D = __decorateClass$s([
   customNode("Video2D")
 ], Video2D);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -7844,7 +7836,7 @@ let Animation = class extends TimelineNode {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "mode":
+      case "animationMode":
       case "keyframes":
         this._updateKeyframes();
         break;
@@ -8074,19 +8066,19 @@ let Animation = class extends TimelineNode {
     });
   }
 };
-__decorateClass$o([
+__decorateClass$r([
   property({ default: "parent" })
 ], Animation.prototype, "animationMode", 2);
-__decorateClass$o([
+__decorateClass$r([
   property({ default: false })
 ], Animation.prototype, "loop", 2);
-__decorateClass$o([
+__decorateClass$r([
   property({ default: [] })
 ], Animation.prototype, "keyframes", 2);
-__decorateClass$o([
+__decorateClass$r([
   property()
 ], Animation.prototype, "easing", 2);
-Animation = __decorateClass$o([
+Animation = __decorateClass$r([
   customNode("Animation", {
     renderMode: "disabled",
     processMode: "disabled",
@@ -8969,15 +8961,15 @@ class WebAudio extends AudioPipeline {
   }
 }
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
@@ -9185,7 +9177,7 @@ let Audio = class extends TimelineNode {
   }
 };
 __publicField$h(Audio, "_soundPool", []);
-Audio = __decorateClass$n([
+Audio = __decorateClass$q([
   customNode("Audio")
 ], Audio);
 
@@ -9193,14 +9185,14 @@ class AudioSpectrum extends Node2D {
   //
 }
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 let AudioWaveform = class extends Node2D {
@@ -9294,27 +9286,27 @@ let AudioWaveform = class extends Node2D {
     }
   }
 };
-__decorateClass$m([
+__decorateClass$p([
   property()
 ], AudioWaveform.prototype, "src", 2);
-__decorateClass$m([
+__decorateClass$p([
   property()
 ], AudioWaveform.prototype, "gap", 2);
-__decorateClass$m([
+__decorateClass$p([
   property()
 ], AudioWaveform.prototype, "color", 2);
-AudioWaveform = __decorateClass$m([
+AudioWaveform = __decorateClass$p([
   customNode("AudioWaveform")
 ], AudioWaveform);
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -9332,11 +9324,11 @@ let Effect = class extends TimelineNode {
   /** Temporary nodes for transition */
   _previousSibling;
   _nextSibling;
-  constructor(options) {
+  constructor(properties, children = []) {
     super();
     this._onProcessing = this._onProcessing.bind(this);
     this._onNodeProcessed = this._onNodeProcessed.bind(this);
-    this.setProperties(options);
+    this.setProperties(properties).append(children);
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -9502,7 +9494,7 @@ let Effect = class extends TimelineNode {
   _parseTargetArea() {
     if (this._mode === "parent" && this._parent && "getRect" in this._parent) {
       const rect = this._parent.getRect();
-      if (rect instanceof Rect2) {
+      if (rect) {
         return [
           rect.left / this.viewport1.width,
           rect.top / this.viewport1.height,
@@ -9551,31 +9543,31 @@ let Effect = class extends TimelineNode {
     }
   }
 };
-__decorateClass$l([
+__decorateClass$o([
   protectedProperty()
 ], Effect.prototype, "material", 2);
-__decorateClass$l([
+__decorateClass$o([
   property()
 ], Effect.prototype, "mode", 2);
-__decorateClass$l([
+__decorateClass$o([
   property({ default: "" })
 ], Effect.prototype, "glsl", 2);
-__decorateClass$l([
+__decorateClass$o([
   property({ default: "" })
 ], Effect.prototype, "glslSrc", 2);
-Effect = __decorateClass$l([
+Effect = __decorateClass$o([
   customNode("Effect")
 ], Effect);
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -9672,25 +9664,25 @@ __publicField$g(BlurEffect, "materialY", new Material({
   vert: vertY,
   frag
 }));
-__decorateClass$k([
+__decorateClass$n([
   property({ default: 8 })
 ], BlurEffect.prototype, "strength", 2);
-__decorateClass$k([
+__decorateClass$n([
   property({ default: 4 })
 ], BlurEffect.prototype, "quality", 2);
-BlurEffect = __decorateClass$k([
+BlurEffect = __decorateClass$n([
   customNode("BlurEffect")
 ], BlurEffect);
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
@@ -9754,43 +9746,43 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$j([
+__decorateClass$m([
   property()
 ], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$j([
+ColorAdjustEffect = __decorateClass$m([
   customNode("ColorAdjustEffect")
 ], ColorAdjustEffect);
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$l(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;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
@@ -9870,22 +9862,22 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$i([
+__decorateClass$l([
   property({ default: "" })
 ], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$i([
+ColorFilterEffect = __decorateClass$l([
   customNode("ColorFilterEffect")
 ], ColorFilterEffect);
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$k(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;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
@@ -9959,25 +9951,25 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$h([
+__decorateClass$k([
   property()
 ], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$h([
+ColorOverlayEffect = __decorateClass$k([
   customNode("ColorOverlayEffect")
 ], ColorOverlayEffect);
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$j(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;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -10042,25 +10034,25 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$g([
+__decorateClass$j([
   property()
 ], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$g([
+ColorRemoveEffect = __decorateClass$j([
   customNode("ColorRemoveEffect")
 ], ColorRemoveEffect);
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -10147,25 +10139,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$f([
+__decorateClass$i([
   property()
 ], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$f([
+__decorateClass$i([
   property()
 ], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$f([
+ColorReplaceEffect = __decorateClass$i([
   customNode("ColorReplaceEffect")
 ], ColorReplaceEffect);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -10211,22 +10203,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$e([
+__decorateClass$h([
   property()
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$e([
+EmbossEffect = __decorateClass$h([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -10408,46 +10400,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$d([
+__decorateClass$g([
   property()
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$d([
+GlitchEffect = __decorateClass$g([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -10609,37 +10601,37 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$c([
+__decorateClass$f([
   property()
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$c([
+GodrayEffect = __decorateClass$f([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
@@ -10724,19 +10716,19 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-KawaseEffect = __decorateClass$b([
+KawaseEffect = __decorateClass$e([
   customNode("KawaseEffect")
 ], KawaseEffect);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -10778,27 +10770,27 @@ void main() {
   gl_FragColor = mix(src2Color, src1Color, mixPercent);
 }`
 }));
-LeftEraseEffect = __decorateClass$a([
+LeftEraseEffect = __decorateClass$d([
   customNode("LeftEraseEffect")
 ], LeftEraseEffect);
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
 let MaskEffect = class extends Effect {
   texture;
-  constructor(options) {
+  constructor(properties, children = []) {
     super();
-    this.setProperties(options);
+    this.setProperties(properties).append(children);
   }
   async load() {
     this.texture = undefined;
@@ -10864,25 +10856,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$9([
+__decorateClass$c([
   protectedProperty()
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$9([
+__decorateClass$c([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$9([
+MaskEffect = __decorateClass$c([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
@@ -10939,22 +10931,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$8([
+__decorateClass$b([
   property()
 ], PixelateEffect.prototype, "size", 2);
-PixelateEffect = __decorateClass$8([
+PixelateEffect = __decorateClass$b([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
@@ -11007,19 +10999,19 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-ShadowEffect = __decorateClass$7([
+ShadowEffect = __decorateClass$a([
   customNode("ShadowEffect")
 ], ShadowEffect);
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, key + "" , value);
@@ -11115,19 +11107,19 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-TiltShiftEffect = __decorateClass$6([
+TiltShiftEffect = __decorateClass$9([
   customNode("TiltShiftEffect")
 ], TiltShiftEffect);
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, key + "" , value);
@@ -11210,19 +11202,19 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-TwistEffect = __decorateClass$5([
+TwistEffect = __decorateClass$8([
   customNode("TwistEffect")
 ], TwistEffect);
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$7(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;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
@@ -11328,42 +11320,69 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$4([
+__decorateClass$7([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$4([
+__decorateClass$7([
   property()
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$4([
+__decorateClass$7([
   property()
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$4([
+__decorateClass$7([
   property()
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$4([
+ZoomBlurEffect = __decorateClass$7([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$6(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;
-  if (kind && result) __defProp$3(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let Control = class extends CanvasItem {
   constructor(properties, children = []) {
     super();
+    this._parentUpdateRect = this._parentUpdateRect.bind(this);
     this.setProperties(properties);
     this.append(children);
   }
+  _parented(parent) {
+    super._parented(parent);
+    parent.on("updateRect", this._parentUpdateRect);
+  }
+  _unparented(oldParent) {
+    super._unparented(oldParent);
+    oldParent.off("updateRect", this._parentUpdateRect);
+  }
+  _parentUpdateRect() {
+    const rect = this._parent.getRect();
+    this.style.left = rect.left;
+    this.style.top = rect.top;
+    this.style.width = rect.width;
+    this.style.height = rect.height;
+  }
   _input(event, key) {
     super._input(event, key);
     this._guiInput(event, key);
   }
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+      case "height":
+      case "left":
+      case "top":
+        this.emit("updateRect");
+        break;
+    }
+  }
   // eslint-disable-next-line unused-imports/no-unused-vars
   _guiInput(event, key) {
   }
@@ -11384,18 +11403,73 @@ let Control = class extends CanvasItem {
     return new Rect2(left, top, width, height);
   }
 };
-Control = __decorateClass$3([
+Control = __decorateClass$6([
   customNode("Control")
 ], Control);
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : 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;
-  if (kind && result) __defProp$2(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+let Range = class extends Control {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "allowGreater":
+      case "allowLesser":
+      case "page":
+      case "minValue":
+      case "maxValue":
+      case "step":
+      case "value":
+        this.requestRedraw();
+        break;
+    }
+  }
+};
+__decorateClass$5([
+  property({ default: false })
+], Range.prototype, "allowGreater", 2);
+__decorateClass$5([
+  property({ default: false })
+], Range.prototype, "allowLesser", 2);
+__decorateClass$5([
+  property({ default: 1 })
+], Range.prototype, "page", 2);
+__decorateClass$5([
+  property({ default: 0 })
+], Range.prototype, "minValue", 2);
+__decorateClass$5([
+  property({ default: 100 })
+], Range.prototype, "maxValue", 2);
+__decorateClass$5([
+  property({ default: 0.01 })
+], Range.prototype, "step", 2);
+__decorateClass$5([
+  property({ default: 0 })
+], Range.prototype, "value", 2);
+Range = __decorateClass$5([
+  customNode("Range")
+], Range);
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$4(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;
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let Ruler = class extends Control {
@@ -11408,7 +11482,6 @@ let Ruler = class extends Control {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "pixelRatio":
       case "offsetX":
       case "offsetY":
       case "thickness":
@@ -11417,20 +11490,27 @@ let Ruler = class extends Control {
       case "markBackgroundColor":
       case "markColor":
       case "gap":
+      case "scale":
         this.requestRedraw();
         break;
     }
   }
-  _updateSize() {
-    super._updateSize();
-    this.requestRedraw();
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+      case "height":
+        this.texture[key] = value;
+        this.requestRedraw();
+        break;
+    }
   }
   _drawTexture() {
-    const { width, height } = this.size;
-    this.style.width = width;
-    this.style.height = height;
     const {
-      pixelRatio,
+      width,
+      height
+    } = this.style;
+    const {
       offsetX,
       offsetY,
       thickness,
@@ -11438,14 +11518,13 @@ let Ruler = class extends Control {
       markBackgroundColor,
       markColor,
       color,
-      gap: _gap
+      gap: _gap,
+      scale: _scale
     } = this;
-    const _scale = 1;
     const canvas = this.texture.source;
-    canvas.width = Math.max(1, Math.ceil(width * pixelRatio));
-    canvas.height = Math.max(1, Math.ceil(height * pixelRatio));
     const ctx = canvas.getContext("2d");
-    ctx.scale(this.pixelRatio, this.pixelRatio);
+    ctx.reset();
+    ctx.scale(this.texture.pixelRatio, this.texture.pixelRatio);
     const x = Math.round(offsetX);
     const y = Math.round(offsetY);
     ctx.beginPath();
@@ -11527,7 +11606,7 @@ let Ruler = class extends Control {
     ctx.stroke();
     this.texture.requestUpload();
   }
-  _drawContent() {
+  _draw() {
     this._drawTexture();
     const texture = this.texture;
     if (texture?.valid) {
@@ -11536,41 +11615,120 @@ let Ruler = class extends Control {
         this.style.width / texture.width,
         this.style.height / texture.height
       );
-      super._drawContent();
+      this.context.rect(0, 0, texture.width, texture.height);
+      this.context.fill();
     }
   }
 };
-__decorateClass$2([
-  property({ default: 2 })
-], Ruler.prototype, "pixelRatio", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: 0 })
 ], Ruler.prototype, "offsetX", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: 0 })
 ], Ruler.prototype, "offsetY", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: 20 })
 ], Ruler.prototype, "thickness", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: 3 })
 ], Ruler.prototype, "markHeight", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "color", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: "#f9f9fa" })
 ], Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: "#b2b6bc" })
 ], Ruler.prototype, "markColor", 2);
-__decorateClass$2([
+__decorateClass$4([
   property({ default: 300 })
 ], Ruler.prototype, "gap", 2);
-Ruler = __decorateClass$2([
+__decorateClass$4([
+  property({ default: 1 })
+], Ruler.prototype, "scale", 2);
+Ruler = __decorateClass$4([
   customNode("Ruler")
 ], Ruler);
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$3(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;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+let ScrollBar = class extends Range {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+      case "height":
+      case "left":
+      case "top":
+        this.requestRedraw();
+        break;
+    }
+  }
+  _guiInput(event, key) {
+    super._guiInput(event, key);
+  }
+  _draw() {
+    let left, top, width, height, radii;
+    if (this.direction === "vertical") {
+      width = 10;
+      height = this.style.height * (this.page / (this.maxValue - this.minValue));
+      left = this.style.left + this.style.width - width;
+      top = this.style.height * (this.value / (this.maxValue - this.minValue));
+      radii = width / 2;
+    } else {
+      width = this.style.width * (this.page / (this.maxValue - this.minValue));
+      height = 10;
+      left = this.style.width * (this.value / (this.maxValue - this.minValue));
+      top = this.style.top + this.style.height - height;
+      radii = height / 2;
+    }
+    this.context.roundRect(left, top, width, height, radii);
+    this.context.fillStyle = 34;
+    this.context.fill();
+  }
+};
+__decorateClass$3([
+  property({ default: "vertical" })
+], ScrollBar.prototype, "direction", 2);
+ScrollBar = __decorateClass$3([
+  customNode("ScrollBar")
+], ScrollBar);
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc$2(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;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+let XScrollBar = class extends ScrollBar {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+};
+XScrollBar = __decorateClass$2([
+  customNode("XScrollBar", {
+    direction: "horizontal"
+  })
+], XScrollBar);
+
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -11581,12 +11739,17 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1(target, key, result);
   return result;
 };
-let ScrollBar = class extends Control {
-  //
+let YScrollBar = class extends ScrollBar {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
 };
-ScrollBar = __decorateClass$1([
-  customNode("ScrollBar")
-], ScrollBar);
+YScrollBar = __decorateClass$1([
+  customNode("YScrollBar", {
+    direction: "vertical"
+  })
+], YScrollBar);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -11613,10 +11776,10 @@ let Scaler = class extends Node {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "scale":
+      case "value":
       case "min":
       case "max": {
-        this.scale = clamp(this.min, this.scale, this.max);
+        this.value = clamp(this.minValue, this.value, this.maxValue);
         this._updateScale();
         break;
       }
@@ -11625,9 +11788,9 @@ let Scaler = class extends Node {
   _updateScale() {
     const target = this.target;
     if (target) {
-      target.style.scaleX = this.scale;
-      target.style.scaleY = this.scale;
-      this.emit("updateScale", this.scale);
+      target.style.scaleX = this.value;
+      target.style.scaleY = this.value;
+      this.emit("updateScale", this.value);
     }
   }
   _onWheel(e) {
@@ -11640,7 +11803,7 @@ let Scaler = class extends Node {
       e.preventDefault();
       let distance = e.deltaY / (e.ctrlKey ? 1 : 100);
       distance *= -0.015;
-      this.scale += distance;
+      this.value += distance;
     }
   }
   _input(event, key) {
@@ -11654,13 +11817,13 @@ let Scaler = class extends Node {
 };
 __decorateClass([
   property({ default: 1 })
-], Scaler.prototype, "scale", 2);
+], Scaler.prototype, "value", 2);
 __decorateClass([
   property({ default: 0.05 })
-], Scaler.prototype, "min", 2);
+], Scaler.prototype, "minValue", 2);
 __decorateClass([
   property({ default: 10 })
-], Scaler.prototype, "max", 2);
+], Scaler.prototype, "maxValue", 2);
 Scaler = __decorateClass([
   customNode("Scaler", {
     processMode: "disabled",
@@ -12002,7 +12165,7 @@ 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 CanvasEditor extends CanvasItem {
+class CanvasEditor extends Control {
   name = "CanvasEditor";
   hover = new Node2D({
     name: "hover",
@@ -12035,36 +12198,55 @@ class CanvasEditor extends CanvasItem {
   scaler = new Scaler({
     internalMode: "back"
   }).on("updateScale", (scale) => {
-    this.ruler.gap = scale * 300;
+    this.ruler.scale = scale;
+    const scrollHeight = this.drawboard.style.height * scale;
+    const scrollWidth = this.drawboard.style.width * scale;
+    if (scrollHeight > this.style.height) {
+      this.yScrollBar.style.visibility = "visible";
+      this.yScrollBar.maxValue = scrollHeight;
+      this.yScrollBar.page = this.style.height;
+    } else {
+      this.yScrollBar.style.visibility = "hidden";
+    }
+    if (scrollWidth > this.style.width) {
+      this.xScrollBar.style.visibility = "visible";
+      this.xScrollBar.maxValue = scrollWidth;
+      this.xScrollBar.page = this.style.width;
+    } else {
+      this.xScrollBar.style.visibility = "hidden";
+    }
   });
-  xScrollBar = new ScrollBar({
-    internalMode: "back"
+  xScrollBar = new XScrollBar({
+    internalMode: "back",
+    style: {
+      visibility: "hidden"
+    }
   });
-  yScrollBar = new ScrollBar({
-    internalMode: "back"
+  yScrollBar = new YScrollBar({
+    internalMode: "back",
+    style: {
+      visibility: "hidden"
+    }
   });
   drawboard = new Node2D({
     name: "drawboard",
     style: {
-      left: 100,
-      top: 100,
       width: 500,
       height: 500,
       backgroundColor: 4294967295,
       overflow: "hidden",
-      borderStyle: "solid",
-      borderWidth: 2,
-      pointerEvents: "none",
-      transformOrigin: "left top"
+      pointerEvents: "none"
     }
   }).append(
-    this.scaler
+    this.scaler,
+    new ShadowEffect({
+      internalMode: "back"
+    })
   );
   ruler = new Ruler({
     name: "ruler",
     offsetX: 100,
-    offsetY: 100,
-    inheritSize: true
+    offsetY: 100
   }).append(
     this.drawboard,
     this.hover,
@@ -12081,10 +12263,22 @@ class CanvasEditor extends CanvasItem {
     this._onPointermove = this._onPointermove.bind(this);
     this._onPointerup = this._onPointerup.bind(this);
     this.append(this.ruler);
-    this.inheritSize = true;
   }
-  _input(event, key) {
-    super._input(event, key);
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+        this.drawboard.style.left = (this.style.width - this.drawboard.style.width) / 2;
+        this.ruler.offsetX = this.drawboard.style.left;
+        break;
+      case "height":
+        this.drawboard.style.top = (this.style.height - this.drawboard.style.height) / 2;
+        this.ruler.offsetY = this.drawboard.style.top;
+        break;
+    }
+  }
+  _guiInput(event, key) {
+    super._guiInput(event, key);
     switch (key) {
       case "pointerdown":
         this._onPointerdown(event);
@@ -12353,4 +12547,4 @@ async function render(options) {
   });
 }
 
-export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasEditor, CanvasItem, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftEffect, Timeline, TimelineNode, Transform2D, TwistEffect, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasEditor, CanvasItem, CanvasItemStyle, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, ShadowEffect, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftEffect, Timeline, TimelineNode, Transform2D, TwistEffect, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };