From 470d69e3862ab7a4b6262191ae6abbdf1ec59d76 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Tue, 7 Nov 2023 17:11:07 +0100
Subject: [PATCH] BGDIINF_SB-3059 : add location popup for 3D

it won't be carried between 2D and 3D though
---
 src/modules/map/MapModule.vue                 |  1 +
 src/modules/map/components/LocationPopup.vue  | 61 ++++++++++++-------
 .../map/components/cesium/CesiumMap.vue       | 25 +++++++-
 .../map/components/cesium/CesiumPopover.vue   | 20 ++++--
 4 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/src/modules/map/MapModule.vue b/src/modules/map/MapModule.vue
index 9d471026d..6c0557a23 100644
--- a/src/modules/map/MapModule.vue
+++ b/src/modules/map/MapModule.vue
@@ -3,6 +3,7 @@
         <CesiumMap v-if="is3DActive">
             <!-- So that external modules can have access to the viewer instance through the provided 'getViewer' -->
             <slot />
+            <LocationPopup />
         </CesiumMap>
         <OpenLayersMap v-else>
             <!-- So that external modules can have access to the map instance through the provided 'getMap' -->
diff --git a/src/modules/map/components/LocationPopup.vue b/src/modules/map/components/LocationPopup.vue
index d7ea10807..7a1887bd2 100644
--- a/src/modules/map/components/LocationPopup.vue
+++ b/src/modules/map/components/LocationPopup.vue
@@ -1,36 +1,38 @@
 <template>
-    <OpenLayersPopover
+    <component
+        :is="mappingFrameworkSpecificPopup"
         v-if="displayLocationPopup"
         :title="$t('position')"
         :coordinates="coordinate"
+        :projection="projection"
         use-content-padding
         class="location-popup"
         data-cy="location-popup"
         @close="onClose"
     >
         <div class="location-popup-coordinates">
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a :href="$t('contextpopup_lv95_url')" target="_blank">{{ LV95Format.label }}</a>
             </div>
-            <div class="lp-data">
+            <div class="location-popup-coordinates-data">
                 <span data-cy="location-popup-coordinates-lv95">
                     {{ coordinateLV95 }}
                 </span>
                 <LocationPopupCopySlot :value="coordinateLV95" />
             </div>
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a :href="$t('contextpopup_lv03_url')" target="_blank">{{ LV03Format.label }}</a>
             </div>
-            <div class="lp-data">
+            <div class="location-popup-coordinates-data">
                 <span data-cy="location-popup-coordinates-lv03">
                     {{ coordinateLV03 }}
                 </span>
                 <LocationPopupCopySlot :value="coordinateLV03" />
             </div>
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a href="https://epsg.io/4326" target="_blank">{{ WGS84Format.label }}</a>
             </div>
-            <div class="lp-data">
+            <div class="location-popup-coordinates-data">
                 <span
                     class="location-popup-coordinates-wgs84-plain"
                     data-cy="location-popup-coordinates-plain-wgs84"
@@ -43,45 +45,45 @@
                     {{ coordinateWGS84 }}
                 </span>
             </div>
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a href="https://epsg.io/32632" target="_blank">{{ UTMFormat.label }}</a>
             </div>
-            <div class="lp-data">
+            <div class="location-popup-coordinates-data">
                 <span data-cy="location-popup-coordinates-utm">
                     {{ coordinateUTM }}
                 </span>
                 <LocationPopupCopySlot :value="coordinateUTM" />
             </div>
-            <div class="lp-label">{{ 'MGRS' }}</div>
-            <div class="lp-data">
+            <div class="location-popup-coordinates-label">{{ 'MGRS' }}</div>
+            <div class="location-popup-coordinates-data">
                 <span data-cy="location-popup-coordinates-mgrs">
                     {{ coordinateMGRS }}
                 </span>
                 <LocationPopupCopySlot :value="coordinateMGRS" />
             </div>
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a href="http://what3words.com/" target="_blank">what3words</a>
             </div>
