@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
314 lines (313 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 __());
};
})();
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 { Panel } from './Panel';
var CellIndex = "cellIndex";
var Grid = /** @class */ (function (_super) {
__extends(Grid, _super);
function Grid(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this._cellWidth = 0;
_this._cellHeight = 0;
_this.indexToItemMap = new Map();
_this.positionToIndexMap = new Map();
_this.positionSlotMap = new Map();
_this.Type = 'Grid';
_this.initialize(config);
return _this;
}
Grid.prototype.initialize = function (config) {
this.draw(config);
};
Grid.prototype.draw = function (config) {
var _a;
this._config = config;
this.setupContent();
this.setupGridLayout();
this.updateConfig(config);
this.setDepth((_a = config.depth) !== null && _a !== void 0 ? _a : 1);
this.setScrollFactor(config.isScrollFactor ? 0 : 1);
};
Grid.prototype.setupContent = function () {
var _a, _b;
var _c = this._config.padding, padding = _c === void 0 ? { left: 0, right: 0, top: 0, bottom: 0 } : _c;
var left = (_a = padding.all) !== null && _a !== void 0 ? _a : padding.left;
var top = (_b = padding.all) !== null && _b !== void 0 ? _b : padding.top;
this.drawBackground();
this._content = new Container(this.scene);
this._content.setPosition(left, top);
this.addChildAt(this._content, 1);
this.scene.input.enableDebug(this._content);
this.RefreshBounds();
};
Grid.prototype.setupGridLayout = function () {
var _a = this._config, _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, _d = _a.columns, columns = _d === void 0 ? 1 : _d, _e = _a.rows, rows = _e === void 0 ? 1 : _e, _f = _a.padding, padding = _f === void 0 ? { left: 0, right: 0, top: 0, bottom: 0 } : _f, _g = _a.columnGap, columnGap = _g === void 0 ? 0 : _g, _h = _a.rowGap, rowGap = _h === void 0 ? 0 : _h;
var paddingX = padding.all ? padding.all * 2 : (padding.left + padding.right);
var paddingY = padding.all ? padding.all * 2 : (padding.top + padding.bottom);
var contentWidth = width - paddingX;
var contentHeight = height - paddingY;
this._cellWidth = (contentWidth - (columns - 1) * columnGap) / columns;
this._cellHeight = (contentHeight - (rows - 1) * rowGap) / rows;
this.initializeGridMaps(columns, rows, columnGap, rowGap);
};
Grid.prototype.initializeGridMaps = function (columns, rows, columnGap, rowGap) {
var _a;
var index = 0;
for (var j = 0; j < rows; j++) {
for (var i = 0; i < columns; i++) {
var x = i * (this._cellWidth + columnGap);
var y = j * (this._cellHeight + rowGap);
this.positionSlotMap.set("".concat(x, "-").concat(y), 0);
this.positionToIndexMap.set("".concat(x, "-").concat(y), index);
this.indexToItemMap.set(index, []);
var item = new Container(this.scene, { x: x, y: y, id: index.toString() });
item.setName(item.id);
this.addItemPlaceholder(item);
(_a = this._content) === null || _a === void 0 ? void 0 : _a.addChild(item);
index++;
}
}
};
Grid.prototype.addItemPlaceholder = function (item) {
var placeholder = this.scene.add.rectangle(0, 0, this._cellWidth, this._cellHeight, 0xff0000);
placeholder.setVisible(false).setOrigin(0);
item.add(placeholder);
};
Grid.prototype.reDraw = function (config) {
this.clear();
this.draw(config);
};
Grid.prototype.clear = function () {
var _this = this;
var _a;
(_a = this._content) === null || _a === void 0 ? void 0 : _a.removeAll(true);
this.removeAll(true);
if (this._gridLines) {
this._gridLines.destroy();
this._gridLines = undefined;
}
this.positionSlotMap.forEach(function (value, key) {
_this.positionSlotMap.set(key, 0);
});
this.indexToItemMap.clear();
this.positionToIndexMap.clear();
};
Grid.prototype.addItems = function (childConfigs) {
var _this = this;
var emptyCells = this.getEmptyCells();
emptyCells.forEach(function (emptyCell, index) {
if (index >= childConfigs.length)
return;
_this.addItemToCell(childConfigs[index], emptyCell, index);
});
};
Grid.prototype.addItemToCell = function (childConfig, emptyCell, index) {
var _a = this.calculateChildDimensions(childConfig), width = _a.width, height = _a.height;
var mergedConfig = __assign(__assign({}, childConfig), { width: width, height: height });
var child = this.scene.getChild(mergedConfig);
this.setupChild(child, emptyCell, index);
};
Grid.prototype.calculateChildDimensions = function (childConfig) {
var _a, _b;
var width = ((_a = this._config) === null || _a === void 0 ? void 0 : _a.autoFill) ? this._cellWidth : childConfig.width;
var height = ((_b = this._config) === null || _b === void 0 ? void 0 : _b.autoFill) ? this._cellHeight : childConfig.height;
return { width: width !== null && width !== void 0 ? width : 0, height: height !== null && height !== void 0 ? height : 0 };
};
Grid.prototype.calculateChildPosition = function (childConfig, emptyCell, width, height) {
var _a, _b;
var x = emptyCell.x + ((_a = childConfig === null || childConfig === void 0 ? void 0 : childConfig.x) !== null && _a !== void 0 ? _a : (this._cellWidth - width) / 2);
var y = emptyCell.y + ((_b = childConfig === null || childConfig === void 0 ? void 0 : childConfig.y) !== null && _b !== void 0 ? _b : (this._cellHeight - height) / 2);
return { x: x, y: y };
};
Grid.prototype.setupChild = function (child, emptyCell, index) {
var _a;
var container = (this._content.getAll()).find(function (c) { return c.getAll().length === 1; });
child.setName("item_0");
child.setData(CellIndex, container === null || container === void 0 ? void 0 : container.name);
child.setEventInteractive();
this.setupDraggable(child);
container === null || container === void 0 ? void 0 : container.addChild(child);
this.positionSlotMap.set("".concat(emptyCell.x, "-").concat(emptyCell.y), 1);
(_a = this.indexToItemMap.get(index)) === null || _a === void 0 ? void 0 : _a.push(child);
};
Grid.prototype.addCellItems = function (childConfigs) {
var _this = this;
var emptyCells = this.getEmptyCells();
emptyCells.forEach(function (emptyCell, index) {
if (index >= childConfigs.length)
return;
_this.addItemsToCell(childConfigs[index], emptyCell, index);
});
};
Grid.prototype.addItemsToCell = function (itemConfigs, emptyCell, cellIndex) {
var _this = this;
itemConfigs.forEach(function (cfg, i) {
var _a = _this.calculateChildDimensions(cfg), width = _a.width, height = _a.height;
var mergedConfig = __assign(__assign({}, cfg), { width: width, height: height });
var child = _this.scene.getChild(mergedConfig);
_this.setupCellChild(child, emptyCell, cellIndex, i, cfg.draggable);
});
};
Grid.prototype.setupCellChild = function (child, emptyCell, cellIndex, itemIndex, draggable) {
var _a, _b;
child.setName("item_".concat(itemIndex));
child.setData(CellIndex, cellIndex);
child.setEventInteractive();
(_a = this.getItemByIndex(cellIndex)) === null || _a === void 0 ? void 0 : _a.addChildAt(child, itemIndex);
if (draggable) {
this.setupDraggable(child);
}
this.positionSlotMap.set("".concat(emptyCell.x, "-").concat(emptyCell.y), 1);
(_b = this.indexToItemMap.get(cellIndex)) === null || _b === void 0 ? void 0 : _b.push(child);
};
Grid.prototype.getItemByIndex = function (index) {
var _a;
return (_a = this._content) === null || _a === void 0 ? void 0 : _a.getByName(index + "");
};
Grid.prototype.getCellItemsAtIndex = function (index) {
var _a, _b;
return (_b = (_a = this.getItemByIndex(index)) === null || _a === void 0 ? void 0 : _a.getAll()) !== null && _b !== void 0 ? _b : [];
};
Grid.prototype.getEmptyCells = function () {
var positions = [];
this.positionSlotMap.forEach(function (value, key) {
if (value === 0) {
var _a = key.split('-').map(Number), x = _a[0], y = _a[1];
positions.push({ x: x, y: y });
}
});
return positions;
};
Grid.prototype.setupDraggable = function (child) {
var _a;
if (!((_a = this._config) === null || _a === void 0 ? void 0 : _a.draggable))
return;
this.scene.input.setDraggable(child);
child.on('dragstart', this.handleDragStart.bind(this, child));
child.on('drag', this.handleDrag.bind(this));
child.on('dragend', this.handleDragEnd.bind(this));
};
Grid.prototype.handleDragStart = function (child, pointer, dragX, dragY) {
var _a, _b, _c;
this._draggingChild = child;
this._originalPosition = { x: child.x, y: child.y };
var cellIndex = child.getData(CellIndex);
this._originalIndex = cellIndex;
(_a = this._content) === null || _a === void 0 ? void 0 : _a.bringToTop(this.getItemByIndex(cellIndex));
(_c = (_b = this._config) === null || _b === void 0 ? void 0 : _b.handleDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, child, pointer, dragX, dragY);
};
Grid.prototype.handleDrag = function (pointer, dragX, dragY) {
var _a, _b;
if (this._draggingChild) {
this._draggingChild.x = dragX;
this._draggingChild.y = dragY;
}
(_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.handleDrag) === null || _b === void 0 ? void 0 : _b.call(_a, this._draggingChild, pointer, dragX, dragY);
};
Grid.prototype.handleDragEnd = function (pointer) {
var _a, _b;
if (!this._draggingChild)
return;
var draggingCellIndex = this._draggingChild.getData(CellIndex);
var draggingItem = this.getItemByIndex(draggingCellIndex);
var targetItem = this.getChildAtPosition(draggingCellIndex, pointer);
// resetPostion
this._draggingChild.setPosition(this._originalPosition.x, this._originalPosition.y);
(_b = (_a = this._config) === null || _a === void 0 ? void 0 : _a.handleDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, draggingItem, targetItem, pointer);
this.cleanupDragState();
};
Grid.prototype.findNearestEmptyCell = function (x, y) {
var _this = this;
var nearestCell = null;
this.positionSlotMap.forEach(function (value, key) {
if (value === 0) {
var _a = key.split('-').map(Number), cellX = _a[0], cellY = _a[1];
if (x >= cellX && x <= cellX + _this._cellWidth &&
y >= cellY && y <= cellY + _this._cellHeight) {
nearestCell = { x: cellX, y: cellY };
}
}
});
return nearestCell;
};
Grid.prototype.moveChildToEmptyCell = function (child, cell) {
var oldKey = "".concat(this._originalPosition.x, "-").concat(this._originalPosition.y);
var newKey = "".concat(cell.x, "-").concat(cell.y);
child.setPosition(cell.x, cell.y);
this.positionSlotMap.set(newKey, 1);
this.positionSlotMap.set(oldKey, 0);
};
Grid.prototype.swapChildren = function (child1, child2) {
var targetIndex = this._content.getIndex(child2);
var originalIndex = this._content.getIndex(child1);
var pos1 = { x: child1.x, y: child1.y };
var pos2 = { x: child2.x, y: child2.y };
child1.setPosition(pos2.x, pos2.y);
child2.setPosition(pos1.x, pos1.y);
this._content.moveTo(child1, targetIndex);
this._content.moveTo(child2, originalIndex);
this.updateGridItemsMap(child1, child2);
};
Grid.prototype.resetDraggedChild = function () {
if (this._draggingChild && this._originalPosition) {
this._draggingChild.setPosition(this._originalPosition.x, this._originalPosition.y);
if (this._originalIndex !== undefined) {
this._content.moveTo(this._draggingChild, this._originalIndex);
}
}
};
Grid.prototype.cleanupDragState = function () {
this._draggingChild = undefined;
this._originalPosition = undefined;
this._originalIndex = undefined;
};
Grid.prototype.updateGridItemsMap = function (child1, child2) {
this.positionSlotMap.set("".concat(child1.x, "-").concat(child1.y), 1);
this.positionSlotMap.set("".concat(child2.x, "-").concat(child2.y), 1);
};
Grid.prototype.getChildAtPosition = function (draggingCellIndex, pointer) {
return this._content.getAll().find(function (child) {
return child.name != draggingCellIndex &&
Phaser.Geom.Rectangle.ContainsPoint(child.getBounds(), new Phaser.Geom.Point(pointer.x, pointer.y));
});
};
Grid.prototype.removeChild = function (container) {
var key = "".concat(container.x, "-").concat(container.y);
this.positionSlotMap.set(key, 0);
container.removeAll(true);
this.addItemPlaceholder(container);
};
Grid.prototype.destroy = function (fromScene) {
var _a, _b;
_super.prototype.destroy.call(this, fromScene);
(_a = this._content) === null || _a === void 0 ? void 0 : _a.destroy(fromScene);
(_b = this._gridLines) === null || _b === void 0 ? void 0 : _b.destroy(fromScene);
this.positionSlotMap.clear();
};
return Grid;
}(Panel));
export { Grid };