@geode/opengeodeweb-front 0.0.21 → 0.0.22

package/components/Launcher.vue

@@ -18,7 +18,7 @@
 <script setup>
 import { VueRecaptcha } from "vue-recaptcha"
 
-// const ws_link_store = use_ws_link_store()
+const websocket_store = use_websocket_store()
 const cloud_store = use_cloud_store()
 const { is_cloud_running, is_captcha_validated, is_connexion_launched } = storeToRefs(cloud_store)
 
@@ -29,9 +29,9 @@ const props = defineProps({
 const { site_key } = toRefs(props)
 
 watch(is_captcha_validated, async (value) => {
-  if (value === true) {
+  if (value === true && process.client) {
     await cloud_store.create_connexion()
-    // await ws_link_store.ws_connect()
+    await websocket_store.ws_connect()
   }
 })
 

package/components/{RemoteRenderingView.vue → RemoteRenderingView.client.vue}

@@ -6,15 +6,15 @@
 
 <script setup>
 import vtkRemoteView from '@kitware/vtk.js/Rendering/Misc/RemoteView';
-import { vElementSize } from '@vueuse/components'
+import { useElementSize } from '@vueuse/core'
 
-const app_store = use_app_store()
-const { picking_mode } = storeToRefs(app_store)
+const viewer_store = use_viewer_store()
+const { picking_mode } = storeToRefs(viewer_store)
 
 function get_x_y (event) {
   if (picking_mode.value === true) {
     const { offsetX, offsetY } = event
-    app_store.set_picked_point(offsetX, offsetY)
+    viewer_store.set_picked_point(offsetX, offsetY)
   }
 }
 
@@ -27,7 +27,7 @@ const viewer = ref(null)
 const { width, height } = useElementSize(viewer)
 
 function resize () {
-  view.getCanvasView().setSize(0, 0) // hack to fit full size
+  view.getCanvasView().setSize(1, 1)
   view.resize();
 }
 

package/package.json

@@ -5,29 +5,40 @@
     "release:major": "npm version $(semver $npm_package_version -i major) && npm publish --tag latest",
     "release:minor": "npm version $(semver $npm_package_version -i minor) && npm publish --tag latest",
     "release:patch": "npm version $(semver $npm_package_version -i patch) && npm publish --tag latest",
-    "release:beta": "npm version $(semver $npm_package_version -i prerelease --preid $(npm whoami) ) && npm publish --tag rc"
+    "release:beta": "npm version $(semver $npm_package_version -i prerelease --preid $(npm whoami) ) && npm publish --tag rc",
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
   },
   "devDependencies": {
-    "nuxt": "^3.6.5"
+    "nuxt": "^3.6.5",
+    "eslint": "^8.47.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-nuxt": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vuetify": "^2.0.5"
   },
   "overrides": {
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "main": "./nuxt.config.js",
   "dependencies": {
+    "@kitware/vtk.js": "^28.8.0",
     "@mdi/font": "^7.2.96",
     "@pinia/nuxt": "^0.4.11",
-    "@types/node": "^20.5.0",
+    "@types/node": "^20.5.3",
     "@vueuse/components": "^10.3.0",
     "@vueuse/core": "^10.3.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.6",
-    "sass": "^1.65.1",
+    "sass": "^1.66.1",
     "semver": "^7.5.4",
     "vue-recaptcha": "^2.0.3",
-    "vuetify": "^3.3.13"
+    "vuetify": "^3.3.14",
+    "wslink": "^1.11.0"
   },
   "repository": {
     "type": "git",

package/stores/cloud.js

@@ -14,9 +14,9 @@ export const use_cloud_store = defineStore('cloud', {
       const public_runtime_config = useRuntimeConfig().public
       var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
       if (process.env.NODE_ENV == 'production') {
-        geode_url = geode_url + `/${state.ID}`
-        // /!\ ADD /geode LATER /!\
+        geode_url = geode_url + `/${state.ID}/geode`
       }
+      console.log("geode_url",geode_url)
       return geode_url
     },
     viewer_url: (state) => {
@@ -25,6 +25,7 @@ export const use_cloud_store = defineStore('cloud', {
       if (process.env.NODE_ENV == 'production') {
         viewer_url = viewer_url + `/${state.ID}/viewer`
       }
+      viewer_url = viewer_url + '/ws'
       return viewer_url
     },
   },
@@ -36,8 +37,7 @@ export const use_cloud_store = defineStore('cloud', {
       if (ID === null || typeof ID === 'undefined') {
         return this.create_backend()
       } else {
-        const config = useRuntimeConfig()
-        const { data, error } = await useFetch(`${config.public.API_URL}/${ID}/ping`, { method: 'POST' })
+        const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
         console.log("error", error)
         if (data.value !== null) {
           this.ID = ID
@@ -51,7 +51,8 @@ export const use_cloud_store = defineStore('cloud', {
     async create_backend () {
       const errors_store = use_errors_store()
       const config = useRuntimeConfig()
-      const { data, error } = await useFetch(`${config.public.API_URL}${config.public.SITE_BRANCH}/tools/createbackend`, { method: 'POST' })
+      const public_runtime_config = config.public
+      const { data, error } = await useFetch(`${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}/createbackend`, { method: 'POST' })
       if (data.value !== null) {
         this.ID = data.value.ID
         localStorage.setItem('ID', data.value.ID)
@@ -68,8 +69,7 @@ export const use_cloud_store = defineStore('cloud', {
     },
     async do_ping () {
       const errors_store = use_errors_store()
-      const config = useRuntimeConfig()
-      const { data, error } = await useFetch(`${config.public.API_URL}/${this.ID}/ping`, { method: 'POST' })
+      const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
       if (data.value !== null) {
         this.is_cloud_running = true
       } else {

package/stores/viewer.js

@@ -0,0 +1,89 @@
+import { defineStore } from 'pinia'
+
+export const use_viewer_store = defineStore('viewer', {
+  state: () => ({
+    picking_mode: false,
+    picked_point: { x: null, y: null }
+  }),
+  actions: {
+    toggle_picking_mode (value) {
+      this.picking_mode = value
+    },
+    async set_picked_point (x, y) {
+      const response = await get_point_position({ x, y })
+      const { x: world_x, y: world_y } = response
+      this.picked_point.x = world_x
+      this.picked_point.y = world_y
+      this.picking_mode = false
+    },
+    async create_object_pipeline (params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.create_object_pipeline(params)
+          .catch(console.error);
+      }
+    },
+    async toggle_object_visibility (params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.toggle_object_visibility(params)
+          .catch(console.error);
+      }
+    },
+    async apply_textures (params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        use_websocket_store().client
+          .getRemote()
+          .vtk.apply_textures(params)
+          .catch(console.error);
+
+        websocket_store.$patch({ busy: false })
+      }
+    },
+    async get_point_position (params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.get_point_position(params)
+          .catch(console.error);
+        console.log('response', response)
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    },
+    async update_data (params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.update_data(params)
+          .catch(console.error);
+        console.log('response', response)
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    },
+    async reset () {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.reset()
+          .catch(console.error);
+        console.log('response', response)
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    }
+  }
+})

package/stores/websocket.js

@@ -0,0 +1,94 @@
+import { defineStore } from 'pinia'
+import _ from 'lodash'
+
+import vtkWSLinkClient from '@kitware/vtk.js/IO/Core/WSLinkClient'
+import SmartConnect from 'wslink/src/SmartConnect'
+
+import '@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry'
+import { connectImageStream } from '@kitware/vtk.js/Rendering/Misc/RemoteView'
+import protocols from '@/protocols'
+
+// Bind vtkWSLinkClient to our SmartConnect
+vtkWSLinkClient.setSmartConnectClass(SmartConnect);
+
+
+export const use_websocket_store = defineStore('websocket', {
+  state: () => ({
+    client: {},
+    config: null,
+    busy: false,
+    is_client_created: false
+  }),
+  actions: {
+    ws_connect () {
+      const config = { application: 'cone' };
+      const cloud_store = use_cloud_store()
+      config.sessionURL = cloud_store.viewer_url
+
+      const { client } = this
+      if (this.is_client_created && client.isConnected()) {
+        client.disconnect(-1);
+        this.is_client_created = false;
+      }
+      let clientToConnect = client;
+      if (_.isEmpty(clientToConnect)) {
+        clientToConnect = vtkWSLinkClient.newInstance({ protocols });
+      }
+
+      // Connect to busy store
+      clientToConnect.onBusyChange((count) => {
+        this.buzy = count
+      });
+      clientToConnect.beginBusy();
+
+      // Error
+      clientToConnect.onConnectionError((httpReq) => {
+        const message =
+          (httpReq && httpReq.response && httpReq.response.error) ||
+          `Connection error`;
+        console.error(message);
+        console.log(httpReq);
+      });
+
+      // Close
+      clientToConnect.onConnectionClose((httpReq) => {
+        const message =
+          (httpReq && httpReq.response && httpReq.response.error) ||
+          `Connection close`;
+        console.error(message);
+        console.log(httpReq);
+      });
+
+      // Connect
+      clientToConnect
+        .connect(config)
+        .then((validClient) => {
+          connectImageStream(validClient.getConnection().getSession());
+          this.client = validClient
+          clientToConnect.endBusy();
+
+          // Now that the client is ready let's setup the server for us
+          this.ws_initialize_server()
+          this.client.getRemote().vtk.reset().catch(console.error);
+          this.is_client_created = true;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    ws_initialize_server () {
+
+      if (!_.isEmpty(this.client)) {
+        this.client
+          .getRemote()
+          .vtk.create_visualization()
+          .catch(console.error);
+      }
+    },
+    reset_camera () {
+      if (!_.isEmpty(this.client)) {
+        this.client.getRemote().vtk.reset_camera().catch(console.error);
+      }
+    },
+  },
+})