modern-canvas 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -623,13 +623,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$C = Object.defineProperty;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __defProp$B = Object.defineProperty;
+var __decorateClass$B = (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$C(target, key, result);
+  if (result) __defProp$B(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -673,20 +673,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$A = Object.defineProperty;
+var __decorateClass$A = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$A(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -730,20 +730,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$A = Object.defineProperty;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __defProp$z = 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$A(target, key, result);
+  if (result) __defProp$z(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -780,25 +780,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -982,13 +982,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$z = Object.defineProperty;
-var __decorateClass$z = (decorators, target, key, kind) => {
+var __defProp$y = 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$z(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class MainLoop extends _Object {
@@ -1029,10 +1029,10 @@ class MainLoop extends _Object {
     }
   }
 }
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4005,14 +4005,14 @@ class Vector4 extends Vector {
   }
 }
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (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$y(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 var InternalMode = /* @__PURE__ */ ((InternalMode2) => {
@@ -4410,22 +4410,22 @@ exports.Node = class Node extends Reference {
     return node;
   }
 };
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], exports.Node.prototype, "name", 2);
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], exports.Node.prototype, "mask", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: "visible" })
 ], exports.Node.prototype, "visibility", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: 0 })
 ], exports.Node.prototype, "visibleDelay", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Node.prototype, "visibleDuration", 2);
-exports.Node = __decorateClass$y([
+exports.Node = __decorateClass$x([
   customNode("Node")
 ], exports.Node);
 
@@ -4455,14 +4455,14 @@ class RenderStack {
   }
 }
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (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$x(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 exports.Timer = class Timer extends exports.Node {
@@ -4504,29 +4504,29 @@ exports.Timer = class Timer extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], exports.Timer.prototype, "start", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], exports.Timer.prototype, "current", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Timer.prototype, "end", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: false })
 ], exports.Timer.prototype, "loop", 2);
-exports.Timer = __decorateClass$x([
+exports.Timer = __decorateClass$w([
   customNode("Timer")
 ], exports.Timer);
 
-var __defProp$w = Object.defineProperty;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __defProp$v = 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$w(target, key, result);
+  if (result) __defProp$v(target, key, result);
   return result;
 };
 class Texture extends Resource {
@@ -4652,22 +4652,22 @@ class Texture extends Resource {
     }
   }
 }
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty()
 ], Texture.prototype, "source");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "width");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "height");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "linear" })
 ], Texture.prototype, "filterMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "clamp_to_edge" })
 ], Texture.prototype, "wrapMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 1 })
 ], Texture.prototype, "pixelRatio");
 
@@ -4803,13 +4803,13 @@ class PixelsTexture extends Texture {
   }
 }
 
