From 45844ea800f2cfb366cf36db2c0fe041541a3b3c Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Mon, 20 Apr 2026 17:20:30 +0800
Subject: [PATCH] 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.
---
 .../src/scenes/InventoryItemSpawner.ts        | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts b/packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts
index 493b39d..57c2eb0 100644
--- a/packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts
+++ b/packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts
@@ -78,35 +78,44 @@ export class InventoryItemSpawner implements Spawner<
     const itemColor = this.getItemColor(itemId);
     const graphics = this.scene.add.graphics();
 
+    // Draw graphics in container-local coordinates (container is at firstCell position)
     for (const cell of cells) {
-      const px = this.gridOffsetX + cell.x * GRID_CONFIG.VIEWER_CELL_SIZE;
-      const py = this.gridOffsetY + cell.y * GRID_CONFIG.VIEWER_CELL_SIZE;
+      // Local coordinates relative to container position
+      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.fillRect(
-        px + 2,
-        py + 2,
+        localX + 2,
+        localY + 2,
         GRID_CONFIG.VIEWER_CELL_SIZE - 4,
         GRID_CONFIG.VIEWER_CELL_SIZE - 4,
       );
     }
 
     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;
 
+      // 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(
-        px + GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-        py + GRID_CONFIG.VIEWER_CELL_SIZE / 2,
+        textX,
+        textY,
         itemName,
         GRID_CONFIG.ITEM_NAME_STYLE,
       );
       text.setOrigin(0.5);
 
       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 {
       container.add(graphics);
     }
@@ -141,8 +150,8 @@ export class InventoryItemSpawner implements Spawner<
       } else if (event.type === DragDropEventType.MOVE) {
         // Update drag position
         if (this.dragState?.itemId === itemId) {
-          container.x += event.deltaX;
-          container.y += event.deltaY;
+          container.x = this.dragState.startX + event.deltaX;
+          container.y = this.dragState.startY + event.deltaY;
         }
       } else if (event.type === DragDropEventType.UP) {
         // End drag
@@ -212,16 +221,17 @@ export class InventoryItemSpawner implements Spawner<
     const cells = this.getCells(item);
 
     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
       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({
           targets: obj,
-          x: px,
-          y: py,
+          x: worldX,
+          y: worldY,
           duration: 200,
           ease: "Power2",
         });