avocado-old/packages/graphics/traits/visible.trait.js

214 lines
4.5 KiB
JavaScript
Raw Normal View History

2019-04-19 16:49:41 -05:00
import * as I from 'immutable';
2019-03-18 20:07:05 -05:00
import {compose} from '@avocado/core';
2019-04-14 20:21:52 -05:00
import {StateProperty, Trait} from '@avocado/entity';
import {Rectangle, Vector} from '@avocado/math';
2019-04-16 13:30:15 -05:00
import {Property} from '@avocado/mixins';
2019-03-18 20:07:05 -05:00
import {Container} from '../container';
import {hasGraphics} from '../has-graphics';
2019-04-19 19:39:14 -05:00
const AUTO_ZINDEX = 1 << 16;
2019-03-18 20:07:05 -05:00
const decorate = compose(
StateProperty('isVisible', {
track: true,
}),
2019-04-16 13:30:15 -05:00
Property('visibleBoundingBox', {
default: [0, 0, 0, 0],
emit: function (...args) {
this.entity.emit(...args);
},
track: true,
2019-04-19 16:49:41 -05:00
}),
2019-04-19 17:23:01 -05:00
StateProperty('opacity', {
track: true,
}),
2019-04-19 16:49:41 -05:00
StateProperty('visibleScale', {
track: true,
}),
2019-04-19 19:39:14 -05:00
StateProperty('zIndex', {
track: true,
}),
2019-03-18 20:07:05 -05:00
);
2019-04-14 18:42:13 -05:00
export class Visible extends decorate(Trait) {
2019-03-18 20:07:05 -05:00
static defaultParams() {
return {
2019-04-21 05:07:15 -05:00
filter: undefined,
2019-03-18 20:07:05 -05:00
trackPosition: true,
};
}
2019-04-12 00:36:30 -05:00
static defaultState() {
return {
isVisible: true,
2019-04-19 17:23:01 -05:00
opacity: 1,
2019-04-19 16:49:41 -05:00
visibleScale: [1, 1],
2019-04-19 19:39:14 -05:00
zIndex: AUTO_ZINDEX,
2019-04-12 00:36:30 -05:00
};
}
2019-03-19 11:25:42 -05:00
initialize() {
if (hasGraphics) {
this._container = new Container();
2019-04-21 05:07:15 -05:00
const filter = this.params.get('filter');
if (filter) {
this._container.setFilter(filter);
}
this._container.isVisible = this.entity.isVisible;
}
2019-04-16 13:30:15 -05:00
this.scheduledBoundingBoxUpdate = true;
2019-03-19 11:03:48 -05:00
this.trackPosition = this.params.get('trackPosition');
2019-04-19 19:39:14 -05:00
this.onZIndexChanged();
2019-03-18 20:07:05 -05:00
}
2019-03-20 23:23:34 -05:00
destroy() {
if (this._container) {
this._container.destroy();
}
}
2019-03-18 20:07:05 -05:00
get container() {
return this._container;
}
2019-04-19 19:39:14 -05:00
onZIndexChanged() {
const zIndex = this.entity.zIndex;
this._usingAutoZIndex = AUTO_ZINDEX === zIndex;
if (!this._usingAutoZIndex) {
2019-04-19 19:48:35 -05:00
if (this._container) {
this._container.zIndex = zIndex;
}
2019-04-19 19:39:14 -05:00
}
}
2019-04-19 16:49:41 -05:00
get rawVisibleScale() {
const scale = this.entity.visibleScale;
return [scale.get(0), scale.get(1)];
}
set rawVisibleScale(scale) {
this.entity.visibleScale = I.List(scale);
}
2019-03-19 11:03:48 -05:00
shouldSynchronizePosition() {
2019-04-19 17:23:01 -05:00
if (!this._container) {
return false;
}
return this._container && this.trackPosition;
2019-03-19 11:03:48 -05:00
}
synchronizePosition() {
2019-04-12 15:53:44 -05:00
if (!this.entity.is('positioned')) {
2019-03-19 11:48:46 -05:00
return;
2019-03-19 11:25:42 -05:00
}
2019-04-19 17:23:01 -05:00
if (!this._container) {
return;
}
this._container.position = this.entity.position;
2019-04-19 19:39:14 -05:00
if (this._usingAutoZIndex) {
2019-04-19 19:48:35 -05:00
if (this._container) {
this._container.zIndex = this.entity.y;
}
2019-04-19 19:39:14 -05:00
}
2019-03-19 11:03:48 -05:00
}
2019-04-19 17:09:48 -05:00
get visibleScaleX() {
return this.entity.visibleScale.get(0);
}
set visibleScaleX(x) {
this.rawVisibleScale = [x, this.visibleScaleY];
}
get visibleScaleY() {
return this.entity.visibleScale.get(1);
}
set visibleScaleY(y) {
this.rawVisibleScale = [this.visibleScaleX, y];
}
2019-03-18 20:07:05 -05:00
listeners() {
const listeners = {
isVisibleChanged: () => {
2019-04-19 17:23:01 -05:00
if (!this._container) {
return;
}
this._container.visible = this.entity.isVisible;
},
opacityChanged: () => {
if (!this._container) {
return;
}
this._container.alpha = this.entity.opacity;
},
2019-04-16 13:30:15 -05:00
positionChanged: () => {
this.scheduledBoundingBoxUpdate = true;
},
2019-04-16 09:26:01 -05:00
2019-04-19 19:39:14 -05:00
zIndexChanged: () => {
this.onZIndexChanged();
},
};
2019-03-19 11:03:48 -05:00
if (this.shouldSynchronizePosition()) {
listeners.traitAdded = (type) => {
if (-1 === [
2019-04-14 18:42:13 -05:00
'visible',
'positioned',
].indexOf(type)) {
2019-03-19 11:03:48 -05:00
return;
2019-03-18 20:07:05 -05:00
}
2019-03-19 11:03:48 -05:00
this.synchronizePosition();
2019-03-19 10:21:00 -05:00
};
2019-03-18 20:07:05 -05:00
}
2019-03-19 10:21:00 -05:00
return listeners;
2019-03-18 20:07:05 -05:00
}
2019-04-16 13:30:15 -05:00
methods() {
return {
updateVisibleBoundingBox: () => {
this.scheduledBoundingBoxUpdate = true;
},
}
}
tick(elapsed) {
if (this.shouldSynchronizePosition()) {
this.synchronizePosition();
}
if (AVOCADO_SERVER) {
if (this.scheduledBoundingBoxUpdate) {
// Collect all bounding boxes.
const visibleBoundingBoxes = this.entity.invokeHookFlat(
'visibleBoundingBoxes'
);
if (0 === visibleBoundingBoxes.length) {
this.visibleBoundingBox = [0, 0, 0, 0];
}
else {
let unifiedBoundingBox = [0, 0, 0, 0];
for (let i = 0; i < visibleBoundingBoxes.length; ++i) {
const visibleBoundingBox = visibleBoundingBoxes[i];
unifiedBoundingBox = Rectangle.united(
unifiedBoundingBox,
visibleBoundingBox,
);
}
this.visibleBoundingBox = unifiedBoundingBox;
this.scheduledBoundingBoxUpdate = false;
2019-04-16 13:30:15 -05:00
}
}
}
}
2019-03-18 20:07:05 -05:00
}