From 90a12fb6e0d6f5ec7ba20c3f6a9947231faab607 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 4 Apr 2025 03:38:46 +0200
Subject: [PATCH] ya

---
 src/components/BaseModal.vue    | 18 ++++++++++-------
 src/components/PreviewModal.vue | 36 +++++++++++++++++++++++----------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
index d4e3a25..a974bef 100644
--- a/src/components/BaseModal.vue
+++ b/src/components/BaseModal.vue
@@ -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>
diff --git a/src/components/PreviewModal.vue b/src/components/PreviewModal.vue
index b3370b6..55b7eed 100644
--- a/src/components/PreviewModal.vue
+++ b/src/components/PreviewModal.vue
@@ -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);
   });