@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
142 lines (141 loc) • 7.15 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Container } from './Container';
import Utils from '../utils';
var LinearLayout = /** @class */ (function (_super) {
__extends(LinearLayout, _super);
function LinearLayout(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this.scene = scene;
_this.Type = 'Layout';
_this._config = config;
_this._content = new Container(_this.scene, {});
_this.initLayout();
return _this;
}
LinearLayout.prototype.initLayout = function () {
var _a, _b;
if (this._config.background) {
this._bg = this.createBackground();
this.addChild(this._bg);
}
this.addChild(this._content);
if (this._config.children && this._config.children.length > 0) {
this.addChildren(this._config.children);
}
this.updateBounds();
this.setDepth((_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.depth) !== null && _b !== void 0 ? _b : 1);
};
LinearLayout.prototype.createBackground = function () {
var _a, _b;
var _c = this._config, _d = _c.width, width = _d === void 0 ? 240 : _d, _e = _c.height, height = _e === void 0 ? 0 : _e, background = _c.background, borderWidth = _c.borderWidth, radius = _c.radius, borderColor = _c.borderColor;
var bgHeight = height || ((_b = (_a = this._content) === null || _a === void 0 ? void 0 : _a.RealHeight) !== null && _b !== void 0 ? _b : 0);
if (bgHeight == 0)
bgHeight = 200;
if (typeof background === 'string' && !background.startsWith('#')) {
var bg = this.scene.make.image({ x: 0, y: 0, key: background });
bg.setDisplaySize(width, bgHeight);
bg.setOrigin(0);
return bg;
}
var backgroundColor = background
? (typeof background === 'string' && background.startsWith('#')
? Utils.hexColorToNumber(background)
: background)
: 0x000000;
return Utils.drawRoundedRectRenderTexture(this.scene, 0, 0, width, bgHeight, borderWidth, radius, borderColor, backgroundColor);
};
LinearLayout.prototype.reDraw = function (config) {
this.clear();
this._config = config;
this.initLayout();
};
LinearLayout.prototype.clear = function () {
this._content.removeAll(true);
this.removeAll(true);
};
LinearLayout.prototype.addChildren = function (children) {
var _this = this;
this._config.children = children;
var _a = this._config, _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c, padding = _a.padding, _d = _a.space, space = _d === void 0 ? 0 : _d, _e = _a.alignment, alignment = _e === void 0 ? { horizontal: 'center', vertical: 'top' } : _e, _f = _a.orientation, orientation = _f === void 0 ? 'x' : _f;
var nextX = 0;
var nextY = 0;
var isHorizontal = Utils.isHorizontal(orientation);
children.forEach(function (child) {
child.setPosition(nextX, nextY);
_this._content.addChild(child);
_this._content.RefreshBounds();
var _a = _this._content, _b = _a.RealWidth, RealWidth = _b === void 0 ? 0 : _b, _c = _a.RealHeight, RealHeight = _c === void 0 ? 0 : _c;
nextX = isHorizontal ? RealWidth + space : nextX;
nextY = isHorizontal ? nextY : RealHeight + space;
});
this.alignContent(width, height, alignment, isHorizontal);
// this.updateBackground();
};
LinearLayout.prototype.alignContent = function (width, height, alignment, isHorizontal) {
var _a = this._content, _b = _a.RealWidth, RealWidth = _b === void 0 ? 0 : _b, _c = _a.RealHeight, RealHeight = _c === void 0 ? 0 : _c;
var padding = Utils.getPadding(this._config.padding);
var contentHeight = height - padding.left - padding.right;
var contentX = this.calculateContentX(alignment.horizontal, RealWidth, width);
var contentY = this.calculateContentY(alignment.vertical, contentHeight, RealHeight);
this.repositionChildren(isHorizontal, RealHeight);
this._content.setPosition(contentX, contentY);
};
LinearLayout.prototype.calculateContentX = function (align, realWidth, totalWidth) {
var padding = Utils.getPadding(this._config.padding);
switch (align) {
case 'left': return padding.left;
case 'center': return (totalWidth - realWidth) / 2;
case 'right': return totalWidth - padding.left - realWidth;
default: return 0;
}
};
LinearLayout.prototype.calculateContentY = function (align, totalHeight, contentHeight) {
var padding = Utils.getPadding(this._config.padding);
switch (align) {
case 'bottom': return Math.max(totalHeight - padding.top - contentHeight, contentHeight - padding.top);
case 'middle': return Math.max((totalHeight - contentHeight) / 2, 0);
default: return padding.top;
}
};
LinearLayout.prototype.repositionChildren = function (isHorizontal, contentHeight) {
var _a;
var nextX = 0;
var nextY = 0;
var _b = this._config, _c = _b.space, space = _c === void 0 ? 0 : _c, alignment = _b.alignment;
(_a = this._config.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
if ((alignment === null || alignment === void 0 ? void 0 : alignment.vertical) === 'middle' && isHorizontal) {
nextY = (contentHeight - child.RealHeight) / 2;
}
child.setPosition(nextX, nextY);
nextX = isHorizontal ? nextX + child.RealWidth + space : nextX;
nextY = isHorizontal ? nextY : nextY + child.RealHeight + space;
});
};
LinearLayout.prototype.updateBackground = function () {
var _a;
(_a = this._bg) === null || _a === void 0 ? void 0 : _a.destroy();
this._bg = this.createBackground();
this.addChildAt(this._bg, 0);
};
LinearLayout.prototype.updateBounds = function () {
this._content.RefreshBounds();
this.scene.input.enableDebug(this._content);
this.RefreshBounds();
};
return LinearLayout;
}(Container));
export { LinearLayout };