build(deps): bump @gip-recia/tldraw-webcomponent from 1.5.1 to 1.6.0

.env.example

@@ -2,6 +2,8 @@ VITE_BASE_URI="/"
 VITE_API_URI="/"
 VITE_AXIOS_TIMEOUT=10000
 
+VITE_WEBSOCKET_API_URL=""
+
 VITE_USER_INFO_API_URI=""
 
 VITE_PROXY_API_URL="http://localhost:8090"

.env.production

@@ -2,4 +2,6 @@ VITE_BASE_URI="/collabsoft"
 VITE_API_URI="/collabsoft"
 VITE_AXIOS_TIMEOUT=10000
 
+VITE_WEBSOCKET_API_URL=""
+
 VITE_USER_INFO_API_URI="/portail/api/v5-1/userinfo?claims=private&groups="

package.json

@@ -23,7 +23,7 @@
     "release:major": "standard-version --release-as major"
   },
   "dependencies": {
-    "@gip-recia/tldraw-webcomponent": "^1.5.1",
+    "@gip-recia/tldraw-webcomponent": "^1.6.0",
     "@vueuse/core": "^10.7.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",

src/main/webapp/src/stores/configurationStore.ts

@@ -113,6 +113,8 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   const isJoin = ref<boolean>(false);
 
+  const isWsOk = ref<boolean>(true);
+
   /* -- Gestion de l'affichage -- */
 
   const isGrid = ref<boolean>(false);
@@ -141,6 +143,7 @@ export const useConfigurationStore = defineStore('configuration', () => {
     isNew,
     resetState,
     isJoin,
+    isWsOk,
     isGrid,
     isSettings,
   };

src/main/webapp/src/views/app/tldraw/JoinTldrawView.vue

@@ -1,11 +1,32 @@
 <script setup lang="ts">
+import { useConfigurationStore } from '@/stores/configurationStore.ts';
+import { watchOnce } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
 import { onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-const { VITE_USER_INFO_API_URI } = import.meta.env;
+const configurationStore = useConfigurationStore();
+const { isWsOk } = storeToRefs(configurationStore);
 
+const { VITE_WEBSOCKET_API_URL, VITE_USER_INFO_API_URI } = import.meta.env;
+
+const route = useRoute();
+const router = useRouter();
 const theme = useTheme();
 
+const joinCode: string = route.params.joinCode != undefined ? (route.params.joinCode as string) : '';
+
+watchOnce(
+  isWsOk,
+  (newValue, oldValue) => {
+    if (newValue != oldValue && !newValue) {
+      router.go(0);
+    }
+  },
+  { immediate: true },
+);
+
 const styleObserver = new MutationObserver((mutationList: Array<MutationRecord>) => {
   for (const mutation of mutationList) {
     if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
@@ -20,9 +41,16 @@ onMounted(() => {
 
 onUnmounted(() => {
   styleObserver.disconnect();
+  isWsOk.value = false;
 });
 </script>
 
 <template>
-  <tldraw-editor :user-info-api-url="VITE_USER_INFO_API_URI" :dark-mode="theme.global.name.value == 'dark'" />
+  <tldraw-multiplayer
+    v-if="isWsOk"
+    :websocket-api-url="VITE_WEBSOCKET_API_URL"
+    :room-id="joinCode"
+    :user-info-api-url="VITE_USER_INFO_API_URI"
+    :dark-mode="theme.global.name.value == 'dark'"
+  />
 </template>

src/main/webapp/src/views/app/tldraw/TldrawView.vue

@@ -34,7 +34,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <tldraw-editor
+  <tldraw-singleplayer
     v-if="currentFile"
     :persistance-api-url="`${VITE_API_URI}/api/file/${currentFile.id}`"
     :assets-api-url="`${VITE_API_URI}/api/file/${currentFile.id}/resource`"

vite.config.ts

@@ -18,7 +18,12 @@ export default ({ mode }: { mode: string }) => {
         template: {
           compilerOptions: {
             isCustomElement: (tag) =>
-              ['extended-uportal-header', 'extended-uportal-footer', 'tldraw-editor'].includes(tag),
+              [
+                'extended-uportal-header',
+                'extended-uportal-footer',
+                'tldraw-singleplayer',
+                'tldraw-multiplayer',
+              ].includes(tag),
           },
         },
       }),