Improved auto detection

src/components/SpritesheetSplitter.vue

@@ -15,12 +15,12 @@
               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
               data-rybbit-event="spritesheet-detection-method"
             >
+              <option value="irregular">Auto-detect</option>
               <option value="manual">Manual (specify rows and columns)</option>
-              <option value="auto">Auto-detect (experimental)</option>
             </select>
           </div>
 
-          <div v-if="detectionMethod === 'auto'" class="space-y-2">
+          <div v-if="detectionMethod === 'auto' || detectionMethod === 'irregular'" class="space-y-2">
             <label for="sensitivity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Detection Sensitivity</label>
             <input type="range" id="sensitivity" v-model="sensitivity" min="1" max="100" class="w-full dark:accent-blue-400" data-rybbit-event="spritesheet-sensitivity" />
             <div class="text-xs text-gray-500 dark:text-gray-400 flex justify-between">
@@ -63,7 +63,7 @@
 
         <div v-if="previewSprites.length > 0" class="space-y-2">
           <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Preview ({{ previewSprites.length }} sprites)</h3>
-          <div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-40 overflow-y-auto p-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
+          <div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-96 overflow-y-auto p-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
             <div v-for="(sprite, index) in previewSprites" :key="index" class="relative border border-gray-300 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center" :style="{ width: '80px', height: '80px' }">
               <img :src="sprite.url" alt="Sprite preview" class="max-w-full max-h-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
             </div>
@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { ref, watch, onUnmounted } from 'vue';
   import Modal from './utilities/Modal.vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
 
@@ -129,7 +129,7 @@
   const settingsStore = useSettingsStore();
 
   // State
-  const detectionMethod = ref<'manual' | 'auto'>('manual');
+  const detectionMethod = ref<'manual' | 'auto' | 'irregular'>('irregular');
   const rows = ref(1);
   const columns = ref(1);
   const sensitivity = ref(50);
@@ -137,6 +137,15 @@
   const previewSprites = ref<SpritePreview[]>([]);
   const isProcessing = ref(false);
   const imageElement = ref<HTMLImageElement | null>(null);
+  const irregularWorker = ref<Worker | null>(null);
+
+  // Cache for sprite detection results
+  const detectionCache = new Map<string, SpritePreview[]>();
+
+  // Generate cache key for current detection settings
+  function getCacheKey(url: string, method: string, sensitivity: number, removeEmpty: boolean): string {
+    return `${url}-${method}-${sensitivity}-${removeEmpty}`;
+  }
 
   // Load the image when the component is mounted or the URL changes
   watch(() => props.imageUrl, loadImage, { immediate: true });
@@ -168,10 +177,18 @@
     img.src = props.imageUrl;
   }
 
-  // Generate preview of split sprites
+  // Generate preview of split sprites with caching
   async function generatePreview() {
     if (!imageElement.value) return;
 
+    // Check cache first
+    const cacheKey = getCacheKey(props.imageUrl, detectionMethod.value, sensitivity.value, removeEmpty.value);
+
+    if (detectionCache.has(cacheKey)) {
+      previewSprites.value = detectionCache.get(cacheKey)!;
+      return;
+    }
+
     isProcessing.value = true;
     previewSprites.value = [];
 
@@ -179,13 +196,19 @@
       const img = imageElement.value;
 
       if (detectionMethod.value === 'auto') {
-        // Auto-detection logic would go here
-        // For now, we'll use a simple algorithm based on sensitivity
         await autoDetectSprites(img);
+      } else if (detectionMethod.value === 'irregular') {
+        await detectIrregularSprites(img);
       } else {
-        // Manual splitting based on rows and columns
         await splitSpritesheet(img, rows.value, columns.value);
       }
+
+      // Cache results (limit cache size to prevent memory issues)
+      if (detectionCache.size > 10) {
+        const firstKey = detectionCache.keys().next().value;
+        detectionCache.delete(firstKey || '');
+      }
+      detectionCache.set(cacheKey, previewSprites.value);
     } catch (error) {
       console.error('Error generating preview:', error);
     } finally {
@@ -575,6 +598,161 @@
     return { detectedWidth, detectedHeight };
   }
 
