[FEAT] UI enhancements

src/composables/useDragSprite.ts

@@ -102,11 +102,11 @@ export function useDragSprite(options: DragSpriteOptions) {
     lastMaxHeight.value = baseMaxHeight;
 
     // Calculate negative spacing using shared composable
-    const negativeSpacing = calculateNegativeSpacing(spritesToMeasure, negativeSpacingEnabled);
+    const negativeSpacing = Math.round(calculateNegativeSpacing(spritesToMeasure, negativeSpacingEnabled));
 
     // Add negative spacing to expand each cell
-    const maxWidth = baseMaxWidth + negativeSpacing;
-    const maxHeight = baseMaxHeight + negativeSpacing;
+    const maxWidth = Math.round(baseMaxWidth + negativeSpacing);
+    const maxHeight = Math.round(baseMaxHeight + negativeSpacing);
     return { maxWidth, maxHeight, negativeSpacing };
   };
 
@@ -124,14 +124,14 @@ export function useDragSprite(options: DragSpriteOptions) {
       // (spacing added to top and left)
       return {
         id: sprite.id,
-        canvasX: col * maxWidth + negativeSpacing + sprite.x,
-        canvasY: row * maxHeight + negativeSpacing + sprite.y,
-        cellX: col * maxWidth,
-        cellY: row * maxHeight,
-        width: sprite.width,
-        height: sprite.height,
-        maxWidth,
-        maxHeight,
+        canvasX: Math.round(col * maxWidth + negativeSpacing + sprite.x),
+        canvasY: Math.round(row * maxHeight + negativeSpacing + sprite.y),
+        cellX: Math.round(col * maxWidth),
+        cellY: Math.round(row * maxHeight),
+        width: Math.round(sprite.width),
+        height: Math.round(sprite.height),
+        maxWidth: Math.round(maxWidth),
+        maxHeight: Math.round(maxHeight),
         col,
         row,
         index,
@@ -206,8 +206,8 @@ export function useDragSprite(options: DragSpriteOptions) {
     // Use the sprite's current index in the array to calculate cell position
     const cellCol = spriteIndex % columns;
     const cellRow = Math.floor(spriteIndex / columns);
-    const cellX = cellCol * maxWidth;
-    const cellY = cellRow * maxHeight;
+    const cellX = Math.round(cellCol * maxWidth);
+    const cellY = Math.round(cellRow * maxHeight);
 
     // Calculate new position relative to cell origin (without the negative spacing offset)
     // The sprite's x,y is stored relative to where it would be drawn after the negativeSpacing offset
@@ -241,8 +241,8 @@ export function useDragSprite(options: DragSpriteOptions) {
         highlightCell.value = hoverCell;
         ghostSprite.value = {
           id: activeSpriteId.value,
-          x: pos.x - dragOffsetX.value,
-          y: pos.y - dragOffsetY.value,
+          x: Math.round(pos.x - dragOffsetX.value),
+          y: Math.round(pos.y - dragOffsetY.value),
         };
         onDraw();
       } else {