Updated sprite editor component

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -34,6 +34,7 @@
       <SpriteEditor
         v-for="[actionId, editorData] in Array.from(openEditors.entries())"
         :key="actionId"
+        :sprite="selectedSprite!"
         :sprites="editorData.action.sprites"
         :frame-rate="editorData.action.frameRate"
         :is-modal-open="editorData.isOpen"

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteEditor.vue

@@ -4,46 +4,113 @@
       <h3 class="m-0 font-medium shrink-0 text-white">Sprite editor</h3>
     </template>
     <template #modalBody>
-      <div class="m-4 flex gap-8">
-        <div class="relative">
-          <div
-            class="sprite-container bg-gray-800"
-            :style="{
-              width: `${maxWidth}px`,
-              height: `${maxHeight}px`,
-              position: 'relative',
-              overflow: 'hidden'
-            }"
-          >
+      <div class="m-4 flex gap-4 h-full">
+        <!-- Settings -->
+        <div class="w-80 h-full flex flex-col overflow-y-auto">
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-col">
+              <label class="block mb-1 text-white text-sm">Frame Rate: {{ frameRate }} FPS</label>
+              <div class="text-xs font-default text-gray-400 mb-1">Duration: {{ totalDuration }}s</div>
+              <input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
+            </div>
+            <div class="flex flex-col">
+              <label class="block mb-1 text-white text-sm">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
+              <input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
+            </div>
+            <div class="flex flex-col">
+              <label class="block mb-1 text-white text-sm">Zoom: {{ zoomLevel }}%</label>
+              <input type="range" v-model.number="zoomLevel" min="10" max="600" step="10" class="w-full accent-cyan-500" />
+            </div>
+          </div>
+          <div class="mt-6 space-y-2">
+            <button @click="toggleAnimation" class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white rounded transition-colors w-full">
+              {{ isAnimating ? 'Pause' : 'Play' }}
+            </button>
+            <button @click="toggleReferenceSprites" class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white rounded transition-colors w-full">
+              {{ showReferenceSprites ? 'Hide References' : 'Show References' }}
+            </button>
+          </div>
+          <div class="mt-6">
+            <form class="flex gap-2.5 flex-wrap" @submit.prevent="">
+              <div class="form-field-full">
+                <label for="action">Action</label>
+                <input class="input-field" type="text" name="action" placeholder="Action" />
+              </div>
+              <div class="form-field-half">
+                <label for="origin-x">Origin X</label>
+                <input class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
+              </div>
+              <div class="form-field-half">
+                <label for="origin-y">Origin Y</label>
+                <input class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+              </div>
+              <div class="form-field-half">
+                <label for="offset-x">Offset X</label>
+                <input class="input-field" type="number" step="1" :value="currentSprite?.offset?.x || 0" @input="updateOffset($event, 'x')" :disabled="isAnimating" />
+              </div>
+              <div class="form-field-half">
+                <label for="offset-y">Offset Y</label>
+                <input class="input-field" type="number" step="1" :value="currentSprite?.offset?.y || 0" @input="updateOffset($event, 'y')" :disabled="isAnimating" />
+              </div>
+              <div class="form-field-full">
+                <label for="frame-speed">Frame rate</label>
+                <input class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
+              </div>
+            </form>
+          </div>
+        </div>
+        <!-- Sprite thumbnails -->
+        <div class="flex-1 flex flex-col h-full">
+          <div class="bg-gray-800 border-solid border-white/10 rounded flex-grow mb-2 relative overflow-hidden" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag" @mouseleave="stopDrag">
+            <!-- Background reference sprites (semi-transparent) -->
+            <img
+              v-for="(sprite, index) in spritesWithTempOffset"
+              :key="`bg-${index}`"
+              :src="sprite.url"
+              alt="Reference sprite"
+              v-show="index !== currentFrame && showReferenceSprites"
+              :style="{
+                position: 'absolute',
+                left: `${(sprite.offset?.x || 0) * (zoomLevel / 100)}px`,
+                bottom: `${(sprite.offset?.y || 0) * (zoomLevel / 100)}px`,
+                opacity: 0.3,
+                transform: `scale(${zoomLevel / 100})`,
+                transformOrigin: 'bottom left',
+                pointerEvents: 'none'
+              }"
+            />
+            <!-- Current sprite (draggable) -->
             <img
               v-for="(sprite, index) in spritesWithTempOffset"
               :key="index"
               :src="sprite.url"
               alt="Sprite"
+              :class="{ 'cursor-move': currentFrame === index }"
               :style="{
                 position: 'absolute',
-                left: `${sprite.offset?.x || 0}px`,
-                bottom: `${sprite.offset?.y || 0}px`,
+                left: `${(sprite.offset?.x || 0) * (zoomLevel / 100)}px`,
+                bottom: `${(sprite.offset?.y || 0) * (zoomLevel / 100)}px`,
                 display: currentFrame === index ? 'block' : 'none',
                 transform: `scale(${zoomLevel / 100})`,
                 transformOrigin: 'bottom left'
               }"
-              @load="updateContainerSize"
             />
           </div>
-        </div>
-        <div class="flex flex-col justify-center gap-8 flex-1">
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Frame Rate: {{ frameRate }} FPS (Duration: {{ totalDuration }}s)</label>
-            <input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
-          </div>
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
-            <input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
-          </div>
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
-            <input type="range" v-model.number="zoomLevel" min="10" max="200" step="10" class="w-full accent-cyan-500" />
+          <div class="bg-gray-800 p-2 overflow-x-auto border-solid border-white/10 rounded mb-8 h-24 min-h-16">
+            <div class="flex gap-2">
+              <div
+                v-for="(sprite, index) in sprites"
+                :key="`thumb-${index}`"
+                class="relative cursor-pointer border-solid transition-all duration-200 rounded flex-shrink-0 p-3 px-12"
+                :class="currentFrame === index ? 'border-cyan-600 bg-cyan-500/10' : 'border-transparent hover:border-white/30'"
+                @click="selectFrame(index)"
+              >
+                <img :src="sprite.url" alt="Sprite thumbnail" class="h-16 w-auto object-contain rounded" />
+                <div class="absolute top-0 right-0 bg-gray-400 text-white text-xs font-default px-1 rounded-bl">
+                  {{ index + 1 }}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -52,11 +119,12 @@
 </template>
 
 <script setup lang="ts">
-import type { SpriteImage } from '@/application/types'
+import type { Sprite, SpriteImage } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
+  sprite: Sprite
   sprites: SpriteImage[]
   frameRate: number
   isModalOpen?: boolean
@@ -67,13 +135,16 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:frameRate', value: number): void
   (e: 'update:isModalOpen', value: boolean): void
+  (e: 'update:tempOffset', index: number, offset: { x: number; y: number }): void
 }>()
 
 const currentFrame = ref(0)
-const maxWidth = ref(250)
-const maxHeight = ref(250)
 const localFrameRate = ref(props.frameRate)
 const zoomLevel = ref(100)
+const isAnimating = ref(false)
+const isDragging = ref(false)
+const startDragPos = ref({ x: 0, y: 0 })
+const currentOffset = ref({ x: 0, y: 0 })
 let animationInterval: number | null = null
 
 const totalDuration = computed(() => {
@@ -90,11 +161,15 @@ const spritesWithTempOffset = computed(() => {
   })
 })
 
