modern-canvas 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -3,6 +3,7 @@
 const colord = require('colord');
 const namesPlugin = require('colord/plugins/names');
 const earcut = require('earcut');
+const modernIdoc = require('modern-idoc');
 const modernText = require('modern-text');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -623,13 +624,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$C = Object.defineProperty;
-var __decorateClass$C = (decorators, target, key, kind) => {
+var __defProp$B = Object.defineProperty;
+var __decorateClass$B = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$C(target, key, result);
+  if (result) __defProp$B(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -673,20 +674,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$C([
+__decorateClass$B([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$A = Object.defineProperty;
+var __decorateClass$A = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$A(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -730,20 +731,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$A = Object.defineProperty;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __defProp$z = Object.defineProperty;
+var __decorateClass$z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$A(target, key, result);
+  if (result) __defProp$z(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -780,25 +781,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -982,13 +983,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$z = Object.defineProperty;
-var __decorateClass$z = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$z(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class MainLoop extends _Object {
@@ -1029,10 +1030,10 @@ class MainLoop extends _Object {
     }
   }
 }
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$z([
+__decorateClass$y([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -4005,14 +4006,14 @@ class Vector4 extends Vector {
   }
 }
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 var InternalMode = /* @__PURE__ */ ((InternalMode2) => {
@@ -4410,22 +4411,22 @@ exports.Node = class Node extends Reference {
     return node;
   }
 };
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], exports.Node.prototype, "name", 2);
-__decorateClass$y([
+__decorateClass$x([
   property()
 ], exports.Node.prototype, "mask", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: "visible" })
 ], exports.Node.prototype, "visibility", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: 0 })
 ], exports.Node.prototype, "visibleDelay", 2);
-__decorateClass$y([
+__decorateClass$x([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Node.prototype, "visibleDuration", 2);
-exports.Node = __decorateClass$y([
+exports.Node = __decorateClass$x([
   customNode("Node")
 ], exports.Node);
 
@@ -4455,14 +4456,14 @@ class RenderStack {
   }
 }
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 exports.Timer = class Timer extends exports.Node {
@@ -4504,29 +4505,29 @@ exports.Timer = class Timer extends exports.Node {
     this.addTime(delta);
   }
 };
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], exports.Timer.prototype, "start", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], exports.Timer.prototype, "current", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Timer.prototype, "end", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: false })
 ], exports.Timer.prototype, "loop", 2);
-exports.Timer = __decorateClass$x([
+exports.Timer = __decorateClass$w([
   customNode("Timer")
 ], exports.Timer);
 
-var __defProp$w = Object.defineProperty;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __defProp$v = Object.defineProperty;
+var __decorateClass$v = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$w(target, key, result);
+  if (result) __defProp$v(target, key, result);
   return result;
 };
 class Texture extends Resource {
@@ -4652,22 +4653,22 @@ class Texture extends Resource {
     }
   }
 }
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty()
 ], Texture.prototype, "source");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "width");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "height");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "linear" })
 ], Texture.prototype, "filterMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: "clamp_to_edge" })
 ], Texture.prototype, "wrapMode");
