From 8aa64d8a0f89a1375c0079ab1f91b3a01744ef84 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 6 Apr 2025 00:25:53 +0200
Subject: [PATCH] Disallow showing hidden frames

---
 src/components/SpritePreview.vue | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 3df465c..a4dab15 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -60,8 +60,8 @@
         <div class="flex-1 min-w-[200px] space-y-6">
           <!-- Frame Navigation -->
           <div class="flex items-center gap-2">
-            <span class="text-sm font-medium w-30">Frame {{ currentFrameIndex + 1 }}/{{ totalFrames }}</span>
-            <input type="range" min="0" :max="totalFrames - 1" v-model.number="currentFrameIndex" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
+            <span class="text-sm font-medium w-30">Frame {{ visibleFrameNumber }}/{{ visibleFramesCount }}</span>
+            <input type="range" min="0" :max="visibleFrames.length - 1" :value="visibleFrameIndex" @input="handleSliderInput" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500" :disabled="isPlaying" :class="{ 'opacity-50': isPlaying }" />
           </div>
 
           <!-- FPS Control -->
@@ -145,6 +145,14 @@
   // Add this after other refs
   const hiddenFrames = ref<number[]>([]);
 
+  // Add these computed properties
+  const visibleFrames = computed(() => props.sprites.filter((_, index) => !hiddenFrames.value.includes(index)));
+  const visibleFramesCount = computed(() => visibleFrames.value.length);
+  const visibleFrameIndex = computed(() => {
+    return visibleFrames.value.findIndex((_, idx) => idx === visibleFrames.value.findIndex(s => s === props.sprites[currentFrameIndex.value]));
+  });
+  const visibleFrameNumber = computed(() => visibleFrameIndex.value + 1);
+
   // Canvas drawing
   const calculateMaxDimensions = () => {
     let maxWidth = 0;
@@ -249,19 +257,30 @@
   };
 
   const nextFrame = () => {
-    if (props.sprites.length === 0) return;
+    if (visibleFrames.value.length === 0) return;
 
-    currentFrameIndex.value = (currentFrameIndex.value + 1) % props.sprites.length;
+    const currentVisibleIndex = visibleFrameIndex.value;
+    const nextVisibleIndex = (currentVisibleIndex + 1) % visibleFrames.value.length;
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[nextVisibleIndex]);
     drawPreviewCanvas();
   };
 
   const previousFrame = () => {
-    if (props.sprites.length === 0) return;
+    if (visibleFrames.value.length === 0) return;
 
-    currentFrameIndex.value = (currentFrameIndex.value - 1 + props.sprites.length) % props.sprites.length;
+    const currentVisibleIndex = visibleFrameIndex.value;
+    const prevVisibleIndex = (currentVisibleIndex - 1 + visibleFrames.value.length) % visibleFrames.value.length;
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[prevVisibleIndex]);
     drawPreviewCanvas();
   };
 
+  // Add this method to handle slider input
+  const handleSliderInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const index = parseInt(target.value);
+    currentFrameIndex.value = props.sprites.indexOf(visibleFrames.value[index]);
+  };
+
   // Drag functionality
   const startDrag = (event: MouseEvent) => {
     if (!isDraggable.value || !previewCanvasRef.value) return;