@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
367 lines (366 loc) • 15.4 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 Utils from "../utils";
import DragUtils from "../utils/DragUtils";
import { BaseContainer } from "../types";
var Container = /** @class */ (function (_super) {
__extends(Container, _super);
function Container(scene, baseConfig, type) {
var _a;
var _this = _super.call(this, scene, baseConfig === null || baseConfig === void 0 ? void 0 : baseConfig.x, baseConfig === null || baseConfig === void 0 ? void 0 : baseConfig.y) || this;
_this._id = (_a = baseConfig === null || baseConfig === void 0 ? void 0 : baseConfig.id) !== null && _a !== void 0 ? _a : "";
_this.scene = scene;
_this.Type = type !== null && type !== void 0 ? type : "Container";
_this.updateConfig(baseConfig);
_this.initializeEvents();
return _this;
}
Container.prototype.reDraw = function (config) {
this.clear();
this.updateConfig(config);
this.initializeEvents();
this.drawBackground(config);
};
Container.prototype.clear = function () {
var _a;
(_a = this._bg) === null || _a === void 0 ? void 0 : _a.destroy(true);
};
Container.prototype.initializeEvents = function () {
var _a;
if ((_a = this._config) === null || _a === void 0 ? void 0 : _a.draggable) {
this.enableDrag();
return;
}
};
Container.prototype.updateConfig = function (config) {
this._config = config;
this.setChildren(config === null || config === void 0 ? void 0 : config.childConfigs);
};
Container.prototype.setEventInteractive = function () {
var hitArea = DragUtils.setEventInteractive(this, this._config, this._hitArea);
if (!this._hitArea)
this._hitArea = hitArea;
};
Container.prototype.findChild = function (id, gameObject) {
var _a;
var container = (gameObject !== null && gameObject !== void 0 ? gameObject : this);
var all = container.getAll();
var find = all.find(function (item) { return item.id === id; });
if (find)
return find;
for (var i = 0; i < all.length; i++) {
try {
find = (_a = all[i]) === null || _a === void 0 ? void 0 : _a.findChild(id, all[i]);
}
catch (err) {
//
}
if (find)
return find;
}
return undefined;
};
Container.prototype.enableDrag = function () {
var _a, _b;
try {
this.disableDrag();
this.setEventInteractive();
(_b = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.setDraggable(this);
this.on("drag", this.onDrag);
this.on("dragend", this.onDragEnd);
}
catch (error) {
//
}
};
Container.prototype.disableDrag = function () {
try {
this.scene.input.setDraggable(this, false);
this.off("drag", this.onDrag);
this.off("dragend", this.onDragEnd);
}
catch (error) {
//
}
};
Container.prototype.onDrag = function (pointer, dragX, dragY) {
var _a = this.getClampedPosition(dragX, dragY), clampedX = _a[0], clampedY = _a[1];
this.setPosition(clampedX, clampedY);
// this.setPosition(dragX, dragY);
this.onDragUpdate(pointer, this.x, this.y);
};
Container.prototype.onDragEnd = function (pointer, dragX, dragY) {
this.onDragEndUpdate(pointer, this.x, this.y);
};
Container.prototype.onDestroy = function () {
};
Container.prototype.getClampedPosition = function (dragX, dragY) {
var _a, _b, _c, _d;
if (this.Type === "RoundedButton") {
var radius = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.radius) !== null && _b !== void 0 ? _b : 0;
var borderWidth = (_d = (_c = this._config) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 0;
var radiusBorderWidth = (radius + borderWidth) * 2;
return [
Utils.clampX(dragX, this.scene.scale.width, radiusBorderWidth),
Utils.clampY(dragY, this.scene.scale.height, radiusBorderWidth),
];
}
return [
Utils.clampX(dragX, this.scene.scale.width, this.Width),
Utils.clampY(dragY, this.scene.scale.height, this.Height),
];
};
Container.prototype.onDragUpdate = function (pointer, dragX, dragY) {
// console.log(pointer, dragX, dragY);
};
Container.prototype.onDragEndUpdate = function (pointer, dragX, dragY) {
// console.log(pointer, dragX, dragY);
};
Object.defineProperty(Container.prototype, "id", {
get: function () {
var _a;
return (_a = this._id) !== null && _a !== void 0 ? _a : "";
},
set: function (id) {
this._id = id;
},
enumerable: false,
configurable: true
});
Container.prototype.RefreshBounds = function () {
this._bounds = this.getBounds();
};
Container.prototype.cacheBounds = function () {
if (!this._bounds)
this.RefreshBounds();
};
Object.defineProperty(Container.prototype, "Width", {
get: function () {
var _a, _b;
return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Height", {
get: function () {
var _a, _b;
return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "RealWidth", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "RealHeight", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "RealSize", {
get: function () {
return { width: this.Width, height: this.Height };
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Top", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Left", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Right", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.right) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Bottom", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.bottom) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "CenterX", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "CenterY", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.centerY) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "X", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Y", {
get: function () {
var _a, _b;
this.cacheBounds();
return (_b = (_a = this._bounds) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "Type", {
get: function () {
var _a;
return (_a = this._type) !== null && _a !== void 0 ? _a : "Container";
},
set: function (type) {
this._type = type;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "padding", {
get: function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
if ((_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.all) {
return {
left: this._config.padding.all,
right: this._config.padding.all,
top: this._config.padding.all,
bottom: this._config.padding.all,
};
}
else {
return {
left: (_e = (_d = (_c = this._config) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.left) !== null && _e !== void 0 ? _e : 0,
right: (_h = (_g = (_f = this._config) === null || _f === void 0 ? void 0 : _f.padding) === null || _g === void 0 ? void 0 : _g.right) !== null && _h !== void 0 ? _h : 0,
top: (_l = (_k = (_j = this._config) === null || _j === void 0 ? void 0 : _j.padding) === null || _k === void 0 ? void 0 : _k.top) !== null && _l !== void 0 ? _l : 0,
bottom: (_p = (_o = (_m = this._config) === null || _m === void 0 ? void 0 : _m.padding) === null || _o === void 0 ? void 0 : _o.bottom) !== null && _p !== void 0 ? _p : 0,
};
}
},
enumerable: false,
configurable: true
});
Container.prototype.addChild = function (child) {
if (!this.exists(child)) {
this.add(child);
// this.scene.events.emit('addChildGameObject', child, this);
}
};
Container.prototype.addChildAt = function (child, index) {
if (!this.exists(child)) {
this.addAt(child, index);
}
};
Container.prototype.setChildren = function (childConfigs) {
if (!(childConfigs === null || childConfigs === void 0 ? void 0 : childConfigs.length))
return;
this._config.childConfigs = childConfigs;
this.removeAll(true);
this.scene.setChildren(this, childConfigs);
};
Container.prototype.drawBackground = function (config) {
if (this._bg) {
this._bg.destroy();
this._bg = undefined;
}
var _a = config !== null && config !== void 0 ? config : this._config, width = _a.width, height = _a.height, _b = _a.borderWidth, borderWidth = _b === void 0 ? 4 : _b, _c = _a.radius, radius = _c === void 0 ? 10 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 0xff8221 : _d, backgroundColor = _a.backgroundColor, backgroundAlpha = _a.backgroundAlpha;
if (!backgroundColor)
return;
this._bg = Utils.reDrawRoundedRectRenderTexture(this.scene, this._bg, 0, 0, width, height, borderWidth, radius, borderColor, backgroundColor, backgroundAlpha);
this.addChildAt(this._bg, 0);
};
Container.prototype.debugDrawBorderLine = function (color) {
var _a, _b;
var borderWidth = (_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.borderWidth) !== null && _b !== void 0 ? _b : 0;
var width = this.getBounds().width + borderWidth * 2;
var height = this.getBounds().height + borderWidth * 2;
if (this.drawBorderLine) {
this.drawBorderLine.destroy(true);
}
this.drawBorderLine = this.createDebugBorderLine(width, height, color);
this.add(this.drawBorderLine);
};
Container.prototype.createDebugBorderLine = function (width, height, color) {
var _a;
if (((_a = this._config) === null || _a === void 0 ? void 0 : _a.geomType) === "Circle") {
return this.scene.add
.circle(0, 0, width / 2, 0x000000, 0.1)
.setStrokeStyle(4, color !== null && color !== void 0 ? color : 0xa52a2a, 1)
.setOrigin(0);
}
return this.scene.add
.rectangle(0, 0, width - 4, height - 4, 0x000000, 0.1)
.setStrokeStyle(4, color !== null && color !== void 0 ? color : 0xa52a2a, 1)
.setOrigin(0);
};
Container.prototype.debugHitArea = function () {
this.scene.input.enableDebug(this);
};
Container.prototype.debug = function (color) {
this.debugDrawBorderLine(color);
this.debugHitArea();
};
Container.prototype.destroy = function (fromScene) {
var _a;
this.onDestroy();
_super.prototype.destroy.call(this, fromScene);
(_a = this._bg) === null || _a === void 0 ? void 0 : _a.destroy(fromScene);
this._bg = undefined;
};
return Container;
}(BaseContainer));
export { Container };