modern-canvas 0.6.13 → 0.7.1

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { defineProperty, EventEmitter, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, clearUndef, idGenerator, isColorFillObject, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
+import { defineProperty, EventEmitter, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, isColorFillObject, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
-import { Text, textDefaultStyle } from 'modern-text';
+import { Text } from 'modern-text';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 
 const customNodes = /* @__PURE__ */ new Map();
@@ -1075,7 +1075,7 @@ class Vector extends EventEmitter {
   get length() {
     return this.dim;
   }
-  _operate(operator, target, output) {
+  operate(operator, target, output) {
     const { dim: length, _array: array } = this;
     let targetArray;
     if (typeof target === "number") {
@@ -1161,29 +1161,41 @@ class Vector extends EventEmitter {
     }
     return outputObject?.set(outputArray) ?? outputArray;
   }
-  add(value, output) {
-    return this._operate("+", value, output);
+  add(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("+", value);
   }
-  sub(value, output) {
-    return this._operate("-", value, output);
+  sub(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("-", value);
   }
-  multiply(value, output) {
-    return this._operate("*", value, output);
+  multiply(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("*", value);
   }
-  divide(value, output) {
-    return this._operate("/", value, output);
+  divide(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("/", value);
   }
   rotate(angle) {
-    return this._operate("rot", angle);
+    return this.operate("rot", angle);
   }
   set(value, ...args) {
     if (args.length && typeof value === "number") {
       value = [value, ...args];
     }
-    return this._operate("=", value);
+    return this.operate("=", value);
   }
   equals(value) {
-    return this._operate("==", value);
+    return this.operate("==", value);
   }
   copy(value) {
     return this.set(value);
@@ -1195,11 +1207,14 @@ class Vector extends EventEmitter {
   }
   _onUpdate(_array) {
   }
+  toName() {
+    return `Vector${this.dim}`;
+  }
   toArray() {
     return this._array.slice();
   }
-  toName() {
-    return `Vector${this.dim}`;
+  toJSON() {
+    return this.toArray();
   }
 }
 
@@ -1219,7 +1234,7 @@ class Matrix extends EventEmitter {
   get length() {
     return this.cols * this.rows;
   }
-  _operate(operator, target, output) {
+  operate(operator, target, output) {
     const { cols, rows, length, _array: array } = this;
     let targetArray;
     if (typeof target === "number") {
@@ -1306,7 +1321,7 @@ class Matrix extends EventEmitter {
     return this.set(array);
   }
   set(value) {
-    return this._operate("=", value);
+    return this.operate("=", value);
   }
   copy(value) {
     return this.set(value);
@@ -1317,7 +1332,7 @@ class Matrix extends EventEmitter {
     return cloned;
   }
   multiply(value, output) {
-    return this._operate("*", value, output);
+    return this.operate("*", value, output);
   }
   _onUpdate(_array) {
     this.dirtyId++;
@@ -1339,7 +1354,7 @@ class Matrix extends EventEmitter {
     return `Matrix${this.rows}(${this.rows}x${this.cols})`;
   }
   toJSON() {
-    return this._array;
+    return this._array.slice();
   }
 }
 
@@ -1351,7 +1366,7 @@ class Matrix4 extends Matrix {
 
 const DEG_TO_RAD = PI / 180;
 const RAD_TO_DEG = 180 / PI;
-function clamp(min, val, max) {
+function clamp(val, min, max) {
   return Math.max(min, Math.min(val, max));
 }
 function lerp(a, b, weight) {
@@ -1380,7 +1395,7 @@ const curves = {
 class Vector4 extends Vector {
   constructor(x = 0, y = 0, z = 0, m = 0) {
     super(4);
-    this.set([x, y, z, m]);
+    this.set(x, y, z, m);
   }
 }
 
@@ -1521,7 +1536,7 @@ class ColorMatrix extends Matrix {
     ]);
   }
   sepia(amount = 1) {
-    const v = clamp(0, amount, 1);
+    const v = clamp(amount, 0, 1);
     return this.multiply([
       lerp(1, 0.393, v),
       lerp(0, 0.7689999, v),
@@ -1570,7 +1585,7 @@ class ColorMatrix extends Matrix {
     ]);
   }
   grayscale(amount = 1) {
-    const v = clamp(0, amount, 1);
+    const v = clamp(amount, 0, 1);
     const r = lerp(1, 0.3, v);
     const rr = lerp(0, 0.3, v);
     const g = lerp(1, 0.59, v);
@@ -1833,7 +1848,7 @@ class Vector2 extends Vector {
     return this;
   }
   static lerp(a, b, t) {
-    return new Vector2(b).clone().sub(new Vector2(a)).multiply(t).add(new Vector2(a));
+    return new Vector2(b).clone().sub(a).multiply(t).add(a);
   }
 }
 
@@ -1899,6 +1914,14 @@ class Rect2 {
   toArray() {
     return [this.x, this.y, this.width, this.height];
   }
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    };
+  }
 }
 
 class Transform2D extends Matrix3 {
@@ -2073,13 +2096,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$Q = Object.defineProperty;
-var __decorateClass$Y = (decorators, target, key, kind) => {
+var __defProp$P = Object.defineProperty;
+var __decorateClass$Z = (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$P(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2122,10 +2145,10 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$Y([
-  property({ fallback: 24 })
+__decorateClass$Z([
+  property({ fallback: 60 })
 ], MainLoop.prototype, "fps");
-__decorateClass$Y([
+__decorateClass$Z([
   property({ fallback: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -3451,6 +3474,33 @@ function getVarTypeSize(type) {
   }
 }
 
+function applyMatrixToPoint(m, x, y) {
+  const [a, d, g, b, e, h, c, f, i] = m;
+  const xp = a * x + b * y + c;
+  const yp = d * x + e * y + f;
+  const wp = g * x + h * y + i;
+  return { x: xp / wp, y: yp / wp };
+}
+function transformRectToAABB(m, rect) {
+  const { x, y, width, height } = rect;
+  const p1 = applyMatrixToPoint(m, x, y);
+  const p2 = applyMatrixToPoint(m, x + width, y);
+  const p3 = applyMatrixToPoint(m, x + width, y + height);
+  const p4 = applyMatrixToPoint(m, x, y + height);
+  const pts = [p1, p2, p3, p4];
+  const xs = pts.map((p) => p.x);
+  const ys = pts.map((p) => p.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
 class WebGLScissorModule extends WebGLModule {
   install(renderer) {
     super.install(renderer);
@@ -3476,19 +3526,21 @@ class WebGLScissorModule extends WebGLModule {
   }
   use() {
     const renderer = this._renderer;
-    const { pixelRatio, mask, viewport, screen, gl } = renderer;
-    const rect = mask.last.mask;
-    let y;
+    const { pixelRatio, mask, viewport, screen, gl, program } = renderer;
+    const { worldTransformMatrix } = program.uniforms;
+    const rect = transformRectToAABB(worldTransformMatrix, mask.last.mask);
+    const { x, y, width, height } = rect;
+    let scissorY;
     if (viewport.boundViewport) {
-      y = viewport.boundViewport.height - (rect.height + rect.y) * pixelRatio;
+      scissorY = viewport.boundViewport.height - (height + y) * pixelRatio;
     } else {
-      y = (screen.height - (rect.height + rect.y)) * pixelRatio;
+      scissorY = (screen.height - (height + y)) * pixelRatio;
     }
     gl.scissor(
-      rect.x * pixelRatio,
-      y,
-      rect.width * pixelRatio,
-      rect.height * pixelRatio
+      x * pixelRatio,
+      scissorY,
+      width * pixelRatio,
+      height * pixelRatio
     );
   }
 }
@@ -4165,15 +4217,13 @@ class WebGLRenderer extends Renderer {
     this.view?.removeEventListener("webglcontextrestored", this._onContextRestored, false);
     this.extensions.loseContext?.loseContext();
   }
-  toPixels() {
-    const width = this.gl.drawingBufferWidth;
-    const height = this.gl.drawingBufferHeight;
+  toPixels(x = 0, y = 0, width = this.gl.drawingBufferWidth, height = this.gl.drawingBufferHeight) {
     const length = width * height * 4;
     const row = width * 4;
     const end = (height - 1) * row;
     const flipedPixels = new Uint8Array(length);
     const pixels = new Uint8ClampedArray(length);
-    this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, flipedPixels);
+    this.gl.readPixels(x, y, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, flipedPixels);
     for (let i = 0; i < length; i += row) {
       pixels.set(flipedPixels.subarray(i, i + row), end - i);
     }
@@ -4205,152 +4255,6 @@ class FontLoader extends Loader {
   }
 }
 
-const defaultFilters = {
-  "brightness": 1,
-  "contrast": 1,
-  "grayscale": 0,
-  "hue-rotate": 0,
-  "invert": 0,
-  "opacity": 1,
-  "saturate": 1,
-  "sepia": 0
-};
-function parseCSSFilter(filter) {
-  const m = new ColorMatrix();
-  if (filter === "none") {
-    return m;
-  }
-  const filters = parseCssFunctions(filter).reduce((filter2, { name, args }) => {
-    filter2[name] = args[0].normalizedIntValue;
-    return filter2;
-  }, {});
-  Object.keys(defaultFilters).forEach((name) => {
-    filters[name] = filters[name] ?? defaultFilters[name];
-  });
-  for (const name in filters) {
-    const value = filters[name];
-    switch (name) {
-      case "hue-rotate":
-        m.hueRotate(value * PI_2);
-        break;
-      case "saturate":
-        m.saturate(value);
-        break;
-      case "brightness":
-        m.brightness(value);
-        break;
-      case "contrast":
-        m.contrast(value);
-        break;
-      case "invert":
-        m.invert(value);
-        break;
-      case "sepia":
-        m.sepia(value);
-        break;
-      case "opacity":
-        m.opacity(value);
-        break;
-      case "grayscale":
-        m.grayscale(value);
-        break;
-    }
-  }
-  return m;
-}
-
-function parseCSSTransform(transform, width, height, output = new Transform2D()) {
-  transform = !transform || transform === "none" ? "" : transform;
-  parseCssFunctions(transform, { width, height }).reverse().forEach(({ name, args }) => {
-    const values = args.map((arg) => arg.normalizedIntValue);
-    switch (name) {
-      case "translate":
-        output.translate(values[0] * width, (values[1] ?? values[0]) * height);
-        break;
-      case "translateX":
-        output.translateX(values[0] * width);
-        break;
-      case "translateY":
-        output.translateY(values[0] * height);
-        break;
-      case "translateZ":
-        output.translateZ(values[0]);
-        break;
-      case "translate3d":
-        output.translate3d(
-          values[0] * width,
-          (values[1] ?? values[0]) * height,
-          values[2] ?? values[1] ?? values[0]
-        );
-        break;
-      case "scale":
-        output.scale(values[0], values[1] ?? values[0]);
-        break;
-      case "scaleX":
-        output.scaleX(values[0]);
-        break;
-      case "scaleY":
-        output.scaleY(values[0]);
-        break;
-      case "scale3d":
-        output.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
-        break;
-      case "rotate":
-        output.rotate(values[0] * PI_2);
-        break;
-      case "rotateX":
-        output.rotateX(values[0] * PI_2);
-        break;
-      case "rotateY":
-        output.rotateY(values[0] * PI_2);
-        break;
-      case "rotateZ":
-        output.rotateZ(values[0] * PI_2);
-        break;
-      case "rotate3d":
-        output.rotate3d(
-          values[0] * PI_2,
-          (values[1] ?? values[0]) * PI_2,
-          (values[2] ?? values[1] ?? values[0]) * PI_2,
-          (values[3] ?? values[2] ?? values[1] ?? values[0]) * PI_2
-        );
-        break;
-      case "skew":
-        output.skew(values[0], values[0] ?? values[1]);
-        break;
-      case "skewX":
-        output.skewX(values[0]);
-        break;
-      case "skewY":
-        output.skewY(values[0]);
-        break;
-      case "matrix":
-        output.set(values);
-        break;
-    }
-  });
-  return output;
-}
-
-function parseCSSTransformOrigin(transformOrigin) {
-  const [originX, originY = originX] = transformOrigin.split(" ");
-  return [originX, originY].map((val) => {
-    val = val.trim();
-    switch (val) {
-      case "left":
-      case "top":
-        return 0;
-      case "center":
-        return 0.5;
-      case "right":
-      case "bottom":
-        return 1;
-      default:
-        return Number(val);
-    }
-  });
-}
-
 class Geometry extends Resource {
   vertexAttributes;
   indexBuffer;
@@ -4436,13 +4340,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$P = Object.defineProperty;
-var __decorateClass$X = (decorators, target, key, kind) => {
+var __defProp$O = Object.defineProperty;
+var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$P(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4486,20 +4390,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$X([
+__decorateClass$Y([
   property({ protected: true, default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$X([
+__decorateClass$Y([
   property({ protected: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$O = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __defProp$N = Object.defineProperty;
+var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$O(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4543,20 +4447,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$W([
+__decorateClass$X([
   property({ protected: true, default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$W([
+__decorateClass$X([
   property({ protected: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$N = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __defProp$M = Object.defineProperty;
+var __decorateClass$W = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4590,25 +4494,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$V([
+__decorateClass$W([
   property({ protected: true })
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$V([
+__decorateClass$W([
   property({ fallback: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$V([
+__decorateClass$W([
   property({ fallback: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$V([
+__decorateClass$W([
   property({ fallback: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$V([
+__decorateClass$W([
   property()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$V([
+__decorateClass$W([
   property()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$V([
+__decorateClass$W([
   property()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4852,13 +4756,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$U = (decorators, target, key, kind) => {
+var __defProp$L = 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$M(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -4984,22 +4888,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$U([
+__decorateClass$V([
   property({ protected: true })
 ], Texture2D.prototype, "source");
-__decorateClass$U([
+__decorateClass$V([
   property({ fallback: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$U([
+__decorateClass$V([
   property({ fallback: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$U([
+__decorateClass$V([
   property({ fallback: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$U([
+__decorateClass$V([
   property({ fallback: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$U([
+__decorateClass$V([
   property({ fallback: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5029,13 +4933,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$T = (decorators, target, key, kind) => {
+var __defProp$K = 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$L(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5054,7 +4958,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$T([
+__decorateClass$U([
   property({ fallback: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5274,13 +5178,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$S = (decorators, target, key, kind) => {
+var __defProp$J = 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$K(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5524,10 +5428,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$S([
+__decorateClass$T([
   property({ protected: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$S([
+__decorateClass$T([
   property({ protected: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5536,7 +5440,178 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-class Children extends Array {
+class CanvasContext extends Path2D {
+  fillStyle;
+  strokeStyle;
+  lineCap;
+  lineJoin;
+  lineWidth;
+  miterLimit;
+  // custom
+  uvTransform;
+  vertTransform;
+  _defaultStyle = Texture2D.EMPTY;
+  _draws = [];
+  _toTexture(source) {
+    if (source instanceof Texture2D) {
+      return source;
+    } else {
+      return ColorTexture.get(source);
+    }
+  }
+  stroke(options) {
+    if (!this.curves.length) {
+      return;
+    }
+    let strokeStyle = this.strokeStyle;
+    if (!strokeStyle && this.style.stroke) {
+      switch (typeof this.style.stroke) {
+        case "string":
+          strokeStyle = this.style.stroke;
+          break;
+        case "object":
+          if (isColorFillObject(this.style.stroke)) {
+            strokeStyle = this.style.stroke.color;
+          }
+          break;
+      }
+    }
+    this._draws.push({
+      ...options,
+      type: "stroke",
+      path: new Path2D(this),
+      texture: strokeStyle ? this._toTexture(strokeStyle) : this._defaultStyle,
+      uvTransform: this.uvTransform,
+      vertTransform: this.vertTransform,
+      style: {
+        alignment: 0.5,
+        cap: this.lineCap ?? "butt",
+        join: this.lineJoin ?? "miter",
+        width: this.lineWidth ?? 1,
+        miterLimit: this.miterLimit ?? 10
+      }
+    });
+    super.reset();
+  }
+  fillRect(x, y, width, height) {
+    this.rect(x, y, width, height).fill();
+  }
+  strokeRect(x, y, width, height) {
+    this.rect(x, y, width, height).stroke();
+  }
+  fill(options) {
+    if (!this.curves.length) {
+      return;
+    }
+    let fillStyle = this.fillStyle;
+    if (!fillStyle && this.style.fill) {
+      switch (typeof this.style.fill) {
+        case "string":
+          fillStyle = this.style.fill;
+          break;
+        case "object":
+          if (isColorFillObject(this.style.fill)) {
+            fillStyle = this.style.fill.color;
+          }
+          break;
+      }
+    }
+    this._draws.push({
+      ...options,
+      type: "fill",
+      path: new Path2D(this),
+      texture: fillStyle ? this._toTexture(fillStyle) : this._defaultStyle,
+      uvTransform: this.uvTransform,
+      vertTransform: this.vertTransform
+    });
+    super.reset();
+  }
+  copy(source) {
+    super.copy(source);
+    this.strokeStyle = source.strokeStyle;
+    this.fillStyle = source.fillStyle;
+    this.uvTransform = source.uvTransform;
+    this.vertTransform = source.vertTransform;
+    this.lineCap = source.lineCap;
+    this.lineJoin = source.lineJoin;
+    this.lineWidth = source.lineWidth;
+    this.miterLimit = source.miterLimit;
+    this._draws = source._draws.slice();
+    return this;
+  }
+  reset() {
+    super.reset();
+    this.strokeStyle = void 0;
+    this.fillStyle = void 0;
+    this.uvTransform = void 0;
+    this.vertTransform = void 0;
+    this.lineCap = void 0;
+    this.lineJoin = void 0;
+    this.lineWidth = void 0;
+    this.miterLimit = void 0;
+    this._draws.length = 0;
+    return this;
+  }
+  buildUvs(start, vertices, uvs, texture, uvTransform) {
+    if (texture) {
+      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
+      const w = texture.width;
+      const h = texture.height;
+      for (let len = vertices.length, i = start; i < len; i += 2) {
+        const x = vertices[i];
+        const y = vertices[i + 1];
+        let uvX;
+        let uvY;
+        if (_uvTransform) {
+          [uvX, uvY] = _uvTransform(x, y);
+        } else {
+          [uvX, uvY] = [x / w, y / h];
+        }
+        uvs.push(uvX, uvY);
+      }
+    } else {
+      for (let len = vertices.length, i = start; i < len; i += 2) {
+        uvs.push(0, 0);
+      }
+    }
+  }
+  toBatchables() {
+    const batchables = [];
+    for (let len = this._draws.length, i = 0; i < len; i++) {
+      const current = this._draws[i];
+      const vertices = [];
+      const indices = [];
+      const uvs = [];
+      if (current.type === "fill") {
+        current.path.fillTriangulate({
+          vertices,
+          indices
+        });
+      } else {
+        current.path.strokeTriangulate({
+          vertices,
+          indices,
+          lineStyle: current.style,
+          flipAlignment: false,
+          closed: true
+        });
+      }
+      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      batchables.push({
+        vertices,
+        indices,
+        uvs,
+        texture: current.texture,
+        type: current.type,
+        disableWrapMode: current.disableWrapMode,
+        vertTransform: current.vertTransform
+      });
+    }
+    return batchables;
+  }
+}
+
+class Children extends Array {
   front = [];
   back = [];
   get internal() {
@@ -5586,14 +5661,14 @@ class Children extends Array {
   }
 }
 
-var __defProp$J = 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;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+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$J(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 const iidMap = {};
@@ -5654,7 +5729,7 @@ let Node = class extends CoreObject {
     return this._tree;
   }
   getViewport() {
-    return this._tree?.getCurrentViewport();
+    return this.parent?.getViewport() ?? this.getWindow();
   }
   getWindow() {
     return this._tree?.root;
@@ -6077,42 +6152,42 @@ let Node = class extends CoreObject {
     return node;
   }
 };
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: idGenerator() })
 ], Node.prototype, "id", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: idGenerator() })
 ], Node.prototype, "name", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: "default" })
 ], Node.prototype, "processSortMode", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ fallback: "default" })
 ], Node.prototype, "internalMode", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ default: () => ({}) })
 ], Node.prototype, "meta", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ protected: true })
 ], Node.prototype, "mask", 2);
-Node = __decorateClass$R([
+Node = __decorateClass$S([
   customNode("Node")
 ], Node);
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$H = 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$I(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6134,7 +6209,7 @@ let TimelineNode = class extends Node {
     return this._parent?.startTime ?? 0;
   }
   get currentTime() {
-    return clamp(0, this._currentTime, this.computedDuration);
+    return clamp(this._currentTime, 0, this.computedDuration);
   }
   get startTime() {
     return this._startTime;
@@ -6147,7 +6222,7 @@ let TimelineNode = class extends Node {
     return this._startTime + this.computedDuration;
   }
   get currentTimeProgress() {
-    return this.computedDuration ? clamp(0, this._currentTime / this.computedDuration, 1) : 0;
+    return this.computedDuration ? clamp(this._currentTime / this.computedDuration, 0, 1) : 0;
   }
   isInsideTimeRange() {
     const current = this._currentTime;
@@ -6172,60 +6247,239 @@ let TimelineNode = class extends Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$Q([
+__decorateClass$R([
   property({ fallback: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property({ fallback: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property({ fallback: false })
 ], TimelineNode.prototype, "paused", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property({ protected: true, fallback: false })
 ], TimelineNode.prototype, "insideTimeRange", 2);
-TimelineNode = __decorateClass$Q([
+TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   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$G(target, key, result);
   return result;
 };
-let Viewport = class extends Node {
-  constructor(flipY = false) {
-    super();
-    this.flipY = flipY;
-    this._projection.flipY(flipY);
-  }
-  _projection = new Projection2D();
-  _framebufferIndex = 0;
-  _framebuffers = [
-    { texture: new ViewportTexture(), needsUpload: false },
-    { texture: new ViewportTexture(), needsUpload: false }
-  ];
-  get valid() {
-    return Boolean(this.width && this.height);
-  }
-  get framebuffer() {
-    return this._framebuffers[this._framebufferIndex];
+let CanvasItem = class extends TimelineNode {
+  _parentGlobalVisible;
+  _globalVisible;
+  get globalVisible() {
+    return this._globalVisible ?? true;
   }
-  get texture() {
-    return this.framebuffer.texture;
+  _parentGlobalOpacity;
+  _globalOpacity;
+  get globalOpacity() {
+    return this._globalOpacity ?? 1;
   }
-  /** @internal */
-  _glFramebufferOptions(renderer) {
-    const { width, height } = this;
-    const { pixelRatio } = renderer;
-    this._framebuffers.forEach((framebuffer) => {
-      const texture = framebuffer.texture;
-      texture.width = width;
+  _modulate = new Color(4294967295);
+  // Batch render
+  context = new CanvasContext();
+  _resetContext = true;
+  _redrawing = true;
+  _relayouting = false;
+  _repainting = false;
+  _originalBatchables = [];
+  _layoutedBatchables = [];
+  _batchables = [];
+  constructor(properties, nodes = []) {
+    super();
+    this.setProperties(properties).append(nodes);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "modulate":
+        this._modulate.value = value;
+        this.requestRepaint();
+        break;
+      case "blendMode":
+        this.requestRepaint();
+        break;
+      case "opacity":
+        this._updateGlobalOpacity();
+        break;
+      case "visible":
+      case "insideTimeRange":
+        this._updateGlobalVisible();
+        break;
+    }
+  }
+  show() {
+    this.visible = true;
+  }
+  hide() {
+    this.visible = false;
+  }
+  isVisibleInTree() {
+    return this.globalOpacity > 0 && this.globalVisible;
+  }
+  canRender() {
+    return super.canRender() && this.isVisibleInTree();
+  }
+  requestRedraw() {
+    this._redrawing = true;
+  }
+  requestRelayout() {
+    this._relayouting = true;
+  }
+  requestRepaint() {
+    this._repainting = true;
+  }
+  _updateGlobalVisible() {
+    this._parentGlobalVisible = this.getParent()?.globalVisible;
+    this._globalVisible = (this._parentGlobalVisible ?? true) && this.visible && this.insideTimeRange;
+  }
+  _updateGlobalOpacity() {
+    this._parentGlobalOpacity = this.getParent()?.opacity;
+    const globalOpacity = clamp(this.opacity, 0, 1) * (this._parentGlobalOpacity ?? 1);
+    if (this._globalOpacity !== globalOpacity) {
+      this._globalOpacity = globalOpacity;
+      this.requestRepaint();
+    }
+  }
+  _draw() {
+    this.emit("draw");
+  }
+  _redraw() {
+    this.log(this.name, "drawing");
+    this._draw();
+    return this.context.toBatchables();
+  }
+  _relayout(batchables) {
+    this.log(this.name, "layouting");
+    return batchables;
+  }
+  _repaint(batchables) {
+    this.log(this.name, "painting");
+    return batchables.map((batchable) => {
+      return {
+        ...batchable,
+        modulate: this._modulate.toArgb(this.globalOpacity, true),
+        blendMode: this.blendMode
+      };
+    });
+  }
+  _process(delta) {
+    super._process(delta);
+    const parent = this.getParent();
+    if (this._parentGlobalVisible !== parent?.globalVisible) {
+      this._updateGlobalVisible();
+    }
+    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
+      this._updateGlobalOpacity();
+    }
+  }
+  _updateBatchables() {
+    const redrawing = this._redrawing;
+    let relayouting = this._relayouting;
+    let repainting = this._repainting;
+    let batchables;
+    if (redrawing) {
+      this._originalBatchables = this._redraw();
+      relayouting = true;
+    }
+    if (relayouting) {
+      this._layoutedBatchables = this._relayout(this._originalBatchables);
+      repainting = true;
+    }
+    if (repainting) {
+      batchables = this._repaint(this._layoutedBatchables);
+    }
+    if (redrawing) {
+      if (this._resetContext) {
+        this.context.reset();
+      }
+    }
+    if (batchables) {
+      this._batchables = batchables;
+      this._redrawing = false;
+      this._relayouting = false;
+      this._repainting = false;
+    }
+  }
+  _render(renderer) {
+    this._updateBatchables();
+    this._batchables.forEach((batchable) => {
+      batchable.texture?.upload(renderer);
+      renderer.batch2D.render({
+        ...batchable,
+        texture: batchable.texture?._glTexture(renderer)
+      });
+    });
+    super._render(renderer);
+  }
+};
+__decorateClass$Q([
+  property()
+], CanvasItem.prototype, "modulate", 2);
+__decorateClass$Q([
+  property()
+], CanvasItem.prototype, "blendMode", 2);
+__decorateClass$Q([
+  property({ protected: true, fallback: true })
+], CanvasItem.prototype, "visible", 2);
+__decorateClass$Q([
+  property({ protected: true, fallback: 1 })
+], CanvasItem.prototype, "opacity", 2);
+CanvasItem = __decorateClass$Q([
+  customNode("CanvasItem")
+], CanvasItem);
+
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+  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);
+  return result;
+};
+let Viewport = class extends Node {
+  constructor(flipY = false) {
+    super();
+    this.flipY = flipY;
+    this.projection.flipY(flipY);
+  }
+  projection = new Projection2D();
+  canvasTransform = new Transform2D();
+  _framebufferIndex = 0;
+  _framebuffers = [
+    { texture: new ViewportTexture(), needsUpload: false },
+    { texture: new ViewportTexture(), needsUpload: false }
+  ];
+  get valid() {
+    return Boolean(this.width && this.height);
+  }
+  get framebuffer() {
+    return this._framebuffers[this._framebufferIndex];
+  }
+  get texture() {
+    return this.framebuffer.texture;
+  }
+  getViewport() {
+    return this;
+  }
+  /** @internal */
+  _glFramebufferOptions(renderer) {
+    const { width, height } = this;
+    const { pixelRatio } = renderer;
+    this._framebuffers.forEach((framebuffer) => {
+      const texture = framebuffer.texture;
+      texture.width = width;
       texture.height = height;
       texture.pixelRatio = pixelRatio;
       texture.upload(renderer);
@@ -6250,13 +6504,13 @@ let Viewport = class extends Node {
       case "x":
       case "y":
         this.requestUpload();
-        this._projection.translate(this.x, this.y);
+        this.projection.translate(this.x, this.y);
         this.emit("updateRect");
         break;
       case "width":
       case "height":
         this.requestUpload();
-        this._projection.resize(this.width, this.height);
+        this.projection.resize(this.width, this.height);
         this.emit("updateRect");
         break;
     }
@@ -6315,6 +6569,8 @@ let Viewport = class extends Node {
   }
   render(renderer, next) {
     const oldViewport = this._tree?.getCurrentViewport();
+    renderer.program.uniforms.projectionMatrix = this.projection.toArray(true);
+    renderer.program.uniforms.worldTransformMatrix = this.canvasTransform.toArray(true);
     this.activate(renderer);
     renderer.clear();
     super.render(renderer, next);
@@ -6329,9 +6585,6 @@ let Viewport = class extends Node {
   getRect() {
     return new Rect2(this.x, this.y, this.width, this.height);
   }
-  toProjectionArray(transpose = false) {
-    return this._projection.toArray(transpose);
-  }
 };
 __decorateClass$P([
   property({ fallback: 0 })
@@ -6349,14 +6602,14 @@ Viewport = __decorateClass$P([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$G = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   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 Effect = class extends TimelineNode {
@@ -6614,1044 +6867,1048 @@ Effect = __decorateClass$O([
   customNode("Effect")
 ], Effect);
 
-var __defProp$F = Object.defineProperty;
+class RenderStack {
+  currentCall;
+  calls = [];
+  createCall(renderable) {
+    return {
+      renderable,
+      parentCall: this.currentCall,
+      fn: renderable.render.bind(renderable),
+      calls: []
+    };
+  }
+  push(renderable) {
+    const call = this.createCall(renderable);
+    (this.currentCall?.calls ?? this.calls).push(call);
+    return call;
+  }
+  render(renderer) {
+    this.calls.forEach(function render(call) {
+      call.fn(renderer, () => {
+        call.calls.forEach(render);
+      });
+    });
+    this.calls = [];
+  }
+}
+
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$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$F(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
-var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
-let ColorAdjustEffect = class extends Effect {
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-  apply(renderer, source) {
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, ColorAdjustEffect.material, {
-        sampler: 0,
-        saturation: this.saturation,
-        contrast: this.contrast,
-        brightness: this.brightness,
-        red: this.red,
-        green: this.green,
-        blue: this.blue,
-        alpha: this.alpha,
-        gamma: Math.max(this.gamma ?? 1, 1e-4)
-      });
+let Timeline = class extends Node {
+  static from(range, loop = false) {
+    const [startTime, endTime] = range ? Array.isArray(range) ? range : [0, range] : [];
+    return new Timeline({
+      startTime,
+      endTime,
+      loop
     });
   }
-};
-__publicField$i(ColorAdjustEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform float gamma;
-uniform float contrast;
-uniform float saturation;
-uniform float brightness;
-uniform float red;
-uniform float green;
-uniform float blue;
-uniform float alpha;
-
-void main(void) {
-  vec4 c = texture2D(sampler, vUv);
-  if (c.a > 0.0) {
-      c.rgb /= c.a;
-      vec3 rgb = pow(c.rgb, vec3(1. / gamma));
-      rgb = mix(vec3(.5), mix(vec3(dot(vec3(.2125, .7154, .0721), rgb)), rgb, saturation), contrast);
-      rgb.r *= red;
-      rgb.g *= green;
-      rgb.b *= blue;
-      c.rgb = rgb * brightness;
-      c.rgb *= c.a;
+  constructor(properties) {
+    super();
+    this.setProperties(properties);
   }
-  gl_FragColor = c * alpha;
-}`
-}));
-__decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "red", 2);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
+    switch (key) {
+      case "startTime":
+        this.startTime = Math.min(value, this.endTime);
+        break;
+      case "endTime":
+        this.endTime = value || Number.MAX_SAFE_INTEGER;
+        break;
+    }
+  }
+  addTime(delta) {
+    const start = this.startTime;
+    const end = this.endTime;
+    let current = this.currentTime;
+    current = current + delta;
+    if (this.loop && current > end) {
+      current = start + current % end;
+    }
+    current = clamp(current, start, end);
+    this.currentTime = current;
+    this.emit("updateCurrentTime", current, delta);
+    return this;
+  }
+  _process(delta) {
+    super._process(delta);
+    this.addTime(delta);
+  }
+};
 __decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "green", 2);
+  property({ fallback: 0 })
+], Timeline.prototype, "startTime", 2);
 __decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "blue", 2);
+  property({ fallback: 0 })
+], Timeline.prototype, "currentTime", 2);
 __decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "alpha", 2);
+  property({ fallback: Number.MAX_SAFE_INTEGER })
+], Timeline.prototype, "endTime", 2);
 __decorateClass$N([
-  property()
-], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$N([
-  customNode("ColorAdjustEffect")
-], ColorAdjustEffect);
+  property({ fallback: false })
+], Timeline.prototype, "loop", 2);
+Timeline = __decorateClass$N([
+  customNode("Timeline")
+], Timeline);
 
-var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$M = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+      result = (decorator(result)) || result;
   return result;
 };
-var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
-let ColorFilterEffect = class extends Effect {
-  _colorMatrix = new ColorMatrix();
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
-  }
-  apply(renderer, source) {
-    if (!this.filter)
-      return;
-    const funs = parseCssFunctions(this.filter);
-    const matrix = this._colorMatrix.identity();
-    funs.forEach(({ name, args }) => {
-      const values = args.map((arg) => arg.normalizedIntValue);
-      switch (name) {
-        case "hue-rotate":
-        case "hueRotate":
-          matrix.hueRotate(values[0] * PI_2);
-          break;
-        case "saturate":
-          matrix.saturate(values[0]);
-          break;
-        case "brightness":
-          matrix.brightness(values[0]);
-          break;
-        case "contrast":
-          matrix.contrast(values[0]);
-          break;
-        case "invert":
-          matrix.invert(values[0]);
-          break;
-        case "sepia":
-          matrix.sepia(values[0]);
-          break;
-        case "opacity":
-          matrix.opacity(values[0]);
-          break;
-        case "grayscale":
-          matrix.grayscale(values[0]);
-          break;
-      }
-    });
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, ColorFilterEffect.material, {
-        sampler: 0,
-        m: matrix.toArray()
-      });
-    });
-  }
+let Window = class extends Viewport {
+  //
 };
-__publicField$h(ColorFilterEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision highp float;
-varying vec2 vUv;
-uniform sampler2D sampler;
-uniform float m[20];
-
-void main(void) {
-  vec4 c = texture2D(sampler, vUv);
-  if (c.a > 0.0) {
-    c.rgb /= c.a;
-  }
-  gl_FragColor = vec4(
-    m[0]  * c.r + m[1]  * c.g + m[2]  * c.b + m[3]  * c.a + m[4] / 255.0,
-    m[5]  * c.r + m[6]  * c.g + m[7]  * c.b + m[8]  * c.a + m[9] / 255.0,
-    m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14] / 255.0,
-    m[15] * c.r + m[16] * c.g + m[17] * c.b + m[18] * c.a + m[19] / 255.0
-  );
-}`
-}));
-__decorateClass$M([
-  property()
-], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$M([
-  customNode("ColorFilterEffect")
-], ColorFilterEffect);
+Window = __decorateClass$M([
+  customNode("Window")
+], Window);
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defProp$C = Object.defineProperty;
 var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+  var result = void 0 ;
   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);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$C(target, key, result);
   return result;
 };
-var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
-const MAX_COLORS$1 = 50;
-let ColorOverlayEffect = class extends Effect {
-  _color = new Color();
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties).append(children);
+class SceneTree extends MainLoop {
+  input = new Input();
+  renderStack = new RenderStack();
+  root = new Window(true).setTree(this);
+  timeline;
+  _backgroundColor = new Color();
+  _currentViewport;
+  getCurrentViewport() {
+    return this._currentViewport;
   }
-  apply(renderer, source) {
-    source.redraw(renderer, () => {
-      const colors = this.colors.map((val) => {
-        this._color.value = val;
-        const rgba = this._color.toArray();
-        rgba[3] = this.alpha;
-        return rgba;
-      });
-      while (colors.length < MAX_COLORS$1) {
-        colors.push([0, 0, 0, 0]);
-      }
-      QuadUvGeometry.draw(renderer, ColorOverlayEffect.material, {
-        sampler: 0,
-        colors: colors.slice(0, MAX_COLORS$1).flatMap((item) => item)
-      });
-    });
+  setCurrentViewport(viewport) {
+    this._currentViewport = viewport;
   }
-};
-__publicField$g(ColorOverlayEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision mediump float;
-uniform sampler2D sampler;
-uniform vec4 colors[${MAX_COLORS$1}];
-varying vec2 vUv;
-
-float calcWidth() {
-  return distance(vec2(0, 0), vec2(1, 0));
-}
-
-int calcCount() {
-    int count = 0;
-    for (int i = 0; i < ${MAX_COLORS$1}; i++) {
-        if (colors[i] != vec4(0,0,0,0)){
-            count++;
-        }
+  constructor(timeline = new Timeline()) {
+    super();
+    this.timeline = timeline.setTree(this);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "backgroundColor":
+        this._backgroundColor.value = value;
+        break;
     }
-    return count;
-}
-
-vec4 calcColor(float x) {
-  float perUnit = calcWidth() / float(calcCount());
-  int index = int(x / perUnit);
-
-  for(int i=0; i<${MAX_COLORS$1}; i++){
-    if(i==index){
-        return colors[i];
+  }
+  log(...args) {
+    if (this.debug) {
+      console.log(`[modern-canvas][${performance.now().toFixed(4)}ms]`, ...args);
     }
   }
-
-  return vec4(0, 0, 0, 0);
+  _process(delta = 0) {
+    this.timeline.emit("process", delta);
+    this.emit("processing");
+    this.root.emit("process", delta);
+    this.emit("processed");
+  }
+  _render(renderer) {
+    this.emit("rendering");
+    this.renderStack.render(renderer);
+    this._renderScreen(renderer);
+    this.emit("rendered");
+  }
+  _renderScreen(renderer) {
+    renderer.state.reset();
+    renderer.framebuffer.bind(null);
+    renderer.viewport.bind({
+      x: 0,
+      y: 0,
+      width: this.root.width * renderer.pixelRatio,
+      height: this.root.height * renderer.pixelRatio
+    });
+    if (this.backgroundColor) {
+      renderer.gl.clearColor(...this._backgroundColor.toArray());
+    }
+    renderer.clear();
+    if (this.backgroundColor) {
+      renderer.gl.clearColor(0, 0, 0, 0);
+    }
+    const texture = this.root.texture;
+    texture.activate(renderer, 0);
+    QuadUvGeometry.draw(renderer);
+    renderer.texture.unbind(texture);
+  }
+  free() {
+    super.free();
+    this.root.children.internal.forEach((node) => this.root.removeChild(node));
+    this.input.removeEventListeners();
+  }
 }
-
-void main(void) {
-  vec4 color = texture2D(sampler, vUv);
-  vec4 mask = calcColor(vUv.x);
-  gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
-}`
-}));
 __decorateClass$L([
-  property()
-], ColorOverlayEffect.prototype, "colors", 2);
+  property({ fallback: false })
+], SceneTree.prototype, "processPaused");
 __decorateClass$L([
   property()
-], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$L([
-  customNode("ColorOverlayEffect")
-], ColorOverlayEffect);
+], SceneTree.prototype, "backgroundColor");
+__decorateClass$L([
+  property({ protected: true, fallback: false })
+], SceneTree.prototype, "debug");
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+  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$C(target, key, result);
+      result = (decorator(result)) || result;
   return result;
 };
-var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
-let ColorRemoveEffect = class extends Effect {
-  _color = new Color();
+let Transition = class extends Effect {
   constructor(properties, children = []) {
     super();
     this.setProperties(properties).append(children);
   }
-  apply(renderer, source) {
-    const maxColors = 50;
-    const originalColors = new Float32Array(maxColors * 3);
-    const colors = this.colors.map((val) => {
-      this._color.value = val;
-      return this._color.toArray().slice(0, 3);
-    });
-    while (colors.length < maxColors) {
-      colors.push([-1, 0, 0]);
-    }
-    colors.slice(0, maxColors).forEach((originalColor, i) => {
-      originalColors[i * 3] = originalColor[0];
-      originalColors[i * 3 + 1] = originalColor[1];
-      originalColors[i * 3 + 2] = originalColor[2];
-    });
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, ColorRemoveEffect.material, {
-        sampler: 0,
-        epsilon: this.epsilon,
-        originalColors
-      });
-    });
-  }
 };
-__publicField$f(ColorRemoveEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform float epsilon;
-const int MAX_COLORS = 50;
-uniform vec3 originalColors[MAX_COLORS];
-
-void main(void) {
-  vec4 color = texture2D(sampler, vUv);
-
-  for (int i = 0; i < MAX_COLORS; i++) {
-    vec3 origColor = originalColors[i];
-    if (origColor.r < 0.0) {
-      break;
-    }
-    vec3 colorDiff = origColor - color.rgb;
-    if (length(colorDiff) < epsilon) {
-      gl_FragColor = vec4(0, 0, 0, 0);
-      return;
-    }
-  }
-
-  gl_FragColor = color;
-}`
-}));
-__decorateClass$K([
-  property()
-], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$K([
-  property()
-], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$K([
-  customNode("ColorRemoveEffect")
-], ColorRemoveEffect);
+Transition = __decorateClass$K([
+  customNode("Transition", {
+    effectMode: "transition",
+    processMode: "pausable",
+    duration: 2e3
+  })
+], Transition);
 
 var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+  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$B(target, key, result);
   return result;
 };
-var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
-const MAX_COLORS = 50;
-let ColorReplaceEffect = class extends Effect {
-  _color = new Color();
-  constructor(properties, children = []) {
+let Node2D = class extends CanvasItem {
+  position = new Vector2().on("update", () => this.updateGlobalTransform());
+  scale = new Vector2(1, 1).on("update", () => this.updateGlobalTransform());
+  skew = new Vector2().on("update", () => this.updateGlobalTransform());
+  transform = new Transform2D();
+  globalPosition = new Vector2();
+  globalScale = new Vector2();
+  globalSkew = new Vector2();
+  globalTransform = new Transform2D();
+  _parentTransformDirtyId;
+  constructor(properties, nodes = []) {
     super();
-    this.setProperties(properties).append(children);
+    this.setProperties(properties).append(nodes);
   }
-  apply(renderer, source) {
-    const colors = this.colors.map((val) => {
-      this._color.value = val[0];
-      const color0 = this._color.toArray().slice(0, 3);
-      this._color.value = val[1];
-      const color1 = this._color.toArray().slice(0, 3);
-      return [
-        color0,
-        color1
-      ];
-    });
-    const epsilon = this.epsilon;
-    const originalColors = new Float32Array(MAX_COLORS * 3);
-    const targetColors = new Float32Array(MAX_COLORS * 3);
-    while (colors.length < MAX_COLORS) {
-      colors.push([
-        [-1, 0, 0],
-        [0, 0, 0, 1]
-      ]);
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "rotation":
+        this.requestRelayout();
+        break;
     }
-    colors.slice(0, MAX_COLORS).forEach(([originalColor, targetColor], i) => {
-      originalColors[i * 3] = originalColor[0];
-      originalColors[i * 3 + 1] = originalColor[1];
-      originalColors[i * 3 + 2] = originalColor[2];
-      targetColors[i * 3] = targetColor[0];
-      targetColors[i * 3 + 1] = targetColor[1];
-      targetColors[i * 3 + 2] = targetColor[2];
-    });
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, ColorReplaceEffect.material, {
-        sampler: 0,
-        epsilon,
-        originalColors,
-        targetColors
-      });
-    });
-  }
-};
-__publicField$e(ColorReplaceEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform float epsilon;
-const int MAX_COLORS = ${MAX_COLORS};
-uniform vec3 originalColors[MAX_COLORS];
-uniform vec3 targetColors[MAX_COLORS];
-
-void main(void) {
-  gl_FragColor = texture2D(sampler, vUv);
-
-  float alpha = gl_FragColor.a;
-  if (alpha < 0.0001) {
-    return;
   }
-
-  vec3 color = gl_FragColor.rgb / alpha;
-
-  for(int i = 0; i < MAX_COLORS; i++) {
-    vec3 origColor = originalColors[i];
-    if (origColor.r < 0.0) {
-      break;
-    }
-    vec3 colorDiff = origColor - color;
-    if (length(colorDiff) < epsilon) {
-      vec3 targetColor = targetColors[i];
-      gl_FragColor = vec4((targetColor + colorDiff) * alpha, alpha);
-      return;
-    }
+  getTransformOrigin() {
+    return new Vector2(0, 0);
   }
-}`
-}));
-__decorateClass$J([
-  property()
-], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$J([
-  property()
-], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$J([
-  customNode("ColorReplaceEffect")
-], ColorReplaceEffect);
-
-class CanvasContext extends Path2D {
-  fillStyle;
-  strokeStyle;
-  lineCap;
-  lineJoin;
-  lineWidth;
-  miterLimit;
-  // custom
-  uvTransform;
-  vertTransform;
-  _defaultStyle = Texture2D.EMPTY;
-  _draws = [];
-  _toTexture(source) {
-    if (source instanceof Texture2D) {
-      return source;
+  getTransform(cb) {
+    const origin = this.getTransformOrigin();
+    const transform = new Transform2D();
+    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    cb?.(transform);
+    transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
+    return transform;
+  }
+  updateTransform() {
+    this.transform.copy(this.getTransform());
+  }
+  updateGlobalTransform() {
+    this.updateTransform();
+    const parent = this.getParent();
+    if (parent?.globalTransform) {
+      this._parentTransformDirtyId = parent.globalTransform.dirtyId;
+      this.globalScale.set(parent.globalScale.x * this.scale.x, parent.globalScale.y * this.scale.y);
+      this.globalRotation = parent.globalRotation + this.rotation;
+      parent.globalTransform.multiply(this.transform, this.globalTransform);
     } else {
-      return ColorTexture.get(source);
+      this.globalScale.copy(this.scale);
+      this.globalRotation = this.rotation;
+      this.globalTransform.copy(this.transform);
     }
+    const [
+      a,
+      c,
+      tx,
+      b,
+      d,
+      ty
+    ] = this.globalTransform.toArray();
+    this.globalPosition.set(tx, ty);
+    this.globalSkew.x = Math.atan2(c, a) - this.globalRotation;
+    this.globalSkew.y = Math.atan2(b, d) - this.globalRotation;
+    this.requestRelayout();
   }
-  stroke(options) {
-    if (!this.curves.length) {
-      return;
+  _transformVertices(vertices, vertTransform) {
+    let a, c, tx, b, d, ty;
+    if (vertTransform) {
+      const globalTransform = this.globalTransform.clone();
+      globalTransform.multiply(
+        typeof vertTransform === "function" ? vertTransform?.() : vertTransform
+      );
+      [a, c, tx, b, d, ty] = globalTransform.toArray();
+    } else {
+      [a, c, tx, b, d, ty] = this.globalTransform.toArray();
     }
-    let strokeStyle = this.strokeStyle;
-    if (!strokeStyle && this.style.stroke) {
-      switch (typeof this.style.stroke) {
-        case "string":
-          strokeStyle = this.style.stroke;
-          break;
-        case "object":
-          if (isColorFillObject(this.style.stroke)) {
-            strokeStyle = this.style.stroke.color;
-          }
-          break;
-      }
+    const newVertices = vertices.slice();
+    for (let len = vertices.length, i = 0; i < len; i += 2) {
+      const x = vertices[i];
+      const y = vertices[i + 1];
+      newVertices[i] = a * x + c * y + tx;
+      newVertices[i + 1] = b * x + d * y + ty;
     }
-    this._draws.push({
-      ...options,
-      type: "stroke",
-      path: new Path2D(this),
-      texture: strokeStyle ? this._toTexture(strokeStyle) : this._defaultStyle,
-      uvTransform: this.uvTransform,
-      vertTransform: this.vertTransform,
-      style: {
-        alignment: 0.5,
-        cap: this.lineCap ?? "butt",
-        join: this.lineJoin ?? "miter",
-        width: this.lineWidth ?? 1,
-        miterLimit: this.miterLimit ?? 10
-      }
-    });
-    super.reset();
-  }
-  fillRect(x, y, width, height) {
-    this.rect(x, y, width, height).fill();
+    return newVertices;
   }
-  strokeRect(x, y, width, height) {
-    this.rect(x, y, width, height).stroke();
+  _relayout(batchables) {
+    batchables = super._relayout(batchables);
+    this.updateGlobalTransform();
+    return batchables.map((batchable) => {
+      return {
+        ...batchable,
+        vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
+      };
+    });
   }
-  fill(options) {
-    if (!this.curves.length) {
-      return;
-    }
-    let fillStyle = this.fillStyle;
-    if (!fillStyle && this.style.fill) {
-      switch (typeof this.style.fill) {
-        case "string":
-          fillStyle = this.style.fill;
-          break;
-        case "object":
-          if (isColorFillObject(this.style.fill)) {
-            fillStyle = this.style.fill.color;
-          }
-          break;
-      }
+  _process(delta) {
+    super._process(delta);
+    const parent = this.getParent();
+    if (parent?.globalTransform && this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
+      this.requestRelayout();
     }
-    this._draws.push({
-      ...options,
-      type: "fill",
-      path: new Path2D(this),
-      texture: fillStyle ? this._toTexture(fillStyle) : this._defaultStyle,
-      uvTransform: this.uvTransform,
-      vertTransform: this.vertTransform
-    });
-    super.reset();
   }
-  copy(source) {
-    super.copy(source);
-    this.strokeStyle = source.strokeStyle;
-    this.fillStyle = source.fillStyle;
-    this.uvTransform = source.uvTransform;
-    this.vertTransform = source.vertTransform;
-    this.lineCap = source.lineCap;
-    this.lineJoin = source.lineJoin;
-    this.lineWidth = source.lineWidth;
-    this.miterLimit = source.miterLimit;
-    this._draws = source._draws.slice();
+};
+__decorateClass$J([
+  property({ protected: true, fallback: 0 })
+], Node2D.prototype, "rotation", 2);
+__decorateClass$J([
+  property({ protected: true, fallback: 0 })
+], Node2D.prototype, "globalRotation", 2);
+Node2D = __decorateClass$J([
+  customNode("Node2D")
+], Node2D);
+
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (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 = (decorator(result)) || 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);
+  constructor(properties, nodes = []) {
+    super();
+    this.setProperties(properties).append(nodes);
+  }
+  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;
   }
-  reset() {
-    super.reset();
-    this.strokeStyle = void 0;
-    this.fillStyle = void 0;
-    this.uvTransform = void 0;
-    this.vertTransform = void 0;
-    this.lineCap = void 0;
-    this.lineJoin = void 0;
-    this.lineWidth = void 0;
-    this.miterLimit = void 0;
-    this._draws.length = 0;
+  setZoom(x, y = x) {
+    this.zoom.set(
+      clamp(x, this.minZoom.x, this.maxZoom.x),
+      clamp(y, this.minZoom.y, this.maxZoom.y)
+    );
     return this;
   }
-  buildUvs(start, vertices, uvs, texture, uvTransform) {
-    if (texture) {
-      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
-      const w = texture.width;
-      const h = texture.height;
-      for (let len = vertices.length, i = start; i < len; i += 2) {
-        const x = vertices[i];
-        const y = vertices[i + 1];
-        let uvX;
-        let uvY;
-        if (_uvTransform) {
-          [uvX, uvY] = _uvTransform(x, y);
-        } else {
-          [uvX, uvY] = [x / w, y / h];
+  _input(event, key) {
+    super._input(event, key);
+    if (key === "wheel") {
+      const e = event;
+      if (e.ctrlKey) {
+        const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
+        if (!isTouchPad) {
+          e.preventDefault();
+          const oldZoom = this.zoom.x;
+          this.addZoom(e.deltaY * -0.015);
+          const ratio = 1 - this.zoom.x / oldZoom;
+          this.position.add(
+            (e.screenX - this.position.x) * ratio,
+            (e.screenY - this.position.y) * ratio
+          );
         }
-        uvs.push(uvX, uvY);
-      }
-    } else {
-      for (let len = vertices.length, i = start; i < len; i += 2) {
-        uvs.push(0, 0);
-      }
-    }
-  }
-  toBatchables() {
-    const batchables = [];
-    for (let len = this._draws.length, i = 0; i < len; i++) {
-      const current = this._draws[i];
-      const vertices = [];
-      const indices = [];
-      const uvs = [];
-      if (current.type === "fill") {
-        current.path.fillTriangulate({
-          vertices,
-          indices
-        });
       } else {
-        current.path.strokeTriangulate({
-          vertices,
-          indices,
-          lineStyle: current.style,
-          flipAlignment: false,
-          closed: true
-        });
+        e.preventDefault();
+        this.position.add(-e.deltaX, -e.deltaY);
       }
-      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
-      batchables.push({
-        vertices,
-        indices,
-        uvs,
-        texture: current.texture,
-        type: current.type,
-        disableWrapMode: current.disableWrapMode,
-        vertTransform: current.vertTransform
-      });
     }
-    return batchables;
   }
-}
-
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
-  return result;
-};
-let CanvasItem = class extends TimelineNode {
-  _parentGlobalVisible;
-  _globalVisible;
-  get globalVisible() {
-    return this._globalVisible ?? true;
+  updateTransform() {
+    super.updateTransform();
+    this.updateCanvasTransform();
   }
-  _parentGlobalOpacity;
-  _globalOpacity;
-  get globalOpacity() {
-    return this._globalOpacity ?? 1;
+  updateCanvasTransform() {
+    const viewport = this.getViewport();
+    if (!viewport)
+      return;
+    viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
+    this.emit("updateCanvasTransform");
   }
-  _modulate = new Color(4294967295);
-  // Batch render
-  context = new CanvasContext();
-  _resetContext = true;
-  _redrawing = true;
-  _relayouting = false;
-  _repainting = false;
-  _originalBatchables = [];
-  _layoutedBatchables = [];
-  _batchables = [];
-  constructor(properties, nodes = []) {
-    super();
-    this.setProperties(properties).append(nodes);
+};
+Camera2D = __decorateClass$I([
+  customNode("Camera2D", {
+    processMode: "disabled",
+    renderMode: "disabled"
+  })
+], Camera2D);
+
+const defaultFilters = {
+  "brightness": 1,
+  "contrast": 1,
+  "grayscale": 0,
+  "hue-rotate": 0,
+  "invert": 0,
+  "opacity": 1,
+  "saturate": 1,
+  "sepia": 0
+};
+function parseCSSFilter(filter) {
+  const m = new ColorMatrix();
+  if (filter === "none") {
+    return m;
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "modulate":
-        this._modulate.value = value;
-        this.requestRepaint();
+  const filters = parseCssFunctions(filter).reduce((filter2, { name, args }) => {
+    filter2[name] = args[0].normalizedIntValue;
+    return filter2;
+  }, {});
+  Object.keys(defaultFilters).forEach((name) => {
+    filters[name] = filters[name] ?? defaultFilters[name];
+  });
+  for (const name in filters) {
+    const value = filters[name];
+    switch (name) {
+      case "hue-rotate":
+        m.hueRotate(value * PI_2);
         break;
-      case "blendMode":
-        this.requestRepaint();
+      case "saturate":
+        m.saturate(value);
+        break;
+      case "brightness":
+        m.brightness(value);
+        break;
+      case "contrast":
+        m.contrast(value);
+        break;
+      case "invert":
+        m.invert(value);
+        break;
+      case "sepia":
+        m.sepia(value);
         break;
       case "opacity":
-        this._updateGlobalOpacity();
+        m.opacity(value);
         break;
-      case "visible":
-      case "insideTimeRange":
-        this._updateGlobalVisible();
+      case "grayscale":
+        m.grayscale(value);
         break;
     }
   }
-  show() {
-    this.visible = true;
-  }
-  hide() {
-    this.visible = false;
-  }
-  isVisibleInTree() {
-    return this.globalOpacity > 0 && this.globalVisible;
-  }
-  canRender() {
-    return super.canRender() && this.isVisibleInTree();
-  }
-  requestRedraw() {
-    this._redrawing = true;
-  }
-  requestRelayout() {
-    this._relayouting = true;
-  }
-  requestRepaint() {
-    this._repainting = true;
-  }
-  _updateGlobalVisible() {
-    this._parentGlobalVisible = this.getParent()?.globalVisible;
-    this._globalVisible = (this._parentGlobalVisible ?? true) && this.visible && this.insideTimeRange;
-  }
-  _updateGlobalOpacity() {
-    this._parentGlobalOpacity = this.getParent()?.opacity;
-    const globalOpacity = clamp(0, this.opacity, 1) * (this._parentGlobalOpacity ?? 1);
-    if (this._globalOpacity !== globalOpacity) {
-      this._globalOpacity = globalOpacity;
-      this.requestRepaint();
-    }
-  }
-  _draw() {
-    this.emit("draw");
-  }
-  _redraw() {
-    this.log(this.name, "drawing");
-    this._draw();
-    return this.context.toBatchables();
-  }
-  _relayout(batchables) {
-    this.log(this.name, "layouting");
-    return batchables;
-  }
-  _repaint(batchables) {
-    this.log(this.name, "painting");
-    return batchables.map((batchable) => {
-      return {
-        ...batchable,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
-        blendMode: this.blendMode
-      };
-    });
-  }
-  _process(delta) {
-    super._process(delta);
-    const parent = this.getParent();
-    if (this._parentGlobalVisible !== parent?.globalVisible) {
-      this._updateGlobalVisible();
-    }
-    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
-      this._updateGlobalOpacity();
-    }
-  }
-  _updateBatchables() {
-    const redrawing = this._redrawing;
-    let relayouting = this._relayouting;
-    let repainting = this._repainting;
-    let batchables;
-    if (redrawing) {
-      this._originalBatchables = this._redraw();
-      relayouting = true;
-    }
-    if (relayouting) {
-      this._layoutedBatchables = this._relayout(this._originalBatchables);
-      repainting = true;
-    }
-    if (repainting) {
-      batchables = this._repaint(this._layoutedBatchables);
-    }
-    if (redrawing) {
-      if (this._resetContext) {
-        this.context.reset();
-      }
+  return m;
+}
+
+function parseCSSTransform(transform, width, height, output = new Transform2D()) {
+  transform = !transform || transform === "none" ? "" : transform;
+  parseCssFunctions(transform, { width, height }).reverse().forEach(({ name, args }) => {
+    const values = args.map((arg) => arg.normalizedIntValue);
+    switch (name) {
+      case "translate":
+        output.translate(values[0] * width, (values[1] ?? values[0]) * height);
+        break;
+      case "translateX":
+        output.translateX(values[0] * width);
+        break;
+      case "translateY":
+        output.translateY(values[0] * height);
+        break;
+      case "translateZ":
+        output.translateZ(values[0]);
+        break;
+      case "translate3d":
+        output.translate3d(
+          values[0] * width,
+          (values[1] ?? values[0]) * height,
+          values[2] ?? values[1] ?? values[0]
+        );
+        break;
+      case "scale":
+        output.scale(values[0], values[1] ?? values[0]);
+        break;
+      case "scaleX":
+        output.scaleX(values[0]);
+        break;
+      case "scaleY":
+        output.scaleY(values[0]);
+        break;
+      case "scale3d":
+        output.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
+        break;
+      case "rotate":
+        output.rotate(values[0] * PI_2);
+        break;
+      case "rotateX":
+        output.rotateX(values[0] * PI_2);
+        break;
+      case "rotateY":
+        output.rotateY(values[0] * PI_2);
+        break;
+      case "rotateZ":
+        output.rotateZ(values[0] * PI_2);
+        break;
+      case "rotate3d":
+        output.rotate3d(
+          values[0] * PI_2,
+          (values[1] ?? values[0]) * PI_2,
+          (values[2] ?? values[1] ?? values[0]) * PI_2,
+          (values[3] ?? values[2] ?? values[1] ?? values[0]) * PI_2
+        );
+        break;
+      case "skew":
+        output.skew(values[0], values[0] ?? values[1]);
+        break;
+      case "skewX":
+        output.skewX(values[0]);
+        break;
+      case "skewY":
+        output.skewY(values[0]);
+        break;
+      case "matrix":
+        output.set(values);
+        break;
     }
-    if (batchables) {
-      this._batchables = batchables;
-      this._redrawing = false;
-      this._relayouting = false;
-      this._repainting = false;
+  });
+  return output;
+}
+
+function parseCSSTransformOrigin(transformOrigin) {
+  const [originX, originY = originX] = transformOrigin.split(" ");
+  return [originX, originY].map((val) => {
+    val = val.trim();
+    switch (val) {
+      case "left":
+      case "top":
+        return 0;
+      case "center":
+        return 0.5;
+      case "right":
+      case "bottom":
+        return 1;
+      default:
+        return Number(val);
     }
+  });
+}
+
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __defNormalProp$i = (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$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$A(target, key, result);
+  return result;
+};
+var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
+let ColorAdjustEffect = class extends Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
   }
-  _render(renderer) {
-    this._updateBatchables();
-    this._batchables.forEach((batchable) => {
-      batchable.texture?.upload(renderer);
-      renderer.batch2D.render({
-        ...batchable,
-        texture: batchable.texture?._glTexture(renderer)
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, ColorAdjustEffect.material, {
+        sampler: 0,
+        saturation: this.saturation,
+        contrast: this.contrast,
+        brightness: this.brightness,
+        red: this.red,
+        green: this.green,
+        blue: this.blue,
+        alpha: this.alpha,
+        gamma: Math.max(this.gamma ?? 1, 1e-4)
       });
     });
-    super._render(renderer);
   }
 };
-__decorateClass$I([
+__publicField$i(ColorAdjustEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float gamma;
+uniform float contrast;
+uniform float saturation;
+uniform float brightness;
+uniform float red;
+uniform float green;
+uniform float blue;
+uniform float alpha;
+
+void main(void) {
+  vec4 c = texture2D(sampler, vUv);
+  if (c.a > 0.0) {
+      c.rgb /= c.a;
+      vec3 rgb = pow(c.rgb, vec3(1. / gamma));
+      rgb = mix(vec3(.5), mix(vec3(dot(vec3(.2125, .7154, .0721), rgb)), rgb, saturation), contrast);
+      rgb.r *= red;
+      rgb.g *= green;
+      rgb.b *= blue;
+      c.rgb = rgb * brightness;
+      c.rgb *= c.a;
+  }
+  gl_FragColor = c * alpha;
+}`
+}));
+__decorateClass$H([
   property()
-], CanvasItem.prototype, "modulate", 2);
-__decorateClass$I([
+], ColorAdjustEffect.prototype, "saturation", 2);
+__decorateClass$H([
   property()
-], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$I([
-  property({ protected: true, fallback: true })
-], CanvasItem.prototype, "visible", 2);
-__decorateClass$I([
-  property({ protected: true, fallback: 1 })
-], CanvasItem.prototype, "opacity", 2);
-CanvasItem = __decorateClass$I([
-  customNode("CanvasItem")
-], CanvasItem);
+], ColorAdjustEffect.prototype, "contrast", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "brightness", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "red", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "green", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "blue", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "alpha", 2);
+__decorateClass$H([
+  property()
+], ColorAdjustEffect.prototype, "gamma", 2);
+ColorAdjustEffect = __decorateClass$H([
+  customNode("ColorAdjustEffect")
+], ColorAdjustEffect);
 
-class RenderStack {
-  currentCall;
-  calls = [];
-  createCall(renderable) {
-    return {
-      renderable,
-      parentCall: this.currentCall,
-      fn: renderable.render.bind(renderable),
-      calls: []
-    };
-  }
-  push(renderable) {
-    const call = this.createCall(renderable);
-    (this.currentCall?.calls ?? this.calls).push(call);
-    return call;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (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$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$z(target, key, result);
+  return result;
+};
+var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
+let ColorFilterEffect = class extends Effect {
+  _colorMatrix = new ColorMatrix();
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
   }
-  render(renderer) {
-    this.calls.forEach(function render(call) {
-      call.fn(renderer, () => {
-        call.calls.forEach(render);
+  apply(renderer, source) {
+    if (!this.filter)
+      return;
+    const funs = parseCssFunctions(this.filter);
+    const matrix = this._colorMatrix.identity();
+    funs.forEach(({ name, args }) => {
+      const values = args.map((arg) => arg.normalizedIntValue);
+      switch (name) {
+        case "hue-rotate":
+        case "hueRotate":
+          matrix.hueRotate(values[0] * PI_2);
+          break;
+        case "saturate":
+          matrix.saturate(values[0]);
+          break;
+        case "brightness":
+          matrix.brightness(values[0]);
+          break;
+        case "contrast":
+          matrix.contrast(values[0]);
+          break;
+        case "invert":
+          matrix.invert(values[0]);
+          break;
+        case "sepia":
+          matrix.sepia(values[0]);
+          break;
+        case "opacity":
+          matrix.opacity(values[0]);
+          break;
+        case "grayscale":
+          matrix.grayscale(values[0]);
+          break;
+      }
+    });
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, ColorFilterEffect.material, {
+        sampler: 0,
+        m: matrix.toArray()
       });
     });
-    this.calls = [];
   }
-}
+};
+__publicField$h(ColorFilterEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float m[20];
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+void main(void) {
+  vec4 c = texture2D(sampler, vUv);
+  if (c.a > 0.0) {
+    c.rgb /= c.a;
+  }
+  gl_FragColor = vec4(
+    m[0]  * c.r + m[1]  * c.g + m[2]  * c.b + m[3]  * c.a + m[4] / 255.0,
+    m[5]  * c.r + m[6]  * c.g + m[7]  * c.b + m[8]  * c.a + m[9] / 255.0,
+    m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14] / 255.0,
+    m[15] * c.r + m[16] * c.g + m[17] * c.b + m[18] * c.a + m[19] / 255.0
+  );
+}`
+}));
+__decorateClass$G([
+  property()
+], ColorFilterEffect.prototype, "filter", 2);
+ColorFilterEffect = __decorateClass$G([
+  customNode("ColorFilterEffect")
+], ColorFilterEffect);
+
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (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$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$z(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
-let Timeline = class extends Node {
-  static from(range, loop = false) {
-    const [startTime, endTime] = range ? Array.isArray(range) ? range : [0, range] : [];
-    return new Timeline({
-      startTime,
-      endTime,
-      loop
-    });
-  }
-  constructor(properties) {
+var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
+const MAX_COLORS$1 = 50;
+let ColorOverlayEffect = class extends Effect {
+  _color = new Color();
+  constructor(properties, children = []) {
     super();
-    this.setProperties(properties);
+    this.setProperties(properties).append(children);
   }
-  _updateProperty(key, value, oldValue) {
-    super._updateProperty(key, value, oldValue);
-    switch (key) {
-      case "startTime":
-        this.startTime = Math.min(value, this.endTime);
-        break;
-      case "endTime":
-        this.endTime = value || Number.MAX_SAFE_INTEGER;
-        break;
-    }
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      const colors = this.colors.map((val) => {
+        this._color.value = val;
+        const rgba = this._color.toArray();
+        rgba[3] = this.alpha;
+        return rgba;
+      });
+      while (colors.length < MAX_COLORS$1) {
+        colors.push([0, 0, 0, 0]);
+      }
+      QuadUvGeometry.draw(renderer, ColorOverlayEffect.material, {
+        sampler: 0,
+        colors: colors.slice(0, MAX_COLORS$1).flatMap((item) => item)
+      });
+    });
   }
-  addTime(delta) {
-    const start = this.startTime;
-    const end = this.endTime;
-    let current = this.currentTime;
-    current = current + delta;
-    if (this.loop && current > end) {
-      current = start + current % end;
+};
+__publicField$g(ColorOverlayEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision mediump float;
+uniform sampler2D sampler;
+uniform vec4 colors[${MAX_COLORS$1}];
+varying vec2 vUv;
+
+float calcWidth() {
+  return distance(vec2(0, 0), vec2(1, 0));
+}
+
+int calcCount() {
+    int count = 0;
+    for (int i = 0; i < ${MAX_COLORS$1}; i++) {
+        if (colors[i] != vec4(0,0,0,0)){
+            count++;
+        }
+    }
+    return count;
+}
+
+vec4 calcColor(float x) {
+  float perUnit = calcWidth() / float(calcCount());
+  int index = int(x / perUnit);
+
+  for(int i=0; i<${MAX_COLORS$1}; i++){
+    if(i==index){
+        return colors[i];
     }
-    current = clamp(start, current, end);
-    this.currentTime = current;
-    this.emit("updateCurrentTime", current, delta);
-    return this;
-  }
-  _process(delta) {
-    super._process(delta);
-    this.addTime(delta);
   }
-};
-__decorateClass$H([
-  property({ fallback: 0 })
-], Timeline.prototype, "startTime", 2);
-__decorateClass$H([
-  property({ fallback: 0 })
-], Timeline.prototype, "currentTime", 2);
-__decorateClass$H([
-  property({ fallback: Number.MAX_SAFE_INTEGER })
-], Timeline.prototype, "endTime", 2);
-__decorateClass$H([
-  property({ fallback: false })
-], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$H([
-  customNode("Timeline")
-], Timeline);
 
-var __defProp$y = Object.defineProperty;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  return vec4(0, 0, 0, 0);
+}
+
+void main(void) {
+  vec4 color = texture2D(sampler, vUv);
+  vec4 mask = calcColor(vUv.x);
+  gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
+}`
+}));
+__decorateClass$F([
+  property()
+], ColorOverlayEffect.prototype, "colors", 2);
+__decorateClass$F([
+  property()
+], ColorOverlayEffect.prototype, "alpha", 2);
+ColorOverlayEffect = __decorateClass$F([
+  customNode("ColorOverlayEffect")
+], ColorOverlayEffect);
+
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (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$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$y(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
-class SceneTree extends MainLoop {
-  input = new Input();
-  renderStack = new RenderStack();
-  root = new Viewport(true).setTree(this);
-  timeline;
-  nodes = /* @__PURE__ */ new Map();
-  _backgroundColor = new Color();
-  _currentViewport;
-  getCurrentViewport() {
-    return this._currentViewport;
-  }
-  setCurrentViewport(viewport) {
-    this._currentViewport = viewport;
-  }
-  constructor(timeline = new Timeline()) {
+var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
+let ColorRemoveEffect = class extends Effect {
+  _color = new Color();
+  constructor(properties, children = []) {
     super();
-    this.timeline = timeline.setTree(this);
-  }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "backgroundColor":
-        this._backgroundColor.value = value;
-        break;
-    }
-  }
-  log(...args) {
-    if (this.debug) {
-      console.log(`[modern-canvas][${performance.now().toFixed(4)}ms]`, ...args);
-    }
-  }
-  _process(delta = 0) {
-    this.timeline.emit("process", delta);
-    this.emit("processing");
-    this.root.emit("process", delta);
-    this.emit("processed");
-  }
-  _render(renderer) {
-    this.emit("rendering");
-    renderer.program.uniforms.projectionMatrix = this.root.toProjectionArray(true);
-    this.renderStack.render(renderer);
-    this._renderScreen(renderer);
-    this.emit("rendered");
+    this.setProperties(properties).append(children);
   }
-  _renderScreen(renderer) {
-    renderer.state.reset();
-    renderer.framebuffer.bind(null);
-    renderer.viewport.bind({
-      x: 0,
-      y: 0,
-      width: this.root.width * renderer.pixelRatio,
-      height: this.root.height * renderer.pixelRatio
+  apply(renderer, source) {
+    const maxColors = 50;
+    const originalColors = new Float32Array(maxColors * 3);
+    const colors = this.colors.map((val) => {
+      this._color.value = val;
+      return this._color.toArray().slice(0, 3);
     });
-    if (this.backgroundColor) {
-      renderer.gl.clearColor(...this._backgroundColor.toArray());
-    }
-    renderer.clear();
-    if (this.backgroundColor) {
-      renderer.gl.clearColor(0, 0, 0, 0);
+    while (colors.length < maxColors) {
+      colors.push([-1, 0, 0]);
     }
-    const texture = this.root.texture;
-    texture.activate(renderer, 0);
-    QuadUvGeometry.draw(renderer);
-    renderer.texture.unbind(texture);
-  }
-  free() {
-    super.free();
-    this.root.children.internal.forEach((node) => this.root.removeChild(node));
-    this.input.removeEventListeners();
+    colors.slice(0, maxColors).forEach((originalColor, i) => {
+      originalColors[i * 3] = originalColor[0];
+      originalColors[i * 3 + 1] = originalColor[1];
+      originalColors[i * 3 + 2] = originalColor[2];
+    });
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, ColorRemoveEffect.material, {
+        sampler: 0,
+        epsilon: this.epsilon,
+        originalColors
+      });
+    });
   }
-}
-__decorateClass$G([
-  property({ fallback: false })
-], SceneTree.prototype, "processPaused");
-__decorateClass$G([
+};
+__publicField$f(ColorRemoveEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float epsilon;
+const int MAX_COLORS = 50;
+uniform vec3 originalColors[MAX_COLORS];
+
+void main(void) {
+  vec4 color = texture2D(sampler, vUv);
+
+  for (int i = 0; i < MAX_COLORS; i++) {
+    vec3 origColor = originalColors[i];
+    if (origColor.r < 0.0) {
+      break;
+    }
+    vec3 colorDiff = origColor - color.rgb;
+    if (length(colorDiff) < epsilon) {
+      gl_FragColor = vec4(0, 0, 0, 0);
+      return;
+    }
+  }
+
+  gl_FragColor = color;
+}`
+}));
+__decorateClass$E([
   property()
-], SceneTree.prototype, "backgroundColor");
-__decorateClass$G([
-  property({ protected: true, fallback: false })
-], SceneTree.prototype, "debug");
+], ColorRemoveEffect.prototype, "colors", 2);
+__decorateClass$E([
+  property()
+], ColorRemoveEffect.prototype, "epsilon", 2);
+ColorRemoveEffect = __decorateClass$E([
+  customNode("ColorRemoveEffect")
+], ColorRemoveEffect);
 
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (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$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
-let Transition = class extends Effect {
+var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
+const MAX_COLORS = 50;
+let ColorReplaceEffect = class extends Effect {
+  _color = new Color();
   constructor(properties, children = []) {
     super();
     this.setProperties(properties).append(children);
   }
+  apply(renderer, source) {
+    const colors = this.colors.map((val) => {
+      this._color.value = val[0];
+      const color0 = this._color.toArray().slice(0, 3);
+      this._color.value = val[1];
+      const color1 = this._color.toArray().slice(0, 3);
+      return [
+        color0,
+        color1
+      ];
+    });
+    const epsilon = this.epsilon;
+    const originalColors = new Float32Array(MAX_COLORS * 3);
+    const targetColors = new Float32Array(MAX_COLORS * 3);
+    while (colors.length < MAX_COLORS) {
+      colors.push([
+        [-1, 0, 0],
+        [0, 0, 0, 1]
+      ]);
+    }
+    colors.slice(0, MAX_COLORS).forEach(([originalColor, targetColor], i) => {
+      originalColors[i * 3] = originalColor[0];
+      originalColors[i * 3 + 1] = originalColor[1];
+      originalColors[i * 3 + 2] = originalColor[2];
+      targetColors[i * 3] = targetColor[0];
+      targetColors[i * 3 + 1] = targetColor[1];
+      targetColors[i * 3 + 2] = targetColor[2];
+    });
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, ColorReplaceEffect.material, {
+        sampler: 0,
+        epsilon,
+        originalColors,
+        targetColors
+      });
+    });
+  }
 };
-Transition = __decorateClass$F([
-  customNode("Transition", {
-    effectMode: "transition",
-    processMode: "pausable",
-    duration: 2e3
-  })
-], Transition);
+__publicField$e(ColorReplaceEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform float epsilon;
+const int MAX_COLORS = ${MAX_COLORS};
+uniform vec3 originalColors[MAX_COLORS];
+uniform vec3 targetColors[MAX_COLORS];
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+void main(void) {
+  gl_FragColor = texture2D(sampler, vUv);
+
+  float alpha = gl_FragColor.a;
+  if (alpha < 0.0001) {
+    return;
+  }
+
+  vec3 color = gl_FragColor.rgb / alpha;
+
+  for(int i = 0; i < MAX_COLORS; i++) {
+    vec3 origColor = originalColors[i];
+    if (origColor.r < 0.0) {
+      break;
+    }
+    vec3 colorDiff = origColor - color;
+    if (length(colorDiff) < epsilon) {
+      vec3 targetColor = targetColors[i];
+      gl_FragColor = vec4((targetColor + colorDiff) * alpha, alpha);
+      return;
+    }
+  }
+}`
+}));
+__decorateClass$D([
+  property()
+], ColorReplaceEffect.prototype, "colors", 2);
+__decorateClass$D([
+  property()
+], ColorReplaceEffect.prototype, "epsilon", 2);
+ColorReplaceEffect = __decorateClass$D([
+  customNode("ColorReplaceEffect")
+], ColorReplaceEffect);
+
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (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$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$x(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -7757,25 +8014,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$E([
+__decorateClass$C([
   property({ default: 4 })
 ], GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$E([
+__decorateClass$C([
   property({ default: 3 })
 ], GaussianBlurEffect.prototype, "quality", 2);
-GaussianBlurEffect = __decorateClass$E([
+GaussianBlurEffect = __decorateClass$C([
   customNode("GaussianBlurEffect")
 ], GaussianBlurEffect);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (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$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$w(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -7839,34 +8096,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$D([
+__decorateClass$B([
   property()
 ], DropShadowEffect.prototype, "color", 2);
-__decorateClass$D([
+__decorateClass$B([
   property()
 ], DropShadowEffect.prototype, "blur", 2);
-__decorateClass$D([
+__decorateClass$B([
   property()
 ], DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$D([
+__decorateClass$B([
   property()
 ], DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$D([
+__decorateClass$B([
   property()
 ], DropShadowEffect.prototype, "shadowOnly", 2);
-DropShadowEffect = __decorateClass$D([
+DropShadowEffect = __decorateClass$B([
   customNode("DropShadowEffect")
 ], DropShadowEffect);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (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$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$v(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -7911,22 +8168,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$C([
+__decorateClass$A([
   property()
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$C([
+EmbossEffect = __decorateClass$A([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (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$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$u(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8100,46 +8357,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$B([
+__decorateClass$z([
   property()
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$B([
+GlitchEffect = __decorateClass$z([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$r(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$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$t(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8317,39 +8574,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "time", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$A([
+__decorateClass$y([
   property()
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$A([
+GodrayEffect = __decorateClass$y([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8439,28 +8696,28 @@ void main() {
     });
   }
 };
-__decorateClass$z([
+__decorateClass$x([
   property()
 ], KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$z([
+__decorateClass$x([
   property()
 ], KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$z([
+__decorateClass$x([
   property()
 ], KawaseBlurEffect.prototype, "pixelSize", 2);
-KawaseBlurEffect = __decorateClass$z([
+KawaseBlurEffect = __decorateClass$x([
   customNode("KawaseBlurEffect")
 ], KawaseBlurEffect);
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (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$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$r(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -8548,25 +8805,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$y([
+__decorateClass$w([
   property({ protected: true })
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$y([
+__decorateClass$w([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$y([
+MaskEffect = __decorateClass$w([
   customNode("MaskEffect")
 ], MaskEffect);
-
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (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$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$q(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -8653,40 +8910,40 @@ void main() {
 };
 __publicField$7(OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "color", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "width", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "style", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "image", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "opacity", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "quality", 2);
-__decorateClass$x([
+__decorateClass$v([
   property()
 ], OutlineEffect.prototype, "knockout", 2);
-OutlineEffect = __decorateClass$x([
+OutlineEffect = __decorateClass$v([
   customNode("OutlineEffect")
 ], OutlineEffect);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __defNormalProp$6 = (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$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$p(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -8742,22 +8999,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$w([
+__decorateClass$u([
   property()
 ], PixelateEffect.prototype, "strength", 2);
-PixelateEffect = __decorateClass$w([
+PixelateEffect = __decorateClass$u([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$m(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$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$o(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -8870,29 +9127,29 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$v([
+__decorateClass$t([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$v([
+__decorateClass$t([
   property()
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$v([
+__decorateClass$t([
   property()
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$v([
+__decorateClass$t([
   property()
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$v([
+ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$n = Object.defineProperty;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __defProp$l = 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$n(target, key, result);
+  if (result) __defProp$l(target, key, result);
   return result;
 };
 class BaseElement2DFill extends CoreObject {
@@ -9000,47 +9257,47 @@ class BaseElement2DFill extends CoreObject {
     });
   }
 }
-__decorateClass$u([
+__decorateClass$s([
   property({ fallback: true })
 ], BaseElement2DFill.prototype, "enabled");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "color");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "image");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "linearGradient");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "radialGradient");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "cropRect");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "stretchRect");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "dpi");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "tile");
-__decorateClass$u([
+__decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "opacity");
 
-var __defProp$m = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$k = 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$m(target, key, result);
+  if (result) __defProp$k(target, key, result);
   return result;
 };
 class BaseElement2DBackground extends BaseElement2DFill {
@@ -9050,17 +9307,17 @@ class BaseElement2DBackground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$t([
+__decorateClass$r([
   property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$j = 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$l(target, key, result);
+  if (result) __defProp$j(target, key, result);
   return result;
 };
 class BaseElement2DForeground extends BaseElement2DFill {
@@ -9070,17 +9327,17 @@ class BaseElement2DForeground extends BaseElement2DFill {
     );
   }
 }
-__decorateClass$s([
+__decorateClass$q([
   property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
-var __defProp$k = Object.defineProperty;
-var __decorateClass$r = (decorators, target, key, kind) => {
+var __defProp$i = 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$k(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 class BaseElement2DOutline extends BaseElement2DFill {
@@ -9113,23 +9370,23 @@ class BaseElement2DOutline extends BaseElement2DFill {
     ctx.stroke({ disableWrapMode });
   }
 }
-__decorateClass$r([
+__decorateClass$p([
   property({ fallback: "#00000000" })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$r([
+__decorateClass$p([
   property({ fallback: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$r([
+__decorateClass$p([
   property({ fallback: "solid" })
 ], BaseElement2DOutline.prototype, "style");
 
-var __defProp$j = Object.defineProperty;
-var __decorateClass$q = (decorators, target, key, kind) => {
+var __defProp$h = 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$j(target, key, result);
+  if (result) __defProp$h(target, key, result);
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
@@ -9169,29 +9426,29 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$q([
+__decorateClass$o([
   property({ fallback: true })
 ], BaseElement2DShadow.prototype, "enabled");
-__decorateClass$q([
+__decorateClass$o([
   property({ fallback: "#000000FF" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$q([
+__decorateClass$o([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$q([
+__decorateClass$o([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$q([
+__decorateClass$o([
   property({ fallback: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
-var __defProp$i = Object.defineProperty;
-var __decorateClass$p = (decorators, target, key, kind) => {
+var __defProp$g = Object.defineProperty;
+var __decorateClass$n = (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$g(target, key, result);
   return result;
 };
 class BaseElement2DShape extends CoreObject {
@@ -9266,19 +9523,19 @@ class BaseElement2DShape extends CoreObject {
     }
   }
 }
-__decorateClass$p([
+__decorateClass$n([
   property({ fallback: true })
 ], BaseElement2DShape.prototype, "enabled");
-__decorateClass$p([
+__decorateClass$n([
   property()
 ], BaseElement2DShape.prototype, "preset");
-__decorateClass$p([
+__decorateClass$n([
   property()
 ], BaseElement2DShape.prototype, "svg");
-__decorateClass$p([
+__decorateClass$n([
   property()
 ], BaseElement2DShape.prototype, "viewBox");
-__decorateClass$p([
+__decorateClass$n([
   property()
 ], BaseElement2DShape.prototype, "paths");
 
@@ -9294,13 +9551,13 @@ for (const key in defaultStyles$1) {
   defineProperty(BaseElement2DStyle, key, { fallback });
 }
 
-var __defProp$h = Object.defineProperty;
-var __decorateClass$o = (decorators, target, key, kind) => {
+var __defProp$f = 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$h(target, key, result);
+  if (result) __defProp$f(target, key, result);
   return result;
 };
 class BaseElement2DText extends CoreObject {
@@ -9341,187 +9598,67 @@ class BaseElement2DText extends CoreObject {
         break;
     }
   }
-  _updateText() {
-    this.base.style = {
-      justifyContent: "center",
-      alignItems: "center",
-      textAlign: "center",
-      ...this.parent.style.toJSON()
-    };
-    this.base.requestUpdate();
-  }
-  measure() {
-    this._updateText();
-    return this.base.measure();
-  }
-  updateMeasure() {
-    this.measureResult = this.measure();
-    return this;
-  }
-  canDraw() {
-    return Boolean(
-      this.enabled && !/^\s*$/.test(this.base.toString())
-    );
-  }
-  draw() {
-    const ctx = this.parent.context;
-    this.base.update();
-    this.base.pathSets.forEach((pathSet) => {
-      pathSet.paths.forEach((path) => {
-        ctx.addPath(path);
-        ctx.style = { ...path.style };
-        ctx.fillStyle = void 0;
-        ctx.strokeStyle = void 0;
-        ctx.fill();
-      });
-    });
-  }
-}
-__decorateClass$o([
-  property({ fallback: true })
-], BaseElement2DText.prototype, "enabled");
-__decorateClass$o([
-  property({ alias: "base.content", fallback: () => [] })
-], BaseElement2DText.prototype, "content");
-__decorateClass$o([
-  property({ alias: "base.effects" })
-], BaseElement2DText.prototype, "effects");
-__decorateClass$o([
-  property({ alias: "base.fill" })
-], BaseElement2DText.prototype, "fill");
-__decorateClass$o([
-  property({ alias: "base.outline" })
-], BaseElement2DText.prototype, "outline");
-__decorateClass$o([
-  property({ protected: true, alias: "base.measureDom" })
-], BaseElement2DText.prototype, "measureDom");
-__decorateClass$o([
-  property({ protected: true, alias: "base.fonts" })
-], BaseElement2DText.prototype, "fonts");
-
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
-  return result;
-};
-let Node2D = class extends CanvasItem {
-  position = new Vector2().on("update", () => this.updateGlobalTransform());
-  scale = new Vector2(1, 1).on("update", () => this.updateGlobalTransform());
-  skew = new Vector2().on("update", () => this.updateGlobalTransform());
-  transform = new Transform2D();
-  globalPosition = new Vector2();
-  globalScale = new Vector2();
-  globalSkew = new Vector2();
-  globalTransform = new Transform2D();
-  _parentTransformDirtyId;
-  constructor(properties, nodes = []) {
-    super();
-    this.setProperties(properties).append(nodes);
-  }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "rotation":
-        this.requestRelayout();
-        break;
-    }
-  }
-  getTransformOrigin() {
-    return new Vector2(0, 0);
-  }
-  getTransform(cb) {
-    const origin = this.getTransformOrigin();
-    const transform = new Transform2D();
-    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
-    cb?.(transform);
-    transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
-    return transform;
-  }
-  updateTransform() {
-    this.transform.copy(this.getTransform());
-  }
-  updateGlobalTransform() {
-    this.updateTransform();
-    const parent = this.getParent();
-    if (parent?.globalTransform) {
-      this._parentTransformDirtyId = parent.globalTransform.dirtyId;
-      this.globalScale.set(parent.globalScale.x * this.scale.x, parent.globalScale.y * this.scale.y);
-      this.globalRotation = parent.globalRotation + this.rotation;
-      parent.globalTransform.multiply(this.transform, this.globalTransform);
-    } else {
-      this.globalScale.copy(this.scale);
-      this.globalRotation = this.rotation;
-      this.globalTransform.copy(this.transform);
-    }
-    const [
-      a,
-      c,
-      tx,
-      b,
-      d,
-      ty
-    ] = this.globalTransform.toArray();
-    this.globalPosition.set(tx, ty);
-    this.globalSkew.x = Math.atan2(c, a) - this.globalRotation;
-    this.globalSkew.y = Math.atan2(b, d) - this.globalRotation;
-    this.requestRelayout();
-  }
-  _transformVertices(vertices, vertTransform) {
-    let a, c, tx, b, d, ty;
-    if (vertTransform) {
-      const globalTransform = this.globalTransform.clone();
-      globalTransform.multiply(
-        typeof vertTransform === "function" ? vertTransform?.() : vertTransform
-      );
-      [a, c, tx, b, d, ty] = globalTransform.toArray();
-    } else {
-      [a, c, tx, b, d, ty] = this.globalTransform.toArray();
-    }
-    const newVertices = vertices.slice();
-    for (let len = vertices.length, i = 0; i < len; i += 2) {
-      const x = vertices[i];
-      const y = vertices[i + 1];
-      newVertices[i] = a * x + c * y + tx;
-      newVertices[i + 1] = b * x + d * y + ty;
-    }
-    return newVertices;
+  _updateText() {
+    this.base.style = {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      ...this.parent.style.toJSON()
+    };
+    this.base.requestUpdate();
   }
-  _relayout(batchables) {
-    batchables = super._relayout(batchables);
-    this.updateGlobalTransform();
-    return batchables.map((batchable) => {
-      return {
-        ...batchable,
-        vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
-      };
-    });
+  measure() {
+    this._updateText();
+    return this.base.measure();
   }
-  _process(delta) {
-    super._process(delta);
-    const parent = this.getParent();
-    if (parent?.globalTransform && this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
-      this.requestRelayout();
-    }
+  updateMeasure() {
+    this.measureResult = this.measure();
+    return this;
   }
-};
-__decorateClass$n([
-  property({ protected: true, fallback: 0 })
-], Node2D.prototype, "rotation", 2);
-__decorateClass$n([
-  property({ protected: true, fallback: 0 })
-], Node2D.prototype, "globalRotation", 2);
-Node2D = __decorateClass$n([
-  customNode("Node2D")
-], Node2D);
+  canDraw() {
+    return Boolean(
+      this.enabled && !/^\s*$/.test(this.base.toString())
+    );
+  }
+  draw() {
+    const ctx = this.parent.context;
+    this.base.update();
+    this.base.pathSets.forEach((pathSet) => {
+      pathSet.paths.forEach((path) => {
+        ctx.addPath(path);
+        ctx.style = { ...path.style };
+        ctx.fillStyle = void 0;
+        ctx.strokeStyle = void 0;
+        ctx.fill();
+      });
+    });
+  }
+}
+__decorateClass$m([
+  property({ fallback: true })
+], BaseElement2DText.prototype, "enabled");
+__decorateClass$m([
+  property({ alias: "base.content", fallback: () => [] })
+], BaseElement2DText.prototype, "content");
+__decorateClass$m([
+  property({ alias: "base.effects" })
+], BaseElement2DText.prototype, "effects");
+__decorateClass$m([
+  property({ alias: "base.fill" })
+], BaseElement2DText.prototype, "fill");
+__decorateClass$m([
+  property({ alias: "base.outline" })
+], BaseElement2DText.prototype, "outline");
+__decorateClass$m([
+  property({ protected: true, alias: "base.measureDom" })
+], BaseElement2DText.prototype, "measureDom");
+__decorateClass$m([
+  property({ protected: true, alias: "base.fonts" })
+], BaseElement2DText.prototype, "fonts");
 
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -9745,15 +9882,46 @@ let BaseElement2D = class extends Node2D {
       maxY - minY
     );
   }
+  // protected _rectsOverlap(r1: any, r2: any): boolean {
+  //   return (
+  //     r1.x < r2.x + r2.width
+  //     && r1.x + r1.width > r2.x
+  //     && r1.y < r2.y + r2.height
+  //     && r1.y + r1.height > r2.y
+  //   )
+  // }
+  // TODO
+  // override isVisibleInTree(): boolean {
+  //   if (this._tree) {
+  //     const root = this._tree.root
+  //     const camera = root.canvasTransform.inverse()
+  //     const { x, y, width, height } = root
+  //     const p1 = camera.applyToPoint(x, y)
+  //     const p2 = camera.applyToPoint(x + width, y)
+  //     const p3 = camera.applyToPoint(x + width, y + height)
+  //     const p4 = camera.applyToPoint(x, y + height)
+  //     const pts = [p1, p2, p3, p4]
+  //     const xs = pts.map(p => p[0])
+  //     const ys = pts.map(p => p[1])
+  //     const minX = Math.min(...xs)
+  //     const maxX = Math.max(...xs)
+  //     const minY = Math.min(...ys)
+  //     const maxY = Math.max(...ys)
+  //     const rect2 = {
+  //       x: minX,
+  //       y: minY,
+  //       width: maxX - minX,
+  //       height: maxY - minY,
+  //     }
+  //     if (!this._rectsOverlap(rect2, this.getRect())) {
+  //       return false
+  //     }
+  //   }
+  //   return super.isVisibleInTree()
+  // }
   _updateOverflow() {
     if (this.style.overflow === "hidden") {
-      const rect = this.getRect();
-      this.mask = {
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height
-      };
+      this.mask = this.getRect().toJSON();
     } else {
       this.mask = void 0;
     }
@@ -9824,10 +9992,14 @@ let BaseElement2D = class extends Node2D {
       case "pointermove":
       case "pointerup": {
         if (this.canPointerEvents()) {
-          const { screenX, screenY } = event;
+          let { screenX, screenY } = event;
           if (screenX && screenY) {
-            const [x, y] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
-            if (this._pointerInput({ x, y }, key)) {
+            const viewport = this.getViewport();
+            if (viewport) {
+              [screenX, screenY] = viewport.canvasTransform.inverse().applyToPoint(screenX, screenY);
+            }
+            [screenX, screenY] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
+            if (this._pointerInput({ x: screenX, y: screenY }, key)) {
               if (!event.target) {
                 event.target = this;
               }
@@ -9856,7 +10028,7 @@ let BaseElement2D = class extends Node2D {
     });
   }
 };
-BaseElement2D = __decorateClass$m([
+BaseElement2D = __decorateClass$l([
   customNode("BaseElement2D")
 ], BaseElement2D);
 
@@ -9876,9 +10048,16 @@ for (const key in defaultStyles) {
   defineProperty(Element2DStyle, key, { fallback: defaultStyles[key] });
 }
 
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+class FlexElement2DStyle extends BaseElement2DStyle {
+  constructor(properties) {
+    super();
+    this.setProperties(properties);
+  }
+}
+
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -9929,17 +10108,10 @@ let Element2D = class extends BaseElement2D {
     }
   }
 };
-Element2D = __decorateClass$l([
+Element2D = __decorateClass$k([
   customNode("Element2D")
 ], Element2D);
 
-class FlexElement2DStyle extends BaseElement2DStyle {
-  constructor(properties) {
-    super();
-    this.setProperties(properties);
-  }
-}
-
 const alignMap = {
   "auto": Align.Auto,
   "flex-start": Align.FlexStart,
@@ -10181,9 +10353,9 @@ class FlexLayout {
   }
 }
 
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(result)) || result;
@@ -10260,18 +10432,18 @@ let FlexElement2D = class extends BaseElement2D {
     }
   }
 };
-FlexElement2D = __decorateClass$k([
+FlexElement2D = __decorateClass$j([
   customNode("FlexElement2D")
 ], FlexElement2D);
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   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$e(target, key, result);
   return result;
 };
 let Image2D = class extends Element2D {
@@ -10407,19 +10579,19 @@ let Image2D = class extends Element2D {
     });
   }
 };
-__decorateClass$j([
+__decorateClass$i([
   property({ protected: true })
 ], Image2D.prototype, "texture", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ fallback: "" })
 ], Image2D.prototype, "src", 2);
-__decorateClass$j([
+__decorateClass$i([
   property()
 ], Image2D.prototype, "srcRect", 2);
-__decorateClass$j([
+__decorateClass$i([
   property({ fallback: false })
 ], Image2D.prototype, "gif", 2);
-Image2D = __decorateClass$j([
+Image2D = __decorateClass$i([
   customNode("Image2D")
 ], Image2D);
 
@@ -10443,14 +10615,14 @@ class TextureRect2D extends Element2D {
   }
 }
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   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$d(target, key, result);
   return result;
 };
 let Lottie2D = class extends TextureRect2D {
@@ -10493,189 +10665,13 @@ let Lottie2D = class extends TextureRect2D {
     super._process(delta);
   }
 };
-__decorateClass$i([
+__decorateClass$h([
   property({ fallback: "" })
 ], Lottie2D.prototype, "src", 2);
-Lottie2D = __decorateClass$i([
+Lottie2D = __decorateClass$h([
   customNode("Lottie2D")
 ], Lottie2D);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
-  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);
-  return result;
-};
-const textStyles = new Set(Object.keys(textDefaultStyle));
-let Text2D = class extends TextureRect2D {
-  texture = new CanvasTexture();
-  base = new Text();
-  measureResult;
-  _subTextsCount = 0;
-  constructor(properties, children = []) {
-    super();
-    this.setProperties(properties);
-    this.append(children);
-    if (properties?.plugins) {
-      properties.plugins.forEach((plugin) => {
-        this.base.use(plugin);
-      });
-    }
-  }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "content":
-      case "effects":
-      case "measureDOM":
-      case "fonts":
-      case "split":
-        this._updateSplit();
-        this.requestRedraw();
-        break;
-    }
-    if (this._subTextsCount && key === "effects") {
-      this._getSubTexts().forEach((child) => {
-        child.setProperties({ [key]: value });
-      });
-    }
-  }
-  _updateBase() {
-    this.base.style = this.style.toJSON();
-    this.emit("updateBase", this.base);
-    this.base.requestUpdate();
-  }
-  _updateStyleProperty(key, value, oldValue) {
-    switch (key) {
-      case "left":
-      case "top":
-      case "width":
-      case "height":
-        this.requestRedraw();
-        break;
-      default:
-        super._updateStyleProperty(key, value, oldValue);
-        break;
-    }
-    switch (key) {
-      case "width":
-        if (this.split) {
-          this._updateSubTexts();
-        }
-        break;
-    }
-    if (typeof key === "string" && textStyles.has(key)) {
-      if (this._subTextsCount && key !== "width" && key !== "height") {
-        this._getSubTexts().forEach((child) => {
-          child.style.setProperties({ [key]: value });
-        });
-      }
-      this.requestRedraw();
-    }
-  }
-  _getSubTexts() {
-    return this.children.front.filter((node) => node instanceof Text2D);
-  }
-  _updateSubTexts() {
-    const subTexts = this._getSubTexts();
-    let i = 0;
-    if (this.split) {
-      this.updateMeasure().measureResult?.paragraphs.forEach((p) => {
-        p.fragments.forEach((f) => {
-          f.characters.forEach((c) => {
-            const child = subTexts[i];
-            if (child) {
-              child.style.left = c.inlineBox.left;
-              child.style.top = c.inlineBox.top;
-            }
-            i++;
-          });
-        });
-      });
-    }
-  }
-  measure() {
-    this._updateBase();
-    return this.base.measure();
-  }
-  updateMeasure() {
-    this.measureResult = this.measure();
-    const { boundingBox } = this.measureResult;
-    const { left, top } = this.style;
-    this.position.x = left + Math.min(0, boundingBox.left);
-    this.position.y = top + Math.min(0, boundingBox.top);
-    this.size.width = boundingBox.width;
-    this.size.height = boundingBox.height;
-    return this;
-  }
-  _updateSplit() {
-    if (this._subTextsCount) {
-      this.children.front.forEach((child) => this.removeChild(child));
-      this._subTextsCount = 0;
-    }
-    if (this.split) {
-      this.measure().paragraphs.forEach((p) => {
-        p.fragments.forEach((f) => {
-          f.characters.forEach((c) => {
-            this.append(
-              new Text2D({
-                internalMode: "front",
-                style: {
-                  ...c.computedStyle,
-                  left: c.inlineBox.x,
-                  top: c.inlineBox.y,
-                  width: 0,
-                  height: 0
-                },
-                content: c.content,
-                effects: this.effects,
-                fonts: this.fonts
-              })
-            );
-            this._subTextsCount++;
-          });
-        });
-      });
-    }
-  }
-  _redraw() {
-    this.updateMeasure();
-    return super._redraw();
-  }
-  _drawContent() {
-    if (!this.split) {
-      this.base.render({
-        pixelRatio: this.texture.pixelRatio,
-        view: this.texture.source
-      });
-      this.texture.requestUpload();
-      super._drawContent();
-    }
-  }
-};
-__decorateClass$h([
-  property({ fallback: false })
-], Text2D.prototype, "split", 2);
-__decorateClass$h([
-  property({ alias: "base.content" })
-], Text2D.prototype, "content", 2);
-__decorateClass$h([
-  property({ alias: "base.effects" })
-], Text2D.prototype, "effects", 2);
-__decorateClass$h([
-  property({ protected: true, alias: "base.measureDOM" })
-], Text2D.prototype, "measureDOM", 2);
-__decorateClass$h([
-  property({ protected: true, alias: "base.fonts" })
-], Text2D.prototype, "fonts", 2);
-Text2D = __decorateClass$h([
-  customNode("Text2D")
-], Text2D);
-
 var __defProp$c = Object.defineProperty;
 var __decorateClass$g = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -10960,7 +10956,7 @@ let Animation = class extends TimelineNode {
     const offset = 1 / targets.length;
     const progress = this.currentTimeProgress;
     targets.forEach((target, i) => {
-      const tiem = offset === 1 ? progress : clamp(0, Math.max(0, progress - offset * i) / offset, 1);
+      const tiem = offset === 1 ? progress : clamp(Math.max(0, progress - offset * i) / offset, 0, 1);
       const startProps = this._cachedProps.get(target);
       if (!startProps)
         return;
@@ -11126,13 +11122,13 @@ let Animation = class extends TimelineNode {
   }
 };
 __decorateClass$e([
-  property()
+  property({ fallback: "parent" })
 ], Animation.prototype, "effectMode", 2);
 __decorateClass$e([
-  property()
+  property({ fallback: false })
 ], Animation.prototype, "loop", 2);
 __decorateClass$e([
-  property()
+  property({ default: () => [] })
 ], Animation.prototype, "keyframes", 2);
 __decorateClass$e([
   property()
@@ -12792,7 +12788,7 @@ let Scaler = class extends Node {
       case "scale":
       case "min":
       case "max": {
-        this.scale = clamp(this.minScale, this.scale, this.maxScale);
+        this.scale = clamp(this.scale, this.minScale, this.maxScale);
         this._updateTarget();
         break;
       }
@@ -14002,4 +13998,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, 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, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, 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, Text2D, 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, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };
+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, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, 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, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, render, timingFunctions, uid };