modern-canvas 0.8.9 → 0.9.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineProperty, EventEmitter, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, isColorFillObject, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText, normalizeTextContent } from 'modern-idoc';
+import { defineProperty, Observable, Reactivable, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, isColorFillObject, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText, normalizeTextContent } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1, BoundingBox } from 'modern-path2d';
@@ -478,7 +478,7 @@ const TOUCH_TO_POINTER = {
   touchmove: "pointermove",
   touchcancel: "pointercancel"
 };
-class Input extends EventEmitter {
+class Input extends Observable {
   /**
    * Current event
    */
@@ -868,167 +868,14 @@ class Input extends EventEmitter {
 }
 
 let IID = 0;
-class CoreObject extends EventEmitter {
+class CoreObject extends Reactivable {
   instanceId = ++IID;
-  _propertyAccessor;
-  _properties = /* @__PURE__ */ new Map();
-  _updatedProperties = /* @__PURE__ */ new Map();
-  _changedProperties = /* @__PURE__ */ new Set();
-  _updatingPromise = Promise.resolve();
-  _updating = false;
-  useCustomPropertyAccessor(accessor) {
-    this._propertyAccessor = accessor;
-    this.getPropertyDeclarations().forEach((declaration, key) => {
-      const newValue = accessor.get(key, () => void 0);
-      const oldValue = this._properties.get(key);
-      if (newValue === void 0) {
-        if (oldValue !== void 0) {
-          accessor.set(key, oldValue);
-        }
-      } else if (newValue !== oldValue) {
-        if (declaration.alias && declaration.alias !== key) {
-          this.setProperty(key, newValue);
-        } else {
-          this._properties.set(key, newValue);
-        }
-        this._updateProperty(key, newValue, oldValue, declaration);
-        this.emit("updateProperty", key, newValue, oldValue, declaration);
-      }
-    });
-    return this;
-  }
-  getter(key, context) {
-    if (context?.declaration.protected) {
-      return this[context.internalKey];
-    } else {
-      return this._propertyAccessor ? this._propertyAccessor.get(key, () => this._properties.get(key)) : this._properties.get(key);
-    }
-  }
-  setter(key, value, context) {
-    if (context?.declaration.protected) {
-      this[context.internalKey] = value;
-    } else {
-      if (this._propertyAccessor) {
-        this._propertyAccessor.set(key, value);
-      }
-      this._properties.set(key, value);
-    }
+  _nextTick() {
+    return nextTick();
   }
   equal(target) {
     return Boolean(target && this.instanceId === target.instanceId);
   }
-  async _enqueueUpdate() {
-    this._updating = true;
-    try {
-      await this._updatingPromise;
-    } catch (e) {
-      Promise.reject(e);
-    }
-    await nextTick();
-    if (!this._updating)
-      return;
-    this.update();
-    this._updating = false;
-  }
-  update() {
-    this._update(this._updatedProperties);
-    this._updatedProperties = /* @__PURE__ */ new Map();
-  }
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  _update(changed) {
-  }
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  _updateProperty(key, value, oldValue, declaration) {
-  }
-  isDirty(key) {
-    return this._updatedProperties.has(key);
-  }
-  getPropertyDeclarations() {
-    return getDeclarations(this.constructor);
-  }
-  getPropertyDeclaration(key) {
-    return this.getPropertyDeclarations().get(key);
-  }
-  getProperty(key) {
-    return this[key];
-  }
-  setProperty(key, value) {
-    this[key] = value;
-    return this;
-  }
-  getProperties(keys) {
-    const properties = {};
-    for (const [name, property] of this.getPropertyDeclarations()) {
-      if (!property.protected && !property.alias && (!keys || keys.includes(name))) {
-        properties[name] = this.getProperty(name);
-      }
-    }
-    return properties;
-  }
-  setProperties(properties) {
-    if (properties && typeof properties === "object") {
-      for (const [name] of this.getPropertyDeclarations()) {
-        if (name in properties) {
-          this.setProperty(name, properties[name]);
-        }
-      }
-    }
-    return this;
-  }
-  resetProperties() {
-    for (const [name, property] of this.getPropertyDeclarations()) {
-      this.setProperty(
-        name,
-        typeof property.fallback === "function" ? property.fallback() : property.fallback
-      );
-    }
-    return this;
-  }
-  onUpdateProperty(key, newValue, oldValue, declaration) {
-    this.requestUpdate(key, newValue, oldValue, declaration);
-  }
-  requestUpdate(key, newValue, oldValue, declaration) {
-    if (key !== void 0) {
-      if (!Object.is(newValue, oldValue)) {
-        this._updatedProperties.set(key, oldValue);
-        this._changedProperties.add(key);
-        declaration ??= this.getPropertyDeclaration(key);
-        this._updateProperty(key, newValue, oldValue, declaration);
-        this.emit("updateProperty", key, newValue, oldValue, declaration);
-      } else {
-        return;
-      }
-    }
-    if (!this._updating) {
-      this._updatingPromise = this._enqueueUpdate();
-    }
-  }
-  toJSON() {
-    const json = {};
-    this._properties.forEach((value, key) => {
-      if (value === void 0) {
-        return;
-      }
-      if (value && typeof value === "object") {
-        if ("toJSON" in value && typeof value.toJSON === "function") {
-          json[key] = value.toJSON();
-        } else if (Array.isArray(value)) {
-          json[key] = [...value];
-        } else {
-          json[key] = { ...value };
-        }
-      } else {
-        json[key] = value;
-      }
-    });
-    return json;
-  }
-  clone() {
-    return new this.constructor(this.toJSON());
-  }
-  free() {
-    this.removeAllListeners();
-  }
 }
 
 class RefCounted extends CoreObject {
@@ -1126,7 +973,7 @@ class Color {
   }
 }
 
-class Vector extends EventEmitter {
+class Vector extends Observable {
   constructor(dim) {
     super();
     this.dim = dim;
@@ -1278,7 +1125,7 @@ class Vector extends EventEmitter {
   }
 }
 
-class Matrix extends EventEmitter {
+class Matrix extends Observable {
   constructor(rows, cols, array) {
     super();
     this.rows = rows;
@@ -2245,6 +2092,7 @@ var __decorateClass$Z = (decorators, target, key, kind) => {
 class MainLoop extends CoreObject {
   _starting = false;
   _nextDeltaTime = 0;
+  _startedProcess;
   get starting() {
     return this._starting;
   }
@@ -2258,7 +2106,10 @@ class MainLoop extends CoreObject {
   start(process) {
     if (!this._starting) {
       this._starting = true;
-      this.off("process");
+      if (this._startedProcess) {
+        this.off("process", this._startedProcess);
+      }
+      this._startedProcess = process;
       this.on("process", process);
       Ticker.on(this._onNextTick, { sort: 0 });
     }
@@ -2277,8 +2128,8 @@ class MainLoop extends CoreObject {
       this.emit("process", delta);
     }
   }
-  free() {
-    super.free();
+  destroy() {
+    super.destroy();
     this.stop();
   }
 }
@@ -2377,7 +2228,7 @@ class WebGLModule {
   }
   reset() {
   }
-  free() {
+  destroy() {
   }
 }
 
@@ -3554,8 +3405,8 @@ ${gl.getShaderInfoLog(shader)}`);
       viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
     };
   }
-  free() {
-    super.free();
+  destroy() {
+    super.destroy();
     this.bind(null);
   }
 }
@@ -4329,8 +4180,8 @@ class WebGLRenderer extends Renderer {
   flush() {
     this._modules.forEach((module) => module.flush());
   }
-  free() {
-    this._modules.forEach((module) => module.free());
+  destroy() {
+    this._modules.forEach((module) => module.destroy());
     this.view?.removeEventListener("webglcontextlost", this._onContextLost, false);
     this.view?.removeEventListener("webglcontextrestored", this._onContextRestored, false);
     this.extensions.loseContext?.loseContext();
@@ -4487,8 +4338,8 @@ class IndexBuffer extends Resource {
       return renderer.buffer.create(this._glBufferOptions());
     });
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "data":
       case "dynamic":
@@ -4509,10 +4360,10 @@ class IndexBuffer extends Resource {
   }
 }
 __decorateClass$Y([
-  property({ protected: true, default: null })
+  property({ internal: true, fallback: null })
 ], IndexBuffer.prototype, "data");
 __decorateClass$Y([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
 var __defProp$O = Object.defineProperty;
@@ -4544,8 +4395,8 @@ class VertexBuffer extends Resource {
       return renderer.buffer.create(this._glBufferOptions());
     });
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "data":
       case "dynamic":
@@ -4566,10 +4417,10 @@ class VertexBuffer extends Resource {
   }
 }
 __decorateClass$X([
-  property({ protected: true, default: null })
+  property({ internal: true, default: null })
 ], VertexBuffer.prototype, "data");
 __decorateClass$X([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
 var __defProp$N = Object.defineProperty;
@@ -4590,8 +4441,8 @@ class VertexAttribute extends Resource {
       ...options
     });
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "buffer":
       case "size":
@@ -4939,8 +4790,8 @@ class Texture2D extends Resource {
       return renderer.texture.create(this._glTextureOptions(renderer, options));
     });
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "height":
@@ -5000,7 +4851,7 @@ class Texture2D extends Resource {
   inactivate(renderer) {
     renderer.texture.unbind(this._glTexture(renderer));
   }
-  free() {
+  destroy() {
     if (SUPPORTS_IMAGE_BITMAP && this.source instanceof ImageBitmap) {
       this.source.close();
     }
@@ -5044,9 +4895,9 @@ class AnimatedTexture extends Resource {
     this.duration = this.frames.reduce((duration, frame) => frame.duration + duration, 0);
     return this;
   }
-  free() {
+  destroy() {
     this.frames.forEach((frame) => {
-      frame.texture.free();
+      frame.texture.destroy();
     });
   }
 }
@@ -5064,7 +4915,7 @@ class CanvasTexture extends Texture2D {
   constructor(source = document.createElement("canvas")) {
     super(source);
   }
-  _updateProperty(key, value, oldValue, declaration) {
+  _updateProperty(key, value, oldValue) {
     switch (key) {
       case "width":
         this.source.width = Math.max(1, Math.ceil(value * this.pixelRatio));
@@ -5073,7 +4924,7 @@ class CanvasTexture extends Texture2D {
         this.source.height = Math.max(1, Math.ceil(value * this.pixelRatio));
         break;
     }
-    super._updateProperty(key, value, oldValue, declaration);
+    super._updateProperty(key, value, oldValue);
   }
 }
 __decorateClass$U([
@@ -5281,7 +5132,7 @@ class PixelsTexture extends Texture2D {
     }
     super(source);
   }
-  _updateProperty(key, value, oldValue, declaration) {
+  _updateProperty(key, value, oldValue) {
     switch (key) {
       case "width":
         this.source.width = Math.round(this.width * this.pixelRatio);
@@ -5294,7 +5145,7 @@ class PixelsTexture extends Texture2D {
         this.source.height = Math.round(this.height * this.pixelRatio);
         break;
     }
-    super._updateProperty(key, value, oldValue, declaration);
+    super._updateProperty(key, value, oldValue);
   }
 }
 
@@ -5396,8 +5247,8 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
     this._setupAutoUpdate();
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "fps":
         this._spf = value ? Math.floor(1e3 / value) : 0;
@@ -5532,7 +5383,7 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
     return this._sourceLoad;
   }
-  free() {
+  destroy() {
     this._setupAutoUpdate();
     const source = this.source;
     if (source) {
@@ -5549,10 +5400,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
   }
 };
 __decorateClass$T([
-  property({ protected: true, fallback: true })
+  property({ internal: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
 __decorateClass$T([
-  property({ protected: true, fallback: 0 })
+  property({ internal: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
 
@@ -5746,23 +5597,19 @@ class CanvasContext extends Path2D {
   }
 }
 
-class Children extends Array {
+class Children {
   front = [];
+  default = [];
   back = [];
   get internal() {
-    return [
-      ...this.front,
-      ...this,
-      ...this.back
-    ];
+    return this.getInternal();
   }
   constructor(...items) {
-    super();
     this.set(items);
   }
   set(items) {
     this.front.length = 0;
-    this.length = 0;
+    this.default.length = 0;
     this.back.length = 0;
     items.forEach((item) => {
       switch (item.internalMode) {
@@ -5770,7 +5617,7 @@ class Children extends Array {
           this.front.push(item);
           break;
         case "default":
-          this.push(item);
+          this.default.push(item);
           break;
         case "back":
           this.back.push(item);
@@ -5780,19 +5627,27 @@ class Children extends Array {
     return this;
   }
   getInternal(includeInternal) {
-    switch (includeInternal) {
-      case "front":
-        return this.front;
-      case "default":
-        return this;
-      case "back":
-        return this.back;
-      default:
-        throw new Error(`Unknown internal mode: ${includeInternal}`);
+    if (includeInternal) {
+      switch (includeInternal) {
+        case "front":
+          return this.front;
+        case "default":
+          return this.default;
+        case "back":
+          return this.back;
+        default:
+          throw new Error(`Unknown internal mode: ${includeInternal}`);
+      }
+    } else {
+      return [
+        ...this.front,
+        ...this.default,
+        ...this.back
+      ];
     }
   }
   toJSON() {
-    return [...this];
+    return [...this.default];
   }
 }
 
@@ -5933,13 +5788,16 @@ let Node = class extends CoreObject {
   /** Children */
   _children = new Children();
   get children() {
-    return this._children;
+    return this._children.default;
   }
   set children(value) {
-    value instanceof Children ? this._children = value : this._children.set(value);
+    this._children.set(value);
+  }
+  getChildren(internalMode = "default") {
+    return this._children.getInternal(internalMode === true ? void 0 : internalMode);
   }
   getChild(index = 0) {
-    return this._children[index];
+    return this.children[index];
   }
   get siblingIndex() {
     return this.getIndex();
@@ -6003,9 +5861,6 @@ let Node = class extends CoreObject {
         return false;
     }
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-  }
   _onTreeEnter(tree) {
     this._treeEnter(tree);
     this.emit("treeEntered", tree);
@@ -6105,7 +5960,7 @@ let Node = class extends CoreObject {
     }
   }
   getIndex() {
-    return this._parent?.children.getInternal(this.internalMode).indexOf(this) ?? 0;
+    return this._parent?.getChildren(this.internalMode).indexOf(this) ?? 0;
   }
   getNode(path) {
     return this._children.internal.find((child) => child.name === path);
@@ -6181,7 +6036,7 @@ let Node = class extends CoreObject {
         this._children.front.push(node);
         break;
       case "default":
-        this._children.push(node);
+        this._children.default.push(node);
         break;
       case "back":
         this._children.back.push(node);
@@ -6225,24 +6080,24 @@ let Node = class extends CoreObject {
   removeChild(child) {
     const index = child.getIndex();
     if (this.equal(child.parent) && index > -1) {
-      this._children.getInternal(child.internalMode).splice(index, 1);
+      this.getChildren(child.internalMode).splice(index, 1);
       child.setParent(void 0);
       this.emit("removeChild", child, index);
     }
     return child;
   }
   removeChildren() {
-    this._children.forEach((child) => this.removeChild(child));
+    this.children.forEach((child) => this.removeChild(child));
   }
   remove() {
     this._parent?.removeChild(this);
   }
   forEachChild(callbackfn) {
-    this._children.forEach(callbackfn);
+    this.children.forEach(callbackfn);
     return this;
   }
   forEachDescendant(callbackfn) {
-    this._children.forEach((child) => {
+    this.children.forEach((child) => {
       callbackfn(child);
       child.forEachDescendant(callbackfn);
     });
@@ -6280,6 +6135,10 @@ let Node = class extends CoreObject {
   // eslint-disable-next-line unused-imports/no-unused-vars
   _render(renderer) {
   }
+  destroy() {
+    super.destroy();
+    this._children.internal.forEach((node) => this.removeChild(node));
+  }
   clone() {
     return new this.constructor(
       this.toJSON(),
@@ -6289,7 +6148,7 @@ let Node = class extends CoreObject {
   toJSON() {
     return clearUndef({
       ...super.toJSON(),
-      children: this._children.length ? [...this._children.map((child) => child.toJSON())] : void 0,
+      children: this.children.length ? [...this.children.map((child) => child.toJSON())] : void 0,
       meta: {
         ...this.meta,
         inCanvasIs: this.is
@@ -6318,19 +6177,19 @@ __decorateClass$S([
   property({ default: () => ({}) })
 ], Node.prototype, "meta", 2);
 __decorateClass$S([
-  property({ protected: true, fallback: "inherit" })
+  property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "processMode", 2);
 __decorateClass$S([
-  property({ protected: true, fallback: "default" })
+  property({ internal: true, fallback: "default" })
 ], Node.prototype, "processSortMode", 2);
 __decorateClass$S([
-  property({ protected: true, fallback: "inherit" })
+  property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "renderMode", 2);
 __decorateClass$S([
-  property({ protected: true, fallback: "inherit" })
+  property({ internal: true, fallback: "inherit" })
 ], Node.prototype, "inputMode", 2);
 __decorateClass$S([
-  property({ protected: true, fallback: "default" })
+  property({ internal: true, fallback: "default" })
 ], Node.prototype, "internalMode", 2);
 __decorateClass$S([
   property({ protected: true })
@@ -6416,7 +6275,7 @@ __decorateClass$R([
   property({ fallback: false })
 ], TimelineNode.prototype, "paused", 2);
 __decorateClass$R([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], TimelineNode.prototype, "insideTimeRange", 2);
 TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
@@ -6457,8 +6316,8 @@ let CanvasItem = class extends TimelineNode {
     super();
     this.setProperties(properties).append(nodes);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "modulate":
         this._modulate.value = value;
@@ -6588,10 +6447,10 @@ __decorateClass$Q([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
 __decorateClass$Q([
-  property({ protected: true, fallback: true })
+  property({ internal: true, fallback: true })
 ], CanvasItem.prototype, "visible", 2);
 __decorateClass$Q([
-  property({ protected: true, fallback: 1 })
+  property({ internal: true, fallback: 1 })
 ], CanvasItem.prototype, "opacity", 2);
 CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
@@ -6657,8 +6516,8 @@ let Viewport = class extends Node {
       );
     });
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "x":
       case "y":
@@ -6797,8 +6656,8 @@ let Effect = class extends TimelineNode {
     this._onNodeProcessed = this._onNodeProcessed.bind(this);
     this.setProperties(properties).append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "glsl": {
         const material = new EffectMaterial(value);
@@ -6887,7 +6746,7 @@ let Effect = class extends TimelineNode {
     calls.splice(start, 0, renderStack.createCall(this));
   }
   _processChildren() {
-    if (this._children.length) {
+    if (this.children.length) {
       super.emit("process");
       this._tree?.renderStack.push(this);
     }
@@ -7167,8 +7026,8 @@ class SceneTree extends MainLoop {
     super();
     this.timeline = timeline.setTree(this);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "backgroundColor":
         this._backgroundColor.value = value;
@@ -7213,20 +7072,20 @@ class SceneTree extends MainLoop {
     QuadUvGeometry.draw(renderer);
     renderer.texture.unbind(texture);
   }
-  free() {
-    super.free();
-    this.root.children.internal.forEach((node) => this.root.removeChild(node));
+  destroy() {
+    super.destroy();
+    this.root.destroy();
     this.input.removeEventListeners();
   }
 }
 __decorateClass$L([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], SceneTree.prototype, "processPaused");
 __decorateClass$L([
   property()
 ], SceneTree.prototype, "backgroundColor");
 __decorateClass$L([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], SceneTree.prototype, "debug");
 
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
@@ -7275,8 +7134,8 @@ let Node2D = class extends CanvasItem {
     super();
     this.setProperties(properties).append(nodes);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "rotation":
         this.updateGlobalTransform();
@@ -7363,10 +7222,10 @@ let Node2D = class extends CanvasItem {
   }
 };
 __decorateClass$J([
-  property({ protected: true, fallback: 0 })
+  property({ internal: true, fallback: 0 })
 ], Node2D.prototype, "rotation", 2);
 __decorateClass$J([
-  property({ protected: true, fallback: 0 })
+  property({ internal: true, fallback: 0 })
 ], Node2D.prototype, "globalRotation", 2);
 Node2D = __decorateClass$J([
   customNode("Node2D")
@@ -7493,10 +7352,10 @@ let Camera2D = class extends Node2D {
   }
 };
 __decorateClass$I([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], Camera2D.prototype, "spaceKey", 2);
 __decorateClass$I([
-  property({ protected: true, fallback: false })
+  property({ internal: true, fallback: false })
 ], Camera2D.prototype, "grabbing", 2);
 Camera2D = __decorateClass$I([
   customNode("Camera2D", {
@@ -8882,8 +8741,8 @@ void main() {
     this.setProperties(properties).append(children);
     this._generateKernels();
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "quality":
       case "strength":
@@ -8960,8 +8819,8 @@ let MaskEffect = class extends Effect {
       this.texture = await assets.texture.load(this.src);
     }
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "src":
         this.load();
@@ -9438,8 +9297,8 @@ class BaseElement2DFill extends CoreObject {
       isNone(properties) ? void 0 : normalizeFill(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "color":
       case "cropRect":
@@ -9546,8 +9405,8 @@ class BaseElement2DBackground extends BaseElement2DFill {
       isNone(properties) ? void 0 : normalizeBackground(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "fillWithShape":
         this.parent.requestRedraw();
@@ -9574,8 +9433,8 @@ class BaseElement2DForeground extends BaseElement2DFill {
       isNone(properties) ? void 0 : normalizeForeground(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "fillWithShape":
         this.parent.requestRedraw();
@@ -9602,8 +9461,8 @@ class BaseElement2DOutline extends BaseElement2DFill {
       isNone(properties) ? void 0 : normalizeOutline(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "style":
@@ -9671,8 +9530,8 @@ class BaseElement2DShadow extends CoreObject {
       isNone(properties) ? void 0 : normalizeShadow(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "color":
       case "blur":
@@ -9735,8 +9594,8 @@ class BaseElement2DShape extends CoreObject {
       isNone(properties) ? void 0 : normalizeShape(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "svg":
       case "paths":
@@ -9842,7 +9701,7 @@ class BaseElement2DText extends CoreObject {
         case "effects":
         case "fill":
         case "outline":
-          this.setter(args[0], args[1]);
+          this.setProperty(args[0], args[1]);
           break;
       }
       this._updateProperty(...args);
@@ -9856,8 +9715,8 @@ class BaseElement2DText extends CoreObject {
       isNone(properties) ? void 0 : normalizeText(properties)
     );
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "enabled":
       case "effects":
@@ -10049,10 +9908,10 @@ __decorateClass$m([
   property({ alias: "base.outline" })
 ], BaseElement2DText.prototype, "outline");
 __decorateClass$m([
-  property({ protected: true, alias: "base.measureDom" })
+  property({ internal: true, alias: "base.measureDom" })
 ], BaseElement2DText.prototype, "measureDom");
 __decorateClass$m([
-  property({ protected: true, alias: "base.fonts" })
+  property({ internal: true, alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -10073,8 +9932,8 @@ let BaseElement2D = class extends Node2D {
   }
   set style(style) {
     const cb = (...args) => {
-      this.emit("updateStyleProperty", ...args);
-      this._updateStyleProperty(args[0], args[1], args[2], args[3]);
+      this.emit("updateStyleProperty", args[0], args[1], args[2]);
+      this._updateStyleProperty(args[0], args[1], args[2]);
     };
     style.on("updateProperty", cb);
     this._style?.off("updateProperty", cb);
@@ -10160,7 +10019,7 @@ let BaseElement2D = class extends Node2D {
     }
     return this;
   }
-  _updateStyleProperty(key, value, oldValue, _declaration) {
+  _updateStyleProperty(key, value, oldValue) {
     switch (key) {
       case "rotate":
         this.rotation = this.style.rotate * DEG_TO_RAD;
@@ -10413,7 +10272,7 @@ let BaseElement2D = class extends Node2D {
     return this.style.pointerEvents !== "none";
   }
   input(event, key) {
-    const array = this._children.internal;
+    const array = this.getChildren(true);
     for (let i = array.length - 1; i >= 0; i--) {
       array[i].input(event, key);
     }
@@ -10510,8 +10369,8 @@ let Element2D = class extends BaseElement2D {
   }
   set style(style) {
     const cb = (...args) => {
-      this.emit("updateStyleProperty", ...args);
-      this._updateStyleProperty(args[0], args[1], args[2], args[3]);
+      this.emit("updateStyleProperty", args[0], args[1], args[2]);
+      this._updateStyleProperty(args[0], args[1], args[2]);
     };
     style.on("updateProperty", cb);
     this._style?.off("updateProperty", cb);
@@ -10522,8 +10381,8 @@ let Element2D = class extends BaseElement2D {
     this.style = new Element2DStyle();
     this.setProperties(properties).append(nodes);
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "left":
         this.position.x = Number(value);
@@ -10703,7 +10562,7 @@ class FlexLayout {
     return this._node.getComputedLayout();
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
-  updateStyleProperty(key, value, oldValue, declaration) {
+  updateStyleProperty(key, value, oldValue) {
     switch (key) {
       case "alignContent":
         this._node.setAlignContent(
@@ -10873,8 +10732,8 @@ let FlexElement2D = class extends BaseElement2D {
   }
   set style(style) {
     const cb = (...args) => {
-      this.emit("updateStyleProperty", ...args);
-      this._updateStyleProperty(args[0], args[1], args[2], args[3]);
+      this.emit("updateStyleProperty", args[0], args[1], args[2]);
+      this._updateStyleProperty(args[0], args[1], args[2]);
     };
     style.on("updateProperty", cb);
     this._style?.off("updateProperty", cb);
@@ -10913,9 +10772,9 @@ let FlexElement2D = class extends BaseElement2D {
       oldParent._layout._node.removeChild(this._layout._node);
     }
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
-    this._layout.updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
+    this._layout.updateStyleProperty(key, value, oldValue);
     if (this._layout._node.isDirty()) {
       this.requestRelayout();
     }
@@ -10977,8 +10836,8 @@ let Image2D = class extends Element2D {
     this.setProperties(properties);
     this.append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "src":
         this._wait = this._load(value);
@@ -11139,8 +10998,8 @@ let Lottie2D = class extends TextureRect2D {
     this.setProperties(properties);
     this.append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "src":
         this._load();
@@ -11192,8 +11051,8 @@ class TransformRect2D extends Element2D {
     super();
     this.setProperties(properties).append(nodes);
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "height":
@@ -11254,8 +11113,8 @@ let Video2D = class extends TextureRect2D {
     this.setProperties(properties);
     this.append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "src":
         this._wait = this._load(value);
@@ -11390,8 +11249,8 @@ let Animation = class extends TimelineNode {
       this.commitStyles();
     }
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "effectMode":
       case "keyframes":
@@ -11403,7 +11262,7 @@ let Animation = class extends TimelineNode {
     let targets;
     switch (this.effectMode) {
       case "sibling":
-        targets = this.getParent()?.children.internal.filter((val) => val instanceof CanvasItem) ?? [];
+        targets = this.getParent()?.getChildren(true).filter((val) => val instanceof CanvasItem) ?? [];
         break;
       case "parent":
       default:
@@ -11648,7 +11507,7 @@ Animation = __decorateClass$e([
   })
 ], Animation);
 
-class HTMLAudioContext extends EventEmitter {
+class HTMLAudioContext extends Observable {
   static _instance;
   static get instance() {
     if (!this._instance) {
@@ -11687,12 +11546,9 @@ class HTMLAudioContext extends EventEmitter {
     this.refreshPaused();
     return this.paused;
   }
-  free() {
-    this.removeAllListeners();
-  }
 }
 
-class HTMLSound extends EventEmitter {
+class HTMLSound extends Observable {
   static PADDING = 0.1;
   _source = null;
   _audio = null;
@@ -11898,9 +11754,9 @@ class HTMLSound extends EventEmitter {
     this.emit("progress", 1, this._duration);
     this.emit("end", this);
   }
-  free() {
+  destroy() {
     Ticker.off(this._onUpdate);
-    this.removeAllListeners();
+    super.destroy();
     const source = this._source;
     if (source) {
       source.onended = null;
@@ -11963,7 +11819,7 @@ class HTMLAudio {
   }
 }
 
-class AudioPipeline extends EventEmitter {
+class AudioPipeline extends Observable {
   constructor(_input, _output) {
     super();
     this._input = _input;
@@ -12187,7 +12043,7 @@ class WebAudioContext extends AudioPipeline {
   }
 }
 
-class WebSound extends EventEmitter {
+class WebSound extends Observable {
   _audio = null;
   _sourceNode = null;
   _gain = null;
@@ -12419,8 +12275,8 @@ class WebSound extends EventEmitter {
       Ticker.on(this._updateListener);
     }
   }
-  free() {
-    this.removeAllListeners();
+  destroy() {
+    super.destroy();
     this._stop();
     this._gain?.disconnect();
     this._gain = null;
@@ -12616,8 +12472,8 @@ let Audio = class extends TimelineNode {
     super();
     this.src = src;
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "paused":
         this.refreshPaused();
@@ -12704,7 +12560,7 @@ let Audio = class extends TimelineNode {
     this._recycleSound(sound);
   };
   _recycleSound(sound) {
-    sound.free();
+    sound.destroy();
     if (!Audio._soundPool.includes(sound)) {
       Audio._soundPool.push(sound);
     }
@@ -12764,8 +12620,8 @@ let AudioWaveform = class extends Element2D {
     super();
     this.setProperties(options);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "src":
         this._loadSrc(value);
@@ -12848,10 +12704,10 @@ __decorateClass$c([
   property()
 ], AudioWaveform.prototype, "src", 2);
 __decorateClass$c([
-  property()
+  property({ fallback: 0 })
 ], AudioWaveform.prototype, "gap", 2);
 __decorateClass$c([
-  property()
+  property({ fallback: "#000000" })
 ], AudioWaveform.prototype, "color", 2);
 AudioWaveform = __decorateClass$c([
   customNode("AudioWaveform")
@@ -12891,8 +12747,8 @@ let Control = class extends Element2D {
     super._input(event, key);
     this._guiInput(event, key);
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "height":
@@ -12925,8 +12781,8 @@ let Range = class extends Control {
     super();
     this.setProperties(properties).append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "allowGreater":
       case "allowLesser":
@@ -12982,8 +12838,8 @@ let Ruler = class extends Control {
     this.setProperties(properties);
     this.append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "offsetX":
       case "offsetY":
@@ -12998,8 +12854,8 @@ let Ruler = class extends Control {
         break;
     }
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "height":
@@ -13166,8 +13022,8 @@ let ScrollBar = class extends Range {
     super();
     this.setProperties(properties).append(children);
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "width":
       case "height":
@@ -13286,8 +13142,8 @@ let Scaler = class extends Node {
     this.setProperties(properties);
     this.append(children);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
     switch (key) {
       case "translateY":
       case "translateX":
@@ -13935,8 +13791,8 @@ class Assets {
   _handled = /* @__PURE__ */ new Map();
   _gc = SUPPORTS_WEAK_REF ? new FinalizationRegistry((id) => {
     const ref = this.get(id);
-    if (ref && "free" in ref) {
-      ref.free();
+    if (ref && "destroy" in ref) {
+      ref.destroy();
     }
     this._handled.delete(id);
   }) : void 0;
@@ -14055,8 +13911,8 @@ class Assets {
   gc() {
     this._handled.forEach((_, id) => {
       const ref = this.get(id);
-      if (ref && "free" in ref) {
-        ref.free();
+      if (ref && "destroy" in ref) {
+        ref.destroy();
       }
     });
     this._handled.clear();
@@ -14153,8 +14009,8 @@ let CanvasItemEditor = class extends Control {
     this._onPointerup = this._onPointerup.bind(this);
     this.append(this.ruler);
   }
-  _updateStyleProperty(key, value, oldValue, declaration) {
-    super._updateStyleProperty(key, value, oldValue, declaration);
+  _updateStyleProperty(key, value, oldValue) {
+    super._updateStyleProperty(key, value, oldValue);
     switch (key) {
       case "width":
         this.drawboard.style.left = (this.size.width - this.drawboard.size.width) / 2;
@@ -14420,10 +14276,10 @@ class Engine extends SceneTree {
       this._render(this.renderer);
     });
   }
-  free() {
-    super.free();
+  destroy() {
+    super.destroy();
     this.enableAutoResize(false);
-    this.renderer.free();
+    this.renderer.destroy();
   }
   toPixels() {
     return this.renderer.toPixels();