fix(HybridRenderingView): Edit the component to make it more reusable

Author: SpliiT

components/HybridRenderingView.vue

@@ -1,18 +1,12 @@
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 75px)">
+    <div class="fill-height" style="position: relative">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="
-          overflow: hidden;
-          position: relative;
-          z-index: 0;
-          height: 100%;
-          width: 100%;
-        "
-        class="pa-0"
+        style="overflow: hidden; position: relative; z-index: 0"
+        :style="{ height: viewerHeight }"
         @click="get_x_y"
         @keydown.esc="viewer_store.toggle_picking_mode(false)"
       />
@@ -21,21 +15,53 @@
 </template>
 
 <script setup>
+  const props = defineProps({
+    height: {
+      type: String,
+      default: "100%",
+    },
+  })
+
   const container = useTemplateRef("viewer")
   const hybridViewerStore = useHybridViewerStore()
-
+  const viewer_store = use_viewer_store()
   const { windowWidth, windowHeight } = useWindowSize()
   const { width, height } = useElementSize(container)
 
-  watch([windowWidth, windowHeight, height, width], () => {
+  const viewerHeight = computed(() => props.height)
+
+  const debouncedResize = debounce(() => {
     hybridViewerStore.resize(width.value, height.value)
+  }, 100)
+
+  watch([windowWidth, windowHeight, width, height], () => {
+    debouncedResize()
   })
 
   onMounted(async () => {
     if (import.meta.client) {
       await hybridViewerStore.initHybridViewer()
       await nextTick()
       hybridViewerStore.setContainer(container)
+      debouncedResize()
     }
   })
+
+  function debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  function get_x_y(event) {
+    emit("click", event)
+  }
+
+  defineEmits(["click"])
 </script>