From cc2e6ba21002eaba049d2b54281d7620da8789c5 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Thu, 29 Jun 2023 17:08:19 +0200
Subject: [PATCH] BGDIINF_SB-2981: Add cesium-compass widget

---
 package-lock.json                             | 58 +++++++++++++++++++
 package.json                                  |  1 +
 .../map/components/cesium/CesiumMap.vue       | 14 +++++
 vite.config.ts                                |  8 ++-
 4 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 39c1cff10e..1a3511e6bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
                 "@fortawesome/free-regular-svg-icons": "^6.4.0",
                 "@fortawesome/free-solid-svg-icons": "^6.4.0",
                 "@fortawesome/vue-fontawesome": "^3.0.3",
+                "@geoblocks/cesium-compass": "^0.4.2",
                 "@geoblocks/ol-maplibre-layer": "^0.1.1",
                 "@ivanv/vue-collapse-transition": "^1.0.2",
                 "@popperjs/core": "^2.11.8",
@@ -577,6 +578,17 @@
                 "vue": ">= 3.0.0 < 4"
             }
         },
+        "node_modules/@geoblocks/cesium-compass": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@geoblocks/cesium-compass/-/cesium-compass-0.4.2.tgz",
+            "integrity": "sha512-B8vfxAvyBsJ/GwHG5BIxneimvQk1Vjq0jlfy+6QTtOwdHUYfS+xpDW1CUwaL4USFsnvfekHwUP3NR9fg3VOXPQ==",
+            "dependencies": {
+                "lit": "2.x"
+            },
+            "peerDependencies": {
+                "cesium": "1.x"
+            }
+        },
         "node_modules/@geoblocks/ol-maplibre-layer": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@geoblocks/ol-maplibre-layer/-/ol-maplibre-layer-0.1.1.tgz",
@@ -854,6 +866,19 @@
             "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
             "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
         },
+        "node_modules/@lit-labs/ssr-dom-shim": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
+            "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+        },
+        "node_modules/@lit/reactive-element": {
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.2.tgz",
+            "integrity": "sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==",
+            "dependencies": {
+                "@lit-labs/ssr-dom-shim": "^1.0.0"
+            }
+        },
         "node_modules/@mapbox/geojson-rewind": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
@@ -1283,6 +1308,11 @@
             "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
             "dev": true
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+            "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
+        },
         "node_modules/@types/unist": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -6369,6 +6399,34 @@
                 }
             }
         },
+        "node_modules/lit": {
+            "version": "2.7.5",
+            "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.5.tgz",
+            "integrity": "sha512-i/cH7Ye6nBDUASMnfwcictBnsTN91+aBjXoTHF2xARghXScKxpD4F4WYI+VLXg9lqbMinDfvoI7VnZXjyHgdfQ==",
+            "dependencies": {
+                "@lit/reactive-element": "^1.6.0",
+                "lit-element": "^3.3.0",
+                "lit-html": "^2.7.0"
+            }
+        },
+        "node_modules/lit-element": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.2.tgz",
+            "integrity": "sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==",
+            "dependencies": {
+                "@lit-labs/ssr-dom-shim": "^1.1.0",
+                "@lit/reactive-element": "^1.3.0",
+                "lit-html": "^2.7.0"
+            }
+        },
+        "node_modules/lit-html": {
+            "version": "2.7.4",
+            "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.7.4.tgz",
+            "integrity": "sha512-/Jw+FBpeEN+z8X6PJva5n7+0MzCVAH2yypN99qHYYkq8bI+j7I39GH+68Z/MZD6rGKDK9RpzBw7CocfmHfq6+g==",
+            "dependencies": {
+                "@types/trusted-types": "^2.0.2"
+            }
+        },
         "node_modules/loader-runner": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
diff --git a/package.json b/package.json
index 8973dec3d7..5e1a17d339 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "@geoblocks/cesium-compass": "^0.4.2",
         "@geoblocks/ol-maplibre-layer": "^0.1.1",
         "@ivanv/vue-collapse-transition": "^1.0.2",
         "@popperjs/core": "^2.11.8",
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index d1edde6b4f..d1d90e4f91 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -1,5 +1,6 @@
 <template>
     <div id="cesium" ref="map" data-cy="cesium"></div>
+    <cesium-compass ref="compass"></cesium-compass>
     <slot />
 </template>
 <script>
@@ -15,6 +16,7 @@ import { addSwisstopoWMTSLayer } from './utils/imageryLayerUtils'
 import { mapGetters, mapState } from 'vuex'
 import { TERRAIN_URL } from './constants'
 import { IS_TESTING_WITH_CYPRESS } from '@/config'
+import '@geoblocks/cesium-compass'
 export default {
     provide() {
         return {
@@ -74,6 +76,10 @@ export default {
             requestRenderMode: true,
         })
 
+        const compass = this.$refs.compass
+        compass.scene = this.viewer.scene
+        compass.clock = this.viewer.clock
+
         if (IS_TESTING_WITH_CYPRESS) {
             window.cesiumViewer = this.viewer
         }
@@ -142,4 +148,12 @@ export default {
         position: absolute;
     }
 }
+cesium-compass {
+    position: absolute;
+    bottom: 130px;
+    right: 50%;
+    z-index: 3;
+    --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+    --cesium-compass-fill-color: rgb(224, 225, 226);
+}
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index d8e91fe907..f0b503e9cf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,7 +27,13 @@ export default defineConfig(({ command, mode }) => {
             outDir: `./dist/${mode}`,
         },
         plugins: [
-            vue(),
+            vue({
+                template: {
+                    compilerOptions: {
+                        isCustomElement: (tag) => tag === 'cesium-compass',
+                    },
+                },
+            }),
             generateBuildInfo(appVersion),
             // CesiumJS requires static files from the following 4 folders to be included in the build
             // https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/#install-with-npm