feat: Renderable::zIndex with automatic dirty marking and sorting

packages/graphics/container.js

@@ -7,10 +7,13 @@ export class Container extends Renderable {
   constructor() {
     super();
     this._children = [];
+    this._isDirty = false;
     this.internal = PIXI ? new PIXI.Container() : undefined;
   }
 
   addChild(child) {
+    child.parent = this;
+    this.isDirty = true;
     this._children.push(child);
     this.internal.addChild(child.internal);
   }
@@ -26,6 +29,17 @@ export class Container extends Renderable {
     super.destroy();
   }
 
+  get isDirty() {
+    return this._isDirty;
+  }
+
+  set isDirty(isDirty) {
+    if (this.parent) {
+      this.parent.isDirty = isDirty;
+    }
+    this._isDirty = isDirty;
+  }
+
   removeChild(child) {
     const index = this._children.indexOf(child);
     if (-1 === index) {
@@ -41,4 +55,28 @@ export class Container extends Renderable {
     }
   }
 
+  tick() {
+    if (!this.isDirty) {
+      return;
+    }
+    let needsSort = false;
+    for (const child of this._children) {
+      if (0 !== child.zIndex) {
+        needsSort = true;
+      }
+      if (child instanceof Container) {
+        child.tick();
+      }
+    }
+    if (!needsSort) {
+      return;
+    }
+    this._children.sort((l, r) => {
+      return l.zIndex - r.zIndex;
+    });
+    this.internal.children = this._children.map((child) => {
+      return child.internal;
+    });
+  }
+
 }

packages/graphics/renderable.js

@@ -1,5 +1,10 @@
 export class Renderable {
 
+  constructor() {
+    this.parent = null;
+    this._zIndex = 0;
+  }
+
   get alpha() {
     return this.internal.alpha;
   }
@@ -53,5 +58,16 @@ export class Renderable {
     this.internal.y = y;
   }
 
+  get zIndex() {
+    return this._zIndex;
+  }
+
+  set zIndex(zIndex) {
+    if (this.parent) {
+      this.parent.isDirty = true;
+    }
+    this._zIndex = zIndex;
+  }
+
 }