@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
187 lines (186 loc) • 8.56 kB
JavaScript
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);
};
var ResizableComponentManager = /** @class */ (function () {
function ResizableComponentManager(scene) {
this.resizeHandles = [];
this.resizeContainers = [];
this.isResizing = false;
this.activeHandle = null;
this.components = [];
this.scene = scene;
}
ResizableComponentManager.prototype.addComponent = function (component) {
this.components.push(component);
this.createResizeHandles(this.components.length - 1);
};
ResizableComponentManager.prototype.clear = function () {
this.resizeContainers.forEach(function (item) {
item.destroy(true);
});
this.components = [];
this.resizeContainers = [];
};
ResizableComponentManager.prototype.createResizeHandles = function (componentIndex) {
var _this = this;
var component = this.components[componentIndex];
var handleSize = 8;
var padding = 0;
var positions = this.getComponentBorderPositions(component, padding);
var pos = component.getWorldTransformMatrix();
var resizeContainer = this.scene.add.container(pos.tx - padding, pos.ty - padding);
this.scene.add.existing(resizeContainer);
this.resizeContainers.push(resizeContainer);
var borderGraphics = this.scene.add.graphics();
borderGraphics.lineStyle(1, 0xffffff, 1);
borderGraphics.strokeRect(0, 0, component.Width + padding * 2, component.Height + padding * 2);
resizeContainer.setDepth(Infinity);
resizeContainer.add(borderGraphics);
positions.forEach(function (pos, index) {
var _pos = component.getWorldTransformMatrix();
var handle = _this.scene.add.rectangle(pos.x - _pos.tx + padding, pos.y - _pos.ty + padding, handleSize, handleSize, 0xffffff);
handle.setOrigin(0.5);
handle.setInteractive({ draggable: true });
handle.on("dragstart", function () { return _this.startResize(handle, componentIndex); });
handle.on("drag", function (pointer) {
return _this.resize(pointer, index, componentIndex);
});
handle.on("dragend", function () { return _this.endResize(componentIndex); });
_this.resizeHandles.push(handle);
resizeContainer.add(handle);
});
this.updateResizeHandles(componentIndex);
};
ResizableComponentManager.prototype.getComponentBorderPositions = function (component, padding) {
var left = 0;
var top = 0;
var right = component.Width + padding * 2;
var bottom = component.Height + padding * 2;
var centerX = component.Width / 2;
var centerY = component.Height / 2;
return [
{ x: left, y: top },
{ x: centerX, y: top },
{ x: right, y: top },
{ x: left, y: centerY },
{ x: right, y: centerY },
{ x: left, y: bottom },
{ x: centerX, y: bottom },
{ x: right, y: bottom },
];
};
ResizableComponentManager.prototype.startResize = function (handle, componentIndex) {
this.isResizing = true;
this.activeHandle = handle;
var component = this.components[componentIndex];
this.scene.events.emit("resizeStart", component.config);
};
ResizableComponentManager.prototype.resize = function (pointer, handleIndex, componentIndex) {
var _a;
if (!this.isResizing || !this.activeHandle)
return;
var component = this.components[componentIndex];
var resizeContainer = this.resizeContainers[componentIndex];
var rePos = resizeContainer.getWorldTransformMatrix();
var dx = pointer.x - rePos.tx - this.activeHandle.x;
var dy = pointer.y - rePos.ty - this.activeHandle.y;
var originalWidth = component.Width;
var originalHeight = component.Height;
var newWidth = originalWidth;
var newHeight = originalHeight;
var newX = component.x;
var newY = component.y;
var minWidth = 50;
var minHeight = 30;
switch (handleIndex) {
case 0: // 左上
newWidth = Math.max(originalWidth - dx, minWidth);
newHeight = Math.max(originalHeight - dy, minHeight);
newX += originalWidth - newWidth;
newY += originalHeight - newHeight;
break;
case 1: // 上中
newHeight = Math.max(originalHeight - dy, minHeight);
newY += originalHeight - newHeight;
break;
case 2: // 右上
newWidth = Math.max(originalWidth + dx, minWidth);
newHeight = Math.max(originalHeight - dy, minHeight);
newY += originalHeight - newHeight;
break;
case 3: // 左中
newWidth = Math.max(originalWidth - dx, minWidth);
newX += originalWidth - newWidth;
break;
case 4: // 右中
newWidth = Math.max(originalWidth + dx, minWidth);
break;
case 5: // 左下
newWidth = Math.max(originalWidth - dx, minWidth);
newHeight = Math.max(originalHeight + dy, minHeight);
newX += originalWidth - newWidth;
break;
case 6: // 下中
newHeight = Math.max(originalHeight + dy, minHeight);
break;
case 7: // 右下
newWidth = Math.max(originalWidth + dx, minWidth);
newHeight = Math.max(originalHeight + dy, minHeight);
break;
}
var newConfig = __assign(__assign({}, component.config), { x: newX, y: newY, width: newWidth, height: newHeight });
if (component.Type === "RoundedButton") {
if (newWidth !== originalWidth) {
newConfig.radius = newWidth / 2;
}
if (newHeight !== originalHeight) {
newConfig.radius = newHeight / 2;
}
}
this.scene.events.emit("resize", newConfig);
component.setPosition(newX, newY);
component.reDraw(newConfig);
component.setEventInteractive();
if (component.Type === "ProgressBar") {
component.updateProgress((_a = newConfig.process) !== null && _a !== void 0 ? _a : 0);
}
this.updateResizeHandles(componentIndex);
};
ResizableComponentManager.prototype.endResize = function (componentIndex) {
this.isResizing = false;
this.activeHandle = null;
var component = this.components[componentIndex];
this.scene.events.emit("resizeEnd", component.config);
};
ResizableComponentManager.prototype.updateResizeHandles = function (componentIndex) {
var component = this.components[componentIndex];
if (!component)
return;
var resizeContainer = this.resizeContainers[componentIndex];
var padding = 1;
var pos = component.getWorldTransformMatrix();
component.RefreshBounds();
resizeContainer.setPosition(pos.tx - padding, pos.ty - padding);
var positions = this.getComponentBorderPositions(component, padding);
var borderGraphics = resizeContainer
.list[0];
borderGraphics === null || borderGraphics === void 0 ? void 0 : borderGraphics.clear();
borderGraphics === null || borderGraphics === void 0 ? void 0 : borderGraphics.lineStyle(1, 0xffffff, 1);
borderGraphics === null || borderGraphics === void 0 ? void 0 : borderGraphics.strokeRect(0, 0, component.Width + padding * 2, component.Height + padding * 2);
resizeContainer === null || resizeContainer === void 0 ? void 0 : resizeContainer.list.slice(1).forEach(function (child, index) {
if (child instanceof Phaser.GameObjects.Rectangle) {
child.setPosition(positions[index].x, positions[index].y);
}
});
};
return ResizableComponentManager;
}());
export default ResizableComponentManager;