Clean
This commit is contained in:
58
src/App.vue
58
src/App.vue
@@ -149,18 +149,7 @@
|
||||
import { useExport } from './composables/useExport';
|
||||
import type { SpriteFile } from './types/sprites';
|
||||
|
||||
const {
|
||||
sprites,
|
||||
columns,
|
||||
updateSpritePosition,
|
||||
updateSpriteCell,
|
||||
removeSprite,
|
||||
replaceSprite,
|
||||
addSprite,
|
||||
addSpriteWithResize,
|
||||
processImageFiles,
|
||||
alignSprites,
|
||||
} = useSprites();
|
||||
const { sprites, columns, updateSpritePosition, updateSpriteCell, removeSprite, replaceSprite, addSprite, addSpriteWithResize, processImageFiles, alignSprites } = useSprites();
|
||||
|
||||
const { downloadSpritesheet, exportSpritesheetJSON, importSpritesheetJSON, downloadAsGif, downloadAsZip } = useExport(sprites, columns);
|
||||
const isPreviewModalOpen = ref(false);
|
||||
@@ -174,7 +163,6 @@
|
||||
const showFeedbackPopup = ref(false);
|
||||
|
||||
const handleSpritesUpload = async (files: File[]) => {
|
||||
// Check if any of the files is a JSON file
|
||||
const jsonFile = files.find(file => file.type === 'application/json' || file.name.endsWith('.json'));
|
||||
|
||||
if (jsonFile) {
|
||||
@@ -187,37 +175,28 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it's a single image file that might be a spritesheet
|
||||
if (files.length === 1 && files[0].type.startsWith('image/')) {
|
||||
const file = files[0];
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
// Load the image to check its dimensions
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
// Ask the user if they want to split the spritesheet
|
||||
if (confirm('This looks like it might be a spritesheet. Would you like to split it into individual sprites?')) {
|
||||
// Open the spritesheet splitter
|
||||
spritesheetImageUrl.value = url;
|
||||
spritesheetImageFile.value = file;
|
||||
isSpritesheetSplitterOpen.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// If the user doesn't want to split or it's not large enough, process as a single sprite
|
||||
processImageFiles([file]);
|
||||
};
|
||||
img.src = url;
|
||||
return;
|
||||
}
|
||||
|
||||
// Process multiple image files normally
|
||||
processImageFiles(files);
|
||||
};
|
||||
|
||||
// sprite position and export/import/dl handled by composables
|
||||
|
||||
// Preview modal control
|
||||
const openPreviewModal = () => {
|
||||
if (sprites.value.length === 0) {
|
||||
alert('Please upload or import sprites to preview an animation.');
|
||||
@@ -230,7 +209,6 @@
|
||||
isPreviewModalOpen.value = false;
|
||||
};
|
||||
|
||||
// Help modal control
|
||||
const openHelpModal = () => {
|
||||
isHelpModalOpen.value = true;
|
||||
};
|
||||
@@ -239,7 +217,6 @@
|
||||
isHelpModalOpen.value = false;
|
||||
};
|
||||
|
||||
// Feedback modal control
|
||||
const openFeedbackModal = () => {
|
||||
isFeedbackModalOpen.value = true;
|
||||
};
|
||||
@@ -248,10 +225,8 @@
|
||||
isFeedbackModalOpen.value = false;
|
||||
};
|
||||
|
||||
// Spritesheet splitter modal control
|
||||
const closeSpritesheetSplitter = () => {
|
||||
isSpritesheetSplitterOpen.value = false;
|
||||
// Clean up the URL object to prevent memory leaks
|
||||
if (spritesheetImageUrl.value) {
|
||||
URL.revokeObjectURL(spritesheetImageUrl.value);
|
||||
spritesheetImageUrl.value = '';
|
||||
@@ -259,7 +234,6 @@
|
||||
spritesheetImageFile.value = null;
|
||||
};
|
||||
|
||||
// GIF FPS modal control
|
||||
const openGifFpsModal = () => {
|
||||
if (sprites.value.length === 0) {
|
||||
alert('Please upload or import sprites before generating a GIF.');
|
||||
@@ -272,20 +246,14 @@
|
||||
isGifFpsModalOpen.value = false;
|
||||
};
|
||||
|
||||
// Handle the split spritesheet result
|
||||
const handleSplitSpritesheet = (spriteFiles: SpriteFile[]) => {
|
||||
// For now ignore bounding box offsets; add all files as new sprites
|
||||
processImageFiles(spriteFiles.map(s => s.file));
|
||||
};
|
||||
|
||||
// export handled by composable
|
||||
|
||||
// Open file dialog for JSON import
|
||||
const openJSONImportDialog = () => {
|
||||
jsonFileInput.value?.click();
|
||||
};
|
||||
|
||||
// Handle JSON file selection
|
||||
const handleJSONFileChange = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) {
|
||||
@@ -296,39 +264,19 @@
|
||||
console.error('Error importing JSON:', error);
|
||||
alert('Failed to import JSON file. Please check the file format.');
|
||||
}
|
||||
// Reset input value so uploading the same file again will trigger the event
|
||||
if (jsonFileInput.value) jsonFileInput.value.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// import handled by composable (used in handleSpritesUpload/handleJSONFileChange)
|
||||
|
||||
// alignment handled by composable (exposed as alignSprites)
|
||||
|
||||
// cell update handled by composable (exposed as updateSpriteCell)
|
||||
|
||||
// remove handled by composable
|
||||
|
||||
// replace handled by composable
|
||||
|
||||
// add handled by composable
|
||||
|
||||
// add with resize handled by composable
|
||||
|
||||
// GIF handled by composable
|
||||
|
||||
// Check for one-time feedback popup on mount
|
||||
onMounted(() => {
|
||||
const hasShownFeedbackPopup = localStorage.getItem('hasShownFeedbackPopup');
|
||||
if (!hasShownFeedbackPopup) {
|
||||
// Show popup after a short delay to let the page load
|
||||
setTimeout(() => {
|
||||
showFeedbackPopup.value = true;
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle feedback popup response
|
||||
const handleFeedbackPopupResponse = (showModal: boolean) => {
|
||||
showFeedbackPopup.value = false;
|
||||
localStorage.setItem('hasShownFeedbackPopup', 'true');
|
||||
@@ -337,8 +285,4 @@
|
||||
openFeedbackModal();
|
||||
}
|
||||
};
|
||||
|
||||
// unmount cleanup is handled inside useSprites
|
||||
|
||||
// ZIP handled by composable
|
||||
</script>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<!-- Resize handle -->
|
||||
<div v-if="!isFullScreen && !isMobile" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize" @mousedown="startResize" @touchstart="startResize">
|
||||
<svg class="w-8 h-8 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM22 14H20V12H22V14ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z"/>
|
||||
<path d="M22 22H20V20H22V22ZM22 18H20V16H22V18ZM18 22H16V20H18V22ZM22 14H20V12H22V14ZM18 18H16V16H18V18ZM14 22H12V20H14V22Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user