2019-03-27 01:52:24 -05:00
|
|
|
import {Container, Sprite} from '@avocado/graphics';
|
2019-03-27 19:25:00 -05:00
|
|
|
import {Vector} from '@avocado/math';
|
2019-03-28 12:31:41 -05:00
|
|
|
|
|
|
|
import {Layer} from './layer';
|
|
|
|
import {TilesRenderer} from './tiles-renderer';
|
2019-03-25 23:39:44 -05:00
|
|
|
|
2019-03-27 01:52:24 -05:00
|
|
|
export class LayerView extends Container {
|
2019-03-25 23:39:44 -05:00
|
|
|
|
|
|
|
constructor(layer, renderer) {
|
|
|
|
super();
|
|
|
|
this.layer = layer;
|
2019-03-27 01:52:24 -05:00
|
|
|
this.entityContainer = new Container();
|
2019-03-26 09:30:25 -05:00
|
|
|
this.layerContainer = new Container();
|
2019-03-25 23:39:44 -05:00
|
|
|
this._renderer = renderer;
|
2019-03-27 01:52:24 -05:00
|
|
|
// 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);
|
|
|
|
}
|
2019-03-27 19:25:00 -05:00
|
|
|
// Watch tile data change.
|
|
|
|
this.onTileDataChanged = this.onTileDataChanged.bind(this);
|
|
|
|
layer.on('tileDataChanged', this.onTileDataChanged);
|
2019-04-12 18:49:07 -05:00
|
|
|
// Watch tileset change.
|
|
|
|
this.onTilesetChanged = this.onTilesetChanged.bind(this);
|
|
|
|
layer.on('tilesetChanged', this.onTilesetChanged);
|
2019-03-27 01:52:24 -05:00
|
|
|
// Add to graphics.
|
|
|
|
this.addChild(this.layerContainer);
|
|
|
|
this.addChild(this.entityContainer);
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
|
|
|
super.destroy();
|
2019-04-12 18:49:07 -05:00
|
|
|
layer.off('entityAdded', this.onEntityAdded);
|
|
|
|
layer.off('entityRemoved', this.onEntityRemoved);
|
|
|
|
layer.off('tileDataChanged', this.onTileDataChanged);
|
|
|
|
layer.off('tilesetChanged', this.onTilesetChanged);
|
2019-03-27 01:52:24 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
onEntityAdded(entity) {
|
|
|
|
if ('container' in entity) {
|
|
|
|
this.entityContainer.addChild(entity.container);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onEntityRemoved(entity) {
|
|
|
|
if ('container' in entity) {
|
|
|
|
this.entityContainer.removeChild(entity.container);
|
|
|
|
}
|
2019-03-25 23:39:44 -05:00
|
|
|
}
|
|
|
|
|
2019-03-27 19:25:00 -05:00
|
|
|
onTileDataChanged() {
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
|
2019-04-12 18:49:07 -05:00
|
|
|
onTilesetChanged() {
|
|
|
|
this.render();
|
2019-03-25 23:39:44 -05:00
|
|
|
}
|
|
|
|
|
2019-03-27 19:25:00 -05:00
|
|
|
render() {
|
|
|
|
this.layerContainer.removeAllChildren();
|
|
|
|
if (!this._renderer) {
|
|
|
|
return;
|
|
|
|
}
|
2019-04-12 18:49:07 -05:00
|
|
|
if (!this.layer.tileset) {
|
2019-03-27 19:25:00 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (Vector.isZero(this.layer.tiles.size)) {
|
|
|
|
return;
|
|
|
|
}
|
2019-04-12 18:49:07 -05:00
|
|
|
const tilesRenderer = new TilesRenderer(this.layer.tiles, this.layer.tileset);
|
2019-03-25 23:39:44 -05:00
|
|
|
const chunk = tilesRenderer.renderChunk(this._renderer);
|
|
|
|
const tilesSprite = new Sprite(chunk);
|
2019-03-26 09:30:25 -05:00
|
|
|
this.layerContainer.addChild(tilesSprite);
|
2019-03-25 23:39:44 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|