-            <div v-if="what3Words" class="lp-data what-3-words">
+            <div v-if="what3Words" class="location-popup-coordinates-data what-3-words">
                 <span v-show="what3Words" data-cy="location-popup-w3w">
                     {{ what3Words }}
                 </span>
                 <LocationPopupCopySlot :value="what3Words" />
             </div>
             <div v-else>-</div>
-            <div class="lp-label">
+            <div class="location-popup-coordinates-label">
                 <a :href="$t('elevation_href')" target="_blank">{{ $t('elevation') }}</a>
             </div>
-            <div v-if="height" class="lp-data">
+            <div v-if="height" class="location-popup-coordinates-data">
                 <span data-cy="location-popup-height"> {{ heightInMeter }} m</span> /
                 <span>{{ heightInFeet }} ft</span>
                 <LocationPopupCopySlot :value="heightInMeter" />
             </div>
             <div v-else>-</div>
-            <div class="location-popup-link lp-label">
+            <div class="location-popup-link location-popup-coordinates-label">
                 {{ $t('share_link') }}
             </div>
-            <div class="location-popup-link lp-data">
+            <div class="location-popup-link location-popup-coordinates-data">
                 <LocationPopupCopyInput
                     :value="shareLinkUrlDisplay"
                     data-cy="location-popup-link-bowl-crosshair"
@@ -89,9 +91,14 @@
             </div>
         </div>
         <div class="location-popup-qrcode">
-            <img v-if="qrCodeImageSrc" :src="qrCodeImageSrc" data-cy="location-popup-qr-code" />
+            <img
+                v-if="qrCodeImageSrc"
+                :src="qrCodeImageSrc"
+                alt="qrcode"
+                data-cy="location-popup-qr-code"
+            />
         </div>
-    </OpenLayersPopover>
+    </component>
 </template>
 
 <script>
@@ -99,8 +106,10 @@ import { requestHeight } from '@/api/height.api'
 import { generateQrCode } from '@/api/qrcode.api'
 import { createShortLink } from '@/api/shortlink.api'
 import { registerWhat3WordsLocation } from '@/api/what3words.api'
+import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
 import LocationPopupCopyInput from '@/modules/map/components/LocationPopupCopyInput.vue'
 import LocationPopupCopySlot from '@/modules/map/components/LocationPopupCopySlot.vue'