-var __defProp$v = Object.defineProperty;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defProp$u = 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$v(target, key, result);
+  if (result) __defProp$u(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5052,10 +5052,10 @@ const _VideoTexture = class _VideoTexture extends Texture {
     }
   }
 };
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5064,14 +5064,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (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$t(target, key, result);
   return result;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -5192,19 +5192,19 @@ exports.Viewport = class Viewport extends exports.Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$u([
+exports.Viewport = __decorateClass$t([
   customNode({
     tag: "Viewport",
     renderable: true
@@ -5623,13 +5623,13 @@ class ColorTexture extends Texture {
   }
 }
 
-var __defProp$t = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$s = 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$t(target, key, result);
+  if (result) __defProp$s(target, key, result);
   return result;
 };
 function proxy$1() {
@@ -5785,46 +5785,46 @@ class CanvasContext {
     return batchables;
   }
 }
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "moveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "lineTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "bezierCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "quadraticCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipticalArc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "rect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "roundRect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipse");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "arc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "poly");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addShape");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addSvgPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "closePath");
 
@@ -6192,16 +6192,13 @@ class Style2DBackgroundModule extends Style2DModule {
   install(Style2D) {
     defineProperty(Style2D, "backgroundColor");
     defineProperty(Style2D, "backgroundImage");
-    Style2D.prototype.getComputedBackground = getComputedBackground;
+    Style2D.prototype.getComputedBackgroundImage = getComputedBackgroundImage;
   }
 }
-async function getComputedBackground() {
+async function getComputedBackgroundImage() {
   if (this.backgroundImage) {
     return await assets.texture.load(this.backgroundImage);
   }
-  if (this.backgroundColor) {
-    return new ColorTexture(this.backgroundColor);
-  }
 }
 
 class Style2DFilterModule extends Style2DModule {
@@ -6449,13 +6446,13 @@ const modules = {
   Style2DTransformModule: Style2DTransformModule
 };
 
-var __defProp$s = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$r = 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$s(target, key, result);
+  if (result) __defProp$r(target, key, result);
   return result;
 };
 class Style2D extends _Object {
@@ -6481,39 +6478,39 @@ class Style2D extends _Object {
     }
   }
 }
-__decorateClass$s([
+__decorateClass$r([
   property({ default: "#000000" })
 ], Style2D.prototype, "shadowColor");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowOffsetX");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowOffsetY");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowBlur");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 1 })
 ], Style2D.prototype, "opacity");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "borderRadius");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: "visible" })
 ], Style2D.prototype, "overflow");
 Object.values(modules).forEach((Module) => {
   new Module().install(Style2D);
 });
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (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$r(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 exports.CanvasItem = class CanvasItem extends exports.Node {
@@ -6532,12 +6529,13 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   _parentOpacity;
   _tint = new Color(4294967295);
   _backgroundColor = new Color(0);
-  // 2d batch render
+  _backgroundImage;
+  // Batch render
   context = new CanvasContext();
   _resetContext = true;
-  _waitingRedraw = false;
-  _waitingReflow = false;
-  _waitingRepaint = false;
+  _redrawing = false;
+  _reflowing = false;
+  _repainting = false;
   _originalBatchables = [];
   _layoutedBatchables = [];
   _batchables = [];
@@ -6571,12 +6569,10 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   _onUpdateStyleProperty(key, newValue, oldValue, declaration) {
     switch (key) {
       case "backgroundColor":
-        this._backgroundColor.value = newValue || 0;
-        if (this._originalBatchables.length) {
-          this.requestRepaint();
-        } else if (this._backgroundColor.a > 0) {
-          this.requestRedraw();
-        }
+        this._updateBackgroundColor();
+        break;
+      case "backgroundImage":
+        this._updateBackgroundImage();
         break;
       case "opacity":
         this._updateOpacity();
@@ -6584,8 +6580,23 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
       case "filter":
         this.requestRepaint();
         break;
+      case "borderRadius":
+        this.requestRedraw();
+        break;
+    }
+  }
+  _updateBackgroundColor() {
+    this._backgroundColor.value = this.style.backgroundColor || 0;
+    if (this._originalBatchables.length) {
+      this.requestRepaint();
+    } else if (this._backgroundColor.a > 0) {
+      this.requestRedraw();
     }
   }
+  async _updateBackgroundImage() {
+    this._backgroundImage = await this.style.getComputedBackgroundImage();
+    this.requestRedraw();
+  }
   _updateOpacity() {
     const opacity = clamp(0, this.style.opacity, 1) * (this._parent?.opacity ?? 1);
     if (this.opacity !== opacity) {
@@ -6597,13 +6608,13 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     return this.opacity > 0 && super.isVisible();
   }
   requestRedraw() {
-    this._waitingRedraw = true;
+    this._redrawing = true;
   }
   requestReflow() {
-    this._waitingReflow = true;
+    this._reflowing = true;
   }
   requestRepaint() {
-    this._waitingRepaint = true;
+    this._repainting = true;
   }
   _process(delta) {
     const parentOpacity = this._parent?.opacity;
@@ -6614,6 +6625,30 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     super._process(delta);
   }
   _draw() {
+    this._drawBackground();
+    this._drawContent();
+  }
+  _drawBackground() {
+    const texture = this._backgroundImage;
+    if (texture?.valid) {
+      this.context.fillStyle = texture;
+      this.context.textureTransform = new Transform2D().scale(
+        this.style.width / texture.width,
+        this.style.height / texture.height
+      );
+      this._fill();
+    }
+  }
+  _drawContent() {
+    this._fill();
+  }
+  _fill() {
+    if (this.style.borderRadius) {
+      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
+    } else {
+      this.context.rect(0, 0, this.style.width, this.style.height);
+    }
+    this.context.fill();
   }
   _relayout(batchables) {
     return this._reflow(batchables);
@@ -6636,7 +6671,7 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   }
   _render(renderer) {
     let batchables;
-    if (this._waitingRedraw) {
+    if (this._redrawing) {
       this._draw();
       this._originalBatchables = this.context.toBatchables();
       this._layoutedBatchables = this._relayout(this._originalBatchables);
@@ -6644,17 +6679,17 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
       if (this._resetContext) {
         this.context.reset();
       }
-    } else if (this._waitingReflow) {
+    } else if (this._reflowing) {
       this._layoutedBatchables = this._reflow(this._originalBatchables);
       batchables = this._layoutedBatchables;
-    } else if (this._waitingRepaint) {
+    } else if (this._repainting) {
       batchables = this._repaint(this._layoutedBatchables);
     }
     if (batchables) {
       this._batchables = batchables;
-      this._waitingRedraw = false;
-      this._waitingReflow = false;
-      this._waitingRepaint = false;
+      this._redrawing = false;
+      this._reflowing = false;
+      this._repainting = false;
     }
     this._batchables.forEach((batchable) => {
       batchable.texture?.upload(renderer);
@@ -6676,24 +6711,24 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     };
   }
 };
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], exports.CanvasItem.prototype, "tint", 2);
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-exports.CanvasItem = __decorateClass$r([
+exports.CanvasItem = __decorateClass$q([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (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$q(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -6760,8 +6795,8 @@ exports.Animation2D = class Animation2D extends exports.Node {
   _startProps = /* @__PURE__ */ new WeakMap();
   constructor(options) {
     super();
-    this.setProperties(options);
     this._onUpdateTime = this._onUpdateTime.bind(this);
+    this.setProperties(options);
   }
   _enterTree() {
     this._tree?.timeline.on("update", this._onUpdateTime);
@@ -6980,36 +7015,36 @@ exports.Animation2D = class Animation2D extends exports.Node {
     });
   }
 };
-__decorateClass$q([
+__decorateClass$p([
   property({ default: "parent" })
 ], exports.Animation2D.prototype, "mode", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: false })
 ], exports.Animation2D.prototype, "loop", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: [] })
 ], exports.Animation2D.prototype, "keyframes", 2);
-__decorateClass$q([
+__decorateClass$p([
   property()
 ], exports.Animation2D.prototype, "easing", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDelay", default: 0 })
 ], exports.Animation2D.prototype, "delay", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDuration", default: 2e3 })
 ], exports.Animation2D.prototype, "duration", 2);
-exports.Animation2D = __decorateClass$q([
+exports.Animation2D = __decorateClass$p([
   customNode("Animation2D")
 ], exports.Animation2D);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (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$p(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7055,6 +7090,9 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
       case "transformOrigin":
         this._updateTransform();
         break;
+      case "overflow":
+        this._updateOverflow();
+        break;
     }
   }
   _updateTransform() {
@@ -7080,8 +7118,24 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
       transform = t3dT2d;
     }
     this._transform.set(transform);
+    this._updateOverflow();
     this.requestReflow();
   }
+  _updateOverflow() {
+    if (this.style.overflow === "hidden") {
+      const [a, c, tx, b, d, ty] = this._transform.toArray();
+      const width = this.style.width;
+      const height = this.style.height;
+      this.mask = {
+        x: tx,
+        y: ty,
+        width: a * width + c * height,
+        height: b * width + d * height
+      };
+    } else {
+      this.mask = void 0;
+    }
+  }
   _transformVertices(vertices) {
     const [a, c, tx, b, d, ty] = this._transform.toArray();
     const newVertices = vertices.slice();
@@ -7124,101 +7178,12 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     }
   }
 };
-exports.Node2D = __decorateClass$p([
-  customNode("Node2D")
-], exports.Node2D);
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (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$o(target, key, result);
-  return result;
-};
-exports.Element2D = class Element2D extends exports.Node2D {
-  draggable;
-  _background;
-  constructor(options) {
-    super();
-    this.setProperties(options);
-  }
-  _onUpdateStyleProperty(key, value, oldValue) {
-    super._onUpdateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "backgroundImage":
-        this._updateBackground();
-        break;
-      case "borderRadius":
-        this.requestRedraw();
-        break;
-      case "overflow":
-        this._updateOverflow();
-        break;
-    }
-  }
-  async _updateBackground() {
-    this._background = await this.style.getComputedBackground();
-    this.requestRedraw();
-  }
-  _updateTransform() {
-    super._updateTransform();
-    this._updateOverflow();
-  }
-  _updateOverflow() {
-    if (this.style.overflow === "hidden") {
-      const [a, c, tx, b, d, ty] = this._transform.toArray();
-      const width = this.style.width;
-      const height = this.style.height;
-      this.mask = {
-        x: tx,
-        y: ty,
-        width: a * width + c * height,
-        height: b * width + d * height
-      };
-    } else {
-      this.mask = void 0;
-    }
-  }
-  _draw() {
-    super._draw();
-    this._drawBackground();
-    this._drawContent();
-  }
-  _drawBackground() {
-    const texture = this._background;
-    if (!texture?.valid)
-      return;
-    this.context.fillStyle = texture;
-    this.context.textureTransform = new Transform2D().scale(
-      this.style.width / texture.width,
-      this.style.height / texture.height
-    );
-    this._drawRect();
-  }
-  _drawContent() {
-    this._drawRect();
-  }
-  _drawRect() {
-    if (this.style.borderRadius) {
-      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
-    } else {
-      this.context.rect(0, 0, this.style.width, this.style.height);
-    }
-    this.context.fill();
-  }
-};
-__decorateClass$o([
-  property()
-], exports.Element2D.prototype, "draggable", 2);
-exports.Element2D = __decorateClass$o([
+exports.Node2D = __decorateClass$o([
   customNode({
-    tag: "Element2D",
+    tag: "Node2D",
     renderable: true
   })
-], exports.Element2D);
+], exports.Node2D);
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -7327,10 +7292,7 @@ __decorateClass$n([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "stroke", 2);
 exports.Graphics2D = __decorateClass$n([
-  customNode({
-    tag: "Graphics2D",
-    renderable: true
-  })
+  customNode("Graphics2D")
 ], exports.Graphics2D);
 
 class Image2DResource extends Resource {
@@ -7369,7 +7331,7 @@ var __decorateClass$m = (decorators, target, key, kind) => {
   if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-exports.Image2D = class Image2D extends exports.Element2D {
+exports.Image2D = class Image2D extends exports.Node2D {
   resource;
   get currentTexture() {
     return this.resource?.frames[this._frameIndex]?.texture;
@@ -7488,7 +7450,7 @@ exports.Image2D = class Image2D extends exports.Element2D {
     const texture = this.currentTexture;
     return super._repaint(
       batchables.map((batchable, i) => {
-        if ((this._background ? i === 1 : i === 0) && batchable.type === "fill") {
+        if ((this._backgroundImage ? i === 1 : i === 0) && batchable.type === "fill") {
           return {
             ...batchable,
             texture: texture?.valid ? texture : void 0
@@ -7522,7 +7484,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-exports.Lottie2D = class Lottie2D extends exports.Element2D {
+exports.Lottie2D = class Lottie2D extends exports.Node2D {
   duration = 0;
   texture = new Texture(document.createElement("canvas"));
   animation;
@@ -7594,7 +7556,7 @@ var __decorateClass$k = (decorators, target, key, kind) => {
   return result;
 };
 const textStyles = new Set(Object.keys(modernText.textDefaultStyle));
-exports.Text2D = class Text2D extends exports.Element2D {
+exports.Text2D = class Text2D extends exports.Node2D {
   effects;
   texture = new Texture(document.createElement("canvas"));
   _subTextsCount = 0;
@@ -7754,7 +7716,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-exports.Video2D = class Video2D extends exports.Element2D {
+exports.Video2D = class Video2D extends exports.Node2D {
   texture;
   get duration() {
     return (this.texture?.duration ?? 0) * 1e3;
@@ -8920,7 +8882,7 @@ exports.Audio = __decorateClass$i([
   customNode("Audio")
 ], exports.Audio);
 
-class AudioSpectrum extends exports.Element2D {
+class AudioSpectrum extends exports.Node2D {
   //
 }
 
@@ -8934,7 +8896,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
+exports.AudioWaveform = class AudioWaveform extends exports.Node2D {
   src;
   gap = 0;
   color = "#000000";