refactor: true indexed layers

packages/topdown/layers-view.js

@@ -7,26 +7,25 @@ export class LayersView extends Container {
   constructor(layers, renderer) {
     super();
     this.layers = layers;
-    this.layerViews = [];
+    this.layerViews = {};
     this.renderer = renderer;
-    this.layers.on('layerAdded', (layer) => {
-      this.onLayerAdded(layer);
-    });
-    for (const layer of layers) {
-      this.onLayerAdded(layer);
+    this.onLayerAdded = this.onLayerAdded.bind(this);
+    this.onLayerRemoved = this.onLayerRemoved.bind(this);
+    this.layers.on('layerAdded', this.onLayerAdded);
+    for (const {index, layer} of layers) {
+      this.onLayerAdded(layer, index);
     }
+    this.layers.on('layerRemoved', this.onLayerRemoved);
   }
 
-  onLayerAdded(layer) {
+  onLayerAdded(layer, index) {
     const layerView = new LayerView(layer, this.renderer);
-    this.layerViews.push(layerView);
+    this.layerViews[index] = layerView;
     this.addChild(layerView);
   }
 
-  onLayerRemoved(layer) {
-    const layerView = this.layerViews.find((layerView) => {
-      return layerView.layer === layer;
-    });
+  onLayerRemoved(layer, index) {
+    const layerView = this.layerViews[index];
     if (!layerView) {
       return;
     }

packages/topdown/layers.js

@@ -12,26 +12,26 @@ export class Layers extends decorate(class {}) {
 
   constructor() {
     super();
-    this.layers = [];
+    this.layers = {};
     this._state = I.Map();
     this.onEntityAddedToLayers = this.onEntityAddedToLayers.bind(this);
     this.onEntityRemovedFromLayers = this.onEntityRemovedFromLayers.bind(this);
   }
 
   *[Symbol.iterator]() {
-    for (const layer of this.layers) {
-      yield layer;
+    for (const index in this.layers) {
+      const layer = this.layers[index];
+      yield {index, layer};
     }
   }
 
   acceptStateChange(change) {
-    for (const i in change) {
-      const index = parseInt(i);
+    for (const index in change) {
       const layer = this.layers[index] ? this.layers[index] : new Layer();
       if (!this.layers[index]) {
-        this.addLayer(layer);
+        this.addLayer(index, layer);
       }
-      layer.acceptStateChange(change[i]);
+      layer.acceptStateChange(change[index]);
     }
   }
 
@@ -43,32 +43,37 @@ export class Layers extends decorate(class {}) {
     layer.addEntity(entity);
   }
 
-  addLayer(layer) {
+  addLayer(index, layer) {
     layer.on('entityAdded', this.onEntityAddedToLayers);
     layer.on('entityRemoved', this.onEntityRemovedFromLayers);
-    this.layers.push(layer);
-    this.emit('layerAdded', layer);
+    this.layers[index] = layer;
+    this.emit('layerAdded', layer, index);
   }
 
   destroy() {
-    while (this.layers.length > 0) {
-      const layer = this.layers.pop();
-      this.removeLayer(layer);
+    for (const index in this.layers) {
+      const layer = this.layers[index];
+      this.removeLayer(index);
       layer.destroy();
     }
   }
 
   fromJSON(json) {
     if (json) {
-      for (let i = 0; i < json.length; ++i) {
+      for (const index in json) {
+        const layerJSON = json[index];
         const layer = new Layer()
-        this.addLayer(layer);
-        layer.fromJSON(json[i]);
+        this.addLayer(index, layer);
+        layer.fromJSON(layerJSON);
       }
     }
     return this;
   }
 
+  layer(index) {
+    return this.layers[index];
+  }
+
   onEntityAddedToLayers(entity) {
     this.emit('entityAdded', entity);
   }
@@ -85,15 +90,15 @@ export class Layers extends decorate(class {}) {
     layer.removeEntity(entity);
   }
 
-  removeLayer(layer) {
-    const index = this.layers.indexOf(layer);
-    if (-1 === index) {
+  removeLayer(index) {
+    const layer = this.layers[index];
+    if (!layer) {
       return;
     }
     layer.off('entityAdded', this.onEntityAddedToLayers);
     layer.off('entityRemoved', this.onEntityRemovedFromLayers);
-    this.layers.splice(index, 1);
-    this.emit('layerRemoved', layer);
+    delete this.layers[index];
+    this.emit('layerRemoved', layer, index);
   }
 
   get state() {
@@ -102,10 +107,10 @@ export class Layers extends decorate(class {}) {
 
   tick(elapsed) {
     if (this.layers) {
-      for (let i = 0; i < this.layers.length; ++i) {
-        const layer = this.layers[i];
+      for (const index in this.layers) {
+        const layer = this.layers[index];
         layer.tick(elapsed);
-        this._state = this._state.set(i, layer.state);
+        this._state = this._state.set(index, layer.state);
       }
     }
   }

packages/topdown/room.js

@@ -51,6 +51,10 @@ export class Room extends decorate(class {}) {
     return this;
   }
 
+  layer(index) {
+    return this.layers.layer(index);
+  }
+
   onEntityAddedToRoom(entity) {
     entity.addTrait('roomed');
     entity.room = this;
@@ -65,7 +69,7 @@ export class Room extends decorate(class {}) {
   }
 
   onWorldChanged() {
-    for (const layer of this.layers) {
+    for (const {layer} of this.layers) {
       for (const entity of layer.entityList) {
         if (entity.is('physical')) {
           entity.world = this.world;