[FEAT] Clean code

src/components/SpritePreview.vue

@@ -303,7 +303,6 @@
 
   const previewContainerRef = ref<HTMLDivElement | null>(null);
 
-  // Get settings from store
   const settingsStore = useSettingsStore();
 
   const {
@@ -331,14 +330,12 @@
     onDraw: () => {}, // No longer needed for canvas drawing
   });
 
-  // Preview state
   const isDraggable = ref(false);
   const repositionAllLayers = ref(false);
   const arrowKeyMovement = ref(false);
   const showAllSprites = ref(false);
   const isDragOver = ref(false);
 
-  // Context menu state
   const showContextMenu = ref(false);
   const contextMenuX = ref(0);
   const contextMenuY = ref(0);
@@ -347,11 +344,9 @@
   const fileInput = ref<HTMLInputElement | null>(null);
   const replacingSpriteId = ref<string | null>(null);
 
-  // Copy to frame modal state
   const showCopyToFrameModal = ref(false);
   const copyTargetLayerId = ref(props.activeLayerId);
 
-  // Drag and drop for new sprites
   const onDragOver = () => {
     isDragOver.value = true;
   };
@@ -373,10 +368,8 @@
   };
 
   const compositeFrames = computed<Sprite[]>(() => {
-    // Show frames from the active layer for the thumbnail list
     const activeLayer = props.layers.find(l => l.id === props.activeLayerId);
     if (!activeLayer) {
-      // Fallback to first visible layer if no active layer
       const v = getVisibleLayers();
       const len = maxFrames();
       const arr: Sprite[] = [];
@@ -395,7 +388,6 @@
     return layer.sprites[currentFrameIndex.value] || null;
   });
 
-  // Use the new useGridMetrics composable for consistent calculations
   const { gridMetrics, getCellPosition: getCellPositionHelper } = useGridMetrics({
     layers: toRef(props, 'layers'),
     negativeSpacingEnabled: toRef(settingsStore, 'negativeSpacingEnabled'),
@@ -404,19 +396,16 @@
     manualCellHeight: toRef(settingsStore, 'manualCellHeight'),
   });
 
-  // Helper function to get cell position (same as SpriteCanvas)
   const getCellPosition = (index: number) => {
     return getCellPositionHelper(index, props.columns, gridMetrics.value);
   };
 
-  // Computed cell dimensions (for backward compatibility with existing code)
   const cellDimensions = computed(() => ({
     cellWidth: gridMetrics.value.maxWidth,
     cellHeight: gridMetrics.value.maxHeight,
     negativeSpacing: gridMetrics.value.negativeSpacing,
   }));
 
-  // Use the new useBackgroundStyles composable for consistent background styling
   const {
     backgroundImage: previewBackgroundImage,
     backgroundSize: previewBackgroundSize,
@@ -429,7 +418,6 @@
 
   const getPreviewBackgroundImage = () => previewBackgroundImage.value;
 
-  // Dragging state
   const isDragging = ref(false);
   const activeSpriteId = ref<string | null>(null);
   const activeLayerId = ref<string | null>(null);
@@ -438,7 +426,6 @@
   const spritePosBeforeDrag = ref({ x: 0, y: 0 });
   const allSpritesPosBeforeDrag = ref<Map<string, { x: number; y: number }>>(new Map());
 
-  // Drag functionality
   const startDrag = (event: MouseEvent, sprite: Sprite, layerId: string) => {
     if (!isDraggable.value || !previewContainerRef.value) return;
 
@@ -455,7 +442,6 @@
       dragStartX.value = mouseX;
       dragStartY.value = mouseY;
 
-      // Store initial positions for all sprites in this frame from all visible layers
       allSpritesPosBeforeDrag.value.clear();
       const visibleLayers = getVisibleLayers();
       visibleLayers.forEach(layer => {
@@ -490,7 +476,6 @@
     const { cellWidth, cellHeight, negativeSpacing } = cellDimensions.value;
 
     if (activeSpriteId.value === 'ALL_LAYERS') {
-      // Move all sprites in current frame from all visible layers
       const visibleLayers = getVisibleLayers();
       visibleLayers.forEach(layer => {
         const sprite = layer.sprites[currentFrameIndex.value];
@@ -499,26 +484,21 @@
         const originalPos = allSpritesPosBeforeDrag.value.get(sprite.id);
         if (!originalPos) return;
 
-        // Calculate new position with constraints
         let newX = Math.round(originalPos.x + deltaX);
         let newY = Math.round(originalPos.y + deltaY);
 
-        // Constrain movement within expanded cell
         newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
         newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
 
         emit('updateSpriteInLayer', layer.id, sprite.id, newX, newY);
       });
     } else {
-      // Move only the active layer sprite
       const activeSprite = props.layers.find(l => l.id === activeLayerId.value)?.sprites[currentFrameIndex.value];
       if (!activeSprite || activeSprite.id !== activeSpriteId.value) return;
 
-      // Calculate new position with constraints and round to integers
       let newX = Math.round(spritePosBeforeDrag.value.x + deltaX);
       let newY = Math.round(spritePosBeforeDrag.value.y + deltaY);
 
-      // Constrain movement within expanded cell (allow negative values up to -negativeSpacing)
       newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - activeSprite.width, newX));
       newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - activeSprite.height, newY));
 
@@ -562,7 +542,6 @@
     }
   };
 
-  // Arrow key movement handler
   const handleKeyDown = (event: KeyboardEvent) => {
     if (!isDraggable.value || !arrowKeyMovement.value) return;
 
@@ -593,7 +572,6 @@
     const { cellWidth, cellHeight, negativeSpacing } = cellDimensions.value;
 
     if (repositionAllLayers.value) {
-      // Move all sprites in current frame from all visible layers
       const visibleLayers = getVisibleLayers();
       visibleLayers.forEach(layer => {
         const sprite = layer.sprites[currentFrameIndex.value];
@@ -602,14 +580,12 @@
         let newX = Math.round(sprite.x + deltaX);
         let newY = Math.round(sprite.y + deltaY);
 
-        // Constrain movement within expanded cell
         newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
         newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
 
         emit('updateSpriteInLayer', layer.id, sprite.id, newX, newY);
       });
     } else {
-      // Move only the active layer sprite
       const activeLayer = props.layers.find(l => l.id === props.activeLayerId);
       if (!activeLayer) return;
 
@@ -619,7 +595,6 @@
       let newX = Math.round(sprite.x + deltaX);
       let newY = Math.round(sprite.y + deltaY);
 
-      // Constrain movement within expanded cell
       newX = Math.max(-negativeSpacing, Math.min(cellWidth - negativeSpacing - sprite.width, newX));
       newY = Math.max(-negativeSpacing, Math.min(cellHeight - negativeSpacing - sprite.height, newY));
 
@@ -627,7 +602,6 @@
     }
   };
 
-  // Lifecycle hooks
   onMounted(() => {
     window.addEventListener('keydown', handleKeyDown);
   });
@@ -637,8 +611,6 @@
     window.removeEventListener('keydown', handleKeyDown);
   });
 
-  // Watchers - most canvas-related watchers removed
-  // Keep layer watchers to ensure reactivity
   watch(
     () => props.layers,
     () => {},
@@ -650,7 +622,6 @@
   );
   watch(currentFrameIndex, () => {});
 
-  // Context menu functions
   const openContextMenu = (event: MouseEvent, sprite: Sprite, layerId: string) => {
     event.preventDefault();
     contextMenuSpriteId.value = sprite.id;