feat: block change sync to SlideList (#72)

src/UserInterface/Slide/Slide.vue

@@ -1,31 +1,36 @@
 <script setup lang="ts">
-import { ref, onMounted, shallowRef } from 'vue'
-import { slideManager } from '@Kernel/index'
+import { ref, onMounted, shallowRef, watch } from 'vue'
 import { BlockViews } from '@BlockHub/BlockHub'
 import { toolBox, selectionManager } from '@Kernel/index'
 import { DEFAULT_SLIDE_WIDTH, DEFAULT_SLIDE_HEIGHT } from '@Const/slide'
 import { Block } from '@BlockHub/Block/Block'
 import SelectedBox from './components/SelectedBox.vue'
+import { Slide } from '@Kernel/Slide'
 
-const slideRef = ref<HTMLElement | null>(null)
-defineExpose({ slideRef })
-onMounted(() => {
-  toolBox.mount(slideRef.value as HTMLElement)
-})
+const props = defineProps<{
+  slide: Slide
+  inSlideContainer?: boolean
+}>()
 
-const slide = shallowRef(slideManager.currentSlide)
+const slide = shallowRef(props.slide)
 const blocks = shallowRef(slide.value.blocks)
 const updateBlocks = () => {
   blocks.value = slide.value.blocks
 }
-slideManager.events.update.on(() => {
-  slide.value = slideManager.currentSlide
-  slide.value.events.blockChange.on(updateBlocks)
-  selectionManager.clear()
-  updateBlocks()
+watch(props, () => {
+  slide.value = props.slide
 })
-slide.value.events.blockChange.on(() => {
+watch(slide, () => {
   updateBlocks()
+  slide.value.events.blockChange.on(updateBlocks)
+})
+slide.value.events.blockChange.on(updateBlocks)
+
+const slideRef = ref<HTMLElement | null>(null)
+onMounted(() => {
+  if (props.inSlideContainer) {
+    toolBox.mount(slideRef.value as HTMLElement)
+  }
 })
 
 const handleBlockClick = (event: PointerEvent, block: Block) => {
@@ -35,11 +40,6 @@ const handleBlockClick = (event: PointerEvent, block: Block) => {
   selectionManager.focus(block)
 }
 
-const selectedBlocks = shallowRef(selectionManager.selectedBlocks)
-selectionManager.events.update.on(() => {
-  selectedBlocks.value = selectionManager.selectedBlocks
-})
-
 const toolType = ref(toolBox.currentToolType)
 toolBox.events.toolChange.on(() => {
   toolType.value = toolBox.currentToolType
@@ -56,7 +56,7 @@ toolBox.events.toolChange.on(() => {
       cursor: toolType === 'TextBox' || toolType === 'Shape' ? 'crosshair' : 'default',
     }"
   >
-    <SelectedBox />
+    <SelectedBox v-if="props.inSlideContainer" />
     <component
       v-for="block of blocks"
       :key="block.id"

src/UserInterface/Slide/SlideContainer.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { slideManager, selectionManager, toolBox } from '@Kernel/index'
 import Slide from './Slide.vue'
-import { onMounted } from 'vue'
 
-const slideContainerRef = ref<HTMLElement | null>(null)
-const slideComponentRef = ref<InstanceType<typeof Slide> | null>(null)
-let slideContainer: HTMLElement
-let slideElement: HTMLElement
-onMounted(() => {
-  slideContainer = slideContainerRef.value as HTMLElement
-  slideElement = slideComponentRef.value?.slideRef as HTMLElement
+const slide = shallowRef(slideManager.currentSlide)
+slideManager.events.update.on(() => {
+  slide.value = slideManager.currentSlide
+  selectionManager.clear()
 })
 
+const slideContainerRef = ref<HTMLElement | null>(null)
+const slideLocatorRef = ref<HTMLElement | null>(null)
+
 const showDragArea = ref(false)
 const dragAreaRect = ref({ x: 0, y: 0, width: 0, height: 0 })
 const startCoords = { x: 0, y: 0 }
@@ -25,7 +24,7 @@ const handleMouseDown = (event: MouseEvent) => {
   const { clientX, clientY } = event
   startCoords.x = clientX
   startCoords.y = clientY
-  slideContainer.addEventListener('mousemove', handleMouseMove)
+  slideContainerRef.value?.addEventListener('mousemove', handleMouseMove)
   document.addEventListener('mouseup', handleMouseUp)
 }
 
@@ -48,7 +47,7 @@ const handleMouseMove = (event: MouseEvent) => {
 const handleMouseUp = () => {
   const blocks = slideManager.currentSlide.blocks
   const { x: dragAreaX, y: dragAreaY, width: dragAreaWidth, height: dragAreaHeight } = dragAreaRect.value
-  const { x: slideRectX, y: slideRectY } = slideElement.getBoundingClientRect()
+  const { x: slideRectX, y: slideRectY } = slideLocatorRef.value?.getBoundingClientRect() as DOMRect
   selectionManager.clear()
   blocks.forEach((block) => {
     const { x, y, width, height } = block
@@ -66,7 +65,7 @@ const handleMouseUp = () => {
     }
   })
   showDragArea.value = false
-  slideContainer.removeEventListener('mousemove', handleMouseMove)
+  slideContainerRef.value?.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
 }
 </script>
@@ -77,7 +76,10 @@ const handleMouseUp = () => {
     class="slide-container relative flex items-center justify-center flex-auto bg-secondary"
     @mousedown.self="handleMouseDown"
   >
-    <Slide ref="slideComponentRef" @mousedown.self="handleMouseDown" />
+    <div ref="slideLocatorRef" class="relative">
+      <Slide :slide="slide" :inSlideContainer="true" @mousedown.self="handleMouseDown" />
+    </div>
+
     <div
       v-if="showDragArea"
       class="fixed border border-secondary-border bg-gray-300/50"

src/UserInterface/SlideList/SlideList.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, shallowRef } from 'vue'
 import { slideManager } from '@Kernel/index'
-import { BlockViews } from '@BlockHub/BlockHub'
-import { DEFAULT_SLIDE_WIDTH, DEFAULT_SLIDE_HEIGHT } from '@Const/slide'
+import Slide from '../Slide/Slide.vue'
 
 const currentIndex = ref(slideManager.currentIndex)
 const slides = shallowRef(slideManager.slides)
@@ -68,17 +67,7 @@ const onDrop = () => {
         @dragover.prevent="onDragOver($event, index)"
         @drop="onDrop"
       >
-        <div
-          class="slide origin-top-left scale-[0.2] bg-white"
-          :style="{ width: `${DEFAULT_SLIDE_WIDTH}px`, height: `${DEFAULT_SLIDE_HEIGHT}px` }"
-        >
-          <component
-            v-for="block of slide.blocks"
-            :key="block.id"
-            :is="BlockViews[block.type]"
-            :block="block"
-          ></component>
-        </div>
+        <Slide :slide="slide" class="origin-top-left scale-[0.2]" />
         <div class="absolute w-full h-full left-0 top-0 opacity-0"></div>
       </div>