removed offset indicator

src/components/SpriteCanvas.vue

@@ -15,26 +15,12 @@
           <input id="show-all-sprites" type="checkbox" v-model="showAllSprites" class="mr-2" />
           <label for="show-all-sprites" class="dark:text-gray-200">Compare sprites</label>
         </div>
-        <div class="flex items-center space-x-4">
-          <select v-model="offsetAnchor" class="px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded">
-            <option value="top-left">Top Left</option>
-            <option value="top-right">Top Right</option>
-            <option value="bottom-left">Bottom Left</option>
-            <option value="bottom-right">Bottom Right</option>
-          </select>
-          <label class="dark:text-gray-200">Offset indicator position</label>
-          <button @click="setNewOffsetBase" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded transition-colors">Set Current as Base</button>
-        </div>
       </div>
     </div>
 
     <div class="relative border border-gray-300 dark:border-gray-600 rounded-lg overflow-auto">
-      <div class="canvas-container touch-manipulation" :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }">
+      <!-- Zoom controls - visible on all screen sizes and positioned outside cells -->
-        <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
+      <div class="relative flex space-x-2 bg-white/90 dark:bg-gray-800/90 p-2 rounded-lg shadow-md z-20">
-      </div>
-
-      <!-- Mobile zoom controls -->
-      <div class="absolute bottom-3 right-3 flex space-x-2 sm:hidden bg-white/80 dark:bg-gray-800/80 p-2 rounded-lg shadow-md">
         <button @click="zoomIn" class="p-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg transition-colors">
           <i class="fas fa-plus"></i>
         </button>
@@ -46,11 +32,8 @@
         </button>
       </div>
 
-      <!-- Offset indicators overlay -->
+      <div class="canvas-container touch-manipulation" :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }">
-      <div v-if="canvasRef" class="absolute top-0 left-0 pointer-events-none w-full h-full">
+        <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
-        <div v-for="pos in spritePositions" :key="pos.id" class="absolute" :style="getOffsetIndicatorStyle(pos)">
-          <div class="text-xs bg-black/75 dark:bg-white/75 text-white dark:text-gray-900 px-1 rounded whitespace-nowrap">x:{{ pos.x }}, y:{{ pos.y }}</div>
-        </div>
       </div>
     </div>
   </div>
@@ -106,9 +89,6 @@
   const ghostSprite = ref<{ id: string; x: number; y: number } | null>(null);
   const highlightCell = ref<CellPosition | null>(null);
 
-  // Add these refs at the top with other refs
-  const baseOffsets = ref<Record<string, { x: number; y: number }>>({});
-
   const showAllSprites = ref(false);
 
   const spritePositions = computed(() => {
@@ -120,11 +100,6 @@
       const col = index % props.columns;
       const row = Math.floor(index / props.columns);
 
-      // Calculate relative offset from base
-      const baseOffset = baseOffsets.value[sprite.id] || { x: 0, y: 0 };
-      const relativeX = sprite.x - baseOffset.x;
-      const relativeY = sprite.y - baseOffset.y;
-
       return {
         id: sprite.id,
         canvasX: col * maxWidth + sprite.x,
@@ -138,9 +113,8 @@
         col,
         row,
         index,
-        // Use relative offsets for display
+        x: sprite.x,
-        x: relativeX,
+        y: sprite.y,
-        y: relativeY,
       };
     });
   });
@@ -496,61 +470,6 @@
     const rect = canvasRef.value.getBoundingClientRect();
     return rect.width / canvasRef.value.width;
   });
-
-  // Add new ref for offset anchor
-  const offsetAnchor = ref('top-left');
-
-  // Add new method to calculate indicator position
-  const getOffsetIndicatorStyle = (pos: any) => {
-    const baseX = pos.cellX * scale.value;
-    const baseY = pos.cellY * scale.value;
-    const cellWidth = pos.maxWidth * scale.value;
-    const cellHeight = pos.maxHeight * scale.value;
-
-    switch (offsetAnchor.value) {
-      case 'top-right':
-        return {
-          left: `${baseX + cellWidth}px`,
-          top: `${baseY}px`,
-          transform: 'translateX(-100%)',
-        };
-      case 'bottom-left':
-        return {
-          left: `${baseX}px`,
-          top: `${baseY + cellHeight}px`,
-          transform: 'translateY(-100%)',
-        };
-      case 'bottom-right':
-        return {
-          left: `${baseX + cellWidth}px`,
-          top: `${baseY + cellHeight}px`,
-          transform: 'translate(-100%, -100%)',
-        };
-      default: // top-left
-        return {
-          left: `${baseX}px`,
-          top: `${baseY}px`,
-        };
-    }
-  };
-
-  const setNewOffsetBase = () => {
-    // Store current positions as new base positions
-    props.sprites.forEach(sprite => {
-      baseOffsets.value[sprite.id] = {
-        x: Math.floor(sprite.x),
-        y: Math.floor(sprite.y),
-      };
-    });
-
-    // Force redraw to update offset indicators
-    drawCanvas();
-  };
 </script>
 
-<style scoped>
+<style scoped></style>
-  /* Add styles for offset indicators */
-  .pointer-events-none {
-    pointer-events: none;
-  }
-</style>