import {Container, Sprite} from '@avocado/graphics'; import {Vector} from '@avocado/math'; import {Layer, Tileset, TilesRenderer} from '@avocado/topdown'; export class LayerView extends Container { constructor(layer, renderer) { super(); this.layer = layer; this.entityContainer = new Container(); this.layerContainer = new Container(); this._renderer = renderer; this._tileset = undefined; // Handle entity add/remove. this.onEntityAdded = this.onEntityAdded.bind(this); layer.on('entityAdded', this.onEntityAdded); this.onEntityRemoved = this.onEntityRemoved.bind(this); layer.on('entityRemoved', this.onEntityRemoved); for (const entity of layer.entityList) { this.onEntityAdded(entity); } // Watch tile data change. this.onTileDataChanged = this.onTileDataChanged.bind(this); layer.on('tileDataChanged', this.onTileDataChanged); // Watch tileset URI change. this.onTilesetUriChanged = this.onTilesetUriChanged.bind(this); layer.on('tilesetUriChanged', this.onTilesetUriChanged); this.onTilesetUriChanged(); // Add to graphics. this.addChild(this.layerContainer); this.addChild(this.entityContainer); } destroy() { super.destroy(); if (this._tileset) { this._tileset.destroy(); } } onEntityAdded(entity) { if ('container' in entity) { this.entityContainer.addChild(entity.container); } } onEntityRemoved(entity) { if ('container' in entity) { this.entityContainer.removeChild(entity.container); } } onTileDataChanged() { this.render(); } onTilesetUriChanged() { if (!this.layer.tilesetUri) { return; } Tileset.load(this.layer.tilesetUri).then((tileset) => { this.tileset = tileset; }); } render() { this.layerContainer.removeAllChildren(); if (!this._renderer) { return; } if (!this._tileset) { return; } if (Vector.isZero(this.layer.tiles.size)) { return; } const tilesRenderer = new TilesRenderer(this.layer.tiles, this._tileset); const chunk = tilesRenderer.renderChunk(this._renderer); const tilesSprite = new Sprite(chunk); this.layerContainer.addChild(tilesSprite); } set tileset(tileset) { this._tileset = tileset; this.render(); } }