feat: EntityListView

packages/entity/index.js

@@ -179,6 +179,7 @@ export function createProxy(entity) {
 }
 
 export {EntityList} from './list';
+export {EntityListView} from './list-view';
 
 export {
   hasTrait,

packages/entity/list-view.js

@@ -0,0 +1,27 @@
+import {Container, Sprite} from '@avocado/graphics';
+
+export class EntityListView extends Container {
+
+  constructor(entityList) {
+    super();
+    this.entityList = entityList;
+    entityList.on('entityAdded', this.onListEntityAdded, this);
+    entityList.on('entityRemoved', this.onListEntityRemoved, this);
+    for (const entity of entityList) {
+      this.onListEntityAdded(entity);
+    }
+  }
+
+  onListEntityAdded(entity) {
+    if (entity.is('graphical')) {
+      this.addChild(entity.container);
+    }
+  }
+
+  onListEntityRemoved(entity) {
+    if (entity.is('graphical')) {
+      this.removeChild(entity.container);
+    }
+  }
+
+}

packages/topdown/layer-view.js

@@ -1,3 +1,4 @@
+import {EntityListView} from '@avocado/entity';
 import {Container, Sprite} from '@avocado/graphics';
 import {Vector} from '@avocado/math';
 import {BodyView} from '@avocado/physics';
@@ -9,24 +10,19 @@ export class LayerView extends Container {
 
   constructor(layer, renderer) {
     super();
+    this.entityListView = new EntityListView(layer.entityList);
     this.layer = layer;
-    this.entityContainer = new Container();
     this.layerContainer = new Container();
+    this.renderer = renderer;
     this.tileGeometryContainer = new Container();
-    this._renderer = renderer;
     this.tileGeometryViews = [];
     // Handle entity add/remove.
-    layer.on('entityAdded', this.onLayerEntityAdded, this);
-    layer.on('entityRemoved', this.onLayerEntityRemoved, this);
-    for (const entity of layer.entityList) {
-      this.onLayerEntityAdded(entity);
-    }
     layer.on('tileDataChanged', this.onLayerTileDataChanged, this);
     layer.on('tileGeometryChanged', this.onLayerTileGeometryChanged, this);
     layer.on('tilesetChanged', this.onLayerTilesetChanged, this);
     this.addChild(this.layerContainer);
     this.addChild(this.tileGeometryContainer);
-    this.addChild(this.entityContainer);
+    this.addChild(this.entityListView);
   }
 
   destroy() {
@@ -45,18 +41,6 @@ export class LayerView extends Container {
     this.tileGeometryViews = [];
   }
 
-  onLayerEntityAdded(entity) {
-    if ('container' in entity) {
-      this.entityContainer.addChild(entity.container);
-    }
-  }
-
-  onLayerEntityRemoved(entity) {
-    if ('container' in entity) {
-      this.entityContainer.removeChild(entity.container);
-    }
-  }
-
   onLayerTileDataChanged() {
     this.render();
   }
@@ -76,7 +60,7 @@ export class LayerView extends Container {
 
   render() {
     this.layerContainer.removeAllChildren();
-    if (!this._renderer) {
+    if (!this.renderer) {
       return;
     }
     if (!this.layer.tileset) {
@@ -86,7 +70,7 @@ export class LayerView extends Container {
       return;
     }
     const tilesRenderer = new TilesRenderer(this.layer.tiles, this.layer.tileset);
-    const chunk = tilesRenderer.renderChunk(this._renderer);
+    const chunk = tilesRenderer.renderChunk(this.renderer);
     const tilesSprite = new Sprite(chunk);
     this.layerContainer.addChild(tilesSprite);
   }