@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
276 lines (275 loc) • 12.3 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 { ScrollBar } from "./ScrollBar";
import ScrollUtils from "../utils/ScrollUtils";
var ScrollView = /** @class */ (function (_super) {
__extends(ScrollView, _super);
function ScrollView(scene, config) {
var _a;
var _this = _super.call(this, scene, config) || this;
_this.handleDown = function (pointer) {
var _a, _b;
if ((_a = _this._config) === null || _a === void 0 ? void 0 : _a.disableScroll)
return;
if (!((_b = _this._maskBounds) === null || _b === void 0 ? void 0 : _b.contains(pointer.x, pointer.y)))
return;
if (_this.scrollSize <= _this._config.height)
return;
_this._scrollState.isScrolling = true;
_this._scrollState.start = pointer[_this._direction];
_this._scrollState.current = _this._content[_this._direction];
_this._scrollState.momentum = 0;
};
_this.handleMove = function (pointer) {
if (!_this._scrollState.isScrolling || !pointer.isDown)
return;
var delta = pointer[_this._direction] - _this._scrollState.start;
var newPos = _this.calculateNewPosition(_this._scrollState.current + delta);
_this.updateContentPosition(newPos);
_this._scrollState.momentum = pointer.velocity[_this._direction];
_this.updateScrollBarPosition();
_this.updateVisibleItems();
};
_this.handleUp = function () {
if (!_this._scrollState.isScrolling)
return;
_this._scrollState.isScrolling = false;
if (Math.abs(_this._scrollState.momentum) > 0.5) {
_this.applyScrollMomentum();
}
};
_this.Type = "ScrollView";
_this._direction = (_a = config.direction) !== null && _a !== void 0 ? _a : "y";
_this._scrollState = {
isScrolling: false,
start: 0,
current: 0,
momentum: 0,
};
_this._config = config;
_this.initialize();
return _this;
}
ScrollView.prototype.reDraw = function (config) {
var _a;
this.clear();
this._direction = (_a = config === null || config === void 0 ? void 0 : config.direction) !== null && _a !== void 0 ? _a : "y";
this._config = config;
this.initialize();
};
ScrollView.prototype.clear = function () {
var _a;
(_a = this._content) === null || _a === void 0 ? void 0 : _a.removeAll(true);
this.removeAll(true);
this._scrollState = {
isScrolling: false,
start: 0,
current: 0,
momentum: 0,
};
};
ScrollView.prototype.initialize = function () {
var _a, _b, _c;
this.drawBackground();
this.setupContent();
this.setupScrollBar();
this.setupMask();
this.setupEvents();
this.updateScrollBarPosition();
this.updateVisibleItems();
this.setChildren((_a = this._config) === null || _a === void 0 ? void 0 : _a.childConfigs);
this.setDepth((_c = (_b = this._config) === null || _b === void 0 ? void 0 : _b.depth) !== null && _c !== void 0 ? _c : 1);
};
ScrollView.prototype.setupContent = function () {
this._content = new Container(this.scene);
this._content.setPosition(this.padding.left, // + (this._config?.borderWidth ?? 0),
this.padding.top // + (this._config?.borderWidth ?? 0)
);
this._content.setSize(this._config.width - this.padding.left - this.padding.right, this._config.height - this.padding.top - this.padding.bottom);
this.addChildAt(this._content, 1);
this.scene.input.enableDebug(this._content);
this.RefreshBounds();
};
ScrollView.prototype.setupMask = function () {
var _a, _b;
this.RefreshBounds();
(_a = this._mask) === null || _a === void 0 ? void 0 : _a.destroy();
this._mask = new Phaser.GameObjects.Graphics(this.scene);
this._mask
.clear()
.fillStyle(0x000000)
.fillRect(this.X, this.Y, this.Width, this.Height);
(_b = this._content) === null || _b === void 0 ? void 0 : _b.setMask(new Phaser.Display.Masks.GeometryMask(this.scene, this._mask));
this._maskBounds = new Phaser.Geom.Rectangle(this.X, this.Y, this.Width, this.Height);
};
ScrollView.prototype.setupScrollBar = function () {
if (!this._config.showScrollbar)
return;
var scrollBarConfig = this.createScrollBarConfig();
this._scrollBar = new ScrollBar(this.scene, scrollBarConfig);
this.add(this._scrollBar);
};
ScrollView.prototype.createScrollBarConfig = function () {
var _a, _b;
var borderWidth = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.borderWidth) !== null && _b !== void 0 ? _b : 0;
return this._direction === "y"
? {
x: this.Width - borderWidth - 6,
y: borderWidth,
width: 6,
height: this.Height - borderWidth * 2,
direction: "y",
}
: {
x: borderWidth,
y: this.Height - borderWidth - 6,
width: this.Width - borderWidth * 2,
height: 6,
direction: "x",
};
};
ScrollView.prototype.addChild = function (child) {
var _a;
(_a = this._content) === null || _a === void 0 ? void 0 : _a.addChild(child);
this.updateScrollBarPosition();
this.updateVisibleItems();
return child;
};
ScrollView.prototype.setChildren = function (childConfigs) {
var _a;
if (!childConfigs || !this._config)
return;
this._config.childConfigs = childConfigs;
(_a = this._content) === null || _a === void 0 ? void 0 : _a.removeAll(true);
this.scene.setChildren(this, childConfigs);
};
ScrollView.prototype.getItemsAtIndex = function (index) {
var _a, _b, _c;
return (_c = (_b = (_a = this._content) === null || _a === void 0 ? void 0 : _a.getAll()[index]) === null || _b === void 0 ? void 0 : _b.getAll()) !== null && _c !== void 0 ? _c : [];
};
ScrollView.prototype.addedToScene = function () {
this.setupMask();
};
ScrollView.prototype.setupEvents = function () {
var _a;
this.setInteractive();
this.scene.input.on("pointerdown", this.handleDown, this);
this.scene.input.on("pointermove", this.handleMove, this);
this.scene.input.on("pointerup", this.handleUp, this);
try {
if ((_a = this._config) === null || _a === void 0 ? void 0 : _a.draggable) {
this.enableDrag();
}
else {
this.disableDrag();
}
}
catch (err) {
//
}
};
ScrollView.prototype.calculateNewPosition = function (position) {
var _a, _b;
return ScrollUtils.calculateNewPosition(position, this._direction, this._direction === "y" ? this.Height : this.Width, this.scrollSize, this._config.padding || {}, (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.borderWidth) !== null && _b !== void 0 ? _b : 0);
};
ScrollView.prototype.updateContentPosition = function (position) {
var _a, _b;
if (this._direction === "y") {
(_a = this._content) === null || _a === void 0 ? void 0 : _a.setY(position);
}
else {
(_b = this._content) === null || _b === void 0 ? void 0 : _b.setX(position);
}
};
ScrollView.prototype.applyScrollMomentum = function () {
var _a;
var _this = this;
// New position after calculating scroll momentum
// Based on the current position plus the momentum value, the momentum value will be amplified according to its absolute value
// The greater the momentum, the farther the rolling distance
var newPos = this.calculateNewPosition(this._content[this._direction] +
this._scrollState.momentum *
(1 + Math.abs(this._scrollState.momentum) * 0.01));
this.scene.tweens.add((_a = {
targets: this._content
},
_a[this._direction] = newPos,
_a.duration = 500,
_a.ease = Phaser.Math.Easing.Cubic.Out,
_a.onUpdate = function () {
_this.updateScrollBarPosition();
_this.updateVisibleItems();
},
_a));
};
ScrollView.prototype.updateScrollBarPosition = function () {
if (!this._scrollBar)
return;
ScrollUtils.updateScrollBarPosition(this._content, this._scrollBar, this._direction, this._direction === "y" ? this.Height : this.Width, this.scrollSize, this._config.padding || {});
};
ScrollView.prototype.updateVisibleItems = function () {
if (!this._content)
return;
if (this._scrollBar) {
this._scrollBar.visible = this.scrollSize > this._config.height;
}
ScrollUtils.updateVisibleItems(this._content, this._direction, this._direction === "y" ? this.Height : this.Width);
};
Object.defineProperty(ScrollView.prototype, "scrollSize", {
get: function () {
var _a, _b, _c, _d;
if (!this._content || this._content.list.length === 0) {
return 0;
}
return (this._lastChild[this._direction] +
(this._direction === "y"
? this._lastChild.Height
: this._lastChild.Width) +
((_d = (_c = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.all) !== null && _c !== void 0 ? _c : (this._direction === "y" ? this.padding.bottom : this.padding.right)) !== null && _d !== void 0 ? _d : 0));
},
enumerable: false,
configurable: true
});
ScrollView.prototype.setPosition = function (x, y, z, w) {
if (this._config) {
this.setupMask();
}
return _super.prototype.setPosition.call(this, x, y, z, w);
};
Object.defineProperty(ScrollView.prototype, "_lastChild", {
get: function () {
var _a;
var list = (_a = this._content) === null || _a === void 0 ? void 0 : _a.getAll().sort(function (a, b) { return a.Y - b.Y; });
return list === null || list === void 0 ? void 0 : list[list.length - 1];
},
enumerable: false,
configurable: true
});
ScrollView.prototype.destroy = function (fromScene) {
var _a, _b, _c;
// Remove event listeners
this.scene.input.off("pointerdown", this.handleDown, this);
this.scene.input.off("pointermove", this.handleMove, this);
this.scene.input.off("pointerup", this.handleUp, this);
(_a = this._content) === null || _a === void 0 ? void 0 : _a.destroy(fromScene);
(_b = this._scrollBar) === null || _b === void 0 ? void 0 : _b.destroy(fromScene);
(_c = this._mask) === null || _c === void 0 ? void 0 : _c.destroy(fromScene);
_super.prototype.destroy.call(this, fromScene);
};
return ScrollView;
}(Container));
export { ScrollView };