fix: slide show after zoom

devlzl · Feb 2, 2024 · aa62004 · aa62004
1 parent 30ce5ac
commit aa62004
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/UserInterface/Show/Show.vue b/src/UserInterface/Show/Show.vue
@@ -40,7 +40,20 @@ const quit = async () => {
 
 <template>
   <div class="relative w-screen h-screen" @click="slideManager.goNext">
-    <component v-for="block of slide.blocks" :key="block.id" :is="BlockViews[block.type]" :block="block"></component>
+    <component
+      v-for="block of slide.blocks"
+      :key="block.id"
+      :is="BlockViews[block.type]"
+      :block="block"
+      :style="{
+        position: 'absolute',
+        left: `${block.x}px`,
+        top: `${block.y}px`,
+        width: `${block.width}px`,
+        height: `${block.height}px`,
+        rotate: `${block.rotate}deg`,
+      }"
+    ></component>
     <div class="absolute w-full h-full left-0 top-0 opacity-0"></div>
     <div class="absolute left-[10px] bottom-[10px] flex gap-[10px]">
       <button class="menu-btn" @click.stop="slideManager.goPrevious">

diff --git a/src/UserInterface/Slide/SlideContainer.vue b/src/UserInterface/Slide/SlideContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
+import { onMounted, ref, shallowRef } from 'vue'
 import { slideManager, selectionManager, toolBox, zoom } from '@Kernel/index'
 import Slide from './Slide.vue'
 import { DEFAULT_SLIDE_HEIGHT, DEFAULT_SLIDE_WIDTH } from '@Const/slide'
@@ -80,6 +80,10 @@ const calculateZoom = () => {
     return
   }
   const slideContainer = slideContainerRef.value as HTMLElement
+  if (!slideContainer) {
+    // slideContainer is null while showing
+    return
+  }
   const { width, height } = slideContainer.getBoundingClientRect()
   const widthZoom = (width * 0.9) / DEFAULT_SLIDE_WIDTH
   const heightZoom = (height * 0.9) / DEFAULT_SLIDE_HEIGHT
@@ -92,9 +96,6 @@ onMounted(() => {
   calculateZoom()
   resizeObserver.observe(slideContainerRef.value as HTMLElement)
 })
-onUnmounted(() => {
-  resizeObserver.unobserve(slideContainerRef.value as HTMLElement)
-})
 </script>
 
 <template>