refactor: what even

packages/graphics/src/container.js

@@ -12,7 +12,6 @@ export default class Container extends Renderable {
   constructor() {
     super();
     this._children = [];
-    this._childrenIndexes = new Map();
     if ('client' === process.env.SIDE) {
       // eslint-disable-next-line global-require
       const {Container: PIXIContainer} = require('@pixi/display');
@@ -35,9 +34,7 @@ export default class Container extends Renderable {
     // eslint-disable-next-line no-param-reassign
     child.parent = this;
     this.isDirty = true;
-    const index = this._children.length;
     this._children.push(child);
-    this._childrenIndexes.set(child, index);
     this.container.addChild(child.internal);
   }
 
@@ -103,7 +100,7 @@ export default class Container extends Renderable {
       this.container.filters = [];
     }
     this.children.forEach((child) => {
-      this._removeChild(child);
+      this.removeChild(child);
       child.destroy();
     });
     super.destroy();
@@ -153,7 +150,7 @@ export default class Container extends Renderable {
     this.#filterMap = {};
   }
 
-  _removeChild(child) {
+  removeChild(child) {
     const index = this._children.indexOf(child);
     if (-1 === index) {
       return;
@@ -164,16 +161,10 @@ export default class Container extends Renderable {
     }
   }
 
-  removeChild(child) {
-    this._removeChild(child);
-    this._resetChildrenIndexes();
-  }
-
   removeAllChildren() {
     while (this._children.length) {
-      this._removeChild(this._children[0]);
+      this.removeChild(this._children[0]);
     }
-    this._childrenIndexes = new Map();
   }
 
   removeFilter(id, type) {
@@ -216,24 +207,7 @@ export default class Container extends Renderable {
     if (!needsSort) {
       return;
     }
-    this._children.sort((l, r) => {
-      if (l.zIndex !== r.zIndex) {
-        return l.zIndex - r.zIndex;
-      }
-      const lIndex = this._childrenIndexes.get(l);
-      const rIndex = this._childrenIndexes.get(r);
-      return lIndex - rIndex;
-    });
-    if (!this.container.isFake) {
-      this.container.children = this._children.map((child) => child.internal);
-    }
-    this._resetChildrenIndexes();
-  }
-
-  _resetChildrenIndexes() {
-    for (let i = 0; i < this._children.length; i++) {
-      this._childrenIndexes.set(this._children[i], i);
-    }
+    this.sort();
   }
 
   // sepia() {
@@ -242,4 +216,24 @@ export default class Container extends Renderable {
   //   this.container.filters = [filter];
   // }
 
+  sort() {
+    for (let i = 0; i < this._children.length; i++) {
+      const child = this._children[i];
+      if (child instanceof Container) {
+        child.sort();
+      }
+    }
+    this._children.sort((l, r) => {
+      if (l.zIndex !== r.zIndex) {
+        return l.zIndex - r.zIndex;
+      }
+      const lIndex = this._children.indexOf(l);
+      const rIndex = this._children.indexOf(r);
+      return lIndex - rIndex;
+    });
+    if (!this.container.isFake) {
+      this.container.children = this._children.map((child) => child.internal);
+    }
+  }
+
 }

packages/topdown/src/room-view.js

@@ -9,6 +9,7 @@ export default class RoomView extends Container {
     this.room = room;
     this.layersView = new LayersView(room.layers, renderer);
     this.addChild(this.layersView);
+    this.sort();
   }
 
 }