74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<template>
|
|
<div @click="openFileDialog" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop" class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer transition-all" :class="{ 'border-blue-500 bg-blue-500 bg-opacity-5': isDragOver }">
|
|
<i class="fas fa-cloud-upload-alt text-blue-500 text-3xl mb-4"></i>
|
|
<p class="text-gray-400">Drag & drop sprite images here<br />or click to select files</p>
|
|
<input type="file" ref="fileInput" multiple accept="image/*" class="hidden" @change="onFileChange" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
|
|
|
|
const emit = defineEmits<{
|
|
'files-uploaded': [sprites: Sprite[]];
|
|
}>();
|
|
|
|
const store = useSpritesheetStore();
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|
const isDragOver = ref(false);
|
|
|
|
const openFileDialog = () => {
|
|
if (fileInput.value) {
|
|
fileInput.value.click();
|
|
}
|
|
};
|
|
|
|
const onDragOver = () => {
|
|
isDragOver.value = true;
|
|
};
|
|
|
|
const onDragLeave = () => {
|
|
isDragOver.value = false;
|
|
};
|
|
|
|
const onDrop = (e: DragEvent) => {
|
|
isDragOver.value = false;
|
|
if (e.dataTransfer?.files.length) {
|
|
handleFiles(e.dataTransfer.files);
|
|
}
|
|
};
|
|
|
|
const onFileChange = (e: Event) => {
|
|
const input = e.target as HTMLInputElement;
|
|
if (input.files?.length) {
|
|
handleFiles(input.files);
|
|
}
|
|
};
|
|
|
|
const handleFiles = async (files: FileList) => {
|
|
const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
|
|
|
|
if (imageFiles.length === 0) {
|
|
store.showNotification('Please upload image files only', 'error');
|
|
return;
|
|
}
|
|
|
|
// Use the utility function to process image files
|
|
const { newSprites, errorCount } = await store.processImageFiles(files);
|
|
|
|
// Handle individual file errors
|
|
if (errorCount > 0) {
|
|
store.showNotification(`Failed to load ${errorCount} file(s)`, 'error');
|
|
}
|
|
|
|
if (newSprites.length > 0) {
|
|
store.addSprites(newSprites);
|
|
emit('files-uploaded', newSprites);
|
|
store.showNotification(`Added ${newSprites.length} sprites successfully`);
|
|
} else if (errorCount > 0) {
|
|
store.showNotification(`Failed to load all sprites`, 'error');
|
|
}
|
|
};
|
|
</script>
|