modern-canvas 0.10.2 → 0.11.0

package/dist/index.mjs

@@ -1131,6 +1131,9 @@ class Vector extends Observable {
   toArray() {
     return this._array.slice();
   }
+  toFloat32Array() {
+    return new Float32Array(this._array);
+  }
   toJSON() {
     return this.toArray();
   }
@@ -1268,6 +1271,9 @@ class Matrix extends Observable {
     }
     return array.slice();
   }
+  toFloat32Array(transpose) {
+    return new Float32Array(this.toArray(transpose));
+  }
   toName() {
     return `Matrix${this.rows}(${this.rows}x${this.cols})`;
   }
@@ -2091,13 +2097,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$T = Object.defineProperty;
-var __decorateClass$$ = (decorators, target, key, kind) => {
+var __defProp$R = Object.defineProperty;
+var __decorateClass$V = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$T(target, key, result);
+  if (result) __defProp$R(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2145,20 +2151,20 @@ class MainLoop extends CoreObject {
     super.destroy();
   }
 }
-__decorateClass$$([
+__decorateClass$V([
   property({ fallback: 60 })
 ], MainLoop.prototype, "fps");
-__decorateClass$$([
+__decorateClass$V([
   property({ fallback: 1 })
 ], MainLoop.prototype, "speed");
 
-var __defProp$S = Object.defineProperty;
-var __decorateClass$_ = (decorators, target, key, kind) => {
+var __defProp$Q = Object.defineProperty;
+var __decorateClass$U = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$S(target, key, result);
+  if (result) __defProp$Q(target, key, result);
   return result;
 };
 class Renderer extends Reactivable {
@@ -2202,10 +2208,10 @@ class Renderer extends Reactivable {
     super.destroy();
   }
 }
-__decorateClass$_([
+__decorateClass$U([
   property({ fallback: DEVICE_PIXEL_RATIO })
 ], Renderer.prototype, "pixelRatio");
-__decorateClass$_([
+__decorateClass$U([
   property({ internal: true })
 ], Renderer.prototype, "view");
 
@@ -2437,6 +2443,8 @@ class WebGLBatch2DModule extends WebGLModule {
     // 1
     aPosition: { size: 2, normalized: false, type: "float" },
     // 2
+    aDimension: { size: 2, normalized: false, type: "float" },
+    // 2
     aUv: { size: 2, normalized: false, type: "float" },
     // 2
     aModulate: { size: 4, normalized: true, type: "unsigned_byte" },
@@ -2446,7 +2454,7 @@ class WebGLBatch2DModule extends WebGLModule {
     aDisableWrapMode: { size: 1, normalized: true, type: "float" }
     // 1
   };
-  _vertexSize = 1 + 2 + 2 + 1 + 1 + 1;
+  _vertexSize = 1 + 2 + 2 + 2 + 1 + 1 + 1;
   _getShader(maxTextureUnits) {
     let shader = this._shaders.get(maxTextureUnits);
     if (!shader) {
@@ -2460,6 +2468,7 @@ class WebGLBatch2DModule extends WebGLModule {
       vert: `precision highp float;
 attribute float aTextureId;
 attribute vec2 aPosition;
+attribute vec2 aDimension;
 attribute vec2 aUv;
 attribute vec4 aModulate;
 attribute vec4 aBackgroundColor;
@@ -2468,30 +2477,20 @@ attribute float aDisableWrapMode;
 uniform mat3 projectionMatrix;
 uniform mat3 viewMatrix;
 uniform vec4 modulate;
-uniform float canvasWidth;
-uniform float canvasHeight;
 
 varying float vTextureId;
+varying vec2 vDimension;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
 varying float vDisableWrapMode;
 
-vec2 roundPixels(vec2 position, vec2 targetSize) {
-  return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
-}
-
 void main(void) {
-  mat3 modelMatrix = mat3(
-    1.0, 0.0, 0.0,
-    0.0, 1.0, 0.0,
-    0.0, 0.0, 1.0
-  );
-  vTextureId = aTextureId;
-  vec3 pos = projectionMatrix * viewMatrix * modelMatrix * vec3(aPosition, 1.0);
-  gl_Position = vec4(roundPixels(pos.xy, vec2(canvasWidth, canvasHeight)), 0.0, 1.0);
-  // gl_Position = vec4(pos.xy, 0.0, 1.0);
+  vec3 pos3 = projectionMatrix * viewMatrix * vec3(aPosition.xy, 1.0);
+  gl_Position = vec4(pos3.xy, 0.0, 1.0);
 
+  vTextureId = aTextureId;
+  vDimension = aDimension;
   vUv = aUv;
   vModulate = aModulate * modulate;
   vBackgroundColor = aBackgroundColor;
@@ -2499,16 +2498,27 @@ void main(void) {
 }`,
       frag: `precision highp float;
 varying float vTextureId;
+varying vec2 vDimension;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
 varying float vDisableWrapMode;
 
+uniform mat3 viewMatrix;
 uniform sampler2D samplers[${maxTextureUnits}];
+uniform vec2 zoom;
+uniform vec2 translate;
 
 void main(void) {
+  vec2 uv = vUv;
+
+  if (vDimension.x > 0.0 && vDimension.y > 0.0) {
+    uv = floor(uv * vDimension);
+    uv = uv / vDimension;
+  }
+
   vec4 color = vec4(0.0, 0.0, 0.0, 0.0);
-  if (vDisableWrapMode > 0.0 && (vUv.x < 0.0 || vUv.y < 0.0 || vUv.x > 1.0 || vUv.y > 1.0))
+  if (vDisableWrapMode > 0.0 && (uv.x < 0.0 || uv.y < 0.0 || uv.x > 1.0 || uv.y > 1.0))
   {
     //
   }
@@ -2527,7 +2537,7 @@ void main(void) {
         }
         return `${text}
   {
-    color = texture2D(samplers[${i}], vUv);
+    color = texture2D(samplers[${i}], uv);
   }`;
       }).join("")}
 
@@ -2573,11 +2583,12 @@ void main(void) {
       draw: (options) => {
         const renderer2 = this._renderer;
         renderer2.program.bind(program);
+        const viewMatrix = renderer2.program.uniforms.viewMatrix;
         renderer2.program.updateUniforms(program, {
           samplers,
           modulate: [1, 1, 1, 1],
-          canvasWidth: renderer2.gl.drawingBufferWidth,
-          canvasHeight: renderer2.gl.drawingBufferHeight,
+          zoom: [viewMatrix[0], viewMatrix[4]],
+          translate: [viewMatrix[6], viewMatrix[7]],
           ...renderer2.program.uniforms
         });
         renderer2.vertexArray.bind(vao ?? vertexArray);
@@ -2634,7 +2645,8 @@ void main(void) {
           const {
             indices,
             vertices,
-            uvs = [],
+            uvs = new Float32Array(0),
+            dimension = new Float32Array(0),
             texture: texture2,
             modulate = this._defaultModulate,
             backgroundColor = this._defaultBackgroundColor,
@@ -2656,6 +2668,8 @@ void main(void) {
             float32View[aIndex++] = textureLocation;
             float32View[aIndex++] = vertices[i2];
             float32View[aIndex++] = vertices[i2 + 1];
+            float32View[aIndex++] = dimension[0];
+            float32View[aIndex++] = dimension[1];
             float32View[aIndex++] = uvs[i2];
             float32View[aIndex++] = uvs[i2 + 1];
             if (modulate) {
@@ -2713,11 +2727,6 @@ void main(void) {
       });
     }
   }
-  /**
-   * Fetches an attribute buffer from `this._attributeBuffer` that can hold atleast `size` floats.
-   * @param size - minimum capacity required
-   * @returns - buffer than can hold atleast `size` floats
-   */
   _getAttributeBuffer(size) {
     const roundedP2 = nextPow2(Math.ceil(size / 8));
     const roundedSizeIndex = log2(roundedP2);
@@ -2731,12 +2740,6 @@ void main(void) {
     }
     return buffer;
   }
-  /**
-   * Fetches an index buffer from `this._indexBuffers` that can
-   * have at least `size` capacity.
-   * @param size - minimum required capacity
-   * @returns - buffer that can fit `size` indices.
-   */
   _getIndexBuffer(size) {
     const roundedP2 = nextPow2(Math.ceil(size / 12));
     const roundedSizeIndex = log2(roundedP2);
@@ -4405,13 +4408,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$R = Object.defineProperty;
-var __decorateClass$Z = (decorators, target, key, kind) => {
+var __defProp$P = Object.defineProperty;
+var __decorateClass$T = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$R(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4455,20 +4458,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$Z([
+__decorateClass$T([
   property({ internal: true, fallback: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$Z([
+__decorateClass$T([
   property({ internal: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$Q = Object.defineProperty;
-var __decorateClass$Y = (decorators, target, key, kind) => {
+var __defProp$O = Object.defineProperty;
+var __decorateClass$S = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$Q(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4512,20 +4515,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$Y([
+__decorateClass$S([
   property({ internal: true, default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$Y([
+__decorateClass$S([
   property({ internal: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$P = Object.defineProperty;
-var __decorateClass$X = (decorators, target, key, kind) => {
+var __defProp$N = Object.defineProperty;
+var __decorateClass$R = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$P(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4559,25 +4562,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$X([
+__decorateClass$R([
   property({ internal: true })
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$X([
+__decorateClass$R([
   property({ fallback: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$X([
+__decorateClass$R([
   property({ fallback: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$X([
+__decorateClass$R([
   property({ fallback: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$X([
+__decorateClass$R([
   property()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$X([
+__decorateClass$R([
   property()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$X([
+__decorateClass$R([
   property()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4821,13 +4824,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$O = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __defProp$M = Object.defineProperty;
+var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$O(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -4955,22 +4958,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$W([
+__decorateClass$Q([
   property({ internal: true })
 ], Texture2D.prototype, "source");
-__decorateClass$W([
+__decorateClass$Q([
   property({ fallback: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$W([
+__decorateClass$Q([
   property({ fallback: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$W([
+__decorateClass$Q([
   property({ fallback: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$W([
+__decorateClass$Q([
   property({ fallback: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$W([
+__decorateClass$Q([
   property({ fallback: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5004,13 +5007,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$N = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __defProp$L = Object.defineProperty;
+var __decorateClass$P = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5029,7 +5032,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue);
   }
 }
-__decorateClass$V([
+__decorateClass$P([
   property({ fallback: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5251,13 +5254,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$U = (decorators, target, key, kind) => {
+var __defProp$K = Object.defineProperty;
+var __decorateClass$O = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$M(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5501,10 +5504,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$U([
+__decorateClass$O([
   property({ internal: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$U([
+__decorateClass$O([
   property({ internal: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5639,7 +5642,6 @@ class CanvasContext extends Path2D {
   }
   buildUvs(start, vertices, uvs, texture, uvTransform) {
     if (texture) {
-      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.apply({ x, y }).toArray() : uvTransform;
       const w = texture.width;
       const h = texture.height;
       for (let len = vertices.length, i = start; i < len; i += 2) {
@@ -5647,8 +5649,8 @@ class CanvasContext extends Path2D {
         const y = vertices[i + 1];
         let uvX;
         let uvY;
-        if (_uvTransform) {
-          [uvX, uvY] = _uvTransform(x, y);
+        if (uvTransform) {
+          [uvX, uvY] = uvTransform.apply({ x, y }).toArray();
         } else {
           [uvX, uvY] = [x / w, y / h];
         }
@@ -5684,6 +5686,7 @@ class CanvasContext extends Path2D {
       if (current.texture) {
         this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
       }
+      const box = current.path.getBoundingBox();
       batchables.push({
         vertices: new Float32Array(vertices),
         indices: new Float32Array(indices),
@@ -5692,7 +5695,9 @@ class CanvasContext extends Path2D {
         backgroundColor: current.backgroundColor,
         type: current.type,
         disableWrapMode: current.disableWrapMode,
-        vertTransform: current.vertTransform
+        uvTransform: current.uvTransform,
+        vertTransform: current.vertTransform,
+        dimension: new Float32Array([box.width, box.height])
       });
     }
     return batchables;
@@ -5794,14 +5799,14 @@ class Meta extends CoreObject {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$T = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$L(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 const iidMap = {};
@@ -6315,42 +6320,42 @@ let Node = class extends CoreObject {
     return node;
   }
 };
-__decorateClass$T([
+__decorateClass$N([
   property({ fallback: idGenerator() })
 ], Node.prototype, "id", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ fallback: idGenerator() })
 ], Node.prototype, "name", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true, fallback: "default" })
 ], Node.prototype, "processSortMode", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "inputMode", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true, fallback: "default" })
 ], Node.prototype, "internalMode", 2);
-__decorateClass$T([
+__decorateClass$N([
   property({ internal: true })
 ], Node.prototype, "mask", 2);
-Node = __decorateClass$T([
+Node = __decorateClass$N([
   customNode("Node")
 ], Node);
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$S = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$K(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6410,30 +6415,30 @@ let TimelineNode = class extends Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$S([
+__decorateClass$M([
   property({ fallback: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$S([
+__decorateClass$M([
   property({ fallback: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$S([
+__decorateClass$M([
   property({ fallback: false })
 ], TimelineNode.prototype, "paused", 2);
-__decorateClass$S([
+__decorateClass$M([
   property({ internal: true, fallback: false })
 ], TimelineNode.prototype, "insideTimeRange", 2);
-TimelineNode = __decorateClass$S([
+TimelineNode = __decorateClass$M([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$J(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -6586,30 +6591,30 @@ let CanvasItem = class extends TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$R([
+__decorateClass$L([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$R([
+__decorateClass$L([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$R([
+__decorateClass$L([
   property({ internal: true, fallback: true })
 ], CanvasItem.prototype, "visible", 2);
-__decorateClass$R([
+__decorateClass$L([
   property({ internal: true, fallback: 1 })
 ], CanvasItem.prototype, "opacity", 2);
-CanvasItem = __decorateClass$R([
+CanvasItem = __decorateClass$L([
   customNode("CanvasItem")
 ], CanvasItem);
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6760,33 +6765,33 @@ let Viewport = class extends Node {
     return this.canvasTransform.apply(globalPos, newPos);
   }
 };
-__decorateClass$Q([
+__decorateClass$K([
   property({ fallback: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$Q([
+__decorateClass$K([
   property({ fallback: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$Q([
+__decorateClass$K([
   property({ fallback: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$Q([
+__decorateClass$K([
   property({ fallback: 0 })
 ], Viewport.prototype, "height", 2);
-__decorateClass$Q([
+__decorateClass$K([
   property({ internal: true, fallback: false })
 ], Viewport.prototype, "msaa", 2);
-Viewport = __decorateClass$Q([
+Viewport = __decorateClass$K([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -7028,19 +7033,19 @@ let Effect = class extends TimelineNode {
     }
   }
 };
-__decorateClass$P([
+__decorateClass$J([
   property({ internal: true })
 ], Effect.prototype, "material", 2);
-__decorateClass$P([
+__decorateClass$J([
   property()
 ], Effect.prototype, "effectMode", 2);
-__decorateClass$P([
-  property({ fallback: "" })
+__decorateClass$J([
+  property()
 ], Effect.prototype, "glsl", 2);
-__decorateClass$P([
-  property({ fallback: "" })
+__decorateClass$J([
+  property()
 ], Effect.prototype, "glslSrc", 2);
-Effect = __decorateClass$P([
+Effect = __decorateClass$J([
   customNode("Effect")
 ], Effect);
 
@@ -7070,14 +7075,14 @@ class RenderStack {
   }
 }
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -7122,48 +7127,48 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$O([
+__decorateClass$I([
   property({ fallback: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$O([
+__decorateClass$I([
   property({ fallback: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$O([
+__decorateClass$I([
   property({ fallback: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$O([
+__decorateClass$I([
   property({ fallback: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$O([
+Timeline = __decorateClass$I([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let Window = class extends Viewport {
 };
-__decorateClass$N([
+__decorateClass$H([
   property({ fallback: false })
 ], Window.prototype, "msaa", 2);
-Window = __decorateClass$N([
+Window = __decorateClass$H([
   customNode("Window")
 ], Window);
 
-var __defProp$E = Object.defineProperty;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __defProp$C = Object.defineProperty;
+var __decorateClass$G = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$E(target, key, result);
+  if (result) __defProp$C(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7243,25 +7248,25 @@ class SceneTree extends MainLoop {
     super.destroy();
   }
 }
-__decorateClass$M([
+__decorateClass$G([
   property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$M([
+__decorateClass$G([
   property({ internal: true, fallback: false })
 ], SceneTree.prototype, "debug");
-__decorateClass$M([
+__decorateClass$G([
   property({ internal: true, fallback: false })
 ], SceneTree.prototype, "processPaused");
-__decorateClass$M([
+__decorateClass$G([
   property({ internal: true, default: () => fonts })
 ], SceneTree.prototype, "fonts");
-__decorateClass$M([
+__decorateClass$G([
   property({ internal: true, default: () => new Timeline() })
 ], SceneTree.prototype, "timeline");
 
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -7273,7 +7278,7 @@ let Transition = class extends Effect {
     this.setProperties(properties).append(children);
   }
 };
-Transition = __decorateClass$L([
+Transition = __decorateClass$F([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7281,14 +7286,14 @@ Transition = __decorateClass$L([
   })
 ], Transition);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -7352,9 +7357,7 @@ let Node2D = class extends CanvasItem {
     let a, c, tx, b, d, ty;
     if (vertTransform) {
       const globalTransform = this.globalTransform.clone();
-      globalTransform.multiply(
-        typeof vertTransform === "function" ? vertTransform?.() : vertTransform
-      );
+      globalTransform.multiply(vertTransform);
       [a, c, tx, b, d, ty] = globalTransform.toArray();
     } else {
       [a, c, tx, b, d, ty] = this.globalTransform.toArray();
@@ -7392,46 +7395,81 @@ let Node2D = class extends CanvasItem {
     return this.globalTransform.apply(localPos, newPos);
   }
 };
-__decorateClass$K([
+__decorateClass$E([
   property({ internal: true, fallback: 0 })
 ], Node2D.prototype, "rotation", 2);
-__decorateClass$K([
+__decorateClass$E([
   property({ internal: true, fallback: 0 })
 ], Node2D.prototype, "globalRotation", 2);
-Node2D = __decorateClass$K([
+Node2D = __decorateClass$E([
   customNode("Node2D")
 ], Node2D);
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 let Camera2D = class extends Node2D {
-  zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
-  maxZoom = new Vector2(6, 6);
-  minZoom = new Vector2(0.1, 0.1);
   _screenOffset = { x: 0, y: 0 };
+  _zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
+  get zoom() {
+    return this._zoom;
+  }
+  set zoom(val) {
+    this._zoom.set(val.x, val.y);
+  }
+  _minZoom = new Vector2(0.02, 0.02);
+  get minZoom() {
+    return this._minZoom;
+  }
+  set minZoom(val) {
+    this._minZoom.set(val.x, val.y);
+  }
+  _maxZoom = new Vector2(256, 256);
+  get maxZoom() {
+    return this._maxZoom;
+  }
+  set maxZoom(val) {
+    this._maxZoom.set(val.x, val.y);
+  }
   constructor(properties, nodes = []) {
     super();
     this.setProperties(properties).append(nodes);
   }
+  setProperties(properties) {
+    if (properties) {
+      const {
+        zoom,
+        minZoom,
+        maxZoom,
+        ...restProperties
+      } = properties;
+      if (zoom)
+        this.zoom = zoom;
+      if (minZoom)
+        this.minZoom = minZoom;
+      if (maxZoom)
+        this.maxZoom = maxZoom;
+      super.setProperties(restProperties);
+    }
+    return this;
+  }
   addZoom(x, y = x) {
-    this.zoom.set(
-      clamp(this.zoom.x + x, this.minZoom.x, this.maxZoom.x),
-      clamp(this.zoom.y + y, this.minZoom.y, this.maxZoom.y)
+    return this.setZoom(
+      this._zoom.x + x,
+      this._zoom.y + y
     );
-    return this;
   }
   setZoom(x, y = x) {
-    this.zoom.set(
-      clamp(x, this.minZoom.x, this.maxZoom.x),
-      clamp(y, this.minZoom.y, this.maxZoom.y)
+    this._zoom.set(
+      clamp(x, this._minZoom.x, this._maxZoom.x),
+      clamp(y, this._minZoom.y, this._maxZoom.y)
     );
     return this;
   }
@@ -7485,9 +7523,9 @@ let Camera2D = class extends Node2D {
       const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
       if (!isTouchPad) {
         e.preventDefault();
-        const oldZoom = this.zoom.x;
-        this.addZoom(e.deltaY * -0.015);
-        const ratio = 1 - this.zoom.x / oldZoom;
+        const oldZoom = this._zoom.x;
+        this.zoomWithWheel(e.deltaY);
+        const ratio = 1 - this._zoom.x / oldZoom;
         this.position.add(
           (e.screenX - this.position.x) * ratio,
           (e.screenY - this.position.y) * ratio
@@ -7498,6 +7536,12 @@ let Camera2D = class extends Node2D {
       this.position.add(-e.deltaX, -e.deltaY);
     }
   }
+  zoomWithWheel(wheelDeltaY) {
+    const logCur = Math.log(this._zoom.x);
+    const logDelta = -wheelDeltaY * this.wheelSensitivity;
+    const logNew = logCur + logDelta;
+    this.setZoom(Math.exp(logNew));
+  }
   updateTransform() {
     super.updateTransform();
     this.updateCanvasTransform();
@@ -7506,7 +7550,7 @@ let Camera2D = class extends Node2D {
     const viewport = this.getViewport();
     if (!viewport)
       return;
-    viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
+    viewport.canvasTransform.identity().scale(this._zoom.x, this._zoom.y).translate(this.position.x, this.position.y);
     this.emit("updateCanvasTransform");
   }
   toGlobal(screenPos, newPos) {
@@ -7521,14 +7565,25 @@ let Camera2D = class extends Node2D {
       throw new Error("Failed to toScreen, viewport is empty");
     return viewport.toCanvasScreen(globalPos, newPos);
   }
-};
-__decorateClass$J([
+  toJSON() {
+    return {
+      zoom: this._zoom.toJSON(),
+      minZoom: this._minZoom.toJSON(),
+      maxZoom: this._maxZoom.toJSON(),
+      ...super.toJSON()
+    };
+  }
+};
+__decorateClass$D([
+  property({ fallback: 0.02 })
+], Camera2D.prototype, "wheelSensitivity", 2);
+__decorateClass$D([
   property({ internal: true, fallback: false })
 ], Camera2D.prototype, "spaceKey", 2);
-__decorateClass$J([
+__decorateClass$D([
   property({ internal: true, fallback: false })
 ], Camera2D.prototype, "grabbing", 2);
-Camera2D = __decorateClass$J([
+Camera2D = __decorateClass$D([
   customNode("Camera2D", {
     processMode: "disabled",
     renderMode: "disabled"
@@ -7681,18 +7736,18 @@ function parseCSSTransformOrigin(transformOrigin) {
   });
 }
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$B(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
-var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
+var __publicField$j = (obj, key, value) => __defNormalProp$j(obj, key + "" , value);
 let ColorAdjustEffect = class extends Effect {
   constructor(properties, children = []) {
     super();
@@ -7714,7 +7769,7 @@ let ColorAdjustEffect = class extends Effect {
     });
   }
 };
-__publicField$i(ColorAdjustEffect, "material", new Material({
+__publicField$j(ColorAdjustEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7749,46 +7804,46 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$I([
+__decorateClass$C([
   property({ fallback: 1 })
 ], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$I([
+ColorAdjustEffect = __decorateClass$C([
   customNode("ColorAdjustEffect")
 ], ColorAdjustEffect);
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$A(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
-var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
+var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
 let ColorFilterEffect = class extends Effect {
   _colorMatrix = new ColorMatrix();
   constructor(properties, children = []) {
@@ -7838,7 +7893,7 @@ let ColorFilterEffect = class extends Effect {
     });
   }
 };
-__publicField$h(ColorFilterEffect, "material", new Material({
+__publicField$i(ColorFilterEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7865,25 +7920,25 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$H([
+__decorateClass$B([
   property()
 ], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$H([
+ColorFilterEffect = __decorateClass$B([
   customNode("ColorFilterEffect")
 ], ColorFilterEffect);
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$z(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
-var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
+var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
 const MAX_COLORS$1 = 50;
 let ColorOverlayEffect = class extends Effect {
   _color = new Color();
@@ -7909,7 +7964,7 @@ let ColorOverlayEffect = class extends Effect {
     });
   }
 };
-__publicField$g(ColorOverlayEffect, "material", new Material({
+__publicField$h(ColorOverlayEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7956,28 +8011,28 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$G([
+__decorateClass$A([
   property({ default: () => [] })
 ], ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$G([
+__decorateClass$A([
   property({ fallback: 0.5 })
 ], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$G([
+ColorOverlayEffect = __decorateClass$A([
   customNode("ColorOverlayEffect")
 ], ColorOverlayEffect);
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$y(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
-var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
+var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
 let ColorRemoveEffect = class extends Effect {
   _color = new Color();
   constructor(properties, children = []) {
@@ -8008,7 +8063,7 @@ let ColorRemoveEffect = class extends Effect {
     });
   }
 };
-__publicField$f(ColorRemoveEffect, "material", new Material({
+__publicField$g(ColorRemoveEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8041,28 +8096,28 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$F([
+__decorateClass$z([
   property({ default: () => [] })
 ], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$F([
+__decorateClass$z([
   property({ fallback: 0.5 })
 ], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$F([
+ColorRemoveEffect = __decorateClass$z([
   customNode("ColorRemoveEffect")
 ], ColorRemoveEffect);
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
-var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
+var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
 const MAX_COLORS = 50;
 let ColorReplaceEffect = class extends Effect {
   _color = new Color();
@@ -8108,7 +8163,7 @@ let ColorReplaceEffect = class extends Effect {
     });
   }
 };
-__publicField$e(ColorReplaceEffect, "material", new Material({
+__publicField$f(ColorReplaceEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8148,25 +8203,139 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$E([
+__decorateClass$y([
   property({ default: () => [] })
 ], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$E([
+__decorateClass$y([
   property({ fallback: 0.05 })
 ], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$E([
+ColorReplaceEffect = __decorateClass$y([
   customNode("ColorReplaceEffect")
 ], ColorReplaceEffect);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$w(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
+  return result;
+};
+var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
+let DrawboardEffect = class extends Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      const viewMatrix = renderer.program.uniforms.viewMatrix;
+      QuadUvGeometry.draw(renderer, DrawboardEffect.material, {
+        sampler: 0,
+        inputSize: [source.width, source.height],
+        zoom: [viewMatrix[0], viewMatrix[4]],
+        translate: [viewMatrix[6], viewMatrix[7]],
+        checkerboard: this.checkerboard ? 1 : 0,
+        checkerboardScale: this.checkerboardScale,
+        pixelGrid: this.pixelGrid ? 1 : 0,
+        pixelGridSize: [
+          viewMatrix[0] > 4 ? Math.ceil(0.5 / viewMatrix[0] * 1e4) / 1e4 : 0,
+          viewMatrix[4] > 4 ? Math.ceil(0.5 / viewMatrix[4] * 1e4) / 1e4 : 0
+        ]
+      });
+    });
+  }
+};
+__publicField$e(DrawboardEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+uniform mat3 projectionMatrix;
+uniform mat3 viewMatrix;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform int checkerboard;
+uniform float checkerboardScale;
+uniform int pixelGrid;
+uniform vec2 pixelGridSize;
+uniform vec2 inputSize;
+uniform vec2 zoom;
+uniform vec2 translate;
+
+vec4 renderCheckerboard(vec2 coord, vec4 color, vec2 scale) {
+  vec2 fractValue = fract(coord * scale) - 0.5;
+  float value = fractValue.x * fractValue.y < 0.0 ? 1.0 : 0.95;
+  return vec4(value * (1.0 - color.a) + color.rgb, 1);
+}
+
+vec3 renderPixelGrid(vec2 coord, vec3 rgb, vec2 size) {
+  vec2 corner = fract(coord);
+  float gridWeight = max(float(corner.x < size.x), float(corner.y < size.y));
+  vec3 gridColor;
+  vec3 weights = vec3(0.299, 0.587, 0.114);
+  float c2 = dot(rgb * rgb, weights);
+  float luminance = sqrt(c2);
+  if (luminance > 0.5) {
+    float target = (luminance - 0.05) / luminance;
+    gridColor = rgb * target;
+  }
+  else {
+    float target = luminance * 0.8 + 0.15;
+    float c1 = dot(rgb, weights);
+    float a = 1.0 - 2.0 * c1 + c2;
+    float b = c2 - c1;
+    gridColor = mix(rgb, vec3(1), (b + sqrt(b * b - a * (c2 - target * target))) / a);
+  }
+  return mix(rgb, gridColor, gridWeight);
+}
+
+void main(void) {
+  vec4 color = texture2D(sampler, vUv);
+  vec2 coord = vec2(vUv.x, 1.0 - vUv.y);
+  coord = (coord * inputSize - translate) / zoom;
+
+  if (checkerboard > 0) {
+    color = renderCheckerboard(coord, color, vec2(checkerboardScale) * zoom);
+  }
+  if (pixelGrid > 0) {
+    color = vec4(
+      renderPixelGrid(coord, color.rgb, pixelGridSize),
+      color.a
+    );
+  }
+  gl_FragColor = color;
+}`
+}));
+__decorateClass$x([
+  property({ fallback: false })
+], DrawboardEffect.prototype, "checkerboard", 2);
+__decorateClass$x([
+  property({ fallback: 1 / 16 })
+], DrawboardEffect.prototype, "checkerboardScale", 2);
+__decorateClass$x([
+  property({ fallback: false })
+], DrawboardEffect.prototype, "pixelGrid", 2);
+DrawboardEffect = __decorateClass$x([
+  customNode("DrawboardEffect")
+], DrawboardEffect);
+
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$t(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -8272,25 +8441,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$D([
+__decorateClass$w([
   property({ fallback: 4 })
 ], GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$D([
+__decorateClass$w([
   property({ fallback: 3 })
 ], GaussianBlurEffect.prototype, "quality", 2);
-GaussianBlurEffect = __decorateClass$D([
+GaussianBlurEffect = __decorateClass$w([
   customNode("GaussianBlurEffect")
 ], GaussianBlurEffect);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$v(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -8354,34 +8523,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$C([
+__decorateClass$v([
   property({ fallback: "#000000FF" })
 ], DropShadowEffect.prototype, "color", 2);
-__decorateClass$C([
+__decorateClass$v([
   property({ fallback: 4 })
 ], DropShadowEffect.prototype, "blur", 2);
-__decorateClass$C([
+__decorateClass$v([
   property({ fallback: 4 })
 ], DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$C([
+__decorateClass$v([
   property({ fallback: 4 })
 ], DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$C([
+__decorateClass$v([
   property({ fallback: false })
 ], DropShadowEffect.prototype, "shadowOnly", 2);
-DropShadowEffect = __decorateClass$C([
+DropShadowEffect = __decorateClass$v([
   customNode("DropShadowEffect")
 ], DropShadowEffect);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$u(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -8426,22 +8595,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$B([
+__decorateClass$u([
   property({ fallback: 5 })
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$B([
+EmbossEffect = __decorateClass$u([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8615,46 +8784,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 10 })
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 512 })
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 100 })
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 0 })
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 2 })
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ fallback: 0 })
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ default: () => [2, 2] })
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ default: () => [-10, 4] })
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$A([
+__decorateClass$t([
   property({ default: () => [10, -4] })
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$A([
+GlitchEffect = __decorateClass$t([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8832,39 +9001,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: 0 })
 ], GodrayEffect.prototype, "time", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: 30 })
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: 0.5 })
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: 2.5 })
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: true })
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ default: () => [0, 0] })
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$z([
+__decorateClass$s([
   property({ fallback: 1 })
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$z([
+GodrayEffect = __decorateClass$s([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8954,28 +9123,28 @@ void main() {
     });
   }
 };
-__decorateClass$y([
+__decorateClass$r([
   property({ fallback: 4 })
 ], KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$y([
+__decorateClass$r([
   property({ fallback: 3 })
 ], KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$y([
+__decorateClass$r([
   property({ default: () => [1, 1] })
 ], KawaseBlurEffect.prototype, "pixelSize", 2);
-KawaseBlurEffect = __decorateClass$y([
+KawaseBlurEffect = __decorateClass$r([
   customNode("KawaseBlurEffect")
 ], KawaseBlurEffect);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -9063,25 +9232,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$x([
+__decorateClass$q([
   property({ internal: true })
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$x([
+__decorateClass$q([
   property({ fallback: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$x([
+MaskEffect = __decorateClass$q([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -9168,40 +9337,40 @@ void main() {
 };
 __publicField$7(OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: "#000000ff" })
 ], OutlineEffect.prototype, "color", 2);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: 1 })
 ], OutlineEffect.prototype, "width", 2);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: "solid" })
 ], OutlineEffect.prototype, "style", 2);
-__decorateClass$w([
+__decorateClass$p([
   property()
 ], OutlineEffect.prototype, "image", 2);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: 1 })
 ], OutlineEffect.prototype, "opacity", 2);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: 0.1 })
 ], OutlineEffect.prototype, "quality", 2);
-__decorateClass$w([
+__decorateClass$p([
   property({ fallback: false })
 ], OutlineEffect.prototype, "knockout", 2);
-OutlineEffect = __decorateClass$w([
+OutlineEffect = __decorateClass$p([
   customNode("OutlineEffect")
 ], OutlineEffect);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -9257,22 +9426,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$v([
+__decorateClass$o([
   property({ fallback: 10 })
 ], PixelateEffect.prototype, "strength", 2);
-PixelateEffect = __decorateClass$v([
+PixelateEffect = __decorateClass$o([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -9385,19 +9554,19 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$u([
+__decorateClass$n([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$u([
+__decorateClass$n([
   property({ fallback: 20 })
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$u([
+__decorateClass$n([
   property({ fallback: -1 })
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$u([
+__decorateClass$n([
   property({ fallback: 0.1 })
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$u([
+ZoomBlurEffect = __decorateClass$n([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
@@ -9445,13 +9614,13 @@ function getDrawOptions(fill, box) {
   return { disableWrapMode, uvTransform };
 }
 
-var __defProp$m = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$j = Object.defineProperty;
+var __decorateClass$m = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$m(target, key, result);
+  if (result) __defProp$j(target, key, result);
   return result;
 };
 class BaseElement2DFill extends CoreObject {
@@ -9561,47 +9730,47 @@ class BaseElement2DFill extends CoreObject {
     return this;
   }
 }
-__decorateClass$t([
+__decorateClass$m([
   property({ fallback: true })
 ], BaseElement2DFill.prototype, "enabled");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "color");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "image");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "linearGradient");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "radialGradient");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "cropRect");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "stretchRect");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "dpi");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$t([
+__decorateClass$m([
   property()
 ], BaseElement2DFill.prototype, "opacity");
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$i = Object.defineProperty;
+var __decorateClass$l = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$l(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 class BaseElement2DBackground extends BaseElement2DFill {
@@ -9619,17 +9788,17 @@ class BaseElement2DBackground extends BaseElement2DFill {
     }
   }
 }
-__decorateClass$s([
+__decorateClass$l([
   property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
-var __defProp$k = Object.defineProperty;
-var __decorateClass$r = (decorators, target, key, kind) => {
+var __defProp$h = Object.defineProperty;
+var __decorateClass$k = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$k(target, key, result);
+  if (result) __defProp$h(target, key, result);
   return result;
 };
 class BaseElement2DForeground extends BaseElement2DFill {
@@ -9647,17 +9816,17 @@ class BaseElement2DForeground extends BaseElement2DFill {
     }
   }
 }
-__decorateClass$r([
+__decorateClass$k([
   property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
-var __defProp$j = Object.defineProperty;
-var __decorateClass$q = (decorators, target, key, kind) => {
+var __defProp$g = Object.defineProperty;
+var __decorateClass$j = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$j(target, key, result);
+  if (result) __defProp$g(target, key, result);
   return result;
 };
 class BaseElement2DOutline extends BaseElement2DFill {
@@ -9700,29 +9869,29 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.stroke({ disableWrapMode });
   }
 }
-__decorateClass$q([
+__decorateClass$j([
   property({ fallback: "#00000000" })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$q([
+__decorateClass$j([
   property({ fallback: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$q([
+__decorateClass$j([
   property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
-__decorateClass$q([
+__decorateClass$j([
   property({ fallback: "butt" })
 ], BaseElement2DOutline.prototype, "lineCap");
-__decorateClass$q([
+__decorateClass$j([
   property({ fallback: "miter" })
 ], BaseElement2DOutline.prototype, "lineJoin");
 
-var __defProp$i = Object.defineProperty;
-var __decorateClass$p = (decorators, target, key, kind) => {
+var __defProp$f = Object.defineProperty;
+var __decorateClass$i = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$f(target, key, result);
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
@@ -9762,29 +9931,29 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$p([
+__decorateClass$i([
   property({ fallback: true })
 ], BaseElement2DShadow.prototype, "enabled");
-__decorateClass$p([
+__decorateClass$i([
   property({ fallback: "#000000FF" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$p([
+__decorateClass$i([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$p([
+__decorateClass$i([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$p([
+__decorateClass$i([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
-var __defProp$h = Object.defineProperty;
-var __decorateClass$o = (decorators, target, key, kind) => {
+var __defProp$e = Object.defineProperty;
+var __decorateClass$h = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$e(target, key, result);
   return result;
 };
 class BaseElement2DShape extends CoreObject {
@@ -9859,19 +10028,19 @@ class BaseElement2DShape extends CoreObject {
     }
   }
 }
-__decorateClass$o([
+__decorateClass$h([
   property({ fallback: true })
 ], BaseElement2DShape.prototype, "enabled");
-__decorateClass$o([
+__decorateClass$h([
   property()
 ], BaseElement2DShape.prototype, "preset");
-__decorateClass$o([
+__decorateClass$h([
   property()
 ], BaseElement2DShape.prototype, "svg");
-__decorateClass$o([
+__decorateClass$h([
   property()
 ], BaseElement2DShape.prototype, "viewBox");
-__decorateClass$o([
+__decorateClass$h([
   property()
 ], BaseElement2DShape.prototype, "paths");
 
@@ -9887,13 +10056,13 @@ for (const key in defaultStyles$1) {
   defineProperty(BaseElement2DStyle, key, { fallback });
 }
 
-var __defProp$g = Object.defineProperty;
-var __decorateClass$n = (decorators, target, key, kind) => {
+var __defProp$d = Object.defineProperty;
+var __decorateClass$g = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$g(target, key, result);
+  if (result) __defProp$d(target, key, result);
   return result;
 };
 class BaseElement2DText extends CoreObject {
@@ -10083,34 +10252,34 @@ class BaseElement2DText extends CoreObject {
     });
   }
 }
-__decorateClass$n([
+__decorateClass$g([
   property({ fallback: true })
 ], BaseElement2DText.prototype, "enabled");
-__decorateClass$n([
+__decorateClass$g([
   property({ fallback: () => [] })
 ], BaseElement2DText.prototype, "content");
-__decorateClass$n([
+__decorateClass$g([
   property({ alias: "parent.style.json" })
 ], BaseElement2DText.prototype, "style");
-__decorateClass$n([
+__decorateClass$g([
   property()
 ], BaseElement2DText.prototype, "effects");
-__decorateClass$n([
+__decorateClass$g([
   property()
 ], BaseElement2DText.prototype, "fill");
-__decorateClass$n([
+__decorateClass$g([
   property()
 ], BaseElement2DText.prototype, "outline");
-__decorateClass$n([
+__decorateClass$g([
   property({ alias: "base.measureDom" })
 ], BaseElement2DText.prototype, "measureDom");
-__decorateClass$n([
+__decorateClass$g([
   property({ alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -10317,6 +10486,14 @@ let BaseElement2D = class extends Node2D {
     super.updateGlobalTransform();
     this._updateOverflow();
   }
+  _relayout(batchables) {
+    return super._relayout(batchables).map((batchable) => {
+      return {
+        ...batchable,
+        dimension: this.size.toFloat32Array()
+      };
+    });
+  }
   getRect() {
     return this.getGlobalAabb();
   }
@@ -10529,7 +10706,7 @@ let BaseElement2D = class extends Node2D {
     });
   }
 };
-BaseElement2D = __decorateClass$m([
+BaseElement2D = __decorateClass$f([
   customNode("BaseElement2D")
 ], BaseElement2D);
 
@@ -10556,9 +10733,9 @@ class FlexElement2DStyle extends BaseElement2DStyle {
   }
 }
 
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -10609,7 +10786,7 @@ let Element2D = class extends BaseElement2D {
     }
   }
 };
-Element2D = __decorateClass$l([
+Element2D = __decorateClass$e([
   customNode("Element2D")
 ], Element2D);
 
@@ -10919,9 +11096,9 @@ class FlexLayout {
   }
 }
 
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -10998,18 +11175,18 @@ let FlexElement2D = class extends BaseElement2D {
     }
   }
 };
-FlexElement2D = __decorateClass$k([
+FlexElement2D = __decorateClass$d([
   customNode("FlexElement2D")
 ], FlexElement2D);
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let Image2D = class extends Element2D {
@@ -11145,19 +11322,19 @@ let Image2D = class extends Element2D {
     });
   }
 };
-__decorateClass$j([
+__decorateClass$c([
   property({ internal: true })
 ], Image2D.prototype, "texture", 2);
-__decorateClass$j([
+__decorateClass$c([
   property({ fallback: "" })
 ], Image2D.prototype, "src", 2);
-__decorateClass$j([
+__decorateClass$c([
   property()
 ], Image2D.prototype, "srcRect", 2);
-__decorateClass$j([
+__decorateClass$c([
   property({ fallback: false })
 ], Image2D.prototype, "gif", 2);
-Image2D = __decorateClass$j([
+Image2D = __decorateClass$c([
   customNode("Image2D")
 ], Image2D);
 
@@ -11181,14 +11358,14 @@ class TextureRect2D extends Element2D {
   }
 }
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let Lottie2D = class extends TextureRect2D {
@@ -11231,20 +11408,20 @@ let Lottie2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$i([
+__decorateClass$b([
   property({ fallback: "" })
 ], Lottie2D.prototype, "src", 2);
-Lottie2D = __decorateClass$i([
+Lottie2D = __decorateClass$b([
   customNode("Lottie2D")
 ], Lottie2D);
 
-var __defProp$d = Object.defineProperty;
-var __decorateClass$h = (decorators, target, key, kind) => {
+var __defProp$a = Object.defineProperty;
+var __decorateClass$a = (decorators, target, key, kind) => {
   var result = void 0 ;
   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$a(target, key, result);
   return result;
 };
 class TransformRect2D extends Element2D {
@@ -11290,18 +11467,18 @@ class TransformRect2D extends Element2D {
     this._drawEllipse(width, height / 2);
   }
 }
-__decorateClass$h([
+__decorateClass$a([
   property({ fallback: 6 })
 ], TransformRect2D.prototype, "handleSize");
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let Video2D = class extends TextureRect2D {
@@ -11354,21 +11531,21 @@ let Video2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$g([
+__decorateClass$9([
   property({ fallback: "" })
 ], Video2D.prototype, "src", 2);
-Video2D = __decorateClass$g([
+Video2D = __decorateClass$9([
   customNode("Video2D")
 ], Video2D);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -11687,19 +11864,19 @@ let Animation = class extends TimelineNode {
     });
   }
 };
-__decorateClass$f([
+__decorateClass$8([
   property({ fallback: "parent" })
 ], Animation.prototype, "effectMode", 2);
-__decorateClass$f([
+__decorateClass$8([
   property({ fallback: false })
 ], Animation.prototype, "loop", 2);
-__decorateClass$f([
+__decorateClass$8([
   property({ default: () => [] })
 ], Animation.prototype, "keyframes", 2);
-__decorateClass$f([
+__decorateClass$8([
   property()
 ], Animation.prototype, "easing", 2);
-Animation = __decorateClass$f([
+Animation = __decorateClass$8([
   customNode("Animation", {
     renderMode: "disabled",
     processMode: "pausable",
@@ -12580,11 +12757,11 @@ class WebAudio extends AudioPipeline {
   }
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __defNormalProp$4 = (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 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -12795,7 +12972,7 @@ let Audio = class extends TimelineNode {
   }
 };
 __publicField$4(Audio, "_soundPool", []);
-Audio = __decorateClass$e([
+Audio = __decorateClass$7([
   customNode("Audio")
 ], Audio);
 
@@ -12803,14 +12980,14 @@ class AudioSpectrum extends Node2D {
   //
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let AudioWaveform = class extends Element2D {
@@ -12901,430 +13078,23 @@ let AudioWaveform = class extends Element2D {
     }
   }
 };
-__decorateClass$d([
+__decorateClass$6([
   property()
 ], AudioWaveform.prototype, "src", 2);
-__decorateClass$d([
+__decorateClass$6([
   property({ fallback: 0 })
 ], AudioWaveform.prototype, "gap", 2);
-__decorateClass$d([
+__decorateClass$6([
   property({ fallback: "#000000" })
 ], AudioWaveform.prototype, "color", 2);
-AudioWaveform = __decorateClass$d([
+AudioWaveform = __decorateClass$6([
   customNode("AudioWaveform")
 ], AudioWaveform);
 
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let Control = class extends Element2D {
-  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) {
-    super._updateStyleProperty(key, value, oldValue);
-    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) {
-  }
-};
-Control = __decorateClass$c([
-  customNode("Control")
-], Control);
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
-  return result;
-};
-let Range = class extends Control {
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-  _updateProperty(key, value, oldValue) {
-    super._updateProperty(key, value, oldValue);
-    switch (key) {
-      case "allowGreater":
-      case "allowLesser":
-      case "page":
-      case "minValue":
-      case "maxValue":
-      case "step":
-      case "value":
-        this.requestRedraw();
-        break;
-    }
-  }
-};
-__decorateClass$b([
-  property({ fallback: false })
-], Range.prototype, "allowGreater", 2);
-__decorateClass$b([
-  property({ fallback: false })
-], Range.prototype, "allowLesser", 2);
-__decorateClass$b([
-  property({ fallback: 1 })
-], Range.prototype, "page", 2);
-__decorateClass$b([
-  property({ fallback: 0 })
-], Range.prototype, "minValue", 2);
-__decorateClass$b([
-  property({ fallback: 100 })
-], Range.prototype, "maxValue", 2);
-__decorateClass$b([
-  property({ fallback: 0.01 })
-], Range.prototype, "step", 2);
-__decorateClass$b([
-  property({ fallback: 0 })
-], Range.prototype, "value", 2);
-Range = __decorateClass$b([
-  customNode("Range")
-], Range);
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
-};
-let Ruler = class extends Control {
-  texture = new CanvasTexture();
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties);
-    this.append(children);
-  }
-  _updateProperty(key, value, oldValue) {
-    super._updateProperty(key, value, oldValue);
-    switch (key) {
-      case "offsetX":
-      case "offsetY":
-      case "thickness":
-      case "markHeight":
-      case "color":
-      case "markBackgroundColor":
-      case "markColor":
-      case "gap":
-      case "scale":
-        this.requestRedraw();
-        break;
-    }
-  }
-  _updateStyleProperty(key, value, oldValue) {
-    super._updateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "width":
-      case "height":
-        this.texture[key] = value;
-        this.requestRedraw();
-        break;
-    }
-  }
-  _drawTexture() {
-    const { width, height } = this.size;
-    const {
-      offsetX,
-      offsetY,
-      thickness,
-      markHeight,
-      markBackgroundColor,
-      markColor,
-      color,
-      gap: _gap,
-      gapScale: _scale
-    } = this;
-    const canvas = this.texture.source;
-    const ctx = canvas.getContext("2d");
-    ctx.reset();
-    ctx.scale(this.texture.pixelRatio, this.texture.pixelRatio);
-    const x = Math.round(offsetX);
-    const y = Math.round(offsetY);
-    ctx.beginPath();
-    ctx.fillStyle = markBackgroundColor || "#EEE";
-    ctx.fillRect(0, 0, width, thickness);
-    ctx.fillRect(0, 0, thickness, height);
-    ctx.fill();
-    ctx.strokeStyle = markColor || "#000";
-    ctx.moveTo(thickness, 0);
-    ctx.lineTo(thickness, height);
-    ctx.moveTo(0, thickness);
-    ctx.lineTo(width, thickness);
-    ctx.stroke();
-    const originGap = _gap;
-    const curGap = _gap * _scale;
-    let scale;
-    let gap;
-    let markSize;
-    let axis;
-    let i;
-    if (originGap >= curGap) {
-      scale = originGap / curGap;
-      gap = Math.floor(scale) * originGap / 20;
-      markSize = originGap / 20 * Math.floor(scale) / scale;
-    } else {
-      scale = curGap / originGap;
-      gap = Math.floor(originGap / 20 / scale);
-      if (gap >= 2) {
-        gap = Math.floor(gap / 2) * 2;
-      } else {
-        gap = 1;
-      }
-      markSize = gap * scale;
-    }
-    ctx.fillStyle = ctx.strokeStyle;
-    for (axis = x, i = 0; axis < width; i++, axis += markSize) {
-      ctx.moveTo(axis, thickness - (i % 5 ? markHeight : 2 * markHeight));
-      ctx.lineTo(axis, thickness);
-    }
-    for (axis = x, i = 0; axis > thickness; i++, axis -= markSize) {
-      ctx.moveTo(axis, thickness - (i % 5 ? markHeight : 2 * markHeight));
-      ctx.lineTo(axis, thickness);
-    }
-    let textOffset = 0;
-    for (axis = y, i = 0; axis > thickness; i++, axis -= markSize) {
-      ctx.moveTo(thickness - (i % 5 ? markHeight : 2 * markHeight), axis);
-      ctx.lineTo(thickness, axis);
-    }
-    for (axis = y, i = 0; axis < height; i++, axis += markSize) {
-      ctx.moveTo(thickness - (i % 5 ? markHeight : 2 * markHeight), axis);
-      ctx.lineTo(thickness, axis);
-    }
-    ctx.save();
-    ctx.fillStyle = color;
-    ctx.scale(0.8, 0.8);
-    textOffset = thickness - 8;
-    for (axis = x, i = 0; axis < width; i++, axis += markSize) {
-      if (i % 10 === 0) {
-        ctx.fillText(String(Math.ceil(gap * i)), axis * 1.25 - 3, textOffset * 1.25);
-      }
-    }
-    for (axis = x, i = 0; axis > thickness; i++, axis -= markSize) {
-      if (i % 10 === 0) {
-        ctx.fillText(String(Math.ceil(-gap * i)), axis * 1.25 - 3, textOffset * 1.25);
-      }
-    }
-    textOffset = 0;
-    for (axis = y, i = 0; axis > thickness; i++, axis -= markSize) {
-      if (i % 10 === 0) {
-        ctx.fillText(String(Math.ceil(gap * i)), textOffset * 1.25, axis * 1.25 + 3);
-      }
-    }
-    for (axis = y, i = 0; axis < height; i++, axis += markSize) {
-      if (i % 10 === 0) {
-        ctx.fillText(String(Math.ceil(-gap * i)), textOffset * 1.25, axis * 1.25 + 3);
-      }
-    }
-    ctx.restore();
-    ctx.stroke();
-    this.texture.requestUpload();
-  }
-  _draw() {
-    this._drawTexture();
-    const texture = this.texture;
-    if (texture?.valid) {
-      this.context.fillStyle = texture;
-      this.context.uvTransform = new Transform2D().scale(
-        1 / this.size.width,
-        1 / this.size.height
-      );
-      this.context.rect(0, 0, texture.width, texture.height);
-      this.context.fill();
-    }
-  }
-};
-__decorateClass$a([
-  property({ fallback: 0 })
-], Ruler.prototype, "offsetX", 2);
-__decorateClass$a([
-  property({ fallback: 0 })
-], Ruler.prototype, "offsetY", 2);
-__decorateClass$a([
-  property({ fallback: 20 })
-], Ruler.prototype, "thickness", 2);
-__decorateClass$a([
-  property({ fallback: 3 })
-], Ruler.prototype, "markHeight", 2);
-__decorateClass$a([
-  property({ fallback: "#b2b6bc" })
-], Ruler.prototype, "color", 2);
-__decorateClass$a([
-  property({ fallback: "#f9f9fa" })
-], Ruler.prototype, "markBackgroundColor", 2);
-__decorateClass$a([
-  property({ fallback: "#b2b6bc" })
-], Ruler.prototype, "markColor", 2);
-__decorateClass$a([
-  property({ fallback: 300 })
-], Ruler.prototype, "gap", 2);
-__decorateClass$a([
-  property({ fallback: 1 })
-], Ruler.prototype, "gapScale", 2);
-Ruler = __decorateClass$a([
-  customNode("Ruler")
-], Ruler);
-
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
-  return result;
-};
-let ScrollBar = class extends Range {
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-  _updateStyleProperty(key, value, oldValue) {
-    super._updateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "width":
-      case "height":
-      case "left":
-      case "top":
-        this.requestRedraw();
-        break;
-    }
-  }
-  _rect() {
-    const { size, position } = this;
-    let left, top, width, height, radii;
-    if (this.direction === "vertical") {
-      width = 10;
-      height = size.height * (this.page / (this.maxValue - this.minValue));
-      left = position.left + size.width - width;
-      top = size.height * (this.value / (this.maxValue - this.minValue));
-      radii = width / 2;
-    } else {
-      width = size.width * (this.page / (this.maxValue - this.minValue));
-      height = 10;
-      left = size.width * (this.value / (this.maxValue - this.minValue));
-      top = position.top + size.height - height;
-      radii = height / 2;
-    }
-    return { left, top, width, height, radii };
-  }
-  _draw() {
-    const { left, top, width, height, radii } = this._rect();
-    this.context.roundRect(left, top, width, height, radii);
-    this.context.fillStyle = 34;
-    this.context.fill();
-  }
-  _pointerInput(point, key) {
-    const { left, top, width, height } = this._rect();
-    const flag = point.x >= left && point.x < left + width && point.y >= top && point.y < top + height;
-    switch (key) {
-      case "pointerdown":
-      case "pointermove":
-        if (flag) {
-          this._tree?.input.setCursor("pointer");
-        } else {
-          this._tree?.input.setCursor(void 0);
-        }
-        break;
-    }
-    return false;
-  }
-};
-__decorateClass$9([
-  property({ fallback: "vertical" })
-], ScrollBar.prototype, "direction", 2);
-ScrollBar = __decorateClass$9([
-  customNode("ScrollBar")
-], ScrollBar);
-
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let XScrollBar = class extends ScrollBar {
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-};
-XScrollBar = __decorateClass$8([
-  customNode("XScrollBar", {
-    direction: "horizontal"
-  })
-], XScrollBar);
-
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let YScrollBar = class extends ScrollBar {
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-};
-YScrollBar = __decorateClass$7([
-  customNode("YScrollBar", {
-    direction: "vertical"
-  })
-], YScrollBar);
-
 var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -13389,22 +13159,22 @@ let Scaler = class extends Node {
     }
   }
 };
-__decorateClass$6([
+__decorateClass$5([
   property({ default: 1 })
 ], Scaler.prototype, "translateX", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ default: 1 })
 ], Scaler.prototype, "translateY", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ default: 1 })
 ], Scaler.prototype, "scale", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ default: 0.05 })
 ], Scaler.prototype, "minScale", 2);
-__decorateClass$6([
+__decorateClass$5([
   property({ default: 10 })
 ], Scaler.prototype, "maxScale", 2);
-Scaler = __decorateClass$6([
+Scaler = __decorateClass$5([
   customNode("Scaler", {
     processMode: "disabled",
     renderMode: "disabled"
@@ -13412,10 +13182,10 @@ Scaler = __decorateClass$6([
 ], Scaler);
 
 var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13503,15 +13273,15 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-KawaseTransition = __decorateClass$5([
+KawaseTransition = __decorateClass$4([
   customNode("KawaseTransition")
 ], KawaseTransition);
 
 var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13556,15 +13326,15 @@ void main() {
   gl_FragColor = mix(src2Color, src1Color, mixPercent);
 }`
 }));
-LeftEraseTransition = __decorateClass$4([
+LeftEraseTransition = __decorateClass$3([
   customNode("LeftEraseTransition")
 ], LeftEraseTransition);
 
 var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13663,15 +13433,15 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-TiltShiftTransition = __decorateClass$3([
+TiltShiftTransition = __decorateClass$2([
   customNode("TiltShiftTransition")
 ], TiltShiftTransition);
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -13757,7 +13527,7 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-TwistTransition = __decorateClass$2([
+TwistTransition = __decorateClass$1([
   customNode("TwistTransition")
 ], TwistTransition);
 
@@ -14121,220 +13891,6 @@ 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());
 
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let CanvasItemEditor = class extends Control {
-  _pointerStart;
-  _pointerOffset;
-  selected;
-  dragging;
-  hovered;
-  hover = new Element2D({
-    name: "hover",
-    internalMode: "back",
-    style: {
-      visibility: "hidden",
-      outlineStyle: "solid",
-      outlineColor: "#00FF00FF",
-      outlineWidth: 2,
-      pointerEvents: "none"
-    }
-  });
-  transformRect = new TransformRect2D({
-    name: "transformRect",
-    internalMode: "back",
-    style: {
-      visibility: "hidden",
-      pointerEvents: "none"
-    }
-  });
-  scaler = new Scaler({
-    name: "Scaler",
-    internalMode: "back"
-  }).on("updateScale", (scale) => {
-    this.ruler.gapScale = scale;
-    this._updateScrollbars();
-    this._updateSelectionRect();
-  });
-  xScrollBar = new XScrollBar({
-    name: "XScrollBar",
-    internalMode: "back",
-    style: {
-      visibility: "hidden"
-    }
-  });
-  yScrollBar = new YScrollBar({
-    name: "yScrollBar",
-    internalMode: "back",
-    style: {
-      visibility: "hidden"
-    }
-  });
-  drawboard = new Element2D({
-    name: "drawboard",
-    style: {
-      width: 500,
-      height: 500,
-      backgroundColor: "#00FFFFFF",
-      // overflow: 'hidden',
-      pointerEvents: "none"
-      // boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)',
-    }
-  }, [
-    this.scaler
-  ]);
-  ruler = new Ruler({
-    name: "ruler",
-    offsetX: 100,
-    offsetY: 100,
-    style: {
-      pointerEvents: "none"
-    }
-  }, [
-    this.drawboard,
-    this.hover,
-    this.transformRect,
-    this.xScrollBar,
-    this.yScrollBar
-  ]);
-  constructor() {
-    super();
-    this._onPointerdown = this._onPointerdown.bind(this);
-    this._onPointermove = this._onPointermove.bind(this);
-    this._onPointerup = this._onPointerup.bind(this);
-    this.append(this.ruler);
-  }
-  _updateStyleProperty(key, value, oldValue) {
-    super._updateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "width":
-        this.drawboard.style.left = (this.size.width - this.drawboard.size.width) / 2;
-        this.ruler.offsetX = this.drawboard.style.left;
-        break;
-      case "height":
-        this.drawboard.style.top = (this.size.height - this.drawboard.size.height) / 2;
-        this.ruler.offsetY = this.drawboard.style.top;
-        break;
-    }
-  }
-  _guiInput(event, key) {
-    super._guiInput(event, key);
-    switch (key) {
-      case "pointerdown":
-        this._onPointerdown(event);
-        break;
-      case "pointermove":
-        this._onPointermove(event);
-        break;
-      case "pointerup":
-        this._onPointerup();
-        break;
-    }
-  }
-  _onPointerdown(e) {
-    let target = e.target;
-    if (target?.equal(this)) {
-      target = void 0;
-    }
-    if (target?.equal(this.transformRect)) {
-      target = this.selected;
-    }
-    this._pointerOffset = { x: e.offsetX, y: e.offsetY };
-    this.selected = target;
-    this.dragging = target;
-    if (target instanceof Element2D) {
-      this._pointerStart = target.style.clone();
-    } else {
-      this._pointerStart = void 0;
-    }
-    this._updateHover();
-    this._updateSelectionRect();
-  }
-  _onPointermove(e) {
-    let target = e.target;
-    if (target?.equal(this)) {
-      target = void 0;
-    }
-    if (target?.equal(this.transformRect)) {
-      target = this.selected;
-    }
-    const { selected, dragging, _pointerStart, _pointerOffset } = this;
-    if (selected && target?.equal(selected)) {
-      this.hovered = void 0;
-    } else {
-      this.hovered = target;
-    }
-    const offset = _pointerOffset ? { x: e.offsetX - _pointerOffset.x, y: e.offsetY - _pointerOffset.y } : { x: 0, y: 0 };
-    if (dragging && _pointerStart) {
-      dragging.style.left = _pointerStart.left + offset.x / this.scaler.scale;
-      dragging.style.top = _pointerStart.top + offset.y / this.scaler.scale;
-      dragging.update();
-    }
-    this._updateHover();
-    this._updateSelectionRect();
-  }
-  _onPointerup() {
-    this.dragging = void 0;
-    this._updateHover();
-    this._updateSelectionRect();
-  }
-  _copyGlobalTransform(a, b) {
-    a.style.visibility = "visible";
-    a.style.width = b.globalScale.x * b.size.x;
-    a.style.height = b.globalScale.y * b.size.y;
-    a.style.left = b.globalPosition.x;
-    a.style.top = b.globalPosition.y;
-    a.style.rotate = b.globalRotation;
-    a.update();
-  }
-  _updateHover() {
-    const hovered = this.hovered;
-    if (hovered instanceof Element2D) {
-      this.hover.style.visibility = "visible";
-      this._copyGlobalTransform(this.hover, hovered);
-      this.hover.requestRedraw();
-    } else {
-      this.hover.style.visibility = "hidden";
-    }
-  }
-  _updateSelectionRect() {
-    if (this.selected) {
-      this.transformRect.style.visibility = "visible";
-      this._copyGlobalTransform(this.transformRect, this.selected);
-    } else {
-      this.transformRect.style.visibility = "hidden";
-    }
-  }
-  _updateScrollbars() {
-    const scale = this.ruler.gapScale;
-    const scrollHeight = this.drawboard.size.height * scale;
-    const scrollWidth = this.drawboard.size.width * scale;
-    if (scrollHeight > this.size.height) {
-      this.yScrollBar.style.visibility = "visible";
-      this.yScrollBar.maxValue = scrollHeight;
-      this.yScrollBar.page = this.size.height;
-    } else {
-      this.yScrollBar.style.visibility = "hidden";
-    }
-    if (scrollWidth > this.size.width) {
-      this.xScrollBar.style.visibility = "visible";
-      this.xScrollBar.maxValue = scrollWidth;
-      this.xScrollBar.page = this.size.width;
-    } else {
-      this.xScrollBar.style.visibility = "hidden";
-    }
-  }
-};
-CanvasItemEditor = __decorateClass$1([
-  customNode("CanvasItemEditor")
-], CanvasItemEditor);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -14571,6 +14127,7 @@ async function start(sleep = 100) {
 async function task(options) {
   const { debug = false, fonts, width, height, time = 0, data } = options;
   engine ??= new Engine({
+    pixelRatio: 1,
     width: 1,
     height: 1,
     preserveDrawingBuffer: true
@@ -14599,4 +14156,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, Meta, MouseInputEvent, Node, Node2D, OutlineEffect, 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, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, 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, Window, XScrollBar, YScrollBar, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag$1 as frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DrawboardEffect, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, Meta, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, Renderer, Resource, 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, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, 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, Window, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag$1 as frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };