@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
180 lines (179 loc) • 8.59 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 Phaser from "phaser";
import Memory from "../utils/Memory";
import { BaseBar } from "./BaseBar";
var Slider = /** @class */ (function (_super) {
__extends(Slider, _super);
function Slider(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this.btnRadius = 0;
_this.progressPercent = 0;
_this._value = 0;
_this._config = config;
_this.Type = "Slider";
_this.draw(config);
return _this;
}
Slider.prototype.draw = function (config) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
this._config = config;
_super.prototype.reDraw.call(this, this._config);
this.min = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : 0;
this.max = (_d = (_c = this._config) === null || _c === void 0 ? void 0 : _c.max) !== null && _d !== void 0 ? _d : 100;
this.step = (_f = (_e = this._config) === null || _e === void 0 ? void 0 : _e.step) !== null && _f !== void 0 ? _f : 1;
if (this.sliderBtn) {
this.sliderBtn.destroy(true);
}
this.sliderBtn = this.drawSliderBtn();
this.addChildAt(this.sliderBtn, 2);
this.sliderBtn.setInteractive({ draggable: true });
this.sliderBtn.debugHitArea();
Memory.DelEventsBeforeDestory(this.sliderBtn);
// 因为锚点不是在中心，所以需要额外做以下的计算
var btnRadius = this.getBtnRadius();
// let btnCenterPosX = this.sliderBtn.x + btnRadius;
var btnCenterPosX = (config === null || config === void 0 ? void 0 : config.progressPercent) * ((_g = this._config) === null || _g === void 0 ? void 0 : _g.width);
this.refreshProgress(btnCenterPosX);
this.fixSliderBtnPosY();
(_h = this.sliderBtn) === null || _h === void 0 ? void 0 : _h.updateMaskShapePos();
var dragXRangeLeft = -btnRadius;
var dragXRangeRight = ((_j = this._config) === null || _j === void 0 ? void 0 : _j.width) - btnRadius;
this.sliderBtn.on("drag", function (_pointer, dragX, _dragY) {
var _a, _b;
dragX = Phaser.Math.Clamp(dragX, dragXRangeLeft, dragXRangeRight);
_this.sliderBtn.x = dragX;
var realBtnCenterPosX = Phaser.Math.Clamp(dragX + btnRadius, 0, (_a = _this._config) === null || _a === void 0 ? void 0 : _a.width);
_this.refreshProgress(realBtnCenterPosX);
_this.fixSliderBtnPosY();
(_b = _this.sliderBtn) === null || _b === void 0 ? void 0 : _b.updateMaskShapePos();
}, this);
this.RefreshBounds();
this.setDepth((_l = (_k = this._config) === null || _k === void 0 ? void 0 : _k.depth) !== null && _l !== void 0 ? _l : 1);
};
Slider.prototype.fixSliderBtnPosY = function () {
var btnRadius = this.getBtnRadius();
var realBtnLeftTopPosY = this.bgHeight / 2 - btnRadius;
this.sliderBtn.y = realBtnLeftTopPosY;
};
Slider.prototype.reDraw = function (config) {
this.draw(config);
};
Slider.prototype.drawSliderBtn = function () {
var roundedButtonConfig = this.transformForRoundedButtonConfig();
var sliderBtn = this.scene.mai3.add.roundedButton(roundedButtonConfig);
return sliderBtn;
};
Slider.prototype.transformForRoundedButtonConfig = function () {
var _a, _b, _c, _d, _e, _f;
var handleRadius = this.getHandleRadius();
var _g = this.computedSliderBtnLeftTopPosition(), btnLeftTopX = _g.btnLeftTopX, btnLeftTopY = _g.btnLeftTopY;
var config = {
x: btnLeftTopX,
y: btnLeftTopY,
draggable: true,
radius: handleRadius,
borderWidth: (_a = this._config) === null || _a === void 0 ? void 0 : _a.handleBorderWidth,
borderColor: (_b = this._config) === null || _b === void 0 ? void 0 : _b.handleBorderColor,
backgroundColor: (_c = this._config) === null || _c === void 0 ? void 0 : _c.handleBackgroundColor,
backgroundAlpha: (_d = this._config) === null || _d === void 0 ? void 0 : _d.handleBackgroundAlpha,
geomType: (_e = this._config) === null || _e === void 0 ? void 0 : _e.handleGeomType,
texture: (_f = this._config) === null || _f === void 0 ? void 0 : _f.handleTexture,
};
return config;
};
Slider.prototype.getHandleRadius = function () {
var _a, _b, _c, _d;
return (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.handleRadius) !== null && _b !== void 0 ? _b : ((_d = (_c = this._config) === null || _c === void 0 ? void 0 : _c.radius) !== null && _d !== void 0 ? _d : 20) + 4;
};
Slider.prototype.getHandleBorderWidth = function () {
var _a, _b;
return (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.handleBorderWidth) !== null && _b !== void 0 ? _b : 6;
};
Slider.prototype.getBtnRadius = function () {
var handleRadius = this.getHandleRadius();
var handleBorderWidth = this.getHandleBorderWidth();
return handleRadius + handleBorderWidth;
};
Slider.prototype.computedSliderBtnLeftTopPosition = function () {
var _a;
this.btnRadius = this.getBtnRadius();
var progressPercent = (_a = this._config) === null || _a === void 0 ? void 0 : _a.progressPercent;
if (progressPercent === undefined || progressPercent === null) {
progressPercent = 0.5;
}
else {
progressPercent = progressPercent < 0 ? 0 : progressPercent;
progressPercent = progressPercent > 1 ? 1 : progressPercent;
}
progressPercent = parseFloat(progressPercent.toFixed(20));
// const btnLeftTopX = this.sliderBtn ?
// this.sliderBtn.x : this.Width * progressPercent - this.btnRadius;
// const btnLeftTopY = this.sliderBtn ?
// this.sliderBtn.y : this.Height / 2 - this.btnRadius;
var btnLeftTopX = this.Width * progressPercent - this.btnRadius;
var btnLeftTopY = this.Height / 2 - this.btnRadius;
return {
btnLeftTopX: btnLeftTopX,
btnLeftTopY: btnLeftTopY,
};
};
Slider.prototype.refreshProgress = function (pointerX) {
if (pointerX > this.bgWidth)
pointerX = this.bgWidth;
if (pointerX < this.btnRadius)
pointerX = 0;
this.progressPercent = pointerX / this.bgWidth;
this.progressPercent = parseFloat(this.progressPercent.toFixed(20));
if (this.progressPercent > 1)
this.progressPercent = 1;
if (this.progressPercent < 0)
this.progressPercent = 0;
var rawValue = this.min + this.progressPercent * (this.max - this.min);
this._value = Phaser.Math.Clamp(Math.round(rawValue / this.step) * this.step, this.min, this.max);
this._updateProgress();
};
Slider.prototype._updateProgress = function () {
var val = (this.value - this.min) / (this.max - this.min);
if (val < 0) {
val = 0;
}
else if (val > 1) {
val = 1;
}
this.progress = val;
};
Object.defineProperty(Slider.prototype, "value", {
get: function () {
return this._value;
},
set: function (val) {
this._value = val;
this._updateProgress();
},
enumerable: false,
configurable: true
});
Slider.prototype.destroy = function (fromScene) {
_super.prototype.destroy.call(this, fromScene);
if (this.sliderBtn) {
this.sliderBtn.destroy(true);
}
};
return Slider;
}(BaseBar));
export { Slider };