-function updateContainerSize(event: Event) {
-  const img = event.target as HTMLImageElement
-  maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)
-  maxHeight.value = Math.max(maxHeight.value, img.naturalHeight)
-}
+const currentSprite = computed(() => {
+  if (currentFrame.value >= 0 && currentFrame.value < spritesWithTempOffset.value.length) {
+    return spritesWithTempOffset.value[currentFrame.value]
+  }
+  return null
+})
+
+// Toggle for showing reference sprites
+const showReferenceSprites = ref(true)
 
 function updateAnimation() {
   stopAnimation()
@@ -103,9 +178,20 @@ function updateAnimation() {
     return
   }
 
-  animationInterval = window.setInterval(() => {
-    currentFrame.value = (currentFrame.value + 1) % props.sprites.length
-  }, 1000 / props.frameRate)
+  if (isAnimating.value) {
+    animationInterval = window.setInterval(() => {
+      currentFrame.value = (currentFrame.value + 1) % props.sprites.length
+    }, 1000 / props.frameRate)
+  }
+}
+
+function toggleAnimation() {
+  isAnimating.value = !isAnimating.value
+  if (isAnimating.value) {
+    updateAnimation()
+  } else {
+    stopAnimation()
+  }
 }
 
 function stopAnimation() {
@@ -115,6 +201,12 @@ function stopAnimation() {
   }
 }
 
+function selectFrame(index: number) {
+  currentFrame.value = index
+  stopAnimation()
+  isAnimating.value = false
+}
+
 function updateFrameRate() {
   emit('update:frameRate', localFrameRate.value)
 }
@@ -123,6 +215,77 @@ function closeModal() {
   emit('update:isModalOpen', false)
 }
 
+function startDrag(event: MouseEvent) {
+  if (isAnimating.value) return
+
+  const previewContainer = event.currentTarget as HTMLElement
+  const rect = previewContainer.getBoundingClientRect()
+
+  // Store initial mouse position
+  startDragPos.value = {
+    x: event.clientX,
+    y: event.clientY
+  }
+
+  // Store current offset
+  if (currentSprite.value && currentSprite.value.offset) {
+    currentOffset.value = {
+      x: currentSprite.value.offset.x,
+      y: currentSprite.value.offset.y
+    }
+  } else {
+    currentOffset.value = { x: 0, y: 0 }
+  }
+
+  isDragging.value = true
+}
+
+function onDrag(event: MouseEvent) {
+  if (!isDragging.value) return
+
+  // Calculate the difference from the start position
+  const deltaX = event.clientX - startDragPos.value.x
+  const deltaY = startDragPos.value.y - event.clientY // Inverted for bottom positioning
+
+  // Apply the zoom factor to the delta
+  // This ensures that the movement in screen pixels is converted to the correct
+  // number of pixels at the sprite's natural size, regardless of zoom level
+  const zoomFactor = 100 / zoomLevel.value
+  const scaledDeltaX = deltaX * zoomFactor
+  const scaledDeltaY = deltaY * zoomFactor
+
+  // Calculate new offset
+  // These offsets are in the sprite's natural coordinate space (as if zoom was 100%)
+  const newOffset = {
+    x: currentOffset.value.x + scaledDeltaX,
+    y: currentOffset.value.y + scaledDeltaY
+  }
+
+  // Emit the new offset
+  emit('update:tempOffset', currentFrame.value, newOffset)
+}
+
+function stopDrag() {
+  isDragging.value = false
+}
+
+function toggleReferenceSprites() {
+  showReferenceSprites.value = !showReferenceSprites.value
+}
+
+function updateOffset(event: Event, axis: 'x' | 'y') {
+  if (isAnimating.value) return
+
+  const input = event.target as HTMLInputElement
+  const value = parseInt(input.value) || 0
+
+  if (currentSprite.value && currentSprite.value.offset) {
+    const newOffset = { ...currentSprite.value.offset }
+    newOffset[axis] = value
+    emit('update:tempOffset', currentFrame.value, newOffset)
+  }
+}
+
 watch(
   () => props.frameRate,
   (newValue) => {
@@ -134,18 +297,25 @@ watch(
 
 watch(() => props.sprites, updateAnimation, { immediate: true })
 
+watch(
+  () => isAnimating.value,
+  (newValue) => {
+    if (newValue) {
+      updateAnimation()
+    } else {
+      stopAnimation()
+    }
+  }
+)
+
 onMounted(() => {
-  updateAnimation()
+  isAnimating.value = props.frameRate > 0
+  if (isAnimating.value) {
+    updateAnimation()
+  }
 })
 
 onUnmounted(() => {
   stopAnimation()
 })
 </script>
-
-<style scoped>
-.sprite-container {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-}
-</style>