modern-canvas 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { extend, colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import earcut from 'earcut';
-import { textDefaultStyle, measureText, renderText } from 'modern-text';
+import { getDefaultTextStyle, getDefaultTransformStyle } from 'modern-idoc';
+import { textDefaultStyle, Text } from 'modern-text';
 
 const PI = Math.PI;
 const PI_2 = PI * 2;
@@ -616,13 +617,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$C = Object.defineProperty;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __defProp$B = Object.defineProperty;
+var __decorateClass$B = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$C(target, key, result);
+  if (result) __defProp$B(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -666,20 +667,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$A = Object.defineProperty;
+var __decorateClass$A = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$A(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -723,20 +724,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$A = Object.defineProperty;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __defProp$z = Object.defineProperty;
+var __decorateClass$z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$A(target, key, result);
+  if (result) __defProp$z(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -773,25 +774,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -975,13 +976,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$z = Object.defineProperty;
-var __decorateClass$z = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$z(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class MainLoop extends _Object {
@@ -1022,10 +1023,10 @@ class MainLoop extends _Object {
     }
   }
 }
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -3998,14 +3999,14 @@ class Vector4 extends Vector {
   }
 }
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 var InternalMode = /* @__PURE__ */ ((InternalMode2) => {
@@ -4403,22 +4404,22 @@ let Node = class extends Reference {
     return node;
   }
 };
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], Node.prototype, "name", 2);
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: "visible" })
 ], Node.prototype, "visibility", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: 0 })
 ], Node.prototype, "visibleDelay", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Node.prototype, "visibleDuration", 2);
-Node = __decorateClass$y([
+Node = __decorateClass$x([
   customNode("Node")
 ], Node);
 
@@ -4448,14 +4449,14 @@ class RenderStack {
   }
 }
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 let Timer = class extends Node {
@@ -4497,29 +4498,29 @@ let Timer = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], Timer.prototype, "start", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], Timer.prototype, "current", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timer.prototype, "end", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: false })
 ], Timer.prototype, "loop", 2);
-Timer = __decorateClass$x([
+Timer = __decorateClass$w([
   customNode("Timer")
 ], Timer);
 
-var __defProp$w = Object.defineProperty;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __defProp$v = Object.defineProperty;
+var __decorateClass$v = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$w(target, key, result);
+  if (result) __defProp$v(target, key, result);
   return result;
 };
 class Texture extends Resource {
@@ -4645,22 +4646,22 @@ class Texture extends Resource {
     }
   }
 }
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty()
 ], Texture.prototype, "source");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "width");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "height");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "linear" })
 ], Texture.prototype, "filterMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "clamp_to_edge" })
 ], Texture.prototype, "wrapMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 1 })
 ], Texture.prototype, "pixelRatio");
 
@@ -4796,13 +4797,13 @@ class PixelsTexture extends Texture {
   }
 }
 
