modern-canvas 0.4.29 → 0.4.31

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
+import { normalizeFill, normalizeBackground, normalizeForeground, normalizeGeometry, normalizeOutline, normalizeShadow, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { Path2D, Path2DSet, svgToDOM, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
-import { getDefaultStyle } from 'modern-idoc';
 import { Text, textDefaultStyle } from 'modern-text';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 
@@ -528,7 +528,7 @@ class CoreObject extends EventEmitter {
     return properties;
   }
   setProperties(properties) {
-    if (properties) {
+    if (properties && typeof properties === "object") {
       for (const [name] of this.getPropertyDeclarations()) {
         if (name in properties) {
           this.setProperty(name, properties[name]);
@@ -2150,13 +2150,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$O = Object.defineProperty;
-var __decorateClass$W = (decorators, target, key, kind) => {
+var __defProp$Q = 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$O(target, key, result);
+  if (result) __defProp$Q(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2199,10 +2199,10 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$W([
+__decorateClass$Y([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$W([
+__decorateClass$Y([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4504,13 +4504,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$N = Object.defineProperty;
-var __decorateClass$V = (decorators, target, key, kind) => {
+var __defProp$P = Object.defineProperty;
+var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4554,20 +4554,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$V([
+__decorateClass$X([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$V([
+__decorateClass$X([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$M = Object.defineProperty;
-var __decorateClass$U = (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$M(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4611,20 +4611,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$U([
+__decorateClass$W([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$U([
+__decorateClass$W([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$L = Object.defineProperty;
-var __decorateClass$T = (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$L(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4661,25 +4661,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$T([
+__decorateClass$V([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4923,13 +4923,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$K = Object.defineProperty;
-var __decorateClass$S = (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$K(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5055,22 +5055,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$S([
+__decorateClass$U([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$S([
+__decorateClass$U([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$S([
+__decorateClass$U([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$S([
+__decorateClass$U([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$S([
+__decorateClass$U([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$S([
+__decorateClass$U([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5100,13 +5100,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$J = Object.defineProperty;
-var __decorateClass$R = (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$J(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5125,7 +5125,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$R([
+__decorateClass$T([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5287,13 +5287,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$I = Object.defineProperty;
-var __decorateClass$Q = (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$I(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5537,10 +5537,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$Q([
+__decorateClass$S([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$Q([
+__decorateClass$S([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5549,14 +5549,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$H = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
+var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 const tagUidMap = {};
@@ -6059,36 +6059,36 @@ let Node = class extends CoreObject {
     return node;
   }
 };
-__decorateClass$P([
+__decorateClass$R([
   protectedProperty()
 ], Node.prototype, "name", 2);
-__decorateClass$P([
+__decorateClass$R([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$P([
+__decorateClass$R([
   property({ default: "inherit" })
 ], Node.prototype, "processMode", 2);
-__decorateClass$P([
+__decorateClass$R([
   property({ default: "default" })
 ], Node.prototype, "processSortMode", 2);
-__decorateClass$P([
+__decorateClass$R([
   property({ default: "inherit" })
 ], Node.prototype, "renderMode", 2);
-__decorateClass$P([
+__decorateClass$R([
   property({ default: "default" })
 ], Node.prototype, "internalMode", 2);
-Node = __decorateClass$P([
+Node = __decorateClass$R([
   customNode("Node")
 ], Node);
 
-var __defProp$G = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
+var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6148,30 +6148,30 @@ let TimelineNode = class extends Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$O([
+__decorateClass$Q([
   property({ default: 0 })
 ], TimelineNode.prototype, "delay", 2);
-__decorateClass$O([
+__decorateClass$Q([
   property({ default: 0 })
 ], TimelineNode.prototype, "duration", 2);
-__decorateClass$O([
+__decorateClass$Q([
   property({ default: false })
 ], TimelineNode.prototype, "paused", 2);
-__decorateClass$O([
+__decorateClass$Q([
   protectedProperty()
 ], TimelineNode.prototype, "insideTimeRange", 2);
-TimelineNode = __decorateClass$O([
+TimelineNode = __decorateClass$Q([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$F = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
+var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6309,30 +6309,30 @@ let Viewport = class extends Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$N([
+__decorateClass$P([
   property({ default: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$N([
+__decorateClass$P([
   property({ default: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$N([
+__decorateClass$P([
   property({ default: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$N([
+__decorateClass$P([
   property({ default: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$N([
+Viewport = __decorateClass$P([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$E = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -6573,31 +6573,31 @@ let Effect = class extends TimelineNode {
     }
   }
 };
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty()
 ], Effect.prototype, "material", 2);
-__decorateClass$M([
+__decorateClass$O([
   property()
 ], Effect.prototype, "effectMode", 2);
-__decorateClass$M([
+__decorateClass$O([
   property({ default: "" })
 ], Effect.prototype, "glsl", 2);
-__decorateClass$M([
+__decorateClass$O([
   property({ default: "" })
 ], Effect.prototype, "glslSrc", 2);
-Effect = __decorateClass$M([
+Effect = __decorateClass$O([
   customNode("Effect")
 ], Effect);
 
-var __defProp$D = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-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 __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, key + "" , value);
@@ -6657,43 +6657,43 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], ColorAdjustEffect.prototype, "gamma", 2);
-ColorAdjustEffect = __decorateClass$L([
+ColorAdjustEffect = __decorateClass$N([
   customNode("ColorAdjustEffect")
 ], ColorAdjustEffect);
 
-var __defProp$C = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-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 __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$M = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
@@ -6773,22 +6773,22 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$K([
+__decorateClass$M([
   property()
 ], ColorFilterEffect.prototype, "filter", 2);
-ColorFilterEffect = __decorateClass$K([
+ColorFilterEffect = __decorateClass$M([
   customNode("ColorFilterEffect")
 ], ColorFilterEffect);
 
-var __defProp$B = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-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 __defNormalProp$g = (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$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$B(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
@@ -6864,25 +6864,25 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$J([
+__decorateClass$L([
   property({ default: [] })
 ], ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$J([
+__decorateClass$L([
   property({ default: 0.5 })
 ], ColorOverlayEffect.prototype, "alpha", 2);
-ColorOverlayEffect = __decorateClass$J([
+ColorOverlayEffect = __decorateClass$L([
   customNode("ColorOverlayEffect")
 ], ColorOverlayEffect);
 
-var __defProp$A = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-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 __defNormalProp$f = (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$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$A(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
@@ -6949,25 +6949,25 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$I([
+__decorateClass$K([
   property({ default: [] })
 ], ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$I([
+__decorateClass$K([
   property({ default: 0.5 })
 ], ColorRemoveEffect.prototype, "epsilon", 2);
-ColorRemoveEffect = __decorateClass$I([
+ColorRemoveEffect = __decorateClass$K([
   customNode("ColorRemoveEffect")
 ], ColorRemoveEffect);
 
-var __defProp$z = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-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 __defNormalProp$e = (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$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$z(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
@@ -7056,13 +7056,13 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$H([
+__decorateClass$J([
   property({ default: [] })
 ], ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 0.05 })
 ], ColorReplaceEffect.prototype, "epsilon", 2);
-ColorReplaceEffect = __decorateClass$H([
+ColorReplaceEffect = __decorateClass$J([
   customNode("ColorReplaceEffect")
 ], ColorReplaceEffect);
 
@@ -7233,14 +7233,14 @@ class CanvasContext extends Path2D {
   }
 }
 
-var __defProp$y = Object.defineProperty;
+var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
+var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -7401,19 +7401,19 @@ let CanvasItem = class extends TimelineNode {
     super._render(renderer);
   }
 };
-__decorateClass$G([
+__decorateClass$I([
   property()
 ], CanvasItem.prototype, "modulate", 2);
-__decorateClass$G([
+__decorateClass$I([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$G([
+__decorateClass$I([
   protectedProperty({ default: true })
 ], CanvasItem.prototype, "visible", 2);
-__decorateClass$G([
+__decorateClass$I([
   protectedProperty({ default: 1 })
 ], CanvasItem.prototype, "opacity", 2);
-CanvasItem = __decorateClass$G([
+CanvasItem = __decorateClass$I([
   customNode("CanvasItem")
 ], CanvasItem);
 
@@ -7443,14 +7443,14 @@ class RenderStack {
   }
 }
 
-var __defProp$x = Object.defineProperty;
+var __defProp$z = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
+var __decorateClass$H = (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$x(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -7495,29 +7495,29 @@ let Timeline = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$F([
+__decorateClass$H([
   property({ default: 0 })
 ], Timeline.prototype, "startTime", 2);
-__decorateClass$F([
+__decorateClass$H([
   property({ default: 0 })
 ], Timeline.prototype, "currentTime", 2);
-__decorateClass$F([
+__decorateClass$H([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timeline.prototype, "endTime", 2);
-__decorateClass$F([
+__decorateClass$H([
   property({ default: false })
 ], Timeline.prototype, "loop", 2);
-Timeline = __decorateClass$F([
+Timeline = __decorateClass$H([
   customNode("Timeline")
 ], Timeline);
 
-var __defProp$w = Object.defineProperty;
-var __decorateClass$E = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$G = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$w(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7590,18 +7590,18 @@ class SceneTree extends MainLoop {
     this.input.removeEventListeners();
   }
 }
-__decorateClass$E([
+__decorateClass$G([
   property({ default: false })
 ], SceneTree.prototype, "processPaused");
-__decorateClass$E([
+__decorateClass$G([
   property()
 ], SceneTree.prototype, "backgroundColor");
-__decorateClass$E([
+__decorateClass$G([
   protectedProperty({ default: false })
 ], SceneTree.prototype, "debug");
 
 var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
+var __decorateClass$F = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -7614,7 +7614,7 @@ let Transition = class extends Effect {
     this.setProperties(properties).append(children);
   }
 };
-Transition = __decorateClass$D([
+Transition = __decorateClass$F([
   customNode("Transition", {
     effectMode: "transition",
     processMode: "pausable",
@@ -7622,15 +7622,15 @@ Transition = __decorateClass$D([
   })
 ], Transition);
 
-var __defProp$v = Object.defineProperty;
+var __defProp$x = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$E = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   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$x(target, key, result);
   return result;
 };
 var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -7736,25 +7736,25 @@ void main(void) {
 }`,
   frag: frag$2
 }));
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 4 })
 ], GaussianBlurEffect.prototype, "strength", 2);
-__decorateClass$C([
+__decorateClass$E([
   property({ default: 3 })
 ], GaussianBlurEffect.prototype, "quality", 2);
-GaussianBlurEffect = __decorateClass$C([
+GaussianBlurEffect = __decorateClass$E([
   customNode("GaussianBlurEffect")
 ], GaussianBlurEffect);
 
-var __defProp$u = Object.defineProperty;
+var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$D = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   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$w(target, key, result);
   return result;
 };
 var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
@@ -7818,34 +7818,34 @@ void main(void) {
   gl_FragColor = sample;
 }`
 }));
-__decorateClass$B([
+__decorateClass$D([
   property({ default: 0 })
 ], DropShadowEffect.prototype, "color", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: 4 })
 ], DropShadowEffect.prototype, "blur", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: 4 })
 ], DropShadowEffect.prototype, "offsetX", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: 4 })
 ], DropShadowEffect.prototype, "offsetY", 2);
-__decorateClass$B([
+__decorateClass$D([
   property({ default: false })
 ], DropShadowEffect.prototype, "shadowOnly", 2);
-DropShadowEffect = __decorateClass$B([
+DropShadowEffect = __decorateClass$D([
   customNode("DropShadowEffect")
 ], DropShadowEffect);
 
-var __defProp$t = Object.defineProperty;
+var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$C = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
@@ -7890,22 +7890,22 @@ void main(void) {
     gl_FragColor = vec4(color.rgb * alpha, alpha);
 }`
 }));
-__decorateClass$A([
+__decorateClass$C([
   property({ default: 5 })
 ], EmbossEffect.prototype, "strength", 2);
-EmbossEffect = __decorateClass$A([
+EmbossEffect = __decorateClass$C([
   customNode("EmbossEffect")
 ], EmbossEffect);
 
-var __defProp$s = Object.defineProperty;
+var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$B = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   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$u(target, key, result);
   return result;
 };
 var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
@@ -8079,46 +8079,46 @@ void main(void) {
   gl_FragColor.a = texture2D(sampler, coord).a;
 }`
 }));
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 10 })
 ], GlitchEffect.prototype, "slices", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 512 })
 ], GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 100 })
 ], GlitchEffect.prototype, "offset", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 0 })
 ], GlitchEffect.prototype, "direction", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 2 })
 ], GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: 0 })
 ], GlitchEffect.prototype, "seed", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: [2, 2] })
 ], GlitchEffect.prototype, "red", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: [-10, 4] })
 ], GlitchEffect.prototype, "green", 2);
-__decorateClass$z([
+__decorateClass$B([
   property({ default: [10, -4] })
 ], GlitchEffect.prototype, "blue", 2);
-GlitchEffect = __decorateClass$z([
+GlitchEffect = __decorateClass$B([
   customNode("GlitchEffect")
 ], GlitchEffect);
 
-var __defProp$r = Object.defineProperty;
+var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$A = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   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$t(target, key, result);
   return result;
 };
 var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
@@ -8296,39 +8296,39 @@ void main(void) {
   gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
 }`
 }));
-__decorateClass$y([
+__decorateClass$A([
   property({ default: 0 })
 ], GodrayEffect.prototype, "time", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: 30 })
 ], GodrayEffect.prototype, "angle", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: 0.5 })
 ], GodrayEffect.prototype, "gain", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: 2.5 })
 ], GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: true })
 ], GodrayEffect.prototype, "parallel", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: [0, 0] })
 ], GodrayEffect.prototype, "center", 2);
-__decorateClass$y([
+__decorateClass$A([
   property({ default: 1 })
 ], GodrayEffect.prototype, "alpha", 2);
-GodrayEffect = __decorateClass$y([
+GodrayEffect = __decorateClass$A([
   customNode("GodrayEffect")
 ], GodrayEffect);
 
-var __defProp$q = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
+var __decorateClass$z = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 const frag$1 = `varying vec2 vUv;
@@ -8419,28 +8419,28 @@ void main() {
     });
   }
 };
-__decorateClass$x([
+__decorateClass$z([
   property({ default: 4 })
 ], KawaseBlurEffect.prototype, "strength", 2);
-__decorateClass$x([
+__decorateClass$z([
   property({ default: 3 })
 ], KawaseBlurEffect.prototype, "quality", 2);
-__decorateClass$x([
+__decorateClass$z([
   property({ default: [1, 1] })
 ], KawaseBlurEffect.prototype, "pixelSize", 2);
-KawaseBlurEffect = __decorateClass$x([
+KawaseBlurEffect = __decorateClass$z([
   customNode("KawaseBlurEffect")
 ], KawaseBlurEffect);
 
-var __defProp$p = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   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$r(target, key, result);
   return result;
 };
 var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
@@ -8529,25 +8529,25 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$w([
+__decorateClass$y([
   protectedProperty()
 ], MaskEffect.prototype, "texture", 2);
-__decorateClass$w([
+__decorateClass$y([
   property({ default: "" })
 ], MaskEffect.prototype, "src", 2);
-MaskEffect = __decorateClass$w([
+MaskEffect = __decorateClass$y([
   customNode("MaskEffect")
 ], MaskEffect);
 
-var __defProp$o = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$x = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   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$q(target, key, result);
   return result;
 };
 var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -8635,40 +8635,40 @@ void main() {
 };
 __publicField$7(OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(OutlineEffect, "MAX_SAMPLES", 100);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: 0 })
 ], OutlineEffect.prototype, "color", 2);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: 1 })
 ], OutlineEffect.prototype, "width", 2);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: "solid" })
 ], OutlineEffect.prototype, "style", 2);
-__decorateClass$v([
+__decorateClass$x([
   property()
 ], OutlineEffect.prototype, "image", 2);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: 1 })
 ], OutlineEffect.prototype, "opacity", 2);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: 0.1 })
 ], OutlineEffect.prototype, "quality", 2);
-__decorateClass$v([
+__decorateClass$x([
   property({ default: false })
 ], OutlineEffect.prototype, "knockout", 2);
-OutlineEffect = __decorateClass$v([
+OutlineEffect = __decorateClass$x([
   customNode("OutlineEffect")
 ], OutlineEffect);
 
-var __defProp$n = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$w = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   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$p(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
@@ -8724,22 +8724,22 @@ void main(void) {
   gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-__decorateClass$u([
+__decorateClass$w([
   property({ default: 10 })
 ], PixelateEffect.prototype, "strength", 2);
-PixelateEffect = __decorateClass$u([
+PixelateEffect = __decorateClass$w([
   customNode("PixelateEffect")
 ], PixelateEffect);
 
-var __defProp$m = Object.defineProperty;
+var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   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$o(target, key, result);
   return result;
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
@@ -8852,38 +8852,40 @@ void main() {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$t([
+__decorateClass$v([
   property()
 ], ZoomBlurEffect.prototype, "center", 2);
-__decorateClass$t([
+__decorateClass$v([
   property({ default: 20 })
 ], ZoomBlurEffect.prototype, "innerRadius", 2);
-__decorateClass$t([
+__decorateClass$v([
   property({ default: -1 })
 ], ZoomBlurEffect.prototype, "radius", 2);
-__decorateClass$t([
+__decorateClass$v([
   property({ default: 0.1 })
 ], ZoomBlurEffect.prototype, "strength", 2);
-ZoomBlurEffect = __decorateClass$t([
+ZoomBlurEffect = __decorateClass$v([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-var __defProp$l = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$n = Object.defineProperty;
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$l(target, key, result);
+  if (result) __defProp$n(target, key, result);
   return result;
 };
 class BaseElement2DFill extends CoreObject {
-  constructor(parent, properties) {
+  constructor(parent) {
     super();
     this.parent = parent;
-    this.setProperties(properties);
   }
-  _image;
+  _src;
+  setProperties(properties) {
+    return super.setProperties(normalizeFill(properties));
+  }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
@@ -8893,31 +8895,47 @@ class BaseElement2DFill extends CoreObject {
       case "tile":
         this.parent.requestRedraw();
         break;
-      case "image":
-        this._updateImage();
+      case "src":
+        this._updateSource();
         break;
     }
   }
-  async loadImage() {
-    if (this.image && this.image !== "none") {
-      return await assets.texture.load(this.image);
+  async loadSource() {
+    if (this.src && this.src !== "none") {
+      return await assets.texture.load(this.src);
     }
   }
-  async _updateImage() {
-    this._image = await this.loadImage();
+  async _updateSource() {
+    this._src = await this.loadSource();
     this.parent.requestRedraw();
   }
   canDraw() {
     return Boolean(
-      this._image || this.color
+      this._src || this.color
     );
   }
   draw() {
     const ctx = this.parent.context;
-    if (this._image) {
-      const { width: imageWidth, height: imageHeight } = this._image;
+    if (this._src) {
+      const { width: imageWidth, height: imageHeight } = this._src;
       const { width, height } = this.parent.size;
       const transform = new Transform2D();
+      let disableWrapMode = false;
+      if (this.srcRect) {
+        const {
+          left = 0,
+          top = 0,
+          right = 0,
+          bottom = 0
+        } = this.srcRect;
+        const w = Math.abs(1 + (left + right)) * width;
+        const h = Math.abs(1 + (top + bottom)) * height;
+        const sx = 1 / w;
+        const sy = 1 / h;
+        const tx = left * width * sx;
+        const ty = top * height * sy;
+        transform.scale(sx, sy).translate(tx, ty);
+      }
       if (this.tile) {
         const {
           translateX = 0,
@@ -8928,6 +8946,7 @@ class BaseElement2DFill extends CoreObject {
           // alignment, TODO
         } = this.tile;
         transform.scale(1 / imageWidth, 1 / imageHeight).scale(1 / scaleX, 1 / scaleY).translate(-translateX / imageWidth, -translateY / imageHeight);
+        disableWrapMode = true;
       } else if (this.stretch) {
         const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretch.rect ?? {};
         const w = Math.abs(1 + (-left + -right)) * width;
@@ -8937,13 +8956,14 @@ class BaseElement2DFill extends CoreObject {
         const translateX = -left * width * scaleX;
         const translateY = -top * height * scaleY;
         transform.scale(scaleX, scaleY).translate(translateX, translateY);
+        disableWrapMode = true;
       } else {
         transform.scale(1 / width, 1 / height);
       }
       ctx.textureTransform = transform;
-      ctx.fillStyle = this._image;
+      ctx.fillStyle = this._src;
       ctx.fill({
-        disableWrapMode: true
+        disableWrapMode
       });
     } else {
       ctx.fillStyle = this.color;
@@ -8951,24 +8971,99 @@ class BaseElement2DFill extends CoreObject {
     }
   }
 }
-__decorateClass$s([
+__decorateClass$u([
   property()
 ], BaseElement2DFill.prototype, "color");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "src");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "dpi");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "rotateWithShape");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "tile");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "stretch");
+__decorateClass$u([
+  property()
+], BaseElement2DFill.prototype, "opacity");
+
+var __defProp$m = 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$m(target, key, result);
+  return result;
+};
+class BaseElement2DBackground extends BaseElement2DFill {
+  setProperties(properties) {
+    return super.setProperties(normalizeBackground(properties));
+  }
+}
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "color");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "src");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "dpi");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "rotateWithShape");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "tile");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "stretch");
+__decorateClass$t([
+  property()
+], BaseElement2DBackground.prototype, "opacity");
+
+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$l(target, key, result);
+  return result;
+};
+class BaseElement2DForeground extends BaseElement2DFill {
+  setProperties(properties) {
+    return super.setProperties(normalizeForeground(properties));
+  }
+}
 __decorateClass$s([
   property()
-], BaseElement2DFill.prototype, "image");
+], BaseElement2DForeground.prototype, "color");
 __decorateClass$s([
   property()
-], BaseElement2DFill.prototype, "dpi");
+], BaseElement2DForeground.prototype, "src");
 __decorateClass$s([
   property()
-], BaseElement2DFill.prototype, "rotateWithShape");
+], BaseElement2DForeground.prototype, "dpi");
 __decorateClass$s([
   property()
-], BaseElement2DFill.prototype, "tile");
+], BaseElement2DForeground.prototype, "rotateWithShape");
 __decorateClass$s([
   property()
-], BaseElement2DFill.prototype, "stretch");
+], BaseElement2DForeground.prototype, "tile");
+__decorateClass$s([
+  property()
+], BaseElement2DForeground.prototype, "stretch");
+__decorateClass$s([
+  property()
+], BaseElement2DForeground.prototype, "opacity");
 
 var __defProp$k = Object.defineProperty;
 var __decorateClass$r = (decorators, target, key, kind) => {
@@ -8980,13 +9075,15 @@ var __decorateClass$r = (decorators, target, key, kind) => {
   return result;
 };
 class BaseElement2DGeometry extends CoreObject {
-  constructor(parent, properties) {
+  constructor(parent) {
     super();
     this.parent = parent;
-    this.setProperties(properties);
     this._updatePath2DSet();
   }
   _path2DSet = new Path2DSet();
+  setProperties(properties) {
+    return super.setProperties(normalizeGeometry(properties));
+  }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
@@ -9066,10 +9163,12 @@ var __decorateClass$q = (decorators, target, key, kind) => {
   return result;
 };
 class BaseElement2DOutline extends CoreObject {
-  constructor(parent, properties) {
+  constructor(parent) {
     super();
     this.parent = parent;
-    this.setProperties(properties);
+  }
+  setProperties(properties) {
+    return super.setProperties(normalizeOutline(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -9077,7 +9176,7 @@ class BaseElement2DOutline extends CoreObject {
       case "color":
       case "width":
       case "style":
-      case "image":
+      case "src":
       case "opacity":
         this.parent.requestRedraw();
         break;
@@ -9106,7 +9205,7 @@ __decorateClass$q([
 ], BaseElement2DOutline.prototype, "style");
 __decorateClass$q([
   property()
-], BaseElement2DOutline.prototype, "image");
+], BaseElement2DOutline.prototype, "src");
 __decorateClass$q([
   property({ default: 1 })
 ], BaseElement2DOutline.prototype, "opacity");
@@ -9121,10 +9220,12 @@ var __decorateClass$p = (decorators, target, key, kind) => {
   return result;
 };
 class BaseElement2DShadow extends CoreObject {
-  constructor(parent, properties) {
+  constructor(parent) {
     super();
     this.parent = parent;
-    this.setProperties(properties);
+  }
+  setProperties(properties) {
+    return super.setProperties(normalizeShadow(properties));
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -9193,10 +9294,9 @@ var __decorateClass$o = (decorators, target, key, kind) => {
   return result;
 };
 class BaseElement2DText extends CoreObject {
-  constructor(parent, properties) {
+  constructor(parent) {
     super();
     this.parent = parent;
-    this.setProperties(properties);
   }
   effects;
   measureDom;
@@ -9204,6 +9304,9 @@ class BaseElement2DText extends CoreObject {
   texture = new CanvasTexture();
   baseText = new Text();
   measureResult;
+  setProperties(properties) {
+    return super.setProperties(normalizeText(properties));
+  }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
@@ -9382,12 +9485,12 @@ let BaseElement2D = class extends Node2D {
     this._style?.off("updateProperty", cb);
     this._style = style;
   }
-  _text = new BaseElement2DText(this);
-  get text() {
-    return this._text;
+  _background = new BaseElement2DBackground(this);
+  get background() {
+    return this._background;
   }
-  set text(value) {
-    this._text.setProperties(value);
+  set background(value) {
+    this._background.setProperties(value);
   }
   _geometry = new BaseElement2DGeometry(this);
   get geometry() {
@@ -9410,6 +9513,20 @@ let BaseElement2D = class extends Node2D {
   set outline(value) {
     this._outline.setProperties(value);
   }
+  _foreground = new BaseElement2DForeground(this);
+  get foreground() {
+    return this._foreground;
+  }
+  set foreground(value) {
+    this._foreground.setProperties(value);
+  }
+  _text = new BaseElement2DText(this);
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    this._text.setProperties(value);
+  }
   _shadow = new BaseElement2DShadow(this);
   get shadow() {
     return this._shadow;
@@ -9429,16 +9546,20 @@ let BaseElement2D = class extends Node2D {
         style,
         text,
         geometry,
+        background,
         fill,
         outline,
+        foreground,
         shadow,
         ...restProperties
       } = properties;
       style && this.style.setProperties(style);
-      text && this.text.setProperties(text);
+      background && this.background.setProperties(background);
       geometry && this.geometry.setProperties(geometry);
       fill && this.fill.setProperties(fill);
       outline && this.outline.setProperties(outline);
+      text && this.text.setProperties(text);
+      foreground && this.foreground.setProperties(foreground);
       shadow && this.shadow.setProperties(shadow);
       super.setProperties(restProperties);
     }
@@ -9497,10 +9618,10 @@ let BaseElement2D = class extends Node2D {
         this.requestRedraw();
         break;
       case "backgroundColor":
-        this.fill.color = this.style.backgroundColor;
+        this.background.color = this.style.backgroundColor;
         break;
       case "backgroundImage":
-        this.fill.image = this.style.backgroundImage;
+        this.background.src = this.style.backgroundImage;
         break;
       case "borderStyle":
       case "outlineStyle":
@@ -9595,6 +9716,11 @@ let BaseElement2D = class extends Node2D {
     if (this.text.canDraw()) {
       this.text.updateMeasure();
     }
+    if (this.background.canDraw()) {
+      this._tree?.log(this.name, "draw background");
+      this.geometry.drawRect();
+      this.background.draw();
+    }
     if (this.fill.canDraw()) {
       this._tree?.log(this.name, "draw fill");
       this.geometry.draw();
@@ -9605,6 +9731,11 @@ let BaseElement2D = class extends Node2D {
       this.geometry.draw();
       this.outline.draw();
     }
+    if (this.foreground.canDraw()) {
+      this._tree?.log(this.name, "draw foreground");
+      this.geometry.drawRect();
+      this.foreground.draw();
+    }
     if (this.text.canDraw()) {
       this._tree?.log(this.name, "draw text");
       this.geometry.drawRect();
@@ -13897,4 +14028,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DFill, BaseElement2DGeometry, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DGeometry, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };