Merge pull request #1033 from geoadmin/pb-859-info-box-positionpbox-t…

…ogether

PB 859 info box position box together - #patch

src/modules/map/MapModule.vue

@@ -15,7 +15,7 @@ const store = useStore()
 const is3DActive = computed(() => store.state.cesium.active)
 
 const displayLocationPopup = computed(
-    () => store.state.map.displayLocationPopup && !store.state.ui.embed
+    () => store.state.map.locationPopupCoordinates && !store.state.ui.embed
 )
 const isCompareSliderActive = computed(() => {
     return store.state.ui.isCompareSliderActive && store.getters.visibleLayerOnTop

src/modules/map/components/LocationPopup.vue

@@ -27,6 +27,7 @@ const projection = computed(() => store.state.position.projection)
 const showIn3d = computed(() => store.state.cesium.active)
 const currentLang = computed(() => store.state.i18n.lang)
 const showEmbedSharing = computed(() => selectedTab.value === 'share')
+const coordinate = computed(() => store.state.map.locationPopupCoordinates)
 
 const selectedTab = ref('position')
 const shareTabButton = ref(null)
@@ -43,9 +44,7 @@ const mappingFrameworkSpecificPopup = computed(() => {
     }
     return OpenLayersPopover
 })
-const coordinate = computed(() => {
-    return clickInfo.value?.coordinate
-})
+
 const copyButtonIcon = computed(() => {
     if (shareLinkCopied.value) {
         return 'check'
@@ -151,7 +150,7 @@ async function copyShareLink() {
 }
 
 function clearClick() {
-    store.dispatch('clearClick', dispatcher)
+    store.dispatch('clearLocationPopupCoordinates', dispatcher)
     requestClipboard.value = false
 }
 </script>

src/store/modules/map.store.js

@@ -61,12 +61,11 @@ export default {
          */
         previewedPinnedLocation: null,
         /**
-         * Flags telling if the location popup (information about a set of coordinates) must be
-         * shown at the location of the last click (using clickInfo above).
+         * Coordinate of the locationPop on the map. If null, locationPopup will not be shown.
          *
-         * @type Boolean
+         * @type Array<Number>
          */
-        displayLocationPopup: false,
+        locationPopupCoordinates: null,
     },
     actions: {
         /**
@@ -75,10 +74,12 @@ export default {
          * @param commit
          * @param {ClickInfo} clickInfo
          */
-        click: ({ commit }, { clickInfo, dispatcher }) =>
-            commit('setClickInfo', { clickInfo, dispatcher }),
-        clearClick: ({ commit }, { dispatcher }) =>
-            commit('setClickInfo', { clickInfo: null, dispatcher }),
+        click: ({ commit }, { clickInfo, dispatcher }) => {
+            commit('setClickInfo', { clickInfo, dispatcher })
+        },
+        clearClick: ({ commit }, { dispatcher }) => {
+            commit('setClickInfo', { clickInfo: null, dispatcher })
+        },
         /**
          * Sets the dropped pin on the map, if coordinates are null the dropped pin is removed
          *
@@ -106,18 +107,29 @@ export default {
         clearPinnedLocation({ commit }, { dispatcher }) {
             commit('setPinnedLocation', { coordinates: null, dispatcher })
         },
-        displayLocationPopup({ commit }, { dispatcher }) {
-            commit('setDisplayLocationPopup', { display: true, dispatcher })
+        clearLocationPopupCoordinates({ commit }, { dispatcher }) {
+            commit('setLocationPopupCoordinates', { coordinates: null, dispatcher })
         },
-        hideLocationPopup({ commit }, { dispatcher }) {
-            commit('setDisplayLocationPopup', { display: false, dispatcher })
+        /**
+         * Sets the locationPopup on the map, if coordinates are null the locationPopup is removed
+         *
+         * @param commit
+         * @param {Number[]} coordinates Location expressed in EPSG:3857
+         */
+        setLocationPopupCoordinates: ({ commit }, { coordinates, dispatcher }) => {
+            if (Array.isArray(coordinates) && coordinates.length === 2) {
+                commit('setLocationPopupCoordinates', { coordinates, dispatcher })
+            } else {
+                commit('setLocationPopupCoordinates', { coordinates: null, dispatcher })
+            }
         },
     },
     mutations: {
         setClickInfo: (state, { clickInfo }) => (state.clickInfo = clickInfo),
         setPinnedLocation: (state, { coordinates }) => (state.pinnedLocation = coordinates),
         setPreviewedPinnedLocation: (state, { coordinates }) =>
             (state.previewedPinnedLocation = coordinates),
-        setDisplayLocationPopup: (state, { display }) => (state.displayLocationPopup = display),
+        setLocationPopupCoordinates: (state, { coordinates }) =>
+            (state.locationPopupCoordinates = coordinates),
     },
 }

src/store/plugins/click-on-map-management.plugin.js

@@ -14,18 +14,17 @@ const clickOnMapManagementPlugin = (store) => {
         if (
             mutation.type === 'setShowDrawingOverlay' &&
             mutation.payload &&
-            state.map.displayLocationPopup
+            state.map.locationPopupCoordinates
         ) {
             // when entering the drawing menu we need to clear the location popup
-            store.dispatch('hideLocationPopup', dispatcher)
+            store.dispatch('clearLocationPopupCoordinates', dispatcher)
         }
         // if a click occurs, we only take it into account (for identify and fullscreen toggle)
         // when the user is not currently drawing something on the map.
         else if (mutation.type === 'setClickInfo' && !state.drawing.drawingOverlay.show) {
             const clickInfo = mutation.payload.clickInfo
             const isLeftSingleClick = clickInfo?.clickType === ClickType.LEFT_SINGLECLICK
             const isContextMenuClick = clickInfo?.clickType === ClickType.CONTEXTMENU
-
             if (isLeftSingleClick) {
                 store
                     .dispatch('identifyFeatureAt', {
@@ -49,10 +48,10 @@ const clickOnMapManagementPlugin = (store) => {
                     })
             }
             if (isContextMenuClick) {
-                store.dispatch('clearAllSelectedFeatures', dispatcher)
-                store.dispatch('displayLocationPopup', dispatcher)
-            } else {
-                store.dispatch('hideLocationPopup', dispatcher)
+                store.dispatch('setLocationPopupCoordinates', {
+                    coordinates: clickInfo.coordinate,
+                    dispatcher,
+                })
             }
         }
     })