-var __defProp$v = Object.defineProperty;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defProp$u = Object.defineProperty;
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$v(target, key, result);
+  if (result) __defProp$u(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5045,10 +5046,10 @@ const _VideoTexture = class _VideoTexture extends Texture {
     }
   }
 };
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5057,14 +5058,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -5185,19 +5186,19 @@ let Viewport = class extends Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$u([
+Viewport = __decorateClass$t([
   customNode({
     tag: "Viewport",
     renderable: true
@@ -5616,13 +5617,13 @@ class ColorTexture extends Texture {
   }
 }
 
-var __defProp$t = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$s = Object.defineProperty;
+var __decorateClass$s = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$t(target, key, result);
+  if (result) __defProp$s(target, key, result);
   return result;
 };
 function proxy$1() {
@@ -5778,46 +5779,46 @@ class CanvasContext {
     return batchables;
   }
 }
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "moveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "lineTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "bezierCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "quadraticCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipticalArc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "rect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "roundRect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipse");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "arc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "poly");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addShape");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addSvgPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "closePath");
 
@@ -6185,16 +6186,13 @@ class Style2DBackgroundModule extends Style2DModule {
   install(Style2D) {
     defineProperty(Style2D, "backgroundColor");
     defineProperty(Style2D, "backgroundImage");
-    Style2D.prototype.getComputedBackground = getComputedBackground;
+    Style2D.prototype.getComputedBackgroundImage = getComputedBackgroundImage;
   }
 }
-async function getComputedBackground() {
+async function getComputedBackgroundImage() {
   if (this.backgroundImage) {
     return await assets.texture.load(this.backgroundImage);
   }
-  if (this.backgroundColor) {
-    return new ColorTexture(this.backgroundColor);
-  }
 }
 
 class Style2DFilterModule extends Style2DModule {
@@ -6259,61 +6257,22 @@ function getComputedFilterColorMatrix() {
   return m;
 }
 
-class Style2DOffsetModule extends Style2DModule {
-  install(Style2D) {
-    defineProperty(Style2D, "offsetPath");
-    defineProperty(Style2D, "offsetAnchor");
-    defineProperty(Style2D, "offsetDistance");
-    defineProperty(Style2D, "offsetPosition");
-    Style2D.prototype.getComputedOffset = getComputedOffset;
-  }
-}
-function getComputedOffset() {
-  const offsetPath = this.offsetPath;
-  if (!offsetPath)
-    return;
-  if (offsetPath.startsWith("path")) {
-    const path = offsetPath.match(/path\(["'](.+)["']\)/)?.[1];
-    if (!path)
-      return;
-    path.split(" ").forEach((arg) => {
-    });
-  } else if (offsetPath.startsWith("ray")) ; else if (offsetPath.startsWith("url")) ; else if (offsetPath.startsWith("circle")) ; else if (offsetPath.startsWith("ellipse")) ; else if (offsetPath.startsWith("insett")) ; else if (offsetPath.startsWith("polygon")) ; else if (offsetPath.startsWith("rect")) ; else if (offsetPath.startsWith("xywh")) ;
-}
-
 class Style2DTextModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "color", { default: "#000000" });
-    defineProperty(Style2D, "fontSize", { default: 14 });
-    defineProperty(Style2D, "fontWeight", { default: "normal" });
-    defineProperty(Style2D, "fontFamily", { default: "sans-serif" });
-    defineProperty(Style2D, "fontStyle", { default: "normal" });
-    defineProperty(Style2D, "fontKerning", { default: "normal" });
-    defineProperty(Style2D, "textWrap", { default: "wrap" });
-    defineProperty(Style2D, "textAlign", { default: "start" });
-    defineProperty(Style2D, "verticalAlign", { default: "middle" });
-    defineProperty(Style2D, "textTransform", { default: "none" });
-    defineProperty(Style2D, "textDecoration", { default: null });
-    defineProperty(Style2D, "textStrokeWidth", { default: 0 });
-    defineProperty(Style2D, "textStrokeColor", { default: "#000000" });
+    const style = getDefaultTextStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     defineProperty(Style2D, "direction", { default: "inherit" });
-    defineProperty(Style2D, "lineHeight", { default: 1 });
-    defineProperty(Style2D, "letterSpacing", { default: 0 });
-    defineProperty(Style2D, "writingMode", { default: "horizontal-tb" });
   }
 }
 
 class Style2DTransformModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "left", { default: 0 });
-    defineProperty(Style2D, "top", { default: 0 });
-    defineProperty(Style2D, "width", { default: 0 });
-    defineProperty(Style2D, "height", { default: 0 });
-    defineProperty(Style2D, "rotate", { default: 0 });
-    defineProperty(Style2D, "scaleX", { default: 1 });
-    defineProperty(Style2D, "scaleY", { default: 1 });
-    defineProperty(Style2D, "transform");
-    defineProperty(Style2D, "transformOrigin", { default: "center" });
+    const style = getDefaultTransformStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     Style2D.prototype.getComputedTransform = getComputedTransform;
     Style2D.prototype.getComputedTransformOrigin = getComputedTransformOrigin;
   }
@@ -6322,7 +6281,11 @@ function getComputedTransform() {
   const transform = new Transform2D();
   const transform3d = new Transform2D(false);
   const transform2d = new Transform2D(false).scale(this.scaleX, this.scaleY).translate(this.left, this.top).rotate(this.rotate * DEG_TO_RAD);
-  parseCssFunctions(this.transform ?? "", { width: this.width, height: this.height }).forEach(({ name, args }) => {
+  let _transform = this.transform;
+  if (!_transform || _transform === "none") {
+    _transform = "";
+  }
+  parseCssFunctions(_transform, { width: this.width, height: this.height }).forEach(({ name, args }) => {
     const values = args.map((arg) => arg.normalizedIntValue);
     transform.identity();
     switch (name) {
@@ -6433,22 +6396,13 @@ function getComputedTransformOrigin() {
   });
 }
 
-const modules = {
-  __proto__: null,
-  Style2DBackgroundModule: Style2DBackgroundModule,
-  Style2DFilterModule: Style2DFilterModule,
-  Style2DOffsetModule: Style2DOffsetModule,
-  Style2DTextModule: Style2DTextModule,
-  Style2DTransformModule: Style2DTransformModule
-};
-
-var __defProp$s = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
+var __defProp$r = Object.defineProperty;
+var __decorateClass$r = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$s(target, key, result);
+  if (result) __defProp$r(target, key, result);
   return result;
 };
 class Style2D extends _Object {
@@ -6474,39 +6428,44 @@ class Style2D extends _Object {
     }
   }
 }
-__decorateClass$s([
+__decorateClass$r([
   property({ default: "#000000" })
 ], Style2D.prototype, "shadowColor");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowOffsetX");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowOffsetY");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "shadowBlur");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 1 })
 ], Style2D.prototype, "opacity");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: 0 })
 ], Style2D.prototype, "borderRadius");