-__decorateClass$w([
+__decorateClass$v([
   protectedProperty({ default: 1 })
 ], Texture.prototype, "pixelRatio");
 
@@ -4803,13 +4804,13 @@ class PixelsTexture extends Texture {
   }
 }
 
-var __defProp$v = Object.defineProperty;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defProp$u = Object.defineProperty;
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$v(target, key, result);
+  if (result) __defProp$u(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5052,10 +5053,10 @@ const _VideoTexture = class _VideoTexture extends Texture {
     }
   }
 };
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5064,14 +5065,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -5192,19 +5193,19 @@ exports.Viewport = class Viewport extends exports.Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$u([
+__decorateClass$t([
   property({ default: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$u([
+exports.Viewport = __decorateClass$t([
   customNode({
     tag: "Viewport",
     renderable: true
@@ -5623,13 +5624,13 @@ class ColorTexture extends Texture {
   }
 }
 
-var __defProp$t = Object.defineProperty;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __defProp$s = Object.defineProperty;
+var __decorateClass$s = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$t(target, key, result);
+  if (result) __defProp$s(target, key, result);
   return result;
 };
 function proxy$1() {
@@ -5785,46 +5786,46 @@ class CanvasContext {
     return batchables;
   }
 }
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "moveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "lineTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "bezierCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "quadraticCurveTo");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipticalArc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "rect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "roundRect");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "ellipse");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "arc");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "poly");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addShape");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "addSvgPath");
-__decorateClass$t([
+__decorateClass$s([
   proxy$1()
 ], CanvasContext.prototype, "closePath");
 
@@ -6192,16 +6193,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 {
@@ -6266,61 +6264,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 = modernIdoc.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 = modernIdoc.getDefaultTransformStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     Style2D.prototype.getComputedTransform = getComputedTransform;
     Style2D.prototype.getComputedTransformOrigin = getComputedTransformOrigin;
   }
@@ -6329,7 +6288,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) {
@@ -6440,22 +6403,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 {
@@ -6481,39 +6435,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;
 };
 exports.CanvasItem = class CanvasItem extends exports.Node {
@@ -6532,12 +6491,13 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   _parentOpacity;
   _tint = new Color(4294967295);
   _backgroundColor = new Color(0);
-  // 2d batch render
+  _backgroundImage;
+  // Batch render
   context = new CanvasContext();
   _resetContext = true;
-  _waitingRedraw = false;
-  _waitingReflow = false;
-  _waitingRepaint = false;
+  _redrawing = false;
+  _reflowing = false;
+  _repainting = false;
   _originalBatchables = [];
   _layoutedBatchables = [];
   _batchables = [];
@@ -6571,12 +6531,10 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   _onUpdateStyleProperty(key, newValue, oldValue, declaration) {
     switch (key) {
       case "backgroundColor":
-        this._backgroundColor.value = newValue || 0;
-        if (this._originalBatchables.length) {
-          this.requestRepaint();
-        } else if (this._backgroundColor.a > 0) {
-          this.requestRedraw();
-        }
+        this._updateBackgroundColor();
+        break;
+      case "backgroundImage":
+        this._updateBackgroundImage();
         break;
       case "opacity":
         this._updateOpacity();
@@ -6584,8 +6542,23 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
       case "filter":
         this.requestRepaint();
         break;
+      case "borderRadius":
+        this.requestRedraw();
+        break;
     }
   }
+  _updateBackgroundColor() {
+    this._backgroundColor.value = this.style.backgroundColor || 0;
+    if (this._originalBatchables.length) {
+      this.requestRepaint();
+    } else if (this._backgroundColor.a > 0) {
+      this.requestRedraw();
+    }
+  }
+  async _updateBackgroundImage() {
+    this._backgroundImage = await this.style.getComputedBackgroundImage();
+    this.requestRedraw();
+  }
   _updateOpacity() {
     const opacity = clamp(0, this.style.opacity, 1) * (this._parent?.opacity ?? 1);
     if (this.opacity !== opacity) {
@@ -6597,13 +6570,13 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     return this.opacity > 0 && super.isVisible();
   }
   requestRedraw() {
-    this._waitingRedraw = true;
+    this._redrawing = true;
   }
   requestReflow() {
-    this._waitingReflow = true;
+    this._reflowing = true;
   }
   requestRepaint() {
-    this._waitingRepaint = true;
+    this._repainting = true;
   }
   _process(delta) {
     const parentOpacity = this._parent?.opacity;
@@ -6614,6 +6587,30 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     super._process(delta);
   }
   _draw() {
+    this._drawBackground();
+    this._drawContent();
+  }
+  _drawBackground() {
+    const texture = this._backgroundImage;
+    if (texture?.valid) {
+      this.context.fillStyle = texture;
+      this.context.textureTransform = new Transform2D().scale(
+        this.style.width / texture.width,
+        this.style.height / texture.height
+      );
+      this._fill();
+    }
+  }
+  _drawContent() {
+    this._fill();
+  }
+  _fill() {
+    if (this.style.borderRadius) {
+      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
+    } else {
+      this.context.rect(0, 0, this.style.width, this.style.height);
+    }
+    this.context.fill();
   }
   _relayout(batchables) {
     return this._reflow(batchables);
@@ -6636,7 +6633,7 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
   }
   _render(renderer) {
     let batchables;
-    if (this._waitingRedraw) {
+    if (this._redrawing) {
       this._draw();
       this._originalBatchables = this.context.toBatchables();
       this._layoutedBatchables = this._relayout(this._originalBatchables);
@@ -6644,17 +6641,17 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
       if (this._resetContext) {
         this.context.reset();
       }
-    } else if (this._waitingReflow) {
+    } else if (this._reflowing) {
       this._layoutedBatchables = this._reflow(this._originalBatchables);
       batchables = this._layoutedBatchables;
-    } else if (this._waitingRepaint) {
+    } else if (this._repainting) {
       batchables = this._repaint(this._layoutedBatchables);
     }
     if (batchables) {
       this._batchables = batchables;
-      this._waitingRedraw = false;
-      this._waitingReflow = false;
-      this._waitingRepaint = false;
+      this._redrawing = false;
+      this._reflowing = false;
+      this._repainting = false;
     }
     this._batchables.forEach((batchable) => {
       batchable.texture?.upload(renderer);
@@ -6676,24 +6673,24 @@ exports.CanvasItem = class CanvasItem extends exports.Node {
     };
   }
 };
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], exports.CanvasItem.prototype, "tint", 2);
-__decorateClass$r([
+__decorateClass$q([
   property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-exports.CanvasItem = __decorateClass$r([
+exports.CanvasItem = __decorateClass$q([
   customNode("CanvasItem")
 ], exports.CanvasItem);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 const linear = (amount) => amount;
@@ -6760,8 +6757,8 @@ exports.Animation2D = class Animation2D extends exports.Node {
   _startProps = /* @__PURE__ */ new WeakMap();
   constructor(options) {
     super();
-    this.setProperties(options);
     this._onUpdateTime = this._onUpdateTime.bind(this);
+    this.setProperties(options);
   }
   _enterTree() {
     this._tree?.timeline.on("update", this._onUpdateTime);
@@ -6980,36 +6977,36 @@ exports.Animation2D = class Animation2D extends exports.Node {
     });
   }
 };
-__decorateClass$q([
+__decorateClass$p([
   property({ default: "parent" })
 ], exports.Animation2D.prototype, "mode", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: false })
 ], exports.Animation2D.prototype, "loop", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ default: [] })
 ], exports.Animation2D.prototype, "keyframes", 2);
-__decorateClass$q([
+__decorateClass$p([
   property()
 ], exports.Animation2D.prototype, "easing", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDelay", default: 0 })
 ], exports.Animation2D.prototype, "delay", 2);
-__decorateClass$q([
+__decorateClass$p([
   property({ alias: "visibleDuration", default: 2e3 })
 ], exports.Animation2D.prototype, "duration", 2);
-exports.Animation2D = __decorateClass$q([
+exports.Animation2D = __decorateClass$p([
   customNode("Animation2D")
 ], exports.Animation2D);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7055,6 +7052,9 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
       case "transformOrigin":
         this._updateTransform();
         break;
+      case "overflow":
+        this._updateOverflow();
+        break;
     }
   }
   _updateTransform() {
@@ -7080,8 +7080,24 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
       transform = t3dT2d;
     }
     this._transform.set(transform);
+    this._updateOverflow();
     this.requestReflow();
   }
+  _updateOverflow() {
+    if (this.style.overflow === "hidden") {
+      const [a, c, tx, b, d, ty] = this._transform.toArray();
+      const width = this.style.width;
+      const height = this.style.height;
+      this.mask = {
+        x: tx,
+        y: ty,
+        width: a * width + c * height,
+        height: b * width + d * height
+      };
+    } else {
+      this.mask = void 0;
+    }
+  }
   _transformVertices(vertices) {
     const [a, c, tx, b, d, ty] = this._transform.toArray();
     const newVertices = vertices.slice();
@@ -7124,101 +7140,12 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     }
   }
 };
-exports.Node2D = __decorateClass$p([
-  customNode("Node2D")
-], exports.Node2D);
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
-  return result;
-};
-exports.Element2D = class Element2D extends exports.Node2D {
-  draggable;
-  _background;
-  constructor(options) {
-    super();
-    this.setProperties(options);
-  }
-  _onUpdateStyleProperty(key, value, oldValue) {
-    super._onUpdateStyleProperty(key, value, oldValue);
-    switch (key) {
-      case "backgroundImage":
-        this._updateBackground();
-        break;
-      case "borderRadius":
-        this.requestRedraw();
-        break;
-      case "overflow":
-        this._updateOverflow();
-        break;
-    }
-  }
-  async _updateBackground() {
-    this._background = await this.style.getComputedBackground();
-    this.requestRedraw();
-  }
-  _updateTransform() {
-    super._updateTransform();
-    this._updateOverflow();
-  }
-  _updateOverflow() {
-    if (this.style.overflow === "hidden") {
-      const [a, c, tx, b, d, ty] = this._transform.toArray();
-      const width = this.style.width;
-      const height = this.style.height;
-      this.mask = {
-        x: tx,
-        y: ty,
-        width: a * width + c * height,
-        height: b * width + d * height
-      };
-    } else {
-      this.mask = void 0;
-    }
-  }
-  _draw() {
-    super._draw();
-    this._drawBackground();
-    this._drawContent();
-  }
-  _drawBackground() {
-    const texture = this._background;
-    if (!texture?.valid)
-      return;
-    this.context.fillStyle = texture;
-    this.context.textureTransform = new Transform2D().scale(
-      this.style.width / texture.width,
-      this.style.height / texture.height
-    );
-    this._drawRect();
-  }
-  _drawContent() {
-    this._drawRect();
-  }
-  _drawRect() {
-    if (this.style.borderRadius) {
-      this.context.roundRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);
-    } else {
-      this.context.rect(0, 0, this.style.width, this.style.height);
-    }
-    this.context.fill();
-  }
-};
-__decorateClass$o([
-  property()
-], exports.Element2D.prototype, "draggable", 2);
-exports.Element2D = __decorateClass$o([
+exports.Node2D = __decorateClass$o([
   customNode({
-    tag: "Element2D",
+    tag: "Node2D",
     renderable: true
   })
-], exports.Element2D);
+], exports.Node2D);
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -7327,10 +7254,7 @@ __decorateClass$n([
   proxy({ method: true, redraw: true })
 ], exports.Graphics2D.prototype, "stroke", 2);
 exports.Graphics2D = __decorateClass$n([
-  customNode({
-    tag: "Graphics2D",
-    renderable: true
-  })
+  customNode("Graphics2D")
 ], exports.Graphics2D);
 
 class Image2DResource extends Resource {
@@ -7369,7 +7293,7 @@ var __decorateClass$m = (decorators, target, key, kind) => {
   if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-exports.Image2D = class Image2D extends exports.Element2D {
+exports.Image2D = class Image2D extends exports.Node2D {
   resource;
   get currentTexture() {
     return this.resource?.frames[this._frameIndex]?.texture;
@@ -7488,7 +7412,7 @@ exports.Image2D = class Image2D extends exports.Element2D {
     const texture = this.currentTexture;
     return super._repaint(
       batchables.map((batchable, i) => {
-        if ((this._background ? i === 1 : i === 0) && batchable.type === "fill") {
+        if ((this._backgroundImage ? i === 1 : i === 0) && batchable.type === "fill") {
           return {
             ...batchable,
             texture: texture?.valid ? texture : void 0
@@ -7522,7 +7446,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-exports.Lottie2D = class Lottie2D extends exports.Element2D {
+exports.Lottie2D = class Lottie2D extends exports.Node2D {
   duration = 0;
   texture = new Texture(document.createElement("canvas"));
   animation;
@@ -7594,8 +7518,11 @@ var __decorateClass$k = (decorators, target, key, kind) => {
   return result;
 };
 const textStyles = new Set(Object.keys(modernText.textDefaultStyle));
-exports.Text2D = class Text2D extends exports.Element2D {
+exports.Text2D = class Text2D extends exports.Node2D {
   effects;
+  measureDom;
+  fonts;
+  text = new modernText.Text();
   texture = new Texture(document.createElement("canvas"));
   _subTextsCount = 0;
   constructor(options) {
@@ -7606,6 +7533,8 @@ exports.Text2D = class Text2D extends exports.Element2D {
     super._onUpdateProperty(key, value, oldValue);
     switch (key) {
       case "content":
+      case "effects":
+      case "fonts":
       case "split":
         this._updateSplit();
         this.requestRedraw();
@@ -7617,6 +7546,13 @@ exports.Text2D = class Text2D extends exports.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;
@@ -7660,13 +7596,8 @@ exports.Text2D = class Text2D extends exports.Element2D {
     }
   }
   measure() {
-    const result = modernText.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)
@@ -7710,12 +7641,10 @@ exports.Text2D = class Text2D extends exports.Element2D {
       if (onText2DRender) {
         onText2DRender();
       } else {
-        modernText.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();
@@ -7740,6 +7669,12 @@ __decorateClass$k([
 __decorateClass$k([
   property()
 ], exports.Text2D.prototype, "effects", 2);
+__decorateClass$k([
+  protectedProperty()
+], exports.Text2D.prototype, "measureDom", 2);
+__decorateClass$k([
+  protectedProperty()
+], exports.Text2D.prototype, "fonts", 2);
 exports.Text2D = __decorateClass$k([
   customNode("Text2D")
 ], exports.Text2D);
@@ -7754,7 +7689,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-exports.Video2D = class Video2D extends exports.Element2D {
+exports.Video2D = class Video2D extends exports.Node2D {
   texture;
   get duration() {
     return (this.texture?.duration ?? 0) * 1e3;
@@ -8920,7 +8855,7 @@ exports.Audio = __decorateClass$i([
   customNode("Audio")
 ], exports.Audio);
 
-class AudioSpectrum extends exports.Element2D {
+class AudioSpectrum extends exports.Node2D {
   //
 }
 
@@ -8934,7 +8869,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
+exports.AudioWaveform = class AudioWaveform extends exports.Node2D {
   src;
   gap = 0;
   color = "#000000";
@@ -13763,7 +13698,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
       );
     }
   }
@@ -13974,7 +13910,6 @@ exports.Style2D = Style2D;
 exports.Style2DBackgroundModule = Style2DBackgroundModule;
 exports.Style2DFilterModule = Style2DFilterModule;
 exports.Style2DModule = Style2DModule;
-exports.Style2DOffsetModule = Style2DOffsetModule;
 exports.Style2DTextModule = Style2DTextModule;
 exports.Style2DTransformModule = Style2DTransformModule;
 exports.TextLoader = TextLoader;