modern-canvas 0.8.9 → 0.9.0

package/dist/index.cjs

@@ -484,7 +484,7 @@ const TOUCH_TO_POINTER = {
   touchmove: "pointermove",
   touchcancel: "pointercancel"
 };
-class Input extends modernIdoc.EventEmitter {
+class Input extends modernIdoc.Observable {
   /**
    * Current event
    */
@@ -874,167 +874,14 @@ class Input extends modernIdoc.EventEmitter {
 }
 
 let IID = 0;
-class CoreObject extends modernIdoc.EventEmitter {
+class CoreObject extends modernIdoc.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 modernIdoc.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 {
@@ -1132,7 +979,7 @@ class Color {
   }
 }
 
-class Vector extends modernIdoc.EventEmitter {
+class Vector extends modernIdoc.Observable {
   constructor(dim) {
     super();
     this.dim = dim;
@@ -1284,7 +1131,7 @@ class Vector extends modernIdoc.EventEmitter {
   }
 }
 
-class Matrix extends modernIdoc.EventEmitter {
+class Matrix extends modernIdoc.Observable {
   constructor(rows, cols, array) {
     super();
     this.rows = rows;
@@ -2251,6 +2098,7 @@ var __decorateClass$Z = (decorators, target, key, kind) => {
 class MainLoop extends CoreObject {
   _starting = false;
   _nextDeltaTime = 0;
+  _startedProcess;
   get starting() {
     return this._starting;
   }
@@ -2264,7 +2112,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 });
     }
@@ -2283,8 +2134,8 @@ class MainLoop extends CoreObject {
       this.emit("process", delta);
     }
   }
-  free() {
-    super.free();
+  destroy() {
+    super.destroy();
     this.stop();
   }
 }
@@ -2383,7 +2234,7 @@ class WebGLModule {
   }
   reset() {
   }
-  free() {
+  destroy() {
   }
 }
 
@@ -3560,8 +3411,8 @@ ${gl.getShaderInfoLog(shader)}`);
       viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
     };
   }
-  free() {
-    super.free();
+  destroy() {
+    super.destroy();
     this.bind(null);
   }
 }
@@ -4335,8 +4186,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();
@@ -4493,8 +4344,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":
@@ -4515,10 +4366,10 @@ class IndexBuffer extends Resource {
   }
 }
 __decorateClass$Y([
-  modernIdoc.property({ protected: true, default: null })
+  modernIdoc.property({ internal: true, fallback: null })
 ], IndexBuffer.prototype, "data");
 __decorateClass$Y([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
 var __defProp$O = Object.defineProperty;
@@ -4550,8 +4401,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":
@@ -4572,10 +4423,10 @@ class VertexBuffer extends Resource {
   }
 }
 __decorateClass$X([
-  modernIdoc.property({ protected: true, default: null })
+  modernIdoc.property({ internal: true, default: null })
 ], VertexBuffer.prototype, "data");
 __decorateClass$X([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
 var __defProp$N = Object.defineProperty;
@@ -4596,8 +4447,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":
@@ -4945,8 +4796,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":
@@ -5006,7 +4857,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();
     }
@@ -5050,9 +4901,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();
     });
   }
 }
@@ -5070,7 +4921,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));
@@ -5079,7 +4930,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([
@@ -5287,7 +5138,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);
@@ -5300,7 +5151,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);
   }
 }
 
@@ -5402,8 +5253,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;
@@ -5538,7 +5389,7 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
     return this._sourceLoad;
   }
-  free() {
+  destroy() {
     this._setupAutoUpdate();
     const source = this.source;
     if (source) {
@@ -5555,10 +5406,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
   }
 };
 __decorateClass$T([
-  modernIdoc.property({ protected: true, fallback: true })
+  modernIdoc.property({ internal: true, fallback: true })
 ], _VideoTexture.prototype, "autoUpdate");
 __decorateClass$T([
-  modernIdoc.property({ protected: true, fallback: 0 })
+  modernIdoc.property({ internal: true, fallback: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
 
@@ -5752,23 +5603,19 @@ class CanvasContext extends modernPath2d.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) {
@@ -5776,7 +5623,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);
@@ -5786,19 +5633,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];
   }
 }
 
@@ -5939,13 +5794,16 @@ exports.Node = class Node 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();
@@ -6009,9 +5867,6 @@ exports.Node = class Node extends CoreObject {
         return false;
     }
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-  }
   _onTreeEnter(tree) {
     this._treeEnter(tree);
     this.emit("treeEntered", tree);
@@ -6111,7 +5966,7 @@ exports.Node = class Node 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);
@@ -6187,7 +6042,7 @@ exports.Node = class Node 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);
@@ -6231,24 +6086,24 @@ exports.Node = class Node 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);
     });
@@ -6286,6 +6141,10 @@ exports.Node = class Node 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(),
@@ -6295,7 +6154,7 @@ exports.Node = class Node extends CoreObject {
   toJSON() {
     return modernIdoc.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
@@ -6324,19 +6183,19 @@ __decorateClass$S([
   modernIdoc.property({ default: () => ({}) })
 ], exports.Node.prototype, "meta", 2);
 __decorateClass$S([
-  modernIdoc.property({ protected: true, fallback: "inherit" })
+  modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
 __decorateClass$S([
-  modernIdoc.property({ protected: true, fallback: "default" })
+  modernIdoc.property({ internal: true, fallback: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
 __decorateClass$S([
-  modernIdoc.property({ protected: true, fallback: "inherit" })
+  modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
 __decorateClass$S([
-  modernIdoc.property({ protected: true, fallback: "inherit" })
+  modernIdoc.property({ internal: true, fallback: "inherit" })
 ], exports.Node.prototype, "inputMode", 2);
 __decorateClass$S([
-  modernIdoc.property({ protected: true, fallback: "default" })
+  modernIdoc.property({ internal: true, fallback: "default" })
 ], exports.Node.prototype, "internalMode", 2);
 __decorateClass$S([
   modernIdoc.property({ protected: true })
@@ -6422,7 +6281,7 @@ __decorateClass$R([
   modernIdoc.property({ fallback: false })
 ], exports.TimelineNode.prototype, "paused", 2);
 __decorateClass$R([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], exports.TimelineNode.prototype, "insideTimeRange", 2);
 exports.TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
@@ -6463,8 +6322,8 @@ exports.CanvasItem = class CanvasItem extends exports.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;
@@ -6594,10 +6453,10 @@ __decorateClass$Q([
   modernIdoc.property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
 __decorateClass$Q([
-  modernIdoc.property({ protected: true, fallback: true })
+  modernIdoc.property({ internal: true, fallback: true })
 ], exports.CanvasItem.prototype, "visible", 2);
 __decorateClass$Q([
-  modernIdoc.property({ protected: true, fallback: 1 })
+  modernIdoc.property({ internal: true, fallback: 1 })
 ], exports.CanvasItem.prototype, "opacity", 2);
 exports.CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
@@ -6663,8 +6522,8 @@ exports.Viewport = class Viewport extends exports.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":
@@ -6803,8 +6662,8 @@ exports.Effect = class Effect extends exports.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);
@@ -6893,7 +6752,7 @@ exports.Effect = class Effect extends exports.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);
     }
@@ -7173,8 +7032,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;
@@ -7219,20 +7078,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([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], SceneTree.prototype, "processPaused");
 __decorateClass$L([
   modernIdoc.property()
 ], SceneTree.prototype, "backgroundColor");
 __decorateClass$L([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], SceneTree.prototype, "debug");
 
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
@@ -7281,8 +7140,8 @@ exports.Node2D = class Node2D extends exports.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();
@@ -7369,10 +7228,10 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
   }
 };
 __decorateClass$J([
-  modernIdoc.property({ protected: true, fallback: 0 })
+  modernIdoc.property({ internal: true, fallback: 0 })
 ], exports.Node2D.prototype, "rotation", 2);
 __decorateClass$J([
-  modernIdoc.property({ protected: true, fallback: 0 })
+  modernIdoc.property({ internal: true, fallback: 0 })
 ], exports.Node2D.prototype, "globalRotation", 2);
 exports.Node2D = __decorateClass$J([
   customNode("Node2D")
@@ -7499,10 +7358,10 @@ exports.Camera2D = class Camera2D extends exports.Node2D {
   }
 };
 __decorateClass$I([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], exports.Camera2D.prototype, "spaceKey", 2);
 __decorateClass$I([
-  modernIdoc.property({ protected: true, fallback: false })
+  modernIdoc.property({ internal: true, fallback: false })
 ], exports.Camera2D.prototype, "grabbing", 2);
 exports.Camera2D = __decorateClass$I([
   customNode("Camera2D", {
@@ -8888,8 +8747,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":
@@ -8966,8 +8825,8 @@ exports.MaskEffect = class MaskEffect extends exports.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();
@@ -9444,8 +9303,8 @@ class BaseElement2DFill extends CoreObject {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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":
@@ -9552,8 +9411,8 @@ class BaseElement2DBackground extends BaseElement2DFill {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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();
@@ -9580,8 +9439,8 @@ class BaseElement2DForeground extends BaseElement2DFill {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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();
@@ -9608,8 +9467,8 @@ class BaseElement2DOutline extends BaseElement2DFill {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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":
@@ -9677,8 +9536,8 @@ class BaseElement2DShadow extends CoreObject {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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":
@@ -9741,8 +9600,8 @@ class BaseElement2DShape extends CoreObject {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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":
@@ -9848,7 +9707,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);
@@ -9862,8 +9721,8 @@ class BaseElement2DText extends CoreObject {
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.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":
@@ -10055,10 +9914,10 @@ __decorateClass$m([
   modernIdoc.property({ alias: "base.outline" })
 ], BaseElement2DText.prototype, "outline");
 __decorateClass$m([
-  modernIdoc.property({ protected: true, alias: "base.measureDom" })
+  modernIdoc.property({ internal: true, alias: "base.measureDom" })
 ], BaseElement2DText.prototype, "measureDom");
 __decorateClass$m([
-  modernIdoc.property({ protected: true, alias: "base.fonts" })
+  modernIdoc.property({ internal: true, alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -10079,8 +9938,8 @@ exports.BaseElement2D = class BaseElement2D extends exports.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);
@@ -10166,7 +10025,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     }
     return this;
   }
-  _updateStyleProperty(key, value, oldValue, _declaration) {
+  _updateStyleProperty(key, value, oldValue) {
     switch (key) {
       case "rotate":
         this.rotation = this.style.rotate * DEG_TO_RAD;
@@ -10419,7 +10278,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.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);
     }
@@ -10516,8 +10375,8 @@ exports.Element2D = class Element2D extends exports.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);
@@ -10528,8 +10387,8 @@ exports.Element2D = class Element2D extends exports.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);
@@ -10709,7 +10568,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(
@@ -10879,8 +10738,8 @@ exports.FlexElement2D = class FlexElement2D extends exports.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);
@@ -10919,9 +10778,9 @@ exports.FlexElement2D = class FlexElement2D extends exports.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();
     }
@@ -10983,8 +10842,8 @@ exports.Image2D = class Image2D extends exports.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);
@@ -11145,8 +11004,8 @@ exports.Lottie2D = class Lottie2D 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();
@@ -11198,8 +11057,8 @@ class TransformRect2D extends exports.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":
@@ -11260,8 +11119,8 @@ exports.Video2D = class Video2D 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);
@@ -11396,8 +11255,8 @@ exports.Animation = class Animation extends exports.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":
@@ -11409,7 +11268,7 @@ exports.Animation = class Animation extends exports.TimelineNode {
     let targets;
     switch (this.effectMode) {
       case "sibling":
-        targets = this.getParent()?.children.internal.filter((val) => val instanceof exports.CanvasItem) ?? [];
+        targets = this.getParent()?.getChildren(true).filter((val) => val instanceof exports.CanvasItem) ?? [];
         break;
       case "parent":
       default:
@@ -11654,7 +11513,7 @@ exports.Animation = __decorateClass$e([
   })
 ], exports.Animation);
 
-class HTMLAudioContext extends modernIdoc.EventEmitter {
+class HTMLAudioContext extends modernIdoc.Observable {
   static _instance;
   static get instance() {
     if (!this._instance) {
@@ -11693,12 +11552,9 @@ class HTMLAudioContext extends modernIdoc.EventEmitter {
     this.refreshPaused();
     return this.paused;
   }
-  free() {
-    this.removeAllListeners();
-  }
 }
 
-class HTMLSound extends modernIdoc.EventEmitter {
+class HTMLSound extends modernIdoc.Observable {
   static PADDING = 0.1;
   _source = null;
   _audio = null;
@@ -11904,9 +11760,9 @@ class HTMLSound extends modernIdoc.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;
@@ -11969,7 +11825,7 @@ class HTMLAudio {
   }
 }
 
-class AudioPipeline extends modernIdoc.EventEmitter {
+class AudioPipeline extends modernIdoc.Observable {
   constructor(_input, _output) {
     super();
     this._input = _input;
@@ -12193,7 +12049,7 @@ class WebAudioContext extends AudioPipeline {
   }
 }
 
-class WebSound extends modernIdoc.EventEmitter {
+class WebSound extends modernIdoc.Observable {
   _audio = null;
   _sourceNode = null;
   _gain = null;
@@ -12425,8 +12281,8 @@ class WebSound extends modernIdoc.EventEmitter {
       Ticker.on(this._updateListener);
     }
   }
-  free() {
-    this.removeAllListeners();
+  destroy() {
+    super.destroy();
     this._stop();
     this._gain?.disconnect();
     this._gain = null;
@@ -12622,8 +12478,8 @@ exports.Audio = class Audio extends exports.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();
@@ -12710,7 +12566,7 @@ exports.Audio = class Audio extends exports.TimelineNode {
     this._recycleSound(sound);
   };
   _recycleSound(sound) {
-    sound.free();
+    sound.destroy();
     if (!exports.Audio._soundPool.includes(sound)) {
       exports.Audio._soundPool.push(sound);
     }
@@ -12770,8 +12626,8 @@ exports.AudioWaveform = class AudioWaveform extends exports.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);
@@ -12854,10 +12710,10 @@ __decorateClass$c([
   modernIdoc.property()
 ], exports.AudioWaveform.prototype, "src", 2);
 __decorateClass$c([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: 0 })
 ], exports.AudioWaveform.prototype, "gap", 2);
 __decorateClass$c([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "#000000" })
 ], exports.AudioWaveform.prototype, "color", 2);
 exports.AudioWaveform = __decorateClass$c([
   customNode("AudioWaveform")
@@ -12897,8 +12753,8 @@ exports.Control = class Control extends exports.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":
@@ -12931,8 +12787,8 @@ exports.Range = class Range extends exports.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":
@@ -12988,8 +12844,8 @@ exports.Ruler = class Ruler extends exports.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":
@@ -13004,8 +12860,8 @@ exports.Ruler = class Ruler extends exports.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":
@@ -13172,8 +13028,8 @@ exports.ScrollBar = class ScrollBar extends exports.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":
@@ -13292,8 +13148,8 @@ exports.Scaler = class Scaler extends exports.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":
@@ -13941,8 +13797,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;
@@ -14061,8 +13917,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();
@@ -14159,8 +14015,8 @@ exports.CanvasItemEditor = class CanvasItemEditor extends exports.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;
@@ -14426,10 +14282,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();