@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
148 lines (147 loc) • 6.44 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, Text } from ".";
import Utils from "../utils";
var Image = /** @class */ (function (_super) {
__extends(Image, _super);
function Image(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this._config = config;
_this.Type = "Image";
_this.reDraw(_this._config);
return _this;
}
Image.prototype.reDraw = function (config) {
var _a, _b, _c, _d, _e, _f;
this._config = config;
this.clear();
var width = (_a = config.width) !== null && _a !== void 0 ? _a : 0;
var height = (_b = config.height) !== null && _b !== void 0 ? _b : 0;
var borderWidth = (_c = config.borderWidth) !== null && _c !== void 0 ? _c : 0;
var radius = (_d = config.radius) !== null && _d !== void 0 ? _d : 0;
var isCircle = (_e = config.isCircle) !== null && _e !== void 0 ? _e : false;
if (!this.maskShape)
this.maskShape = this.scene.add.graphics();
if (!this.image)
this.image = this.scene.make.image({});
if (isCircle) {
var btnRadius = Math.min(width, height) / 2;
this.reDrawImage(config.key, borderWidth, borderWidth, btnRadius * 2 - borderWidth * 2, btnRadius * 2 - borderWidth * 2);
this.reDrawMaskShape(btnRadius - borderWidth, 0xffffff, true);
}
else {
this.reDrawImage(config.key, 0, 0, width, height);
if (radius > 0) {
this.reDrawMaskShape(radius, 0xffffff, false);
}
else {
this.maskShape.destroy(true);
this.image.clearMask();
}
}
this.RefreshBounds();
this.updateMaskShapePos();
this.reDrawText(config);
this.setDepth((_f = config === null || config === void 0 ? void 0 : config.depth) !== null && _f !== void 0 ? _f : 1);
this.setScrollFactor(config.isScrollFactor ? 0 : 1);
};
Image.prototype.reDrawImage = function (textureKey, x, y, w, h) {
var _a, _b, _c, _d;
(_a = this.image) === null || _a === void 0 ? void 0 : _a.setTexture(textureKey);
(_b = this.image) === null || _b === void 0 ? void 0 : _b.setPosition(x, y);
(_c = this.image) === null || _c === void 0 ? void 0 : _c.setDisplaySize(w, h);
(_d = this.image) === null || _d === void 0 ? void 0 : _d.setOrigin(0);
this.addChildAt(this.image, 1);
};
Image.prototype.reDrawMaskShape = function (radius, fillColor, isCircle) {
var _a, _b;
this.maskShape.clear();
this.maskShape.fillStyle(fillColor);
if (isCircle) {
this.maskShape.fillCircle(0, 0, radius);
}
else {
var width = (_a = this._config.width) !== null && _a !== void 0 ? _a : 0;
var height = (_b = this._config.height) !== null && _b !== void 0 ? _b : 0;
this.maskShape.fillRoundedRect(0, 0, width, height, radius);
}
var mask = this.maskShape.createGeometryMask();
this.maskShape.setVisible(false);
this.image.setMask(mask);
this.addChildAt(this.maskShape, 0);
};
Image.prototype.reDrawText = function (config) {
var _a, _b, _c, _d, _e;
if (this.text) {
this.text.destroy();
this.text = undefined;
}
if (config.text === undefined || config.text === "" || config.text === null) {
return;
}
this._config = config;
var imageBounds = (_a = this.image) === null || _a === void 0 ? void 0 : _a.getBounds();
var isCenter = false;
if (this._config.textX === undefined && this._config.textY === undefined) {
isCenter = true;
}
var textConfig = {
x: isCenter ? imageBounds.width / 2 : (_b = this._config.textX) !== null && _b !== void 0 ? _b : 0,
y: isCenter ? imageBounds.height / 2 : (_c = this._config.textY) !== null && _c !== void 0 ? _c : 0,
text: (_d = this._config.text) !== null && _d !== void 0 ? _d : "",
textStyle: (_e = this._config.textStyle) !== null && _e !== void 0 ? _e : {},
};
this.text = new Text(this.scene, textConfig);
if (isCenter) {
this.text.text.setOrigin(0.5, 0.5);
}
this.add(this.text);
this.RefreshBounds();
};
Image.prototype.updateMaskShapePos = function () {
var _a, _b, _c;
var isCircle = (_a = this._config.isCircle) !== null && _a !== void 0 ? _a : false;
// const borderWidth = this._config.borderWidth ?? 0;
var imageLeftTopPos = Utils.getWorldPosition(this.image);
if (isCircle) {
var radius = Math.min((_b = this._config.width) !== null && _b !== void 0 ? _b : 0, (_c = this._config.height) !== null && _c !== void 0 ? _c : 0) / 2;
this.maskShape.setPosition(imageLeftTopPos.x + radius, imageLeftTopPos.y + radius);
}
else {
this.maskShape.setPosition(imageLeftTopPos.x, imageLeftTopPos.y);
}
};
Image.prototype.clear = function () {
if (this.image) {
this.image.destroy();
this.image = undefined;
}
if (this.maskShape) {
this.maskShape.destroy();
this.maskShape = undefined;
}
if (this.text) {
this.text.destroy();
this.text = undefined;
}
};
Image.prototype.destroy = function (fromScene) {
this.clear();
_super.prototype.destroy.call(this, fromScene);
};
return Image;
}(Container));
export { Image };