From d7f60d7bfca307809dd877ad5b0f658d06f0fc2c Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 1 Feb 2025 14:49:33 +0100
Subject: [PATCH] Don't include sprite dimensions in payload sent to server

---
 .../sprite/partials/SpriteImagesInput.vue     | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index 00d047c..3f49d4e 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-wrap gap-3">
     <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
       <img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
-      <div v-if="image.dimensions" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
+      <div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
       <div class="absolute top-1 left-1 flex-row space-y-1">
         <button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -59,10 +59,6 @@ interface SpriteImage {
     x: number
     y: number
   }
-  dimensions?: {
-    width: number
-    height: number
-  }
 }
 
 interface Props {
@@ -177,16 +173,13 @@ const onOffsetChange = () => {
 
 watch(tempOffset, onOffsetChange, { deep: true })
 
+const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({});
+
 const updateImageDimensions = (event: Event, index: number) => {
   const img = event.target as HTMLImageElement
-  const newImages = [...props.modelValue]
-  newImages[index] = {
-    ...newImages[index],
-    dimensions: {
-      width: img.naturalWidth,
-      height: img.naturalHeight
-    }
+  imageDimensions.value[index] = {
+    width: img.naturalWidth,
+    height: img.naturalHeight
   }
-  updateImages(newImages)
 }
 </script>