From 2344eaac7a81fb7ee5244cbb481c51f03fd7496b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Tue, 14 May 2024 12:14:20 +0200
Subject: [PATCH 1/7] PB-490: move 3d zoom buttons to right toolbox

Issue : The zoom in and out buttons were added to the cesium viewer near the compass, when it is a bit more logical to have them stay where they are in the 2D viewer.

Fix : We move the logic of those buttons to the toolbox zoom buttons, use that logic when we are in 3d, and removed the cesium buttons.

temp
---
 .../map/components/cesium/CesiumMap.vue       | 18 +++++---
 .../map/components/cesium/CesiumToolbox.vue   | 45 -------------------
 .../map/components/toolbox/MapToolbox.vue     |  2 +-
 .../map/components/toolbox/ZoomButtons.vue    | 38 +++++++++++++++-
 4 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 0c7d5d1b2..fa40e5b6c 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -68,15 +68,18 @@
             <FeatureList />
         </CesiumPopover>
         <CesiumGeolocationFeedback v-if="viewerCreated" />
-        <CesiumToolbox
+        
+        <cesium-compass
             v-if="viewerCreated && isDesktopMode && !isFullScreenMode"
-            class="cesium-toolbox position-absolute start-50 translate-middle-x"
+            ref="compass"
+            class="cesium-toolbox position-absolute start-50 translate-middle-x cesium-toolbox-compass"
         />
         <slot />
     </div>
 </template>
 <script>
 import 'cesium/Build/Cesium/Widgets/widgets.css'
+import '@geoblocks/cesium-compass'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import * as cesium from 'cesium'
@@ -119,7 +122,6 @@ import FeatureList from '@/modules/infobox/components/FeatureList.vue'
 import CesiumGeolocationFeedback from '@/modules/map/components/cesium/CesiumGeolocationFeedback.vue'
 import CesiumInternalLayer from '@/modules/map/components/cesium/CesiumInternalLayer.vue'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
