gibbon.js
Version:
Actor/Component system for use with pixi.js.
121 lines • 3.17 kB
JavaScript
import { Component } from '../core/component';
/**
* Displays raw HtmlElement.
* Should not be used for intensive animation, effects.
*/
export class HtmlWrapper extends Component {
get element() { return this._elm; }
set element(v) {
this._elm = v;
if (v) {
this._display = v.style.display;
}
}
get width() {
return this._elm?.clientWidth ?? 0;
}
set width(v) {
if (this._elm) {
this._elm.style.minWidth = this._elm.style.maxWidth = this._elm.style.width = `${v}px`;
}
}
get height() {
return this._elm?.clientHeight ?? 0;
}
set height(v) {
if (this._elm) {
this._elm.style.minHeight =
this._elm.style.maxHeight = this._elm.style.height = `${v}px`;
}
}
set x(x) {
if (this._elm) {
this._elm.style.left = `${x}px`;
}
super.x = x;
}
set y(v) {
if (this._elm) {
this._elm.style.top = `${v}px`;
}
super.y = v;
}
set position(p) {
if (this._elm) {
this._elm.style.left = `${p.x}px`;
this._elm.style.top = `${p.y}px`;
}
super.position = p;
}
set display(s) {
this._display = s;
if (this._elm) {
this._elm.style.display = s ?? 'none';
}
}
get visible() {
return this._elm?.style.display !== 'none' && this.enabled;
}
set visible(b) {
this.enabled = b;
}
get display() { return this._elm?.style.display; }
_elm;
/// display to restore after hiding.
_display;
autoRemove;
/**
*
* @param elm - html element or unique id of element in document.
* @param opts
*/
constructor(elm, opts) {
super();
this.initElement(elm, opts);
this._display = this._elm?.style.display;
this.autoRemove = opts?.autoRemove ?? true;
if (this._elm) {
if (opts?.position != null) {
this._elm.style.position = opts?.position;
}
}
}
onEnable() {
if (this._elm) {
this._elm.style.display = this._display ?? 'block';
}
}
onDisable() {
if (this._elm) {
this._elm.style.display = 'none';
}
}
initElement(elmId, opts) {
if (typeof elmId === 'string') {
this._elm = document.getElementById(elmId);
if (this._elm == null && opts?.createElement) {
this._elm = this.createNamedDiv(elmId);
}
}
else if (elmId == null && opts?.createElement === true) {
this._elm = this.createNamedDiv();
}
else {
this._elm = elmId;
}
}
createNamedDiv(elmId) {
const elm = document.createElement('div');
if (elmId)
elm.id = elmId;
document.body.appendChild(elm);
return elm;
}
onDestroy() {
if (this.autoRemove) {
this._elm?.remove();
}
this._elm = null;
}
}
//# sourceMappingURL=html-wrapper.js.map