-__decorateClass$s([
+__decorateClass$r([
   property({ default: "visible" })
 ], Style2D.prototype, "overflow");
-Object.values(modules).forEach((Module) => {
+[
+  Style2DBackgroundModule,
+  Style2DFilterModule,
+  Style2DTextModule,
+  Style2DTransformModule
+].forEach((Module) => {
   new Module().install(Style2D);
 });
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 let CanvasItem = class extends Node {
@@ -6525,12 +6484,13 @@ let CanvasItem = class extends Node {
   _parentOpacity;
   _tint = new Color(4294967295);
   _backgroundColor = new Color(0);
-  // 2d batch render
+  _backgroundImage;
+  // Batch render
   context = new CanvasContext();
   _resetContext = true;
-  _waitingRedraw = false;
-  _waitingReflow = false;
-  _waitingRepaint = false;
+  _redrawing = false;
+  _reflowing = false;
+  _repainting = false;
   _originalBatchables = [];
   _layoutedBatchables = [];
   _batchables = [];
@@ -6564,12 +6524,10 @@ let CanvasItem = class extends Node {
   _onUpdateStyleProperty(key, newValue, oldValue, declaration) {
     switch (key) {
       case "backgroundColor":
-        this._backgroundColor.value = newValue || 0;
-        if (this._originalBatchables.length) {
-          this.requestRepaint();
-        } else if (this._backgroundColor.a > 0) {
-          this.requestRedraw();
-        }
+        this._updateBackgroundColor();
+        break;
+      case "backgroundImage":
+        this._updateBackgroundImage();
         break;
       case "opacity":
         this._updateOpacity();
@@ -6577,8 +6535,23 @@ let CanvasItem = class extends Node {
       case "filter":
         this.requestRepaint();
         break;
+      case "borderRadius":
+        this.requestRedraw();
+        break;
     }
   }
+  _updateBackgroundColor() {
+    this._backgroundColor.value = this.style.backgroundColor || 0;
+    if (this._originalBatchables.length) {
+      this.requestRepaint();
+    } else if (this._backgroundColor.a > 0) {
+      this.requestRedraw();
+    }
+  }
+  async _updateBackgroundImage() {
+    this._backgroundImage = await this.style.getComputedBackgroundImage();
+    this.requestRedraw();
+  }
   _updateOpacity() {
     const opacity = clamp(0, this.style.opacity, 1) * (this._parent?.opacity ?? 1);
     if (this.opacity !== opacity) {
@@ -6590,13 +6563,13 @@ let CanvasItem = class extends Node {
     return this.opacity > 0 && super.isVisible();
   }
   requestRedraw() {
-    this._waitingRedraw = true;
+    this._redrawing = true;
   }
   requestReflow() {
-    this._waitingReflow = true;
+    this._reflowing = true;
   }
   requestRepaint() {
-    this._waitingRepaint = true;
+    this._repainting = true;
   }
   _process(delta) {
     const parentOpacity = this._parent?.opacity;
@@ -6607,6 +6580,30 @@ let CanvasItem = class extends Node {
     super._process(delta);
   }
   _draw() {
+    this._drawBackground();
+    this._drawContent();
+  }
+  _drawBackground() {
+    const texture = this._backgroundImage;
+    if (texture?.valid) {
+      this.context.fillStyle = texture;
+      this.context.textureTransform = new Transform2D().scale(
+        this.style.width / texture.width,
+        this.style.height / texture.height
+      );
+      this._fill();
+    }
+  }
+  _drawContent() {
+    this._fill();
+  }
+  _fill() {
+    if (this.style.borderRadius) {
+      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
+    } else {
+      this.context.rect(0, 0, this.style.width, this.style.height);
+    }
+    this.context.fill();
   }
   _relayout(batchables) {
     return this._reflow(batchables);
@@ -6629,7 +6626,7 @@ let CanvasItem = class extends Node {
   }
   _render(renderer) {
     let batchables;
-    if (this._waitingRedraw) {
+    if (this._redrawing) {
       this._draw();
       this._originalBatchables = this.context.toBatchables();
       this._layoutedBatchables = this._relayout(this._originalBatchables);
@@ -6637,17 +6634,17 @@ let CanvasItem = class extends Node {
       if (this._resetContext) {
         this.context.reset();
       }
-    } else if (this._waitingReflow) {
+    } else if (this._reflowing) {
       this._layoutedBatchables = this._reflow(this._originalBatchables);
       batchables = this._layoutedBatchables;
-    } else if (this._waitingRepaint) {
+    } else if (this._repainting) {
       batchables = this._repaint(this._layoutedBatchables);
     }
     if (batchables) {
       this._batchables = batchables;
-      this._waitingRedraw = false;
-      this._waitingReflow = false;
-      this._waitingRepaint = false;
+      this._redrawing = false;
+      this._reflowing = false;
+      this._repainting = false;
     }
     this._batchables.forEach((batchable) => {
       batchable.texture?.upload(renderer);
@@ -6669,24 +6666,24 @@ let CanvasItem = class extends Node {
     };
   }
 };
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], CanvasItem.prototype, "tint", 2);
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-CanvasItem = __decorateClass$r([
+CanvasItem = __decorateClass$q([
   customNode("CanvasItem")
 ], CanvasItem);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -6753,8 +6750,8 @@ let Animation2D = class extends Node {
   _startProps = /* @__PURE__ */ new WeakMap();
   constructor(options) {
     super();
-    this.setProperties(options);
     this._onUpdateTime = this._onUpdateTime.bind(this);
+    this.setProperties(options);
   }
   _enterTree() {
     this._tree?.timeline.on("update", this._onUpdateTime);
@@ -6973,36 +6970,36 @@ let Animation2D = class extends Node {
     });
   }
 };
-__decorateClass$q([
+__decorateClass$p([
   property({ default: "parent" })
 ], Animation2D.prototype, "mode", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: false })
 ], Animation2D.prototype, "loop", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: [] })
 ], Animation2D.prototype, "keyframes", 2);
-__decorateClass$q([
+__decorateClass$p([
   property()
 ], Animation2D.prototype, "easing", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDelay", default: 0 })
 ], Animation2D.prototype, "delay", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDuration", default: 2e3 })
 ], Animation2D.prototype, "duration", 2);
-Animation2D = __decorateClass$q([
+Animation2D = __decorateClass$p([
   customNode("Animation2D")
 ], Animation2D);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -7048,6 +7045,9 @@ let Node2D = class extends CanvasItem {
       case "transformOrigin":
         this._updateTransform();
         break;
+      case "overflow":
+        this._updateOverflow();
+        break;
     }
   }
   _updateTransform() {
@@ -7073,8 +7073,24 @@ let Node2D = class extends CanvasItem {
       transform = t3dT2d;
     }
     this._transform.set(transform);
+    this._updateOverflow();
     this.requestReflow();
   }
+  _updateOverflow() {
+    if (this.style.overflow === "hidden") {
+      const [a, c, tx, b, d, ty] = this._transform.toArray();
+      const width = this.style.width;
+      const height = this.style.height;
+      this.mask = {
+        x: tx,
+        y: ty,
+        width: a * width + c * height,
+        height: b * width + d * height
+      };
+    } else {
+      this.mask = void 0;
+    }
+  }
   _transformVertices(vertices) {
     const [a, c, tx, b, d, ty] = this._transform.toArray();
     const newVertices = vertices.slice();
@@ -7117,101 +7133,12 @@ let Node2D = class extends CanvasItem {
     }
   }
 };
-Node2D = __decorateClass$p([
-  customNode("Node2D")
-], Node2D);
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
-  return result;
-};
-let Element2D = class extends Node2D {
-  draggable;
-  _background;
-  constructor(options) {
-    super();
-    this.setProperties(options);
-  }
-  _onUpdateStyleProperty(key, value, oldValue) {
-    super._onUpdateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "backgroundImage":
-        this._updateBackground();
-        break;
-      case "borderRadius":
-        this.requestRedraw();
-        break;
-      case "overflow":
-        this._updateOverflow();
-        break;
-    }
-  }
-  async _updateBackground() {
-    this._background = await this.style.getComputedBackground();
-    this.requestRedraw();
-  }
-  _updateTransform() {
-    super._updateTransform();
-    this._updateOverflow();
-  }
-  _updateOverflow() {
-    if (this.style.overflow === "hidden") {
-      const [a, c, tx, b, d, ty] = this._transform.toArray();
-      const width = this.style.width;
-      const height = this.style.height;
-      this.mask = {
-        x: tx,
-        y: ty,
-        width: a * width + c * height,
-        height: b * width + d * height
-      };
-    } else {
-      this.mask = void 0;
-    }
-  }
-  _draw() {
-    super._draw();
-    this._drawBackground();
-    this._drawContent();
-  }
-  _drawBackground() {
-    const texture = this._background;
-    if (!texture?.valid)
-      return;
-    this.context.fillStyle = texture;
-    this.context.textureTransform = new Transform2D().scale(
-      this.style.width / texture.width,
-      this.style.height / texture.height
-    );
-    this._drawRect();
-  }
-  _drawContent() {
-    this._drawRect();
-  }
-  _drawRect() {
-    if (this.style.borderRadius) {
-      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
-    } else {
-      this.context.rect(0, 0, this.style.width, this.style.height);
-    }
-    this.context.fill();
-  }
-};
-__decorateClass$o([
-  property()
-], Element2D.prototype, "draggable", 2);
-Element2D = __decorateClass$o([
+Node2D = __decorateClass$o([
   customNode({
-    tag: "Element2D",
+    tag: "Node2D",
     renderable: true
   })
-], Element2D);
+], Node2D);
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -7320,10 +7247,7 @@ __decorateClass$n([
   proxy({ method: true, redraw: true })
 ], Graphics2D.prototype, "stroke", 2);
 Graphics2D = __decorateClass$n([
-  customNode({
-    tag: "Graphics2D",
-    renderable: true
-  })
+  customNode("Graphics2D")
 ], Graphics2D);
 
 class Image2DResource extends Resource {
@@ -7362,7 +7286,7 @@ var __decorateClass$m = (decorators, target, key, kind) => {
   if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-let Image2D = class extends Element2D {
+let Image2D = class extends Node2D {
   resource;
   get currentTexture() {
     return this.resource?.frames[this._frameIndex]?.texture;
@@ -7481,7 +7405,7 @@ let Image2D = class extends Element2D {
     const texture = this.currentTexture;
     return super._repaint(
       batchables.map((batchable, i) => {
-        if ((this._background ? i === 1 : i === 0) && batchable.type === "fill") {
+        if ((this._backgroundImage ? i === 1 : i === 0) && batchable.type === "fill") {
           return {
             ...batchable,
             texture: texture?.valid ? texture : void 0
@@ -7515,7 +7439,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-let Lottie2D = class extends Element2D {
+let Lottie2D = class extends Node2D {
   duration = 0;
   texture = new Texture(document.createElement("canvas"));
   animation;
@@ -7587,8 +7511,11 @@ var __decorateClass$k = (decorators, target, key, kind) => {
   return result;
 };
 const textStyles = new Set(Object.keys(textDefaultStyle));
-let Text2D = class extends Element2D {
+let Text2D = class extends Node2D {
   effects;
+  measureDom;
+  fonts;
+  text = new Text();
   texture = new Texture(document.createElement("canvas"));
   _subTextsCount = 0;
   constructor(options) {
@@ -7599,6 +7526,8 @@ let Text2D = class extends Element2D {
     super._onUpdateProperty(key, value, oldValue);
     switch (key) {
       case "content":
+      case "effects":
+      case "fonts":
       case "split":
         this._updateSplit();
         this.requestRedraw();
@@ -7610,6 +7539,13 @@ let Text2D = class extends Element2D {
       });
     }
   }
+  _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;
+  }
   _onUpdateStyleProperty(key, value, oldValue) {
     if (key === "height")
       return;
@@ -7653,13 +7589,8 @@ let Text2D = class extends Element2D {
     }
   }
   measure() {
-    const result = measureText({
-      content: this.content,
-      style: {
-        ...this.style.toJSON(),
-        height: void 0
-      }
-    });
+    this._updateText();
+    const result = this.text.measure();
     if (!this.style.width)
       this.style.width = result.boundingBox.width;
     if (!this.style.height)
@@ -7703,12 +7634,10 @@ let Text2D = class extends Element2D {
       if (onText2DRender) {
         onText2DRender();
       } else {
-        renderText({
-          view: this.texture.source,
+        this._updateText();
+        this.text.render({
           pixelRatio: this.pixelRatio,
-          content: this.content,
-          effects: this.effects,
-          style: this.style.toJSON()
+          view: this.texture.source
         });
       }
       this.texture.requestUpload();
@@ -7733,6 +7662,12 @@ __decorateClass$k([
 __decorateClass$k([
   property()
 ], Text2D.prototype, "effects", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "measureDom", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "fonts", 2);
 Text2D = __decorateClass$k([
   customNode("Text2D")
 ], Text2D);
@@ -7747,7 +7682,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-let Video2D = class extends Element2D {
+let Video2D = class extends Node2D {
   texture;
   get duration() {
     return (this.texture?.duration ?? 0) * 1e3;
@@ -8913,7 +8848,7 @@ Audio = __decorateClass$i([
   customNode("Audio")
 ], Audio);
 
-class AudioSpectrum extends Element2D {
+class AudioSpectrum extends Node2D {
   //
 }
 
@@ -8927,7 +8862,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-let AudioWaveform = class extends Element2D {
+let AudioWaveform = class extends Node2D {
   src;
   gap = 0;
   color = "#000000";
@@ -13756,7 +13691,8 @@ class Engine extends SceneTree {
     } else {
       this.resize(
         width || this.gl.drawingBufferWidth || this.view?.clientWidth || 200,
-        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200
+        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200,
+        !view
       );
     }
   }
@@ -13891,4 +13827,4 @@ async function render(options) {
   });
 }
 
-export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, Bounds, CanvasContext, CanvasItem, Circle, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Element2D, Ellipse, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, Path2D, PixelateEffect, PixelsTexture, Point, PointerInputEvent, Polygon, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Rectangle, Reference, RenderStack, Renderer, Resource, RoundedRectangle, 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, SVGPath, SceneTree, Star, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DOffsetModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, Triangle, TwistEffect, UIInputEvent, 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, ZoomBlurEffect, _Object, assets, buildAdaptiveBezier, buildAdaptiveQuadratic, buildArc, buildArcTo, buildArcToSvg, buildCircle, buildLine, buildPolygon, buildRectangle, buildTriangle, clamp, closePointEps, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curveEps, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, squaredDistanceToLineSegment, timingFunctions, uid };
+export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, Bounds, CanvasContext, CanvasItem, Circle, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Ellipse, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, Path2D, PixelateEffect, PixelsTexture, Point, PointerInputEvent, Polygon, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Rectangle, Reference, RenderStack, Renderer, Resource, RoundedRectangle, 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, SVGPath, SceneTree, Star, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, Triangle, TwistEffect, UIInputEvent, 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, ZoomBlurEffect, _Object, assets, buildAdaptiveBezier, buildAdaptiveQuadratic, buildArc, buildArcTo, buildArcToSvg, buildCircle, buildLine, buildPolygon, buildRectangle, buildTriangle, clamp, closePointEps, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curveEps, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, squaredDistanceToLineSegment, timingFunctions, uid };