+  // Detect irregular sprites using Web Worker
+  async function detectIrregularSprites(img: HTMLImageElement): Promise<void> {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Could not get canvas context');
+
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+    // Initialize worker lazily
+    if (!irregularWorker.value) {
+      irregularWorker.value = new Worker('/src/workers/irregularSpriteDetection.worker.ts', { type: 'module' });
+    }
+
+    return new Promise<void>((resolve, reject) => {
+      const worker = irregularWorker.value!;
+
+      const handleMessage = async (e: MessageEvent) => {
+        worker.removeEventListener('message', handleMessage);
+        worker.removeEventListener('error', handleError);
+
+        if (e.data.type === 'spritesDetected') {
+          try {
+            await processDetectedSprites(img, e.data.sprites, e.data.backgroundColor);
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        }
+      };
+
+      const handleError = (error: ErrorEvent) => {
+        worker.removeEventListener('message', handleMessage);
+        worker.removeEventListener('error', handleError);
+        reject(error);
+      };
+
+      worker.addEventListener('message', handleMessage);
+      worker.addEventListener('error', handleError);
+
+      worker.postMessage({
+        type: 'detectIrregularSprites',
+        imageData,
+        sensitivity: sensitivity.value,
+        maxSize: 2048, // Limit processing size for performance
+      });
+    });
+  }
+
+  // Process sprites detected by the worker (optimized)
+  async function processDetectedSprites(img: HTMLImageElement, detectedSprites: any[], backgroundColor?: [number, number, number, number]): Promise<void> {
+    if (!detectedSprites?.length) {
+      previewSprites.value = [];
+      return;
+    }
+
+    const sprites: SpritePreview[] = [];
+    const sourceCanvas = document.createElement('canvas');
+    const sourceCtx = sourceCanvas.getContext('2d');
+    const spriteCanvas = document.createElement('canvas');
+    const spriteCtx = spriteCanvas.getContext('2d');
+
+    if (!sourceCtx || !spriteCtx) return;
+
+    // Setup source canvas once
+    sourceCanvas.width = img.width;
+    sourceCanvas.height = img.height;
+    sourceCtx.drawImage(img, 0, 0);
+
+    // Process sprites in batches to avoid blocking
+    const batchSize = 50;
+    for (let i = 0; i < detectedSprites.length; i += batchSize) {
+      const batch = detectedSprites.slice(i, i + batchSize);
+
+      for (const sprite of batch) {
+        const { x, y, width, height } = sprite;
+
+        // Skip invalid sprites
+        if (width <= 0 || height <= 0) continue;
+
+        spriteCanvas.width = width;
+        spriteCanvas.height = height;
+        spriteCtx.clearRect(0, 0, width, height);
+        spriteCtx.drawImage(sourceCanvas, x, y, width, height, 0, 0, width, height);
+
+        // Remove background and make transparent for irregular sprites
+        if (detectionMethod.value === 'irregular' && backgroundColor) {
+          removeBackgroundFromSprite(spriteCtx, width, height, backgroundColor, sensitivity.value);
+        }
+
+        const isEmpty = removeEmpty.value ? isCanvasEmpty(spriteCtx, width, height) : false;
+
+        if (!removeEmpty.value || !isEmpty) {
+          sprites.push({
+            url: spriteCanvas.toDataURL('image/png'),
+            x,
+            y,
+            width,
+            height,
+            isEmpty,
+          });
+        }
+      }
+
+      // Yield control periodically for large batches
+      if (i > 0 && i % 100 === 0) {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+    }
+
+    previewSprites.value = sprites;
+  }
+
+  // Remove background color and make it transparent
+  function removeBackgroundFromSprite(ctx: CanvasRenderingContext2D, width: number, height: number, backgroundColor: [number, number, number, number], sensitivity: number): void {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+
+    const [bgR, bgG, bgB, bgA] = backgroundColor;
+    const colorTolerance = Math.round(50 - sensitivity * 0.45); // Same as worker
+    const alphaTolerance = Math.round(40 - sensitivity * 0.35);
+
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      const a = data[i + 3];
+
+      // Handle fully transparent pixels
+      if (a < 10) {
+        data[i + 3] = 0; // Make fully transparent
+        continue;
+      }
+
+      // Calculate color difference using Euclidean distance
+      const rDiff = r - bgR;
+      const gDiff = g - bgG;
+      const bDiff = b - bgB;
+      const aDiff = a - bgA;
+
+      const colorDistance = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
+      const alphaDistance = Math.abs(aDiff);
+
+      // If pixel matches background color, make it transparent
+      if (colorDistance <= colorTolerance && alphaDistance <= alphaTolerance) {
+        data[i + 3] = 0; // Set alpha to 0 (transparent)
+      }
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  }
+
   // Check if a canvas is empty (all transparent or same color)
   function isCanvasEmpty(ctx: CanvasRenderingContext2D, width: number, height: number): boolean {
     const imageData = ctx.getImageData(0, 0, width, height);
@@ -668,4 +846,13 @@
       generatePreview();
     }
   });
+
+  // Clean up worker and cache on component unmount
+  onUnmounted(() => {
+    if (irregularWorker.value) {
+      irregularWorker.value.terminate();
+      irregularWorker.value = null;
+    }
+    detectionCache.clear();
+  });
 </script>