From b18c492a3f82aec37ba3190a197a4c7df4a20cc7 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Fri, 31 Jan 2025 11:23:04 +0100
Subject: [PATCH 1/2] fix(viewer): Fix the viewer responsive

---
 components/RemoteRenderingView.vue | 71 ++++++++++++++++--------------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/components/RemoteRenderingView.vue b/components/RemoteRenderingView.vue
index 66231fa..bcbb303 100644
--- a/components/RemoteRenderingView.vue
+++ b/components/RemoteRenderingView.vue
@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: 100%">
+    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
       <view-toolbar />
       <div
         style="
@@ -35,12 +35,17 @@
 
 <script setup>
   import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
-  import { useElementSize } from "@vueuse/core"
+  import { useElementSize, useWindowSize } from "@vueuse/core"
   import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
 
   const viewer_store = use_viewer_store()
   const { client, is_running, picking_mode } = storeToRefs(viewer_store)
 
+  const viewer = ref(null)
+  const { width, height } = useElementSize(viewer)
+
+  const { width: windowWidth, height: windowHeight } = useWindowSize()
+
   function get_x_y(event) {
     if (picking_mode.value === true) {
       const { offsetX, offsetY } = event
@@ -56,36 +61,38 @@
     viewId: { type: String, default: "-1" },
   })
 
-  const viewer = ref(null)
-  const { width, height } = useElementSize(viewer)
-
-  function resize() {
-    view.getCanvasView().setSize(0, 0)
-    view.resize()
-  }
-
-  watch(picking_mode, (value) => {
-    const cursor = value == true ? "crosshair" : "pointer"
-    view.getCanvasView().setCursor(cursor)
-  })
-  watch(width, (value) => {
-    resize()
-  })
-  watch(height, (value) => {
-    resize()
-  })
   const { viewId } = toRefs(props)
   const connected = ref(false)
 
   const view = vtkRemoteView.newInstance({
     rpcWheelEvent: "viewport.mouse.zoom.wheel",
   })
-  // default of 0.5 causes 2x size labels on high-DPI screens. 1 good for demo, not for production.
+
   if (location.hostname.split(".")[0] === "localhost") {
     view.setInteractiveRatio(1)
   }
 
-  watch(client, (new_client) => {
+  function resize() {
+    if (view) {
+      view.getCanvasView().setSize(0, 0)
+      view.resize()
+    }
+  }
+
+  watch([windowWidth, windowHeight], () => {
+    resize()
+  })
+
+  watch(picking_mode, (value) => {
+    const cursor = value ? "crosshair" : "pointer"
+    view.getCanvasView().setCursor(cursor)
+  })
+
+  watch([width, height], () => {
+    resize()
+  })
+
+  watch(client, () => {
     connect()
   })
 
@@ -96,16 +103,6 @@
     }
   })
 
-  onMounted(async () => {
-    if (process.client) {
-      window.addEventListener("resize", resize)
-      await nextTick()
-      view.setContainer(viewer.value.$el)
-      connect()
-      resize()
-    }
-  })
-
   function connect() {
     if (!is_running.value) {
       return
@@ -116,6 +113,16 @@
     connected.value = true
     view.render()
   }
+
+  onMounted(async () => {
+    if (process.client) {
+      window.addEventListener("resize", resize)
+      await nextTick()
+      view.setContainer(viewer.value.$el)
+      connect()
+      resize()
+    }
+  })
 </script>
 
 <style scoped>

From 0a5bd8dcf5f21cd0bcd94f843532c4841ba91c73 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 3 Feb 2025 10:41:48 +0100
Subject: [PATCH 2/2] using props for files : tests

---
 test/components/FileSelector.nuxt.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/FileSelector.nuxt.test.js b/test/components/FileSelector.nuxt.test.js
index 8d9698c..4ae0073 100644
--- a/test/components/FileSelector.nuxt.test.js
+++ b/test/components/FileSelector.nuxt.test.js
@@ -97,7 +97,7 @@ describe("FileSelector.vue", async () => {
       })
 
       await flushPromises()
-      expect(wrapper.componentVM.files).toEqual(files)
+      expect(wrapper.componentVM.props.files).toEqual(files)
       expect(wrapper.emitted()).toHaveProperty("update_values")
       expect(wrapper.emitted().update_values).toHaveLength(1)
       expect(wrapper.emitted().update_values[0][0]).toEqual({
@@ -124,7 +124,7 @@ describe("FileSelector.vue", async () => {
 
       const file_uploader = wrapper.findComponent(FileUploader)
       console.log("wrapper", wrapper)
-      expect(wrapper.vm.files).toEqual(files)
+      expect(wrapper.vm.props.files).toEqual(files)
       const upload_files = vi.spyOn(file_uploader.vm, "upload_files")
       expect(upload_files).not.toHaveBeenCalled()
     })