-import CesiumToolbox from '@/modules/map/components/cesium/CesiumToolbox.vue'
 import {
     CAMERA_MAX_PITCH,
     CAMERA_MAX_ZOOM_DISTANCE,
@@ -144,11 +146,14 @@ import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
 import log from '@/utils/logging'
 
 const dispatcher = { dispatcher: 'CesiumMap.vue' }
-
+// TODO : REF TO COMPASS
 export default {
     components: {
+<<<<<<< HEAD
         CesiumGeolocationFeedback,
         CesiumToolbox,
+=======
+>>>>>>> 9ad6fc74 (PB-490: move 3d zoom buttons to right toolbox)
         FontAwesomeIcon,
         CesiumPopover,
         FeatureEdit,
@@ -400,6 +405,9 @@ export default {
                 limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
             )
 
+            this.$refs.compass.scene = this.viewer.scene
+            this.$refs.compass.clock = this.viewer.clock
+
             this.flyToPosition()
 
             if (this.selectedFeatures.length > 0) {
@@ -490,7 +498,7 @@ export default {
             })
         },
         getCoordinateAtScreenCoordinate(x, y) {
-            const cartesian = this.viewer.scene.pickPosition(new Cartesian2(x, y))
+            const cartesian = this.viewer?.scene.pickPosition(new Cartesian2(x, y))
             let coordinates = []
             if (cartesian) {
                 const cartCoords = Cartographic.fromCartesian(cartesian)
diff --git a/src/modules/map/components/cesium/CesiumToolbox.vue b/src/modules/map/components/cesium/CesiumToolbox.vue
index 84cd015af..c521e5466 100644
--- a/src/modules/map/components/cesium/CesiumToolbox.vue
+++ b/src/modules/map/components/cesium/CesiumToolbox.vue
@@ -1,8 +1,6 @@
 <script setup>
 import '@geoblocks/cesium-compass'
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { Ray } from 'cesium'
 import { computed, inject, onMounted, ref } from 'vue'
 import { useStore } from 'vuex'
 
@@ -13,7 +11,6 @@ const compass = ref(null)
 const store = useStore()
 
 const isDesktopMode = computed(() => store.getters.isDesktopMode)
-const resolution = computed(() => store.getters.resolution)
 
 const getViewer = inject('getViewer')
 
@@ -27,43 +24,11 @@ onMounted(() => {
         log.error('No Cesium viewer found, could not link compass')
     }
 })
-
-const resolutionRatioForZoomInOut = 200
-const step = computed(() => resolution.value * resolutionRatioForZoomInOut)
-
-function moveCamera(distance) {
-    const camera = viewer.scene.camera
-    if (camera) {
-        camera.flyTo({
-            destination: Ray.getPoint(new Ray(camera.position, camera.direction), distance),
-            orientation: {
-                heading: camera.heading,
-                pitch: camera.pitch,
-                roll: camera.roll,
-            },
-            duration: 0.25,
-        })
-    }
-}
-
-function moveForward() {
-    moveCamera(step.value)
-}
-
-function moveBackward() {
-    moveCamera(-step.value)
-}
 </script>
 
 <template>
     <div class="cesium-toolbox">
-        <button class="cesium-toolbox-button" @click="moveForward">
-            <FontAwesomeIcon icon="plus" />
-        </button>
         <cesium-compass v-show="isDesktopMode" ref="compass" class="cesium-toolbox-compass" />
-        <button class="cesium-toolbox-button" @click="moveBackward">
-            <FontAwesomeIcon icon="minus" />
-        </button>
     </div>
 </template>
 
@@ -74,16 +39,6 @@ function moveBackward() {
     display: flex;
 
     $compass-size: 95px;
-    $button-size: calc($compass-size / 2);
-    &-button {
-        width: $button-size;
-        height: $button-size;
-        border-radius: calc($button-size / 2);
-        border: 2px solid rgba(0, 0, 0, 0.4);
-        background: rgb(224, 225, 226);
-        font-size: calc($button-size / 2.5);
-        color: rgba(0, 0, 0, 0.8);
-    }
 
     &-compass {
         position: relative;
diff --git a/src/modules/map/components/toolbox/MapToolbox.vue b/src/modules/map/components/toolbox/MapToolbox.vue
index 7e4ecdc9e..6bda05ea7 100644
--- a/src/modules/map/components/toolbox/MapToolbox.vue
+++ b/src/modules/map/components/toolbox/MapToolbox.vue
@@ -51,7 +51,7 @@ const is3dActive = computed(() => store.state.cesium.active)
     >
         <FullScreenButton v-if="fullScreenButton" />
         <GeolocButton v-if="geolocButton && !isFullscreenMode" />
-        <ZoomButtons v-if="!isFullscreenMode && !is3dActive" />
+        <ZoomButtons v-if="!isFullscreenMode" />
         <Toggle3dButton v-if="toggle3dButton && !isFullscreenMode" />
         <OpenLayersCompassButton v-if="compassButton && !is3dActive && !isFullscreenMode" />
         <slot />
diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
index a9e11d577..6768a3cc1 100644
--- a/src/modules/map/components/toolbox/ZoomButtons.vue
+++ b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { Ray } from 'cesium'
+import { computed, inject } from 'vue'
 import { useStore } from 'vuex'
 
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
@@ -6,13 +8,45 @@ import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 const dispatcher = { dispatcher: 'ZoomButtons.vue' }
 
 const store = useStore()
+const is3dActive = computed(() => store.state.cesium.active)
+const resolution = computed(() => store.getters.resolution)
+
 useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
+const getViewer = inject('getViewer')
+
+// the '200' magic number has been found empirically to be the most agreeable to emulate
+// a zoom level.
+const step = computed(() => resolution.value * 200)
+
+function moveCamera(distance) {
+    const camera = getViewer().scene?.camera
+    if (camera) {
+        camera.flyTo({
+            destination: Ray.getPoint(new Ray(camera.position, camera.direction), distance),
+            orientation: {
+                heading: camera.heading,
+                pitch: camera.pitch,
+                roll: camera.roll,
+            },
+            duration: 0.25,
+        })
+    }
+}
+
 function increaseZoom() {
-    store.dispatch('increaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(step.value)
+    } else {
+        store.dispatch('increaseZoom', dispatcher)
+    }
 }
 function decreaseZoom() {
-    store.dispatch('decreaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(-step.value)
+    } else {
+        store.dispatch('decreaseZoom', dispatcher)
+    }
 }
 </script>
 

From 9de5e4af488e959c2c91f870479ebf4f21e469f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Mon, 27 May 2024 10:19:56 +0200
Subject: [PATCH 2/7] PB-490: css for compass transferred

---
 src/modules/map/components/cesium/CesiumMap.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index fa40e5b6c..11eb20a7c 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -149,11 +149,7 @@ const dispatcher = { dispatcher: 'CesiumMap.vue' }
 // TODO : REF TO COMPASS
 export default {
     components: {
-<<<<<<< HEAD
         CesiumGeolocationFeedback,
-        CesiumToolbox,
-=======
->>>>>>> 9ad6fc74 (PB-490: move 3d zoom buttons to right toolbox)
         FontAwesomeIcon,
         CesiumPopover,
         FeatureEdit,
@@ -650,5 +646,16 @@ export default {
 .cesium-toolbox {
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     z-index: $zindex-map + 1;
+    //display: flex;
+
+    $compass-size: 95px;
+
+    &-compass {
+        position: relative;
+        width: $compass-size;
+        height: $compass-size;
+        --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+        --cesium-compass-fill-color: rgb(224, 225, 226);
+    }
 }
 </style>

From aafed61fd312a1f16ac7d0f6a039aef93a05aa41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Mon, 27 May 2024 10:54:09 +0200
Subject: [PATCH 3/7] PB-490: getting rid of the cesium toolbox component

---
 .../map/components/cesium/CesiumMap.vue       |  9 ++--
 .../map/components/cesium/CesiumToolbox.vue   | 51 -------------------
 2 files changed, 5 insertions(+), 55 deletions(-)
 delete mode 100644 src/modules/map/components/cesium/CesiumToolbox.vue

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 11eb20a7c..db1bf4a2a 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -70,7 +70,7 @@
         <CesiumGeolocationFeedback v-if="viewerCreated" />
         
         <cesium-compass
-            v-if="viewerCreated && isDesktopMode && !isFullScreenMode"
+            v-show="isDesktopMode && !isFullScreenMode"
             ref="compass"
             class="cesium-toolbox position-absolute start-50 translate-middle-x cesium-toolbox-compass"
         />
@@ -401,8 +401,10 @@ export default {
                 limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
             )
 
-            this.$refs.compass.scene = this.viewer.scene
-            this.$refs.compass.clock = this.viewer.clock
+            if (this.$refs.compass) {
+                this.$refs.compass.scene = this.viewer.scene
+                this.$refs.compass.clock = this.viewer.clock
+            }
 
             this.flyToPosition()
 
@@ -646,7 +648,6 @@ export default {
 .cesium-toolbox {
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     z-index: $zindex-map + 1;
-    //display: flex;
 
     $compass-size: 95px;
 
diff --git a/src/modules/map/components/cesium/CesiumToolbox.vue b/src/modules/map/components/cesium/CesiumToolbox.vue
deleted file mode 100644
index c521e5466..000000000
--- a/src/modules/map/components/cesium/CesiumToolbox.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import '@geoblocks/cesium-compass'
-
-import { computed, inject, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
-
-import log from '@/utils/logging'
-
-const compass = ref(null)
-
-const store = useStore()
-
-const isDesktopMode = computed(() => store.getters.isDesktopMode)
-
-const getViewer = inject('getViewer')
-
-const viewer = getViewer()
-
-onMounted(() => {
-    if (viewer) {
-        compass.value.scene = viewer.scene
-        compass.value.clock = viewer.clock
-    } else {
-        log.error('No Cesium viewer found, could not link compass')
-    }
-})
-</script>
-
-<template>
-    <div class="cesium-toolbox">
-        <cesium-compass v-show="isDesktopMode" ref="compass" class="cesium-toolbox-compass" />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-.cesium-toolbox {
-    display: flex;
-
-    $compass-size: 95px;
-
-    &-compass {
-        position: relative;
-        width: $compass-size;
-        height: $compass-size;
-        --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
-        --cesium-compass-fill-color: rgb(224, 225, 226);
-    }
-}
-</style>

From a5c86ed30c459c660891f01c6a6aa86de7f55606 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Mon, 27 May 2024 10:54:09 +0200
Subject: [PATCH 4/7] PB-490: getting rid of the cesium toolbox component

removing comment
---
 src/modules/map/components/cesium/CesiumMap.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index db1bf4a2a..b9f9867d2 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -146,7 +146,6 @@ import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
 import log from '@/utils/logging'
 
 const dispatcher = { dispatcher: 'CesiumMap.vue' }
-// TODO : REF TO COMPASS
 export default {
     components: {
         CesiumGeolocationFeedback,

From 7dc45a049f06942e3827750b0a88ed89e2d66d64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Tue, 28 May 2024 17:13:27 +0200
Subject: [PATCH 5/7] PB-490: removing useless comment and adding context to a
 variable that was moved from the cesium toolbox to the zoom buttons

---
 src/modules/map/components/toolbox/ZoomButtons.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
index 6768a3cc1..ce1fa8ecb 100644
--- a/src/modules/map/components/toolbox/ZoomButtons.vue
+++ b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -15,8 +15,9 @@ useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
 const getViewer = inject('getViewer')
 
-// the '200' magic number has been found empirically to be the most agreeable to emulate
-// a zoom level.
+// The `step` variable is used with the 3D viewer. The goal was to find an increase or
+// decrease in the zoom that emulated a zoom level in an agreeable way. `200` here is a
+// magic number, found empirically, to achieve that goal.
 const step = computed(() => resolution.value * 200)
 
 function moveCamera(distance) {

From 7b21b8528d6ac3c6abcc428957b2562c56be4659 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Thu, 30 May 2024 17:32:28 +0200
Subject: [PATCH 6/7] PB-490: small css adaptation

---
 src/modules/map/components/cesium/CesiumMap.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index b9f9867d2..352e29b1e 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -72,7 +72,7 @@
         <cesium-compass
             v-show="isDesktopMode && !isFullScreenMode"
             ref="compass"
-            class="cesium-toolbox position-absolute start-50 translate-middle-x cesium-toolbox-compass"
+            class="position-absolute start-50 translate-middle-x cesium-compass"
         />
         <slot />
     </div>
@@ -644,18 +644,16 @@ export default {
     right: unset;
 }
 
-.cesium-toolbox {
+.cesium-compass {
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     z-index: $zindex-map + 1;
 
     $compass-size: 95px;
 
-    &-compass {
-        position: relative;
-        width: $compass-size;
-        height: $compass-size;
-        --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
-        --cesium-compass-fill-color: rgb(224, 225, 226);
-    }
+    position: relative;
+    width: $compass-size;
+    height: $compass-size;
+    --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+    --cesium-compass-fill-color: rgb(224, 225, 226);
 }
 </style>

From b2a8461a42d879d9eb727a12068da6bbbfa79fa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Thu, 30 May 2024 17:32:28 +0200
Subject: [PATCH 7/7] PB-490: small css adaptation

lintint
---
 src/modules/map/components/cesium/CesiumMap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 352e29b1e..42c8eaefd 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -68,7 +68,7 @@
             <FeatureList />
         </CesiumPopover>
         <CesiumGeolocationFeedback v-if="viewerCreated" />
-        
+
         <cesium-compass
             v-show="isDesktopMode && !isFullScreenMode"
             ref="compass"