modern-canvas 0.8.10 → 0.9.1

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;
 
@@ -5751,11 +5602,7 @@ class Children {
   default = [];
   back = [];
   get internal() {
-    return [
-      ...this.front,
-      ...this.default,
-      ...this.back
-    ];
+    return this.getInternal();
   }
   constructor(...items) {
     this.set(items);
@@ -5780,15 +5627,23 @@ class Children {
     return this;
   }
   getInternal(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}`);
+    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() {
@@ -5938,8 +5793,8 @@ let Node = class extends CoreObject {
   set children(value) {
     this._children.set(value);
   }
-  getChildren(includeInternal) {
-    return this._children.getInternal(includeInternal);
+  getChildren(internalMode = "default") {
+    return this._children.getInternal(internalMode === true ? void 0 : internalMode);
   }
   getChild(index = 0) {
     return this.children[index];
@@ -6006,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);
@@ -6283,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(),
@@ -6321,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 })
@@ -6419,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")
@@ -6460,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;
@@ -6591,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")
@@ -6660,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":
@@ -6800,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);
@@ -7170,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;
@@ -7216,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;
@@ -7278,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();
@@ -7366,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")
@@ -7496,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", {
@@ -8885,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":
@@ -8963,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();
@@ -9441,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":
@@ -9549,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();
@@ -9577,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();
@@ -9605,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":
@@ -9674,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":
@@ -9738,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":
@@ -9845,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);
@@ -9859,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":
@@ -10052,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;
@@ -10076,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);
@@ -10163,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;
@@ -10416,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);
     }
@@ -10513,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);
@@ -10525,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);
@@ -10706,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(
@@ -10876,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);
@@ -10916,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();
     }
@@ -10980,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);
@@ -11142,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();
@@ -11195,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":
@@ -11257,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);
@@ -11393,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":
@@ -11406,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:
@@ -11651,7 +11507,7 @@ Animation = __decorateClass$e([
   })
 ], Animation);
 
-class HTMLAudioContext extends EventEmitter {
+class HTMLAudioContext extends Observable {
   static _instance;
   static get instance() {
     if (!this._instance) {
@@ -11690,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;
@@ -11901,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;
@@ -11966,7 +11819,7 @@ class HTMLAudio {
   }
 }
 
-class AudioPipeline extends EventEmitter {
+class AudioPipeline extends Observable {
   constructor(_input, _output) {
     super();
     this._input = _input;
@@ -12190,7 +12043,7 @@ class WebAudioContext extends AudioPipeline {
   }
 }
 
-class WebSound extends EventEmitter {
+class WebSound extends Observable {
   _audio = null;
   _sourceNode = null;
   _gain = null;
@@ -12422,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;
@@ -12619,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();
@@ -12707,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);
     }
@@ -12767,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);
@@ -12851,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")
@@ -12894,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":
@@ -12928,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":
@@ -12985,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":
@@ -13001,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":
@@ -13169,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":
@@ -13289,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":
@@ -13938,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;
@@ -14058,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();
@@ -14156,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;
@@ -14423,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();