noxious/spritesheet-generator
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ya

Browse Source
This commit is contained in:
Dennis Postma 2025-04-04 03:38:46 +02:00
parent a23b1c8463
commit 90a12fb6e0
2 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/BaseModal.vue
View File

@ -5,8 +5,8 @@
<div v-if="showBackdrop" class="absolute inset-0 bg-black bg-opacity-50 pointer-events-auto" @click="closeModal"></div>
<!-- Modal content -->
<div class="bg-gray-800 rounded-lg overflow-auto shadow-lg pointer-events-auto relative" :class="[{ 'border border-gray-400': showBorder }, { 'max-w-2xl w-full max-h-[90vh]': !movable }, customClass]" :style="modalStyle" ref="modalRef">
<!-- Modal header -->
<div class="bg-gray-800 rounded-lg shadow-lg pointer-events-auto relative flex flex-col" :class="[{ 'border border-gray-400': showBorder }, { 'max-w-2xl w-full max-h-[90vh]': !movable }, customClass]" :style="modalStyle" ref="modalRef">
<!-- Modal header - fixed -->
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600" :class="{ 'cursor-move': movable }" @mousedown="movable ? startDrag($event) : null">
<div class="flex items-center gap-2 text-lg font-semibold">
<slot name="header-icon">
@ -19,14 +19,18 @@
</button>
</div>
<!-- Modal content -->
<div class="p-6">
<slot></slot>
<!-- Modal body - scrollable -->
<div class="flex-1 overflow-y-auto min-h-0">
<div class="p-6">
<slot></slot>
</div>
</div>
<!-- Resize handle (only if resizable is true) -->
<div v-if="resizable" class="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize" @mousedown="startResize">
<i class="fas fa-grip-lines-diagonal text-gray-500 text-xs absolute bottom-1 right-1"></i>
<div v-if="resizable" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize group" @mousedown="startResize">
<div class="absolute bottom-0 right-0 w-full h-full bg-gray-700 bg-opacity-0 group-hover:bg-opacity-50 transition-colors rounded-tl flex items-end justify-end">
<i class="fas fa-arrows-alt text-gray-400 group-hover:text-blue-500 transition-colors m-1"></i>
</div>
</div>
</div>
</div>

36
src/components/PreviewModal.vue
View File

@ -270,27 +270,27 @@
return;
}
// Center the modal in the viewport
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
position.value = {
x: (viewportWidth - modalSize.value.width) / 2,
y: (viewportHeight - modalSize.value.height) / 2,
};
// Reset zoom but keep sprite offset if it exists
previewZoom.value = 1;
viewportOffset.value = { x: 0, y: 0 };
// Reset modal size to default
modalSize.value = { width: 800, height: 600 };
// Note: Modal positioning is now handled by BaseModal
// Reset to first frame
currentFrame.value = 0;
animation.value.currentFrame = 0;
// Initialize canvas and retry if it fails
await initializeCanvas();
// If canvas is still not initialized, try again after a short delay
if (!animCanvas.value || !store.animation.canvas) {
await new Promise(resolve => setTimeout(resolve, 100));
await initializeCanvas();
}
// Set modal open state if not already open
if (!store.isModalOpen.value) {
store.isModalOpen.value = true;
@ -317,12 +317,19 @@
};
const updateCanvasSize = () => {
if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
if (!animCanvas.value) {
console.warn('PreviewModal: Cannot update canvas size - canvas not found');
return;
}
if (store.cellSize.width && store.cellSize.height) {
animCanvas.value.width = store.cellSize.width;
animCanvas.value.height = store.cellSize.height;
// Also update container size
updateCanvasContainerSize();
} else {
console.warn('PreviewModal: Cannot update canvas size - invalid cell dimensions');
}
};
@ -375,6 +382,9 @@
// Modal drag and resize functionality is now handled by BaseModal
const initializeCanvas = async () => {
// Wait for the next tick to ensure the canvas element is rendered
await nextTick();
if (!animCanvas.value) {
console.error('PreviewModal: Animation canvas not found');
return;
@ -599,8 +609,12 @@
}
};
onMounted(() => {
initializeCanvas();
onMounted(async () => {
// Initialize canvas with a slight delay to ensure DOM is ready
await nextTick();
await initializeCanvas();
// Add event listeners
window.addEventListener('keydown', handleKeyDown);
});