perf: containers

packages/graphics/src/container.js

@@ -102,7 +102,7 @@ export default class Container extends Renderable {
       this.container.filters = [];
     }
     this.children.forEach((child) => {
-      this.removeChild(child);
+      this._removeChild(child);
       child.destroy();
     });
     super.destroy();
@@ -190,14 +190,20 @@ export default class Container extends Renderable {
   }
 
   renderTick(elapsed) {
+    if (0 === this._children.length) {
+      return;
+    }
     for (let i = 0; i < this._children.length; i++) {
       const child = this._children[i];
       if (child instanceof Container) {
         child.renderTick(elapsed);
       }
     }
+    if (1 === this._children.length) {
+      return;
+    }
     let needsSort = false;
-    let currentZ = -Infinity;
+    let currentZ = this._children[0].zIndex;
     for (let i = 0; i < this._children.length; i++) {
       const child = this._children[i];
       if (currentZ > child.zIndex) {
@@ -224,7 +230,6 @@ export default class Container extends Renderable {
   }
 
   _resetChildrenIndexes() {
-    this._childrenIndexes = new Map();
     for (let i = 0; i < this._children.length; i++) {
       this._childrenIndexes.set(this._children[i], i);
     }

packages/graphics/src/traits/rastered.js

@@ -51,6 +51,12 @@ export default () => class Rastered extends Trait {
         this.#container.visible = this.entity.isVisible;
       },
 
+      onYChanged: () => {
+        if (this.#usingAutoZIndex) {
+          this.#container.zIndex = this.entity.y;
+        }
+      },
+
       opacityChanged: () => {
         if (!this.#container) {
           return;
@@ -67,6 +73,7 @@ export default () => class Rastered extends Trait {
 
       traitAdded: () => {
         this.synchronizePosition();
+        this.onZIndexChanged(this.entity.zIndex);
       },
 
       visibleScaleChanged: () => {
@@ -91,7 +98,6 @@ export default () => class Rastered extends Trait {
       }
       this.#container.isVisible = this.state.isVisible;
     }
-    this.onZIndexChanged(this.entity.zIndex);
   }
 
   onZIndexChanged(zIndex) {
@@ -102,6 +108,9 @@ export default () => class Rastered extends Trait {
     if (!this.#usingAutoZIndex) {
       this.#container.zIndex = zIndex;
     }
+    else {
+      this.#container.zIndex = this.entity.y;
+    }
   }
 
   renderTick() {