+import MapPopover from '@/modules/map/components/MapPopover.vue'
 import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 import {
     LV03Format,
@@ -118,11 +127,10 @@ import { mapActions, mapState } from 'vuex'
 /** Right click pop up which shows the coordinates of the position under the cursor. */
 export default {
     components: {
-        OpenLayersPopover,
+        MapPopover,
         LocationPopupCopyInput,
         LocationPopupCopySlot,
     },
-    inject: ['getMap'],
     data() {
         return {
             what3Words: '',
@@ -142,7 +150,14 @@ export default {
             currentLang: (state) => state.i18n.lang,
             displayLocationPopup: (state) => state.map.displayLocationPopup,
             projection: (state) => state.position.projection,
+            showIn3d: (state) => state.ui.showIn3d,
         }),
+        mappingFrameworkSpecificPopup() {
+            if (this.showIn3d) {
+                return CesiumPopover
+            }
+            return OpenLayersPopover
+        },
         coordinate() {
             return this.clickInfo?.coordinate
         },
@@ -271,10 +286,10 @@ export default {
         grid-column-gap: 8px;
         font-size: 0.75rem;
         grid-row-gap: 2px;
-        .lp-label {
+        &-label {
             white-space: nowrap;
         }
-        .lp-data.what-3-words {
+        &-data.what-3-words {
             display: grid;
             grid-template-columns: auto min-content;
             span {
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 768ae8f33..88336d854 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -298,6 +298,10 @@ export default {
                 this.onClick,
                 ScreenSpaceEventType.LEFT_CLICK
             )
+            this.viewer.screenSpaceEventHandler.setInputAction(
+                this.onRightClick,
+                ScreenSpaceEventType.RIGHT_CLICK
+            )
 
             const globe = scene.globe
             globe.baseColor = Color.TRANSPARENT
@@ -407,9 +411,7 @@ export default {
                 roll: CesiumMath.toDegrees(camera.roll).toFixed(0),
             })
         },
-        onClick(event) {
-            unhighlightGroup(this.viewer)
-            const features = []
+        getCoordinateAtMouseEvent(event) {
             let coordinates = []
             const cartesian = this.viewer.scene.pickPosition(event.position)
             if (cartesian) {
@@ -421,6 +423,12 @@ export default {
             } else {
                 log.error('no coordinate found under the mouse cursor', event)
             }
+            return coordinates
+        },
+        onClick(event) {
+            unhighlightGroup(this.viewer)
+            const features = []
+            let coordinates = this.getCoordinateAtMouseEvent(event)
 
             let objects = this.viewer.scene.drillPick(event.position)
             const geoJsonFeatures = {}
@@ -482,6 +490,17 @@ export default {
                 )
             )
         },
+        onRightClick(event) {
+            const coordinates = this.getCoordinateAtMouseEvent(event)
+            this.click(
+                new ClickInfo(
+                    coordinates,
+                    [event.position.x, event.position.y],
+                    [],
+                    ClickType.CONTEXTMENU
+                )
+            )
+        },
         onPopupClose() {
             unhighlightGroup(this.viewer)
             this.clearAllSelectedFeatures()
diff --git a/src/modules/map/components/cesium/CesiumPopover.vue b/src/modules/map/components/cesium/CesiumPopover.vue
index 7d676615a..87f6d3eed 100644
--- a/src/modules/map/components/cesium/CesiumPopover.vue
+++ b/src/modules/map/components/cesium/CesiumPopover.vue
@@ -17,8 +17,11 @@
 
 <script>
 import MapPopover from '@/modules/map/components/MapPopover.vue'
+import CoordinateSystem from '@/utils/coordinates/CoordinateSystem.class'
+import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import log from '@/utils/logging'
 import { Cartesian3, Cartographic, defined, Ellipsoid, SceneTransforms } from 'cesium'
+import proj4 from 'proj4'
 
 // Cesium will create an instance of Cartesian3 or Cartographic each time a calculation is made if
 // we do not provide one, so here we declare two "buffer" instances that will be used throughout this component
@@ -37,6 +40,10 @@ export default {
             type: Array,
             required: true,
         },
+        projection: {
+            type: CoordinateSystem,
+            required: true,
+        },
         authorizePrint: {
             type: Boolean,
             default: false,
@@ -59,6 +66,11 @@ export default {
             },
         }
     },
+    computed: {
+        wgs84Coordinates() {
+            return proj4(this.projection.epsg, WGS84.epsg, this.coordinates)
+        },
+    },
     watch: {
         coordinates() {
             this.updateCoordinateHeight()
@@ -104,8 +116,8 @@ export default {
         updateCoordinateHeight() {
             this.coordinatesHeight = this.getViewer()?.scene.globe.getHeight(
                 Cartographic.fromDegrees(
-                    this.coordinates[0],
-                    this.coordinates[1],
+                    this.wgs84Coordinates[0],
+                    this.wgs84Coordinates[1],
                     0,
                     tempCartographic
                 )
@@ -119,8 +131,8 @@ export default {
             const cartesianCoords = SceneTransforms.wgs84ToWindowCoordinates(
                 this.getViewer().scene,
                 Cartesian3.fromDegrees(
-                    this.coordinates[0],
-                    this.coordinates[1],
+                    this.wgs84Coordinates[0],
+                    this.wgs84Coordinates[1],
                     this.coordinatesHeight,
                     Ellipsoid.WGS84,
                     tempCartesian3