@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
250 lines (249 loc) • 10.5 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Container } from './Container';
import { Label } from './Label';
import Utils from '../utils';
var DefaultTextStyle = {
fontFamily: 'Arial',
fontSize: '18px',
color: '#000000',
};
var Toast = /** @class */ (function (_super) {
__extends(Toast, _super);
function Toast(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this._config = config;
_this.Type = 'Toast';
_this.reDraw();
_this.setVisible(false);
_this.setAlpha(0);
return _this;
}
Toast.prototype.reDraw = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
var width = (_a = this._config.width) !== null && _a !== void 0 ? _a : 300;
var height = (_b = this._config.height) !== null && _b !== void 0 ? _b : 80;
var alignX = (_d = (_c = this._config.alignment) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : 'right';
var alignY = (_f = (_e = this._config.alignment) === null || _e === void 0 ? void 0 : _e.vertical) !== null && _f !== void 0 ? _f : 'top';
var type = (_g = this._config.type) !== null && _g !== void 0 ? _g : 'info';
var marginAll = (_h = this._config.margin) === null || _h === void 0 ? void 0 : _h.all;
var marginLeft = marginAll !== null && marginAll !== void 0 ? marginAll : ((_k = (_j = this._config.margin) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0);
var marginRight = marginAll !== null && marginAll !== void 0 ? marginAll : ((_m = (_l = this._config.margin) === null || _l === void 0 ? void 0 : _l.x) !== null && _m !== void 0 ? _m : 0);
var marginTop = marginAll !== null && marginAll !== void 0 ? marginAll : ((_p = (_o = this._config.margin) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0);
var marginBottom = marginAll !== null && marginAll !== void 0 ? marginAll : ((_r = (_q = this._config.margin) === null || _q === void 0 ? void 0 : _q.y) !== null && _r !== void 0 ? _r : 0);
if (alignX === 'left') {
this._config.x = marginLeft;
}
else if (alignX === 'center') {
this._config.x = (this.scene.scale.width - width) / 2;
}
else if (alignX === 'right') {
this._config.x = this.scene.scale.width - width - marginRight;
}
if (alignY === 'top') {
this._config.y = marginTop;
}
else if (alignY === 'middle') {
this._config.y = (this.scene.scale.height - height) / 2;
}
else if (alignY === 'bottom') {
this._config.y = this.scene.scale.height - height - marginBottom;
}
var style = this.getStyleByType(type);
var color = Utils.numberToHex(style.color);
this._config.textStyle = Utils.MergeRight((_s = this._config.textStyle) !== null && _s !== void 0 ? _s : DefaultTextStyle, { color: color });
this._config.textAlign = (_t = this._config.textAlign) !== null && _t !== void 0 ? _t : 'center';
if (!this.label) {
this.label = new Label(this.scene, __assign(__assign(__assign({}, this._config), style), { borderColor: style.borderColor, backgroundColor: style.backgroundColor }));
}
else {
this.label.reDraw(__assign(__assign(__assign({}, this._config), style), { borderColor: style.borderColor, backgroundColor: style.backgroundColor }));
}
this.label.setPosition(0, 0);
this.addChildAt(this.label, 0);
this.setPosition(this._config.x, this._config.y);
this.setDepth((_v = (_u = this._config) === null || _u === void 0 ? void 0 : _u.depth) !== null && _v !== void 0 ? _v : 1);
};
Toast.prototype.getStyleByType = function (type) {
switch (type) {
case 'success':
return { backgroundColor: 0x008B00, color: 0xffffff, borderColor: 0xc3e6cb };
case 'warn':
return { backgroundColor: 0xFF8C00, color: 0xffffff, borderColor: 0xffeeba };
case 'error':
return { backgroundColor: 0xCD3333, color: 0xffffff, borderColor: 0xf5c6cb };
case 'info':
default:
return { backgroundColor: 0x009ACD, color: 0xffffff, borderColor: 0xbee5eb };
}
};
Toast.prototype.show = function (animationType) {
var _this = this;
var animation = animationType || this._config.animationType || 'fade';
this.setVisible(true);
if (this.tween) {
this.tween.stop();
}
switch (animation) {
case 'fade':
this.tween = this.scene.tweens.add({
targets: this,
alpha: 1,
duration: 300,
ease: 'Power2'
});
break;
case 'slide':
case 'slideDown':
this.setY(this.y - 50);
this.tween = this.scene.tweens.add({
targets: this,
y: '+=50',
alpha: 1,
duration: 300,
ease: 'Back.easeOut'
});
break;
case 'scale':
this.setScale(0);
this.tween = this.scene.tweens.add({
targets: this,
scaleX: 1,
scaleY: 1,
alpha: 1,
duration: 300,
ease: 'Back.easeOut'
});
break;
case 'bounce':
this.setY(this.y - 20);
this.tween = this.scene.tweens.add({
targets: this,
y: '+=20',
alpha: 1,
duration: 800,
ease: 'Bounce.easeOut'
});
break;
}
// 设置自动隐藏计时器
if (this._config.duration && this._config.duration > 0) {
this.autoHideTimer = this.scene.time.delayedCall(this._config.duration, function () {
_this.hide(animation);
});
}
};
Toast.prototype.hide = function (animationType) {
var _this = this;
var animation = animationType || this._config.animationType || 'fade';
if (this.tween) {
this.tween.stop();
}
// 清除自动隐藏计时器
if (this.autoHideTimer) {
this.autoHideTimer.remove();
this.autoHideTimer = undefined;
}
switch (animation) {
case 'fade':
this.tween = this.scene.tweens.add({
targets: this,
alpha: 0,
duration: 300,
ease: 'Power2',
onComplete: function () {
_this.setVisible(false);
}
});
break;
case 'slide':
case 'slideUp':
this.tween = this.scene.tweens.add({
targets: this,
y: '-=50',
alpha: 0,
duration: 300,
ease: 'Back.easeIn',
onComplete: function () {
_this.setVisible(false);
_this.setY(_this.y + 50);
}
});
break;
case 'scale':
this.tween = this.scene.tweens.add({
targets: this,
scaleX: 0,
scaleY: 0,
alpha: 0,
duration: 300,
ease: 'Back.easeIn',
onComplete: function () {
_this.setVisible(false);
_this.setScale(1);
}
});
break;
case 'bounce':
this.tween = this.scene.tweens.add({
targets: this,
y: '-=20',
alpha: 0,
duration: 800,
ease: 'Bounce.easeIn',
onComplete: function () {
_this.setVisible(false);
_this.setY(_this.y + 20);
}
});
break;
}
};
Toast.prototype.close = function (animationType) {
var _this = this;
var animation = animationType || this._config.animationType || 'fade';
this.hide(animation);
this.scene.time.delayedCall(300, function () {
_this.destroy(true);
});
};
Toast.prototype.destroy = function (fromScene) {
var _a;
if (this.tween) {
this.tween.stop();
this.tween = undefined;
}
if (this.autoHideTimer) {
this.autoHideTimer.remove();
this.autoHideTimer = undefined;
}
(_a = this.label) === null || _a === void 0 ? void 0 : _a.destroy(fromScene);
_super.prototype.destroy.call(this, fromScene);
};
return Toast;
}(Container));
export { Toast };