@geode/opengeodeweb-front 9.12.2 → 9.13.0-rc.1

package/components/Launcher.vue

@@ -8,8 +8,7 @@
         align-self="center"
         style="z-index: 1000"
       >
-        <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
-        <Recaptcha :site_key="site_key" />
+        <Recaptcha :color="'secondary'" />
       </v-col>
       <v-col v-else-if="infra_store.status == Status.CREATING">
         <Loading />

package/components/Recaptcha.vue

@@ -1,23 +1,74 @@
 <template>
-  <ClientOnly>
-    <vue-recaptcha
-      ref="recaptcha"
-      :sitekey="props.site_key"
-      :load-recaptcha-script="true"
-      align-self="center"
-      @expired="infra_store.is_captcha_validated = false"
-      @verify="submit_recaptcha"
-    />
-  </ClientOnly>
+  <VRow align="center" justify="center" style="display: none">
+    <VCol cols="4">
+      <VForm v-model="valid">
+        <VContainer>
+          <VRow>
+            <VCol>
+              <VTextField v-model="name" label="Name" required />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VTextField
+                v-model="email"
+                :rules="emailRules"
+                label="E-mail"
+                required
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VCheckbox label="Launch the app" v-model="launch" />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VForm>
+    </VCol>
+  </VRow>
+  <VRow align="center" justify="center">
+    <VCol cols="4" class="d-flex justify-center align-center">
+      <VBtn
+        :text="props.button_label"
+        :color="props.button_color"
+        @click="submit_recaptcha"
+      />
+    </VCol>
+  </VRow>
 </template>
 
 <script setup>
-  import { VueRecaptcha } from "vue-recaptcha"
-  const infra_store = useInfraStore()
-
   const props = defineProps({
-    site_key: { type: String, required: true },
+    button_label: {
+      type: String,
+      required: false,
+      default: "Launch the app",
+    },
+    button_color: {
+      type: String,
+      required: false,
+      default: "white",
+    },
   })
+  const infra_store = useInfraStore()
+  const name = ref("")
+  const email = ref("")
+  const launch = ref(false)
+  const emailRules = [
+    (value) => {
+      if (value) {
+        return true
+      }
+      return "E-mail is required."
+    },
+    (value) => {
+      if (/.+@.+\..+/.test(value)) {
+        return true
+      }
+      return "E-mail must be valid."
+    },
+  ]
 
   onMounted(() => {
     if (import.meta.client) {
@@ -29,15 +80,18 @@
       }
     }
   })
