Merge branch 'master' of https://github.com/Geode-solutions/OpenGeodeWeb-Front

Author: JulienChampagnol

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 />
       <slot name="ui"></slot>
       <v-col
@@ -22,12 +22,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
@@ -43,36 +48,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()
   })
 
@@ -83,16 +90,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
@@ -103,6 +100,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>

components/Step.vue

@@ -2,10 +2,10 @@
   <v-stepper-content :step="step_index + 1">
     <v-row
       align="center"
-      class="step-container"
+      class="mb-4 py-2"
       @click="set_current_step(step_index)"
     >
-      <v-col cols="auto" class="icon-container">
+      <v-col cols="auto" class="d-flex justify-center align-center">
         <v-icon
           v-if="current_step_index > step_index"
           icon="mdi-check-circle"
@@ -22,25 +22,29 @@
           color="grey"
         />
       </v-col>
-      <v-col class="title-container">
-        <p class="step-title font-weight-bold">
+      <v-col>
+        <p class="m-0 font-weight-bold">
           {{ steps[step_index].step_title }}
         </p>
       </v-col>
-      <v-col
+      <v-chip-group
         v-if="
           steps[step_index].chips.length && current_step_index >= step_index
         "
-        class="chips-container"
+        column
+        class="d-flex flex-wrap ma-2 overflow-y-auto"
+        multiple
+        style="max-height: 150px"
       >
         <v-chip
           v-for="(chip, chip_index) in steps[step_index].chips"
           :key="chip_index"
-          class="step-chip"
+          class="ma-1"
+          :title="chip"
         >
-          {{ chip }}
+          {{ truncate(chip, 50) }}
         </v-chip>
-      </v-col>
+      </v-chip-group>
     </v-row>
     <component
       v-if="step_index == current_step_index"
@@ -55,6 +59,13 @@
 </template>
 
 <script setup>
+  function truncate(text, maxLength) {
+    if (text.length > maxLength) {
+      return text.slice(0, maxLength) + "..."
+    }
+    return text
+  }
+
   const props = defineProps({
     step_index: { type: Number, required: true },
   })
@@ -80,33 +91,3 @@
     stepper_tree.current_step_index--
   }
 </script>
-
-<style scoped>
-  .step-container {
-    margin-bottom: 16px;
-    padding: 8px;
-  }
-
-  .icon-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .title-container {
-    margin-left: 8px;
-  }
-
-  .step-title {
-    margin: 0;
-  }
-
-  .chips-container {
-    display: flex;
-    gap: 4px;
-  }
-
-  .step-chip {
-    background-color: #f5f5f5;
-  }
-</style>

components/Stepper.vue

@@ -1,7 +1,14 @@
 <template>
-  <v-stepper-vertical v-model="current_step_index" class="stepper-container">
+  <v-stepper-vertical
+    v-model="current_step_index"
+    class="pa-4 ma-0"
+    elevation="1"
+    rounded
+  >
     <v-stepper-items>
-      <Step v-for="(step, index) in steps" :key="step" :step_index="index" />
+      <v-col cols="12">
+        <Step v-for="(step, index) in steps" :key="step" :step_index="index" />
+      </v-col>
     </v-stepper-items>
   </v-stepper-vertical>
 </template>
@@ -10,14 +17,3 @@
   const stepper_tree = inject("stepper_tree")
   const { steps, current_step_index } = toRefs(stepper_tree)
 </script>
-
-<style scoped>
-  .stepper-container {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 16px;
-    background-color: #f9f9f9;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-  }
-</style>

test/components/FileSelector.nuxt.test.js

@@ -123,6 +123,7 @@ describe("FileSelector.vue", async () => {
       await flushPromises()
 
       const file_uploader = wrapper.findComponent(FileUploader)
+      console.log("wrapper", wrapper)
       expect(wrapper.vm.props.files).toEqual(files)
       const upload_files = vi.spyOn(file_uploader.vm, "upload_files")
       expect(upload_files).not.toHaveBeenCalled()