hypercross
/
boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(sts-viewer): use local coordinates for inventory item container 

Update `InventoryItemSpawner` to draw graphics and text relative to the
container's local coordinate system instead of world coordinates.
The container is then positioned at the first cell's world position.
This also fixes drag positioning by calculating movement relative to
the initial drag start point.
This commit is contained in:
hypercross 2026-04-20 17:20:30 +08:00
parent 29b516c371
commit 45844ea800
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts
View File

@ -78,35 +78,44 @@ export class InventoryItemSpawner implements Spawner<
const itemColor = this.getItemColor(itemId); const itemColor = this.getItemColor(itemId);
const graphics = this.scene.add.graphics(); const graphics = this.scene.add.graphics();
// Draw graphics in container-local coordinates (container is at firstCell position)
for (const cell of cells) { for (const cell of cells) {
const px = this.gridOffsetX + cell.x * GRID_CONFIG.VIEWER_CELL_SIZE; // Local coordinates relative to container position
const py = this.gridOffsetY + cell.y * GRID_CONFIG.VIEWER_CELL_SIZE; const localX = (cell.x - cells[0].x) * GRID_CONFIG.VIEWER_CELL_SIZE;
const localY = (cell.y - cells[0].y) * GRID_CONFIG.VIEWER_CELL_SIZE;
graphics.fillStyle(itemColor); graphics.fillStyle(itemColor);
graphics.fillRect( graphics.fillRect(
px + 2, localX + 2,
py + 2, localY + 2,
GRID_CONFIG.VIEWER_CELL_SIZE - 4, GRID_CONFIG.VIEWER_CELL_SIZE - 4,
GRID_CONFIG.VIEWER_CELL_SIZE - 4, GRID_CONFIG.VIEWER_CELL_SIZE - 4,
); );
} }
if (cells.length > 0) { if (cells.length > 0) {
const firstCell = cells[0];
const px = this.gridOffsetX + firstCell.x * GRID_CONFIG.VIEWER_CELL_SIZE;
const py = this.gridOffsetY + firstCell.y * GRID_CONFIG.VIEWER_CELL_SIZE;
const itemName = item.meta?.itemData.name ?? itemId; const itemName = item.meta?.itemData.name ?? itemId;
// Text is centered in the first cell, relative to container
const textX = GRID_CONFIG.VIEWER_CELL_SIZE / 2;
const textY = GRID_CONFIG.VIEWER_CELL_SIZE / 2;
const text = this.scene.add.text( const text = this.scene.add.text(
px + GRID_CONFIG.VIEWER_CELL_SIZE / 2, textX,
py + GRID_CONFIG.VIEWER_CELL_SIZE / 2, textY,
itemName, itemName,
GRID_CONFIG.ITEM_NAME_STYLE, GRID_CONFIG.ITEM_NAME_STYLE,
); );
text.setOrigin(0.5); text.setOrigin(0.5);
container.add([graphics, text]); container.add([graphics, text]);
container.setPosition(px, py);
// Position container at the first cell's world position
const worldX =
this.gridOffsetX + cells[0].x * GRID_CONFIG.VIEWER_CELL_SIZE;
const worldY =
this.gridOffsetY + cells[0].y * GRID_CONFIG.VIEWER_CELL_SIZE;
container.setPosition(worldX, worldY);
} else { } else {
container.add(graphics); container.add(graphics);
} }
@ -141,8 +150,8 @@ export class InventoryItemSpawner implements Spawner<
} else if (event.type === DragDropEventType.MOVE) { } else if (event.type === DragDropEventType.MOVE) {
// Update drag position // Update drag position
if (this.dragState?.itemId === itemId) { if (this.dragState?.itemId === itemId) {
container.x += event.deltaX; container.x = this.dragState.startX + event.deltaX;
container.y += event.deltaY; container.y = this.dragState.startY + event.deltaY;
} }
} else if (event.type === DragDropEventType.UP) { } else if (event.type === DragDropEventType.UP) {
// End drag // End drag
@ -212,16 +221,17 @@ export class InventoryItemSpawner implements Spawner<
const cells = this.getCells(item); const cells = this.getCells(item);
if (cells.length > 0) { if (cells.length > 0) {
const firstCell = cells[0];
const px = this.gridOffsetX + firstCell.x * GRID_CONFIG.VIEWER_CELL_SIZE;
const py = this.gridOffsetY + firstCell.y * GRID_CONFIG.VIEWER_CELL_SIZE;
// Don't animate if currently dragging this item // Don't animate if currently dragging this item
if (this.dragState?.itemId !== entry[0]) { if (this.dragState?.itemId !== entry[0]) {
const worldX =
this.gridOffsetX + cells[0].x * GRID_CONFIG.VIEWER_CELL_SIZE;
const worldY =
this.gridOffsetY + cells[0].y * GRID_CONFIG.VIEWER_CELL_SIZE;
this.scene.tweens.add({ this.scene.tweens.add({
targets: obj, targets: obj,
x: px, x: worldX,
y: py, y: worldY,
duration: 200, duration: 200,
ease: "Power2", ease: "Power2",
}); });