Fix load img when opening preview

src/App.vue

@@ -17,16 +17,28 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import AppHeader from './components/AppHeader.vue';
   import Sidebar from './components/Sidebar.vue';
   import MainContent from './components/MainContent.vue';
   import PreviewModal from './components/PreviewModal.vue';
   import Notification from './components/Notification.vue';
   import HelpButton from './components/HelpButton.vue';
+  import { useSpritesheetStore } from './composables/useSpritesheetStore';
 
+  const store = useSpritesheetStore();
   const previewModalRef = ref<InstanceType<typeof PreviewModal> | null>(null);
 
+  // Watch for changes to isModalOpen and call the openModal method when it becomes true
+  watch(
+    () => store.isModalOpen.value,
+    isOpen => {
+      if (isOpen && previewModalRef.value) {
+        previewModalRef.value.openModal();
+      }
+    }
+  );
+
   const showHelpModal = () => {
     alert('Keyboard Shortcuts:\n\n' + 'Shift + Drag: Fine-tune sprite position\n' + 'Space: Play/Pause animation\n' + 'Esc: Close preview modal\n' + 'Arrow Keys: Navigate frames when paused');
   };

src/components/PreviewModal.vue

@@ -120,8 +120,10 @@
     // Make sure the canvas is initialized
     await initializeCanvas();
 
-    // Set modal open state
+    // Set modal open state if not already open
+    if (!store.isModalOpen.value) {
       store.isModalOpen.value = true;
+    }
 
     // Wait for next frame to ensure DOM is updated
     await new Promise(resolve => requestAnimationFrame(resolve));
@@ -134,6 +136,7 @@
 
     // Force render the first frame
     if (sprites.value.length > 0) {
+      // Ensure we have the latest sprites
       store.renderAnimationFrame(0);
     }
   };
@@ -253,6 +256,22 @@
     }
   );
 
+  // Watch for changes in sprites to update the canvas when new sprites are added
+  watch(
+    () => sprites.value,
+    newSprites => {
+      if (isModalOpen.value && newSprites.length > 0) {
+        // Update the canvas with the new sprites
+        if (animCanvas.value && store.cellSize.width && store.cellSize.height) {
+          animCanvas.value.width = store.cellSize.width;
+          animCanvas.value.height = store.cellSize.height;
+          store.renderAnimationFrame(currentFrame.value);
+        }
+      }
+    },
+    { deep: true }
+  );
+
   // Expose openModal for external use
   defineExpose({ openModal });
 </script>