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>