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>

src/workers/irregularSpriteDetection.worker.ts

@@ -0,0 +1,378 @@
+interface SpriteRegion {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pixelCount: number;
+}
+
+interface WorkerMessage {
+  type: 'detectIrregularSprites';
+  imageData: ImageData;
+  sensitivity: number;
+  maxSize?: number;
+}
+
+interface WorkerResponse {
+  type: 'spritesDetected';
+  sprites: SpriteRegion[];
+  backgroundColor: [number, number, number, number];
+}
+
+// Pre-allocate arrays for better performance
+let maskBuffer: Uint8Array;
+let visitedBuffer: Uint8Array;
+let stackBuffer: Int32Array;
+
+self.onmessage = function (e: MessageEvent<WorkerMessage>) {
+  const { type, imageData, sensitivity, maxSize = 2048 } = e.data;
+
+  if (type === 'detectIrregularSprites') {
+    const { sprites, backgroundColor } = detectIrregularSprites(imageData, sensitivity, maxSize);
+
+    const response: WorkerResponse = {
+      type: 'spritesDetected',
+      sprites,
+      backgroundColor,
+    };
+
+    self.postMessage(response);
+  }
+};
+
+function detectIrregularSprites(imageData: ImageData, sensitivity: number, maxSize: number): { sprites: SpriteRegion[]; backgroundColor: [number, number, number, number] } {
+  const { data, width, height } = imageData;
+
+  // Downsample for very large images
+  const shouldDownsample = width > maxSize || height > maxSize;
+  let processedData: Uint8ClampedArray;
+  let processedWidth: number;
+  let processedHeight: number;
+  let scale = 1;
+
+  if (shouldDownsample) {
+    scale = Math.min(maxSize / width, maxSize / height);
+    processedWidth = Math.floor(width * scale);
+    processedHeight = Math.floor(height * scale);
+    processedData = downsampleImageData(data, width, height, processedWidth, processedHeight);
+  } else {
+    processedData = data;
+    processedWidth = width;
+    processedHeight = height;
+  }
+
+  // Fast background detection using histogram
+  const backgroundColor = fastBackgroundDetection(processedData, processedWidth, processedHeight);
+
+  // Create optimized mask
+  const mask = createOptimizedMask(processedData, processedWidth, processedHeight, backgroundColor, sensitivity);
+
+  // Clean up mask with morphological operations
+  const cleanedMask = cleanUpMask(mask, processedWidth, processedHeight);
+
+  // Find connected components with optimized flood fill
+  const sprites = findOptimizedConnectedComponents(cleanedMask, processedWidth, processedHeight);
+
+  // Filter noise
+  const minSpriteSize = Math.max(4, Math.floor(Math.min(processedWidth, processedHeight) / 100));
+  const filteredSprites = sprites.filter(sprite => sprite.pixelCount >= minSpriteSize);
+
+  // Scale results back up if downsampled
+  const finalSprites = shouldDownsample
+    ? filteredSprites.map(sprite => ({
+        x: Math.floor(sprite.x / scale),
+        y: Math.floor(sprite.y / scale),
+        width: Math.ceil(sprite.width / scale),
+        height: Math.ceil(sprite.height / scale),
+        pixelCount: sprite.pixelCount,
+      }))
+    : filteredSprites;
+
+  // Convert background color back to original format
+  const finalBackgroundColor: [number, number, number, number] = [backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]];
+
+  return {
+    sprites: finalSprites,
+    backgroundColor: finalBackgroundColor,
+  };
+}
+
+function downsampleImageData(data: Uint8ClampedArray, width: number, height: number, newWidth: number, newHeight: number): Uint8ClampedArray {
+  const result = new Uint8ClampedArray(newWidth * newHeight * 4);
+  const scaleX = width / newWidth;
+  const scaleY = height / newHeight;
+
+  for (let y = 0; y < newHeight; y++) {
+    for (let x = 0; x < newWidth; x++) {
+      const srcX = Math.floor(x * scaleX);
+      const srcY = Math.floor(y * scaleY);
+      const srcIdx = (srcY * width + srcX) * 4;
+      const dstIdx = (y * newWidth + x) * 4;
+
+      result[dstIdx] = data[srcIdx];
+      result[dstIdx + 1] = data[srcIdx + 1];
+      result[dstIdx + 2] = data[srcIdx + 2];
+      result[dstIdx + 3] = data[srcIdx + 3];
+    }
+  }
+
+  return result;
+}
+
+function fastBackgroundDetection(data: Uint8ClampedArray, width: number, height: number): Uint32Array {
+  // Enhanced background detection focusing on edges and corners
+  const colorCounts = new Map<string, number>();
+
+  // Sample from corners (most likely to be background)
+  const cornerSamples = [
+    [0, 0],
+    [width - 1, 0],
+    [0, height - 1],
+    [width - 1, height - 1],
+  ];
+
+  // Sample from edges (also likely background)
+  const edgeSamples: [number, number][] = [];
+  const edgeStep = Math.max(1, Math.floor(Math.min(width, height) / 20));
+
+  // Top and bottom edges
+  for (let x = 0; x < width; x += edgeStep) {
+    edgeSamples.push([x, 0]);
+    edgeSamples.push([x, height - 1]);
+  }
+
+  // Left and right edges
+  for (let y = 0; y < height; y += edgeStep) {
+    edgeSamples.push([0, y]);
+    edgeSamples.push([width - 1, y]);
+  }
+
+  // Collect all samples
+  const allSamples = [...cornerSamples, ...edgeSamples];
+
+  // Count colors with tolerance grouping
+  const tolerance = 15;
+
+  for (const [x, y] of allSamples) {
+    const idx = (y * width + x) * 4;
+    const r = data[idx];
+    const g = data[idx + 1];
+    const b = data[idx + 2];
+    const a = data[idx + 3];
+
+    // Find existing similar color or create new entry
+    let matched = false;
+    for (const [colorKey, count] of colorCounts.entries()) {
+      const [existingR, existingG, existingB, existingA] = colorKey.split(',').map(Number);
+
+      if (Math.abs(r - existingR) <= tolerance && Math.abs(g - existingG) <= tolerance && Math.abs(b - existingB) <= tolerance && Math.abs(a - existingA) <= tolerance) {
+        colorCounts.set(colorKey, count + 1);
+        matched = true;
+        break;
+      }
+    }
+
+    if (!matched) {
+      const colorKey = `${r},${g},${b},${a}`;
+      colorCounts.set(colorKey, 1);
+    }
+  }
+
+  // Find most common color
+  let maxCount = 0;
+  let backgroundColor = [0, 0, 0, 0];
+
+  for (const [colorKey, count] of colorCounts.entries()) {
+    if (count > maxCount) {
+      maxCount = count;
+      backgroundColor = colorKey.split(',').map(Number);
+    }
+  }
+
+  return new Uint32Array(backgroundColor);
+}
+
+function createOptimizedMask(data: Uint8ClampedArray, width: number, height: number, backgroundColor: Uint32Array, sensitivity: number): Uint8Array {
+  const size = width * height;
+
+  // Reuse buffer if possible
+  if (!maskBuffer || maskBuffer.length < size) {
+    maskBuffer = new Uint8Array(size);
+  }
+
+  // Map sensitivity (1-100) to more aggressive thresholds
+  // Higher sensitivity = stricter background matching (lower tolerance)
+  const colorTolerance = Math.round(50 - sensitivity * 0.45); // 50 down to 5
+  const alphaTolerance = Math.round(40 - sensitivity * 0.35); // 40 down to 5
+
+  const [bgR, bgG, bgB, bgA] = backgroundColor;
+
+  let idx = 0;
+  for (let i = 0; i < size; i++) {
+    const r = data[idx];
+    const g = data[idx + 1];
+    const b = data[idx + 2];
+    const a = data[idx + 3];
+
+    // Handle fully transparent pixels (common background case)
+    if (a < 10) {
+      maskBuffer[i] = 0; // Treat as background
+      idx += 4;
+      continue;
+    }
+
+    // Calculate color difference using Euclidean distance for better accuracy
+    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);
+
+    // Pixel is foreground if it's significantly different from background
+    const isBackground = colorDistance <= colorTolerance && alphaDistance <= alphaTolerance;
+    maskBuffer[i] = isBackground ? 0 : 1;
+
+    idx += 4;
+  }
+
+  return maskBuffer;
+}
+
+function cleanUpMask(mask: Uint8Array, width: number, height: number): Uint8Array {
+  // Simple morphological closing to fill small gaps in sprites
+  // and opening to remove small noise
+
+  const cleaned = new Uint8Array(mask.length);
+
+  // Erosion followed by dilation (opening) to remove small noise
+  // Then dilation followed by erosion (closing) to fill gaps
+
+  // Simple 3x3 kernel operations
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const idx = y * width + x;
+
+      // Count non-zero neighbors in 3x3 area
+      let neighbors = 0;
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const nIdx = (y + dy) * width + (x + dx);
+          if (mask[nIdx]) neighbors++;
+        }
+      }
+
+      // Use majority rule for cleaning
+      // If more than half the neighbors are foreground, make this foreground
+      cleaned[idx] = neighbors >= 5 ? 1 : 0;
+    }
+  }
+
+  // Copy borders as-is
+  for (let x = 0; x < width; x++) {
+    cleaned[x] = mask[x]; // Top row
+    cleaned[(height - 1) * width + x] = mask[(height - 1) * width + x]; // Bottom row
+  }
+  for (let y = 0; y < height; y++) {
+    cleaned[y * width] = mask[y * width]; // Left column
+    cleaned[y * width + width - 1] = mask[y * width + width - 1]; // Right column
+  }
+
+  return cleaned;
+}
+
+function findOptimizedConnectedComponents(mask: Uint8Array, width: number, height: number): SpriteRegion[] {
+  const size = width * height;
+
+  // Reuse buffers
+  if (!visitedBuffer || visitedBuffer.length < size) {
+    visitedBuffer = new Uint8Array(size);
+  }
+  if (!stackBuffer || stackBuffer.length < size * 2) {
+    stackBuffer = new Int32Array(size * 2);
+  }
+
+  // Clear visited array
+  visitedBuffer.fill(0);
+
+  const sprites: SpriteRegion[] = [];
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = y * width + x;
+
+      if (mask[idx] && !visitedBuffer[idx]) {
+        const sprite = optimizedFloodFill(mask, visitedBuffer, x, y, width, height);
+        if (sprite) {
+          sprites.push(sprite);
+        }
+      }
+    }
+  }
+
+  return sprites;
+}
+
+function optimizedFloodFill(mask: Uint8Array, visited: Uint8Array, startX: number, startY: number, width: number, height: number): SpriteRegion | null {
+  let stackTop = 0;
+  stackBuffer[stackTop++] = startX;
+  stackBuffer[stackTop++] = startY;
+
+  let minX = startX;
+  let minY = startY;
+  let maxX = startX;
+  let maxY = startY;
+  let pixelCount = 0;
+
+  while (stackTop > 0) {
+    const y = stackBuffer[--stackTop];
+    const x = stackBuffer[--stackTop];
+    const idx = y * width + x;
+
+    if (x < 0 || x >= width || y < 0 || y >= height || visited[idx] || !mask[idx]) {
+      continue;
+    }
+
+    visited[idx] = 1;
+    pixelCount++;
+
+    // Update bounding box
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+
+    // Add neighbors (check bounds to avoid stack overflow)
+    if (x + 1 < width && !visited[idx + 1] && mask[idx + 1]) {
+      stackBuffer[stackTop++] = x + 1;
+      stackBuffer[stackTop++] = y;
+    }
+    if (x - 1 >= 0 && !visited[idx - 1] && mask[idx - 1]) {
+      stackBuffer[stackTop++] = x - 1;
+      stackBuffer[stackTop++] = y;
+    }
+    if (y + 1 < height && !visited[idx + width] && mask[idx + width]) {
+      stackBuffer[stackTop++] = x;
+      stackBuffer[stackTop++] = y + 1;
+    }
+    if (y - 1 >= 0 && !visited[idx - width] && mask[idx - width]) {
+      stackBuffer[stackTop++] = x;
+      stackBuffer[stackTop++] = y - 1;
+    }
+  }
+
+  if (pixelCount === 0) return null;
+
+  // Add padding
+  const padding = 1;
+  return {
+    x: Math.max(0, minX - padding),
+    y: Math.max(0, minY - padding),
+    width: Math.min(width - Math.max(0, minX - padding), maxX - minX + 1 + 2 * padding),
+    height: Math.min(height - Math.max(0, minY - padding), maxY - minY + 1 + 2 * padding),
+    pixelCount,
+  };
+}
+
+export {};