-  async function submit_recaptcha(token) {
-    try {
-      const response = await $fetch.raw(
-        `/.netlify/functions/recaptcha?token=${token}`,
-      )
-      infra_store.$patch({ is_captcha_validated: response.status == 200 })
-      recaptcha.reset()
-    } catch (error) {
-      console.error(error)
-    }
+  function submit_recaptcha() {
+    $fetch(
+      `/.netlify/functions/recaptcha?name=${name.value}&email=${email.value}&launch=${launch.value}`,
+      {
+        onResponse({ response }) {
+          if (response.ok) {
+            infra_store.$patch({
+              is_captcha_validated: response.status === 200,
+            })
+          }
+        },
+      },
+    )
   }
 </script>

package/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -26,24 +26,34 @@
   const id = toRef(() => props.itemProps.id)
 
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshEdgesVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const size = computed({
     get: () => dataStyleStore.edgesSize(id.value),
-    set: (newValue) => dataStyleStore.setEdgesSize(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setEdgesSize(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
     set: (newValue) => {
       dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshEdgesColor(id.value),
-    set: (newValue) => dataStyleStore.setMeshEdgesColor(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -40,6 +40,7 @@
 
 <script setup>
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({
     itemProps: { type: Object, required: true },
@@ -50,25 +51,37 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const size = computed({
     get: () => dataStyleStore.meshPointsSize(id.value),
-    set: (newValue) => dataStyleStore.setMeshPointsSize(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsSize(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const color = computed({
     get: () => dataStyleStore.meshPointsColor(id.value),
-    set: (newValue) => dataStyleStore.setMeshPointsColor(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const vertex_attribute = computed({
     get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -22,6 +22,7 @@
 
 <script setup>
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({
     itemProps: { type: Object, required: true },
@@ -33,33 +34,44 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolygonsVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPolygonsVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolygonsColor(id.value),
-    set: (newValue) => dataStyleStore.setMeshPolygonsColor(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const textures = computed({
     get: () => dataStyleStore.meshPolygonsTextures(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPolygonsTextures(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const vertex_attribute = computed({
     get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
     set: (newValue) => {
       dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
     },
   })
   const polygon_attribute = computed({
     get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
     set: (newValue) => {
       dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
     },
   })
 </script>

package/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -22,6 +22,7 @@
 
 <script setup>
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({
     itemProps: { type: Object, required: true },
@@ -33,26 +34,37 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolyhedraColor(id.value),
-    set: (newValue) => dataStyleStore.setMeshPolyhedraColor(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const vertex_attribute = computed({
     get: () => dataStyleStore.polyhedraVertexAttribute(id.value),
-    set: (newValue) =>
-      dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const polyhedron_attribute = computed({
     get: () => dataStyleStore.polyhedraPolyhedronAttribute(id.value),
-    set: (newValue) =>
-      dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -20,10 +20,13 @@
 
   const id = toRef(() => props.itemProps.id)
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const visibility = computed({
     get: () => dataStyleStore.modelEdgesVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setModelEdgesVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setModelEdgesVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/Generic/Model/PointsOptions.vue

@@ -33,6 +33,7 @@
   import SurfacePoints from "@ogw_f/assets/viewer_svgs/surface_points.svg"
 
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({
     itemProps: { type: Object, required: true },
@@ -43,11 +44,16 @@
 
   const visibility = computed({
     get: () => dataStyleStore.modelPointsVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setModelPointsVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setModelPointsVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const size = computed({
     get: () => dataStyleStore.modelPointsSize(id.value),
-    set: (newValue) => dataStyleStore.setModelPointsSize(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setModelPointsSize(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -41,6 +41,7 @@
 
 <script setup>
   const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({
     itemProps: { type: Object, required: true },
@@ -51,25 +52,37 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsVisibility(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const size = computed({
     get: () => dataStyleStore.meshPointsSize(id.value),
-    set: (newValue) => dataStyleStore.setMeshPointsSize(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsSize(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const color = computed({
     get: () => dataStyleStore.meshPointsColor(id.value),
-    set: (newValue) => dataStyleStore.setMeshPointsColor(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
   const vertex_attribute = computed({
     get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
-    set: (newValue) =>
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
   })
 </script>

package/components/Viewer/TreeComponent.vue

@@ -16,6 +16,7 @@
 <script setup>
   const dataStyleStore = useDataStyleStore()
   const dataBaseStore = useDataBaseStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   const props = defineProps({ id: { type: String, required: true } })
 
@@ -39,43 +40,51 @@
           removed_surfaces,
           removed_blocks,
         ] = sortMeshComponents(removed)
-        if (added_corners.length > 0)
+        if (added_corners.length > 0) {
           dataStyleStore.setModelCornersVisibility(
             props.id,
             added_corners,
             true,
           )
-        if (added_lines.length > 0)
+        }
+        if (added_lines.length > 0) {
           dataStyleStore.setModelLinesVisibility(props.id, added_lines, true)
-        if (added_surfaces.length > 0)
+        }
+        if (added_surfaces.length > 0) {
           dataStyleStore.setModelSurfacesVisibility(
             props.id,
             added_surfaces,
             true,
           )
-        if (added_blocks.length > 0)
+        }
+        if (added_blocks.length > 0) {
           dataStyleStore.setModelBlocksVisibility(props.id, added_blocks, true)
-
-        if (removed_corners.length > 0)
+        }
+        if (removed_corners.length > 0) {
           dataStyleStore.setModelCornersVisibility(
             props.id,
             removed_corners,
             false,
           )
-        if (removed_lines.length > 0)
+        }
+        if (removed_lines.length > 0) {
           dataStyleStore.setModelLinesVisibility(props.id, removed_lines, false)
-        if (removed_surfaces.length > 0)
+        }
+        if (removed_surfaces.length > 0) {
           dataStyleStore.setModelSurfacesVisibility(
             props.id,
             removed_surfaces,
             false,
           )
-        if (removed_blocks.length > 0)
+        }
+        if (removed_blocks.length > 0) {
           dataStyleStore.setModelBlocksVisibility(
             props.id,
             removed_blocks,
             false,
           )
+        }
+        hybridViewerStore.remoteRender()
       }
     },
     { immediate: true, deep: true },

package/components/Viewer/TreeObject.vue

@@ -39,6 +39,7 @@
   const treeviewStore = useTreeviewStore()
   const dataStyleStore = useDataStyleStore()
   const dataBaseStore = useDataBaseStore()
+  const hybridViewerStore = useHybridViewerStore()
   const emit = defineEmits(["show-menu"])
 
   function isLeafNode(item) {
@@ -68,6 +69,7 @@
           }
         }
       })
+      hybridViewerStore.remoteRender()
     },
     { immediate: true },
   )

package/package.json

@@ -40,11 +40,11 @@
   },
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "type": "module",
-  "version": "9.12.2",
+  "version": "9.13.0-rc.1",
   "main": "./nuxt.config.js",
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "0.5.4",
@@ -60,7 +60,6 @@
     "sass": "1.87.0",
     "semver": "7.7.1",
     "uuid": "11.1.0",
-    "vue-recaptcha": "2.0.3",
     "vue3-carousel": "0.3.4",
     "vuetify": "3.8.12",
     "ws": "8.18.3",

package/stores/hybrid_viewer.js

@@ -100,6 +100,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function syncRemoteCamera() {
+    console.log("syncRemoteCamera")
     const renderer = genericRenderWindow.value.getRenderer()
     const camera = renderer.getActiveCamera()
     const params = {
@@ -118,7 +119,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         params,
       },
       {
-        response_fonction: () => {
+        response_function: () => {
+          remoteRender()
           for (const key in params.camera_options) {
             camera_options[key] = params.camera_options[key]
           }
@@ -129,7 +131,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
 
   function remoteRender() {
     viewer_call({
-      schema: viewer_schemas.opengeodeweb_viewer.viewer.render_now,
+      schema: viewer_schemas.opengeodeweb_viewer.viewer.render,
     })
   }
 
@@ -142,10 +144,12 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     imageStyle.transition = "opacity 0.1s ease-in"
     imageStyle.zIndex = 1
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight)
+    console.log("setContainer", container.value.$el)
 
     useMousePressed({
       target: container,
       onPressed: (event) => {
+        console.log("onPressed")
         if (event.button == 0) {
           is_moving.value = true
           event.stopPropagation()
@@ -153,7 +157,11 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         }
       },
       onReleased: () => {
+        if (!is_moving.value) {
+          return
+        }
         is_moving.value = false
+        console.log("onReleased")
         syncRemoteCamera()
       },
     })
@@ -198,6 +206,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setZScaling,
     syncRemoteCamera,
     initHybridViewer,
+    remoteRender,
     resize,
     setContainer,
     zScale,

package/tests/integration/microservices/viewer/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.11.8
+opengeodeweb-viewer==1.*,>=1.11.9rc1

package/tests/unit/utils/recaptcha.nuxt.test.js

@@ -0,0 +1,40 @@
+// Third party imports
+import { describe, expect, test } from "vitest"
+
+// Local imports
+import { check_recaptcha_params } from "~/utils/recaptcha.js"
+
+describe("recaptcha.js", () => {
+  const name = ""
+  const email = ""
+  const launch = false
+  const internal_error = 500
+  const success = 200
+
+  describe("wrong params", () => {
+    test("name", () => {
+      const name = "test"
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+
+    test("email", () => {
+      const email = "test"
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+
+    test("launch", () => {
+      const launch = true
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(internal_error)
+    })
+  })
+
+  describe("right params", () => {
+    test("name", () => {
+      const result = check_recaptcha_params(name, email, launch)
+      expect(result.status).toBe(success)
+    })
+  })
+})

package/utils/file_import_workflow.js

@@ -76,6 +76,7 @@ async function importFile(filename, geode_object) {
   }
   await dataStyleStore.applyDefaultStyle(id)
   console.log("after dataStyleStore.applyDefaultStyle")
+  hybridViewerStore.remoteRender()
   return data._value.id
 }
 

package/utils/recaptcha.js

@@ -0,0 +1,14 @@
+function check_recaptcha_params(name, email, launch) {
+  if (name !== "") {
+    return { status: 500 }
+  }
+  if (email !== "") {
+    return { status: 500 }
+  }
+  if (launch !== false) {
+    return { status: 500 }
+  }
+  return { status: 200 }
+}
+
+export { check_recaptcha_params }