modern-canvas 0.4.22 → 0.4.24

package/dist/index.cjs

@@ -2,10 +2,10 @@
 
 const colord = require('colord');
 const namesPlugin = require('colord/plugins/names');
-const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
-const load = require('yoga-layout/load');
+const modernIdoc = require('modern-idoc');
 const modernText = require('modern-text');
+const load = require('yoga-layout/load');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -2155,13 +2155,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$T = (decorators, target, key, kind) => {
+var __defProp$O = 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$L(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2204,10 +2204,10 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$T([
+__decorateClass$W([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$T([
+__decorateClass$W([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4509,13 +4509,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$S = (decorators, target, key, kind) => {
+var __defProp$N = 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$K(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4559,20 +4559,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$S([
+__decorateClass$V([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$S([
+__decorateClass$V([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$J = Object.defineProperty;
-var __decorateClass$R = (decorators, target, key, kind) => {
+var __defProp$M = 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$J(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4616,20 +4616,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$R([
+__decorateClass$U([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$R([
+__decorateClass$U([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$I = Object.defineProperty;
-var __decorateClass$Q = (decorators, target, key, kind) => {
+var __defProp$L = 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$I(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4666,25 +4666,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$Q([
+__decorateClass$T([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4928,13 +4928,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$H = Object.defineProperty;
-var __decorateClass$P = (decorators, target, key, kind) => {
+var __defProp$K = 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$H(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5060,22 +5060,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$P([
+__decorateClass$S([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$P([
+__decorateClass$S([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$P([
+__decorateClass$S([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$P([
+__decorateClass$S([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$P([
+__decorateClass$S([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$P([
+__decorateClass$S([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5105,13 +5105,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$G = Object.defineProperty;
-var __decorateClass$O = (decorators, target, key, kind) => {
+var __defProp$J = 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$G(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5130,7 +5130,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$O([
+__decorateClass$R([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5292,13 +5292,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$F = Object.defineProperty;
-var __decorateClass$N = (decorators, target, key, kind) => {
+var __defProp$I = 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$F(target, key, result);
+  if (result) __defProp$I(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5542,10 +5542,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$N([
+__decorateClass$Q([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$N([
+__decorateClass$Q([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5554,14 +5554,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$E = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __decorateClass$P = (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$E(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 const tagUidMap = {};
@@ -5738,11 +5738,9 @@ exports.Node = class Node extends CoreObject {
     }
   }
   _update(changed) {
-    this._tree?.log(this.name, "updating");
     super._update(changed);
   }
   _updateProperty(key, value, oldValue, declaration) {
-    this._tree?.log(this.name, `updating [${String(key)}]`);
     super._updateProperty(key, value, oldValue, declaration);
   }
   _onTreeEnter(tree) {
@@ -6066,36 +6064,36 @@ exports.Node = class Node extends CoreObject {
     return node;
   }
 };
-__decorateClass$M([
+__decorateClass$P([
   protectedProperty()
 ], exports.Node.prototype, "name", 2);
-__decorateClass$M([
+__decorateClass$P([
   property()
 ], exports.Node.prototype, "mask", 2);
-__decorateClass$M([
+__decorateClass$P([
   property({ default: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
-__decorateClass$M([
+__decorateClass$P([
   property({ default: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
-__decorateClass$M([
+__decorateClass$P([
   property({ default: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
-__decorateClass$M([
+__decorateClass$P([
   property({ default: "default" })
 ], exports.Node.prototype, "internalMode", 2);
-exports.Node = __decorateClass$M([
+exports.Node = __decorateClass$P([
   customNode("Node")
 ], exports.Node);
 
-var __defProp$D = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
+var __decorateClass$O = (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$D(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6155,30 +6153,30 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$L([
+__decorateClass$O([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
-__decorateClass$L([
+__decorateClass$O([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
-__decorateClass$L([
+__decorateClass$O([
   property({ default: false })
 ], exports.TimelineNode.prototype, "paused", 2);
-__decorateClass$L([
+__decorateClass$O([
   protectedProperty()
 ], exports.TimelineNode.prototype, "insideTimeRange", 2);
-exports.TimelineNode = __decorateClass$L([
+exports.TimelineNode = __decorateClass$O([
   customNode("TimelineNode")
 ], exports.TimelineNode);
 
-var __defProp$C = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
+var __decorateClass$N = (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$C(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -6316,30 +6314,30 @@ exports.Viewport = class Viewport extends exports.Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$K([
+__decorateClass$N([
   property({ default: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$K([
+__decorateClass$N([
   property({ default: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$K([
+__decorateClass$N([
   property({ default: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$K([
+__decorateClass$N([
   property({ default: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$K([
+exports.Viewport = __decorateClass$N([
   customNode("Viewport")
 ], exports.Viewport);
 
-var __defProp$B = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
+var __decorateClass$M = (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$B(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 exports.Effect = class Effect extends exports.TimelineNode {
@@ -6580,31 +6578,31 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
 };
-__decorateClass$J([
+__decorateClass$M([
   protectedProperty()
 ], exports.Effect.prototype, "material", 2);
-__decorateClass$J([
+__decorateClass$M([
   property()
 ], exports.Effect.prototype, "effectMode", 2);
-__decorateClass$J([
+__decorateClass$M([
   property({ default: "" })
 ], exports.Effect.prototype, "glsl", 2);
-__decorateClass$J([
+__decorateClass$M([
   property({ default: "" })
 ], exports.Effect.prototype, "glslSrc", 2);
-exports.Effect = __decorateClass$J([
+exports.Effect = __decorateClass$M([
   customNode("Effect")
 ], exports.Effect);
 
-var __defProp$A = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$E = 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$I = (decorators, target, key, kind) => {
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$A(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
@@ -6664,43 +6662,43 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$I([
+__decorateClass$L([
   property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
-exports.ColorAdjustEffect = __decorateClass$I([
+exports.ColorAdjustEffect = __decorateClass$L([
   customNode("ColorAdjustEffect")
 ], exports.ColorAdjustEffect);
 
-var __defProp$z = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$D = 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$H = (decorators, target, key, kind) => {
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$K = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$z(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
@@ -6780,22 +6778,22 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$H([
+__decorateClass$K([
   property()
 ], exports.ColorFilterEffect.prototype, "filter", 2);
-exports.ColorFilterEffect = __decorateClass$H([
+exports.ColorFilterEffect = __decorateClass$K([
   customNode("ColorFilterEffect")
 ], exports.ColorFilterEffect);
 
-var __defProp$y = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$C = 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$G = (decorators, target, key, kind) => {
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$y(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
@@ -6871,25 +6869,25 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$G([
+__decorateClass$J([
   property({ default: [] })
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$G([
+__decorateClass$J([
   property({ default: 0.5 })
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
-exports.ColorOverlayEffect = __decorateClass$G([
+exports.ColorOverlayEffect = __decorateClass$J([
   customNode("ColorOverlayEffect")
 ], exports.ColorOverlayEffect);
 
-var __defProp$x = Object.defineProperty;
+var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$B = 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$F = (decorators, target, key, kind) => {
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$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$x(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
@@ -6956,25 +6954,25 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$F([
+__decorateClass$I([
   property({ default: [] })
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$F([
+__decorateClass$I([
   property({ default: 0.5 })
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
-exports.ColorRemoveEffect = __decorateClass$F([
+exports.ColorRemoveEffect = __decorateClass$I([
   customNode("ColorRemoveEffect")
 ], exports.ColorRemoveEffect);
 
-var __defProp$w = Object.defineProperty;
+var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$A = 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$E = (decorators, target, key, kind) => {
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$z(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$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
@@ -7063,13 +7061,13 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$E([
+__decorateClass$H([
   property({ default: [] })
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$E([
+__decorateClass$H([
   property({ default: 0.05 })
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
-exports.ColorReplaceEffect = __decorateClass$E([
+exports.ColorReplaceEffect = __decorateClass$H([
   customNode("ColorReplaceEffect")
 ], exports.ColorReplaceEffect);
 
@@ -7083,7 +7081,7 @@ class CanvasContext extends modernPath2d.Path2D {
   miterLimit;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  stroke() {
+  stroke(options) {
     let texture = this._defaultStyle;
     if (this.strokeStyle) {
       if (this.strokeStyle instanceof Texture2D) {
@@ -7094,6 +7092,7 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     if (this.curves.length) {
       this._draws.push({
+        ...options,
         type: "stroke",
         path: new modernPath2d.Path2D(this),
         texture,
@@ -7115,7 +7114,7 @@ class CanvasContext extends modernPath2d.Path2D {
   strokeRect(x, y, width, height) {
     this.rect(x, y, width, height).stroke();
   }
-  fill() {
+  fill(options) {
     let texture = this._defaultStyle;
     if (this.fillStyle) {
       if (this.fillStyle instanceof Texture2D) {
@@ -7125,6 +7124,7 @@ class CanvasContext extends modernPath2d.Path2D {
       }
     }
     this._draws.push({
+      ...options,
       type: "fill",
       path: new modernPath2d.Path2D(this),
       texture,
@@ -7184,13 +7184,14 @@ class CanvasContext extends modernPath2d.Path2D {
     let indices = [];
     let uvs = [];
     let texture;
-    const push = (type) => {
+    const push = (draw) => {
       batchables.push({
-        type,
         vertices,
         indices,
         uvs,
-        texture
+        texture,
+        type: draw.type,
+        disableWrapMode: draw.disableWrapMode
       });
       vertices = [];
       indices = [];
@@ -7201,14 +7202,15 @@ class CanvasContext extends modernPath2d.Path2D {
       const draw = this._draws[i];
       const prev = this._draws[i - 1];
       if (vertices.length && prev && prev?.type !== draw.type) {
-        push(prev.type);
+        push(prev);
       }
       const oldTexture = texture;
       if (!oldTexture) {
         texture = draw.texture;
       }
       if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
-        push(draw.type);
+        push(draw);
+        texture = draw.texture;
       }
       const start = vertices.length;
       if (draw.type === "fill") {
@@ -7230,20 +7232,20 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     const last = this._draws[this._draws.length - 1];
     if (last && vertices.length) {
-      push(last.type);
+      push(last);
     }
     return batchables;
   }
 }
 
-var __defProp$v = Object.defineProperty;
+var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
+var __decorateClass$G = (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$v(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -7258,7 +7260,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     return this._globalOpacity ?? 1;
   }
   _modulate = new Color(4294967295);
-  _backgroundImage;
   // Batch render
   context = new CanvasContext();
   _resetContext = true;
@@ -7405,19 +7406,19 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$D([
+__decorateClass$G([
   property()
 ], exports.CanvasItem.prototype, "modulate", 2);
-__decorateClass$D([
+__decorateClass$G([
   property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-__decorateClass$D([
+__decorateClass$G([
   protectedProperty({ default: true })
 ], exports.CanvasItem.prototype, "visible", 2);
-__decorateClass$D([
+__decorateClass$G([
   protectedProperty({ default: 1 })
 ], exports.CanvasItem.prototype, "opacity", 2);
-exports.CanvasItem = __decorateClass$D([
+exports.CanvasItem = __decorateClass$G([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
@@ -7447,14 +7448,14 @@ class RenderStack {
   }
 }
 
-var __defProp$u = Object.defineProperty;
+var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __decorateClass$F = (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$u(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 exports.Timeline = class Timeline extends exports.Node {
@@ -7499,29 +7500,29 @@ exports.Timeline = class Timeline extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$C([
+__decorateClass$F([
   property({ default: 0 })
 ], exports.Timeline.prototype, "startTime", 2);
-__decorateClass$C([
+__decorateClass$F([
   property({ default: 0 })
 ], exports.Timeline.prototype, "currentTime", 2);
-__decorateClass$C([
+__decorateClass$F([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Timeline.prototype, "endTime", 2);
-__decorateClass$C([
+__decorateClass$F([
   property({ default: false })
 ], exports.Timeline.prototype, "loop", 2);
-exports.Timeline = __decorateClass$C([
+exports.Timeline = __decorateClass$F([
   customNode("Timeline")
 ], exports.Timeline);
 
-var __defProp$t = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$w = Object.defineProperty;
+var __decorateClass$E = (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$w(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7594,18 +7595,18 @@ class SceneTree extends MainLoop {
     this.input.removeEventListeners();
   }
 }
-__decorateClass$B([
+__decorateClass$E([
   property({ default: false })
 ], SceneTree.prototype, "processPaused");
-__decorateClass$B([
+__decorateClass$E([
   property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$B([
+__decorateClass$E([
   protectedProperty({ default: false })
 ], SceneTree.prototype, "debug");
 
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __decorateClass$D = (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])
@@ -7618,7 +7619,7 @@ exports.Transition = class Transition extends exports.Effect {
     this.setProperties(properties).append(children);
   }
 };
-exports.Transition = __decorateClass$A([
+exports.Transition = __decorateClass$D([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7626,15 +7627,15 @@ exports.Transition = __decorateClass$A([
   })
 ], exports.Transition);
 
-var __defProp$s = Object.defineProperty;
+var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (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 __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$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(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);
@@ -7740,25 +7741,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$z([
+__decorateClass$C([
   property({ default: 4 })
 ], exports.GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$z([
+__decorateClass$C([
   property({ default: 3 })
 ], exports.GaussianBlurEffect.prototype, "quality", 2);
-exports.GaussianBlurEffect = __decorateClass$z([
+exports.GaussianBlurEffect = __decorateClass$C([
   customNode("GaussianBlurEffect")
 ], exports.GaussianBlurEffect);
 
-var __defProp$r = Object.defineProperty;
+var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (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 __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$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -7822,34 +7823,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$y([
+__decorateClass$B([
   property({ default: 0 })
 ], exports.DropShadowEffect.prototype, "color", 2);
-__decorateClass$y([
+__decorateClass$B([
   property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "blur", 2);
-__decorateClass$y([
+__decorateClass$B([
   property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$y([
+__decorateClass$B([
   property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$y([
+__decorateClass$B([
   property({ default: false })
 ], exports.DropShadowEffect.prototype, "shadowOnly", 2);
-exports.DropShadowEffect = __decorateClass$y([
+exports.DropShadowEffect = __decorateClass$B([
   customNode("DropShadowEffect")
 ], exports.DropShadowEffect);
 
-var __defProp$q = Object.defineProperty;
+var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (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 __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$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$q(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -7894,22 +7895,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$x([
+__decorateClass$A([
   property({ default: 5 })
 ], exports.EmbossEffect.prototype, "strength", 2);
-exports.EmbossEffect = __decorateClass$x([
+exports.EmbossEffect = __decorateClass$A([
   customNode("EmbossEffect")
 ], exports.EmbossEffect);
 
-var __defProp$p = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (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 __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$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$p(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8083,46 +8084,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 10 })
 ], exports.GlitchEffect.prototype, "slices", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 512 })
 ], exports.GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 100 })
 ], exports.GlitchEffect.prototype, "offset", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], exports.GlitchEffect.prototype, "direction", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 2 })
 ], exports.GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: 0 })
 ], exports.GlitchEffect.prototype, "seed", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: [2, 2] })
 ], exports.GlitchEffect.prototype, "red", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: [-10, 4] })
 ], exports.GlitchEffect.prototype, "green", 2);
-__decorateClass$w([
+__decorateClass$z([
   property({ default: [10, -4] })
 ], exports.GlitchEffect.prototype, "blue", 2);
-exports.GlitchEffect = __decorateClass$w([
+exports.GlitchEffect = __decorateClass$z([
   customNode("GlitchEffect")
 ], exports.GlitchEffect);
 
-var __defProp$o = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (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 __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$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$o(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8300,39 +8301,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$v([
+__decorateClass$y([
   property({ default: 0 })
 ], exports.GodrayEffect.prototype, "time", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: 30 })
 ], exports.GodrayEffect.prototype, "angle", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: 0.5 })
 ], exports.GodrayEffect.prototype, "gain", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: 2.5 })
 ], exports.GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: true })
 ], exports.GodrayEffect.prototype, "parallel", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: [0, 0] })
 ], exports.GodrayEffect.prototype, "center", 2);
-__decorateClass$v([
+__decorateClass$y([
   property({ default: 1 })
 ], exports.GodrayEffect.prototype, "alpha", 2);
-exports.GodrayEffect = __decorateClass$v([
+exports.GodrayEffect = __decorateClass$y([
   customNode("GodrayEffect")
 ], exports.GodrayEffect);
 
-var __defProp$n = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __decorateClass$x = (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$n(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8423,28 +8424,28 @@ void main() {
     });
   }
 };
-__decorateClass$u([
+__decorateClass$x([
   property({ default: 4 })
 ], exports.KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$u([
+__decorateClass$x([
   property({ default: 3 })
 ], exports.KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$u([
+__decorateClass$x([
   property({ default: [1, 1] })
 ], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
-exports.KawaseBlurEffect = __decorateClass$u([
+exports.KawaseBlurEffect = __decorateClass$x([
   customNode("KawaseBlurEffect")
 ], exports.KawaseBlurEffect);
 
-var __defProp$m = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (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 __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$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$m(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -8533,25 +8534,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$t([
+__decorateClass$w([
   protectedProperty()
 ], exports.MaskEffect.prototype, "texture", 2);
-__decorateClass$t([
+__decorateClass$w([
   property({ default: "" })
 ], exports.MaskEffect.prototype, "src", 2);
-exports.MaskEffect = __decorateClass$t([
+exports.MaskEffect = __decorateClass$w([
   customNode("MaskEffect")
 ], exports.MaskEffect);
 
-var __defProp$l = Object.defineProperty;
+var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$s = (decorators, target, key, kind) => {
+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$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$l(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);
@@ -8639,40 +8640,40 @@ void main() {
 };
 __publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: 0 })
 ], exports.OutlineEffect.prototype, "color", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: 1 })
 ], exports.OutlineEffect.prototype, "width", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: "solid" })
 ], exports.OutlineEffect.prototype, "style", 2);
-__decorateClass$s([
+__decorateClass$v([
   property()
 ], exports.OutlineEffect.prototype, "image", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: 1 })
 ], exports.OutlineEffect.prototype, "opacity", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: 0.1 })
 ], exports.OutlineEffect.prototype, "quality", 2);
-__decorateClass$s([
+__decorateClass$v([
   property({ default: false })
 ], exports.OutlineEffect.prototype, "knockout", 2);
-exports.OutlineEffect = __decorateClass$s([
+exports.OutlineEffect = __decorateClass$v([
   customNode("OutlineEffect")
 ], exports.OutlineEffect);
 
-var __defProp$k = Object.defineProperty;
+var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$r = (decorators, target, key, kind) => {
+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$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$k(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -8728,22 +8729,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$r([
+__decorateClass$u([
   property({ default: 10 })
 ], exports.PixelateEffect.prototype, "strength", 2);
-exports.PixelateEffect = __decorateClass$r([
+exports.PixelateEffect = __decorateClass$u([
   customNode("PixelateEffect")
 ], exports.PixelateEffect);
 
-var __defProp$j = Object.defineProperty;
+var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$q = (decorators, target, key, kind) => {
+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$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$j(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -8856,93 +8857,279 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$q([
+__decorateClass$t([
   property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$q([
+__decorateClass$t([
   property({ default: 20 })
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$q([
+__decorateClass$t([
   property({ default: -1 })
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$q([
+__decorateClass$t([
   property({ default: 0.1 })
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
-exports.ZoomBlurEffect = __decorateClass$q([
+exports.ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
 ], exports.ZoomBlurEffect);
 
-var __defProp$i = Object.defineProperty;
-var __decorateClass$p = (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$i(target, key, result);
+  if (result) __defProp$l(target, key, result);
   return result;
 };
-class BaseElement2DOutline extends CoreObject {
-  constructor(parent) {
+class BaseElement2DFill extends CoreObject {
+  constructor(parent, properties) {
     super();
     this.parent = parent;
+    this.setProperties(properties);
   }
+  _image;
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "color":
-      case "width":
-      case "style":
+      case "dpi":
+      case "rotateWithShape":
+      case "tile":
+        this.parent.requestRedraw();
+        break;
       case "image":
-      case "opacity":
-        this.updateEffect();
+        this._updateImage();
         break;
     }
   }
-  updateEffect() {
-    const name = "__$outline";
-    let effect = this.parent.getNode(name);
-    if (this.width) {
-      if (!effect) {
-        effect = new exports.OutlineEffect({ name });
-        this.parent.appendChild(effect, "back");
+  async loadImage() {
+    if (this.image && this.image !== "none") {
+      return await assets.texture.load(this.image);
+    }
+  }
+  async _updateImage() {
+    this._image = await this.loadImage();
+    this.parent.requestRedraw();
+  }
+  canDraw() {
+    return Boolean(
+      this._image || this.color
+    );
+  }
+  draw() {
+    const ctx = this.parent.context;
+    if (this._image) {
+      const { width: imageWidth, height: imageHeight } = this._image;
+      const { width, height } = this.parent.size;
+      const transform = new Transform2D();
+      if (this.tile) {
+        const {
+          translateX = 0,
+          translateY = 0,
+          scaleX = 1,
+          scaleY = 1
+          // flip, TODO
+          // alignment, TODO
+        } = this.tile;
+        transform.scale(1 / imageWidth, 1 / imageHeight).scale(1 / scaleX, 1 / scaleY).translate(-translateX / imageWidth, -translateY / imageHeight);
+      } else if (this.stretch) {
+        const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretch.rect ?? {};
+        const w = Math.abs(1 + (-left + -right)) * width;
+        const h = Math.abs(1 + (-top + -bottom)) * height;
+        const scaleX = 1 / w;
+        const scaleY = 1 / h;
+        const translateX = -left * width * scaleX;
+        const translateY = -top * height * scaleY;
+        transform.scale(scaleX, scaleY).translate(translateX, translateY);
+      } else {
+        transform.scale(1 / width, 1 / height);
       }
-      effect.setProperties(this.getProperties());
+      ctx.textureTransform = transform;
+      ctx.fillStyle = this._image;
+      ctx.fill({
+        disableWrapMode: true
+      });
     } else {
-      if (effect) {
-        this.parent.removeChild(effect);
+      ctx.fillStyle = this.color;
+      ctx.fill();
+    }
+  }
+}
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "color");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "image");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "dpi");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "rotateWithShape");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "tile");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "stretch");
+
+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$k(target, key, result);
+  return result;
+};
+class BaseElement2DGeometry extends CoreObject {
+  constructor(parent, properties) {
+    super();
+    this.parent = parent;
+    this.setProperties(properties);
+    this._updatePath2DSet();
+  }
+  _path2DSet = new modernPath2d.Path2DSet();
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "svg":
+      case "data":
+      case "viewBox":
+        this._updatePath2DSet();
+        this.parent.requestRedraw();
+        break;
+    }
+  }
+  _updatePath2DSet() {
+    let viewBox;
+    if (this.svg) {
+      const dom = modernPath2d.svgToDOM(this.svg);
+      this._path2DSet = modernPath2d.svgToPath2DSet(dom);
+      viewBox = this._path2DSet.viewBox ?? this.viewBox;
+    } else {
+      viewBox = this.viewBox;
+      this.data.forEach((path, i) => {
+        const { data, ...style } = path;
+        const path2D = new modernPath2d.Path2D();
+        path2D.style = style;
+        path2D.addData(data);
+        this._path2DSet.paths[i] = path2D;
+      });
+    }
+    const [x, y, w, h] = viewBox;
+    this._path2DSet.paths.forEach((path) => {
+      path.applyTransform(new modernPath2d.Matrix3().translate(-x, -y).scale(1 / w, 1 / h));
+    });
+  }
+  draw() {
+    if (this._path2DSet.paths.length) {
+      const ctx = this.parent.context;
+      const { width, height } = this.parent.size;
+      this._path2DSet.paths.forEach((path) => {
+        ctx.addPath(path.clone().applyTransform(new modernPath2d.Matrix3().scale(width, height)));
+      });
+    } else {
+      this.drawRect();
+    }
+  }
+  drawRect() {
+    const ctx = this.parent.context;
+    const { width, height } = this.parent.size;
+    const { borderRadius } = this.parent.style;
+    if (width && height) {
+      if (borderRadius) {
+        ctx.roundRect(0, 0, width, height, borderRadius);
+      } else {
+        ctx.rect(0, 0, width, height);
       }
     }
   }
 }
-__decorateClass$p([
-  property({ default: "#000000" })
+__decorateClass$r([
+  property()
+], BaseElement2DGeometry.prototype, "name");
+__decorateClass$r([
+  property()
+], BaseElement2DGeometry.prototype, "svg");
+__decorateClass$r([
+  property({ default: [0, 0, 1, 1] })
+], BaseElement2DGeometry.prototype, "viewBox");
+__decorateClass$r([
+  property({ default: [] })
+], BaseElement2DGeometry.prototype, "data");
+
+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$j(target, key, result);
+  return result;
+};
+class BaseElement2DOutline extends CoreObject {
+  constructor(parent, properties) {
+    super();
+    this.parent = parent;
+    this.setProperties(properties);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "color":
+      case "width":
+      case "style":
+      case "image":
+      case "opacity":
+        this.parent.requestRedraw();
+        break;
+    }
+  }
+  canDraw() {
+    return Boolean(
+      this.width || this.color
+    );
+  }
+  draw() {
+    const ctx = this.parent.context;
+    ctx.lineWidth = this.width;
+    ctx.strokeStyle = this.color;
+    ctx.stroke();
+  }
+}
+__decorateClass$q([
+  property({ default: 0 })
 ], BaseElement2DOutline.prototype, "color");
-__decorateClass$p([
+__decorateClass$q([
   property({ default: 0 })
 ], BaseElement2DOutline.prototype, "width");
-__decorateClass$p([
+__decorateClass$q([
   property({ default: "solid" })
 ], BaseElement2DOutline.prototype, "style");
-__decorateClass$p([
+__decorateClass$q([
   property()
 ], BaseElement2DOutline.prototype, "image");
-__decorateClass$p([
+__decorateClass$q([
   property({ default: 1 })
 ], BaseElement2DOutline.prototype, "opacity");
 
-var __defProp$h = Object.defineProperty;
-var __decorateClass$o = (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$h(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
-  constructor(parent) {
+  constructor(parent, properties) {
     super();
     this.parent = parent;
+    this.setProperties(properties);
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -8971,16 +9158,16 @@ class BaseElement2DShadow extends CoreObject {
     }
   }
 }
-__decorateClass$o([
+__decorateClass$p([
   property({ default: "#000000" })
 ], BaseElement2DShadow.prototype, "color");
-__decorateClass$o([
+__decorateClass$p([
   property({ default: 0 })
 ], BaseElement2DShadow.prototype, "blur");
-__decorateClass$o([
+__decorateClass$p([
   property({ default: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
-__decorateClass$o([
+__decorateClass$p([
   property({ default: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
@@ -9018,6 +9205,98 @@ for (const key in defaultStyles$1) {
   });
 }
 
+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$h(target, key, result);
+  return result;
+};
+class BaseElement2DText extends CoreObject {
+  constructor(parent, properties) {
+    super();
+    this.parent = parent;
+    this.setProperties(properties);
+  }
+  effects;
+  measureDom;
+  fonts;
+  texture = new CanvasTexture();
+  baseText = new modernText.Text();
+  measureResult;
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "content":
+      case "effects":
+      case "measureDom":
+      case "fonts":
+      case "split":
+        this.parent.requestRedraw();
+        break;
+    }
+  }
+  _updateText() {
+    this.baseText.style = {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      ...this.parent.style.toJSON()
+    };
+    this.baseText.content = this.content ?? "";
+    this.baseText.effects = this.effects;
+    this.baseText.fonts = this.fonts;
+    this.baseText.measureDom = this.measureDom;
+    this.baseText.requestUpdate();
+  }
+  measure() {
+    this._updateText();
+    return this.baseText.measure();
+  }
+  updateMeasure() {
+    this.measureResult = this.measure();
+    const textWidth = this.measureResult.boundingBox.width;
+    const textHeight = this.measureResult.boundingBox.height;
+    const { left, top, width, height = textHeight } = this.parent.style;
+    this.parent.position.x = left + Math.min(0, ((width || textWidth) - textWidth) / 2);
+    this.parent.position.y = top + Math.min(0, ((height || textHeight) - textHeight) / 2);
+    this.parent.size.width = textWidth;
+    this.parent.size.height = textHeight;
+    return this;
+  }
+  canDraw() {
+    return Boolean(
+      this.content && this.texture?.valid
+    );
+  }
+  draw() {
+    const ctx = this.parent.context;
+    this.baseText.render({
+      pixelRatio: this.texture.pixelRatio,
+      view: this.texture.source
+    });
+    this.texture.requestUpload();
+    const { width, height } = this.parent.size;
+    ctx.fillStyle = this.texture;
+    ctx.textureTransform = new Transform2D().scale(1 / width, 1 / height);
+    ctx.fill();
+  }
+}
+__decorateClass$o([
+  property({ default: "" })
+], BaseElement2DText.prototype, "content");
+__decorateClass$o([
+  property()
+], BaseElement2DText.prototype, "effects");
+__decorateClass$o([
+  protectedProperty()
+], BaseElement2DText.prototype, "measureDom");
+__decorateClass$o([
+  protectedProperty()
+], BaseElement2DText.prototype, "fonts");
+
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
 var __decorateClass$n = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
@@ -9125,8 +9404,41 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     this._style?.off("updateProperty", cb);
     this._style = style;
   }
-  shadow = new BaseElement2DShadow(this);
-  outline = new BaseElement2DOutline(this);
+  _text = new BaseElement2DText(this);
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    this._text.setProperties(value);
+  }
+  _geometry = new BaseElement2DGeometry(this);
+  get geometry() {
+    return this._geometry;
+  }
+  set geometry(value) {
+    this._geometry.setProperties(value);
+  }
+  _fill = new BaseElement2DFill(this);
+  get fill() {
+    return this._fill;
+  }
+  set fill(value) {
+    this._fill.setProperties(value);
+  }
+  _outline = new BaseElement2DOutline(this);
+  get outline() {
+    return this._outline;
+  }
+  set outline(value) {
+    this._outline.setProperties(value);
+  }
+  _shadow = new BaseElement2DShadow(this);
+  get shadow() {
+    return this._shadow;
+  }
+  set shadow(value) {
+    this._shadow.setProperties(value);
+  }
   constructor(properties, nodes = []) {
     super();
     this._updateStyleProperty = this._updateStyleProperty.bind(this);
@@ -9135,10 +9447,21 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   }
   setProperties(properties) {
     if (properties) {
-      const { style, shadow, outline, ...restProperties } = properties;
+      const {
+        style,
+        text,
+        geometry,
+        fill,
+        outline,
+        shadow,
+        ...restProperties
+      } = properties;
       style && this.style.setProperties(style);
-      shadow && this.shadow.setProperties(shadow);
+      text && this.text.setProperties(text);
+      geometry && this.geometry.setProperties(geometry);
+      fill && this.fill.setProperties(fill);
       outline && this.outline.setProperties(outline);
+      shadow && this.shadow.setProperties(shadow);
       super.setProperties(restProperties);
     }
     return this;
@@ -9180,12 +9503,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
         this.requestRelayout();
         break;
       /** draw */
-      case "backgroundColor":
-        this._updateBackgroundColor();
-        break;
-      case "backgroundImage":
-        this._updateBackgroundImage();
-        break;
       case "opacity":
         this.opacity = this.style.opacity;
         break;
@@ -9201,6 +9518,24 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       case "borderRadius":
         this.requestRedraw();
         break;
+      case "backgroundColor":
+        this.fill.color = this.style.backgroundColor;
+        break;
+      case "backgroundImage":
+        this.fill.image = this.style.backgroundImage;
+        break;
+      case "borderStyle":
+      case "outlineStyle":
+        this.outline.style = value;
+        break;
+      case "borderWidth":
+      case "outlineWidth":
+        this.outline.width = value;
+        break;
+      case "borderColor":
+      case "outlineColor":
+        this.outline.color = value;
+        break;
     }
   }
   _updateMaskImage() {
@@ -9220,18 +9555,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       }
     }
   }
-  _updateBackgroundColor() {
-    const backgroundColor = this.style.getComputedBackgroundColor();
-    if (this._originalBatchables.length) {
-      this.requestRepaint();
-    } else if (backgroundColor.a > 0) {
-      this.requestRedraw();
-    }
-  }
-  async _updateBackgroundImage() {
-    this._backgroundImage = await this.style.loadBackgroundImage();
-    this.requestRedraw();
-  }
   _updateTransform() {
     const { width, height } = this.size;
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
@@ -9291,65 +9614,33 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   }
   _draw() {
     super._draw();
-    this._drawBackground();
-    this._drawContent();
-    this._drawBorder();
-    this._drawOutline();
-  }
-  _drawBackground() {
-    const texture = this._backgroundImage;
-    if (texture?.valid) {
-      const { width, height } = this.size;
-      this.context.fillStyle = texture;
-      this.context.textureTransform = new Transform2D().scale(
-        1 / width,
-        1 / height
-      );
-      this._fillBoundingRect();
+    if (this.text.canDraw()) {
+      this.text.updateMeasure();
     }
-  }
-  _drawContent() {
-    this._fillBoundingRect();
-  }
-  _drawBorder() {
-    if (this.style.borderWidth && this.style.borderStyle !== "none") {
-      this.context.lineWidth = this.style.borderWidth;
-      this.context.strokeStyle = this.style.borderColor;
-      this._strokeBoundingRect();
+    if (this.fill.canDraw()) {
+      this._tree?.log(this.name, "draw fill");
+      this.geometry.draw();
+      this.fill.draw();
     }
-  }
-  _drawOutline() {
-    if (this.style.outlineWidth && this.style.outlineColor !== "none") {
-      this.context.lineWidth = this.style.outlineWidth;
-      this.context.strokeStyle = this.style.outlineColor;
-      this._strokeBoundingRect();
+    if (this.outline.canDraw()) {
+      this._tree?.log(this.name, "draw outline");
+      this.geometry.draw();
+      this.outline.draw();
     }
-  }
-  _drawBoundingRect() {
-    const { borderRadius } = this.style;
-    const { width, height } = this.size;
-    if (width && height) {
-      if (borderRadius) {
-        this.context.roundRect(0, 0, width, height, borderRadius);
-      } else {
-        this.context.rect(0, 0, width, height);
-      }
+    if (this.text.canDraw()) {
+      this._tree?.log(this.name, "draw text");
+      this.geometry.drawRect();
+      this.text.draw();
     }
+    this._drawContent();
   }
-  _fillBoundingRect() {
-    this._drawBoundingRect();
-    this.context.fill();
-  }
-  _strokeBoundingRect() {
-    this._drawBoundingRect();
-    this.context.stroke();
+  _drawContent() {
   }
   _repaint(batchables) {
     const colorMatrix = parseCSSFilter(this.style.filter);
     return super._repaint(batchables).map((batchable) => {
       return {
         ...batchable,
-        backgroundColor: this.style.getComputedBackgroundColor().abgr,
         colorMatrix: colorMatrix.toMatrix4().toArray(true),
         colorMatrixOffset: colorMatrix.toVector4().toArray()
       };
@@ -9366,13 +9657,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       this._input(event, key);
     }
   }
-  _pointerEntering = false;
-  _pointerEntered() {
-    this._pointerEntering = true;
-  }
-  _pointerExited() {
-    if (this._pointerEntering) ;
-  }
   // eslint-disable-next-line unused-imports/no-unused-vars
   _pointerInput(point, key) {
     const { width, height } = this.size;
@@ -9405,8 +9689,11 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       ...json,
       props: {
         style: this.style.toJSON(),
-        shadow: this.shadow.toJSON(),
+        text: this.text.toJSON(),
+        geometry: this.geometry.toJSON(),
+        fill: this.fill.toJSON(),
         outline: this.outline.toJSON(),
+        shadow: this.shadow.toJSON(),
         ...json.props
       }
     };
@@ -10056,7 +10343,8 @@ exports.Image2D = class Image2D extends exports.Element2D {
       const tx = left * width * sx;
       const ty = top * height * sy;
       this.context.textureTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
-      super._drawContent();
+      this.geometry.drawRect();
+      this.context.fill();
     }
   }
   _repaint(batchables) {
@@ -10071,12 +10359,12 @@ exports.Image2D = class Image2D extends exports.Element2D {
 __decorateClass$i([
   protectedProperty()
 ], exports.Image2D.prototype, "texture", 2);
-__decorateClass$i([
-  property()
-], exports.Image2D.prototype, "srcRect", 2);
 __decorateClass$i([
   property({ default: "" })
 ], exports.Image2D.prototype, "src", 2);
+__decorateClass$i([
+  property()
+], exports.Image2D.prototype, "srcRect", 2);
 __decorateClass$i([
   property({ default: false })
 ], exports.Image2D.prototype, "gif", 2);
@@ -10098,7 +10386,8 @@ class TextureRect2D extends exports.Element2D {
         1 / width,
         1 / height
       );
-      super._drawContent();
+      this.geometry.drawRect();
+      this.context.fill();
     }
   }
 }
@@ -10176,7 +10465,7 @@ exports.Text2D = class Text2D extends TextureRect2D {
   measureDom;
   fonts;
   texture = new CanvasTexture();
-  text = new modernText.Text();
+  _baseText = new modernText.Text();
   measureResult;
   _subTextsCount = 0;
   constructor(properties, children = []) {
@@ -10203,12 +10492,12 @@ exports.Text2D = class Text2D extends TextureRect2D {
     }
   }
   _updateText() {
-    this.text.style = this.style.toJSON();
-    this.text.content = this.content ?? "";
-    this.text.effects = this.effects;
-    this.text.fonts = this.fonts;
-    this.text.measureDom = this.measureDom;
-    this.text.requestUpdate();
+    this._baseText.style = this.style.toJSON();
+    this._baseText.content = this.content ?? "";
+    this._baseText.effects = this.effects;
+    this._baseText.fonts = this.fonts;
+    this._baseText.measureDom = this.measureDom;
+    this._baseText.requestUpdate();
   }
   _updateStyleProperty(key, value, oldValue) {
     switch (key) {
@@ -10261,7 +10550,7 @@ exports.Text2D = class Text2D extends TextureRect2D {
   }
   measure() {
     this._updateText();
-    return this.text.measure();
+    return this._baseText.measure();
   }
   updateMeasure() {
     this.measureResult = this.measure();
@@ -10313,7 +10602,7 @@ exports.Text2D = class Text2D extends TextureRect2D {
       if (onText2DRender) {
         onText2DRender();
       } else {
-        this.text.render({
+        this._baseText.render({
           pixelRatio: this.texture.pixelRatio,
           view: this.texture.source
         });
@@ -13630,7 +13919,12 @@ exports.Assets = Assets;
 exports.AudioPipeline = AudioPipeline;
 exports.AudioProcessor = AudioProcessor;
 exports.AudioSpectrum = AudioSpectrum;
+exports.BaseElement2DFill = BaseElement2DFill;
+exports.BaseElement2DGeometry = BaseElement2DGeometry;
+exports.BaseElement2DOutline = BaseElement2DOutline;
+exports.BaseElement2DShadow = BaseElement2DShadow;
 exports.BaseElement2DStyle = BaseElement2DStyle;
+exports.BaseElement2DText = BaseElement2DText;
 exports.CanvasContext = CanvasContext;
 exports.CanvasItemEditor = CanvasItemEditor;
 exports.CanvasTexture = CanvasTexture;