From ad9a9bb4059ea4bfd402a2017cf43c2f994af8cb Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Mon, 21 Aug 2023 17:35:40 +0200
Subject: [PATCH 1/2] BGDIINF_SB-3060 : persistence of selected feature when
 going 3D

and also when going from 3D to 2D, the selected features stay selected, and the popup now shows directly at OL or Cesium startup
---
 src/modules/map/components/MapPopover.vue     | 10 +--
 .../map/components/cesium/CesiumMap.vue       | 82 ++++++++++---------
 .../map/components/cesium/CesiumPopover.vue   |  3 +
 .../components/openlayers/OpenLayersMap.vue   | 19 +++--
 tests/e2e-cypress/integration/infobox.cy.js   | 26 ++++++
 tests/e2e-cypress/support/commands.js         |  6 +-
 6 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/src/modules/map/components/MapPopover.vue b/src/modules/map/components/MapPopover.vue
index 4157c96a3..122e7d14a 100644
--- a/src/modules/map/components/MapPopover.vue
+++ b/src/modules/map/components/MapPopover.vue
@@ -36,16 +36,16 @@
                 <slot />
             </div>
         </div>
+        <OpenLayersPopover v-if="!is3DActive" :coordinates="coordinates"></OpenLayersPopover>
+        <CesiumPopover v-if="is3DActive" :coordinates="coordinates"></CesiumPopover>
     </div>
-    <OpenLayersPopover v-if="!is3DActive" :coordinates="coordinates"></OpenLayersPopover>
-    <CesiumPopover v-if="is3DActive" :coordinates="coordinates"></CesiumPopover>
 </template>
 
 <script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import promptUserToPrintHtmlContent from '@/utils/print'
-import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
+import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
+import promptUserToPrintHtmlContent from '@/utils/print'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapState } from 'vuex'
 
 /** Map popover content and styles. Position handling is done in corresponding library components */
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 530408047..7891476fe 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -25,7 +25,7 @@
             />
         </div>
         <MapPopover
-            v-if="showFeaturesPopover"
+            v-if="viewerCreated && showFeaturesPopover"
             :coordinates="popoverCoordinates"
             authorize-print
             :use-content-padding="!!editFeature"
@@ -170,41 +170,7 @@ export default {
             // coordinates are changed (but only when one feature is added/removed)
             handler(newSelectedFeatures) {
                 if (newSelectedFeatures.length > 0) {
-                    const [firstFeature] = newSelectedFeatures
-                    const geometries = newSelectedFeatures.map((f) => {
-                        // GeoJSON and KML layers have different geometry structure
-                        if (!f.geometry.type) {
-                            let type = undefined
-                            if (f.geometry instanceof Polygon) {
-                                type = 'Polygon'
-                            } else if (f.geometry instanceof LineString) {
-                                type = 'LineString'
-                            } else if (f.geometry instanceof Point) {
-                                type = 'Point'
-                            }
-                            const coordinates = f.geometry.getCoordinates()
-                            const getCoordinates = (c) =>
-                                isInBounds(c[0], c[1], LV95_BOUNDS)
-                                    ? proj4(LV95.epsg, WEBMERCATOR.epsg, c)
-                                    : c
-                            return {
-                                type,
-                                coordinates:
-                                    typeof coordinates[0] === 'number'
-                                        ? getCoordinates(coordinates)
-                                        : coordinates.map(getCoordinates),
-                            }
-                        }
-                        return f.geometry
-                    })
-                    highlightGroup(this.viewer, geometries)
-                    const featureCoords = Array.isArray(firstFeature.coordinates[0])
-                        ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
-                        : firstFeature.coordinates
-                    this.popoverCoordinates = reprojectUnknownSrsCoordsToWebMercator(
-                        featureCoords[0],
-                        featureCoords[1]
-                    )
+                    this.highlightSelectedFeatures()
                 }
             },
             deep: true,
@@ -294,15 +260,16 @@ export default {
 
         this.flyToPosition()
 
+        if (this.selectedFeatures.length > 0) {
+            this.highlightSelectedFeatures()
+        }
+
         if (IS_TESTING_WITH_CYPRESS) {
             window.cesiumViewer = this.viewer
             // reduce screen space error to downgrade visual quality but speed up tests
             globe.maximumScreenSpaceError = 30
         }
     },
-    beforeUnmount() {
-        this.clearAllSelectedFeatures()
-    },
     unmounted() {
         this.setCameraPosition(null)
         this.viewer.destroy()
@@ -315,6 +282,43 @@ export default {
             'click',
             'toggleFloatingTooltip',
         ]),
+        highlightSelectedFeatures() {
+            const [firstFeature] = this.selectedFeatures
+            const geometries = this.selectedFeatures.map((f) => {
+                // GeoJSON and KML layers have different geometry structure
+                if (!f.geometry.type) {
+                    let type = undefined
+                    if (f.geometry instanceof Polygon) {
+                        type = 'Polygon'
+                    } else if (f.geometry instanceof LineString) {
+                        type = 'LineString'
+                    } else if (f.geometry instanceof Point) {
+                        type = 'Point'
+                    }
+                    const coordinates = f.geometry.getCoordinates()
+                    const getCoordinates = (c) =>
+                        isInBounds(c[0], c[1], LV95_BOUNDS)
+                            ? proj4(LV95.epsg, WEBMERCATOR.epsg, c)
+                            : c
+                    return {
+                        type,
+                        coordinates:
+                            typeof coordinates[0] === 'number'
+                                ? getCoordinates(coordinates)
+                                : coordinates.map(getCoordinates),
+                    }
+                }
+                return f.geometry
+            })
+            highlightGroup(this.viewer, geometries)
+            const featureCoords = Array.isArray(firstFeature.coordinates[0])
+                ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
+                : firstFeature.coordinates
+            this.popoverCoordinates = reprojectUnknownSrsCoordsToWebMercator(
+                featureCoords[0],
+                featureCoords[1]
+            )
+        },
         flyToPosition() {
             const x = this.camera ? this.camera.x : this.centerEpsg4326[0]
             const y = this.camera ? this.camera.y : this.centerEpsg4326[1]
diff --git a/src/modules/map/components/cesium/CesiumPopover.vue b/src/modules/map/components/cesium/CesiumPopover.vue
index 6eb100e88..a5bed328f 100644
--- a/src/modules/map/components/cesium/CesiumPopover.vue
+++ b/src/modules/map/components/cesium/CesiumPopover.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import log from '@/utils/logging'
 import { Cartesian3, Cartographic, defined, Ellipsoid, SceneTransforms } from 'cesium'
 
 // Cesium will create an instance of Cartesian3 or Cartographic each time a calculation is made if
@@ -54,6 +55,8 @@ export default {
             // there will be a gap between the tooltip and the selected feature
             this.updateCoordinateHeight()
             this.updatePosition()
+        } else {
+            log.error('Cesium viewer unavailable, could not hook up popover to Cesium')
         }
     },
     unmounted() {
diff --git a/src/modules/map/components/openlayers/OpenLayersMap.vue b/src/modules/map/components/openlayers/OpenLayersMap.vue
index c287545d6..2127bba9a 100644
--- a/src/modules/map/components/openlayers/OpenLayersMap.vue
+++ b/src/modules/map/components/openlayers/OpenLayersMap.vue
@@ -118,9 +118,11 @@ import {
 import { extractOlFeatureGeodesicCoordinates } from '@/modules/drawing/lib/drawingUtils'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
 import FeatureList from '@/modules/infobox/components/FeatureList.vue'
+import MapPopover from '@/modules/map/components/MapPopover.vue'
 import OpenLayersVectorLayer from '@/modules/map/components/openlayers/OpenLayersVectorLayer.vue'
 import { ClickInfo, ClickType } from '@/store/modules/map.store'
 import { CrossHairs } from '@/store/modules/position.store'
+import { createGeoJSONFeature } from '@/utils/layerUtils'
 import log from '@/utils/logging'
 import { round } from '@/utils/numberUtils'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -139,8 +141,6 @@ import OpenLayersAccuracyCircle from './OpenLayersAccuracyCircle.vue'
 import OpenLayersHighlightedFeature from './OpenLayersHighlightedFeature.vue'
 import OpenLayersInternalLayer from './OpenLayersInternalLayer.vue'
 import OpenLayersMarker, { markerStyles } from './OpenLayersMarker.vue'
-import { createGeoJSONFeature } from '@/utils/layerUtils'
-import MapPopover from '@/modules/map/components/MapPopover.vue'
 
 /**
  * Main OpenLayers map component responsible for building the OL map instance and telling the view
@@ -325,10 +325,7 @@ export default {
             // coordinates are changed (but only when one feature is added/removed)
             handler(newSelectedFeatures) {
                 if (newSelectedFeatures.length > 0) {
-                    const [firstFeature] = newSelectedFeatures
-                    this.popoverCoordinates = Array.isArray(firstFeature.coordinates[0])
-                        ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
-                        : firstFeature.coordinates
+                    this.highlightSelectedFeatures()
                 }
             },
             deep: true,
@@ -379,6 +376,10 @@ export default {
         this.map.on('singleclick', this.onMapSingleClick)
         this.map.on('pointerdrag', this.onMapPointerDrag)
         this.map.on('moveend', this.onMapMoveEnd)
+
+        if (this.selectedFeatures.length > 0) {
+            this.highlightSelectedFeatures()
+        }
     },
     unmounted() {
         this.map.un('pointerdown', this.onMapPointerDown)
@@ -403,6 +404,12 @@ export default {
             'toggleFloatingTooltip',
             'clearAllSelectedFeatures',
         ]),
+        highlightSelectedFeatures() {
+            const [firstFeature] = this.selectedFeatures
+            this.popoverCoordinates = Array.isArray(firstFeature.coordinates[0])
+                ? firstFeature.coordinates[firstFeature.coordinates.length - 1]
+                : firstFeature.coordinates
+        },
         // Pointer down and up are triggered by both left and right clicks.
         onMapPointerDown() {
             /* Flag that inhibits multiple actions for the same mouse down event. So if on mobile,
diff --git a/tests/e2e-cypress/integration/infobox.cy.js b/tests/e2e-cypress/integration/infobox.cy.js
index 09a764fbe..83f6b74aa 100644
--- a/tests/e2e-cypress/integration/infobox.cy.js
+++ b/tests/e2e-cypress/integration/infobox.cy.js
@@ -112,4 +112,30 @@ describe('The infobox', () => {
         })
         generateInfoboxTestsForMapSelector('[data-cy="cesium-map"]', true)
     })
+    context('transition from 2D to 3D (and back to 2D)', () => {
+        beforeEach(() => {
+            cy.goToMapView({ layers: layer })
+
+            cy.get('[data-cy="ol-map"]').click()
+            cy.waitUntilState((state) => {
+                return state.features.selectedFeatures.length > 0
+            })
+            cy.get('[data-cy="highlighted-features"]').should('be.visible')
+        })
+        it('keeps the selected features when going 3D', () => {
+            cy.get('[data-cy="3d-button"]').click()
+            // waiting for 3D to be loaded
+            cy.readWindowValue('cesiumViewer').then(() => {
+                cy.get('[data-cy="highlighted-features"]').should('be.visible')
+            })
+        })
+        it('keeps the selected features when going back to 2D', () => {
+            cy.get('[data-cy="3d-button"]').click()
+            cy.readWindowValue('cesiumViewer').then(() => {
+                cy.get('[data-cy="3d-button"]').click()
+                cy.wait('@jpeg-tiles')
+                cy.get('[data-cy="highlighted-features"]').should('be.visible')
+            })
+        })
+    })
 })
diff --git a/tests/e2e-cypress/support/commands.js b/tests/e2e-cypress/support/commands.js
index 079ef7d22..39d9f5596 100644
--- a/tests/e2e-cypress/support/commands.js
+++ b/tests/e2e-cypress/support/commands.js
@@ -1,8 +1,8 @@
 import { BREAKPOINT_TABLET } from '@/config'
+import { randomIntBetween } from '@/utils/numberUtils'
 import 'cypress-real-events'
 import 'cypress-wait-until'
 import { MapBrowserEvent } from 'ol'
-import { randomIntBetween } from '@/utils/numberUtils'
 
 // ***********************************************
 // For more comprehensive examples of custom
@@ -14,10 +14,10 @@ const addLayerTileFixture = () => {
     // catching WMTS type URLs
     cy.intercept(`**/3857/**/**/**/**.jpeg`, {
         fixture: '256.jpeg',
-    })
+    }).as('jpeg-tiles')
     cy.intercept(`**/3857/**/**/**/**.png`, {
         fixture: '256.png',
-    })
+    }).as('png-tiles')
 }
 
 const addLayerFixtureAndIntercept = () => {

From c54e7411d0de3921cc5978778ad2c2c53449a494 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Wed, 23 Aug 2023 08:06:33 +0200
Subject: [PATCH 2/2] BGDIINF_SB-3060 : fix infobox content not showing up when
 going 3D

when the feature details is in the footer, the content height wasn't recalculated on mapping framework switches, rendering the content with a height of zero.
---
 src/modules/infobox/InfoboxModule.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/modules/infobox/InfoboxModule.vue b/src/modules/infobox/InfoboxModule.vue
index 6024cec42..7f052b948 100644
--- a/src/modules/infobox/InfoboxModule.vue
+++ b/src/modules/infobox/InfoboxModule.vue
@@ -100,7 +100,6 @@ export default {
             floatingTooltip: (state) => state.ui.floatingTooltip,
             showDrawingOverlay: (state) => state.ui.showDrawingOverlay,
         }),
-
         selectedFeature() {
             return this.selectedFeatures[0]
         },
@@ -123,7 +122,6 @@ export default {
                 this.isEdit && this.selectedFeature.featureType === EditableFeatureTypes.LINEPOLYGON
             )
         },
-
         showContainer() {
             return this.isList || this.isEdit || this.showElevationProfile || this.isCombo
         },
@@ -138,7 +136,7 @@ export default {
     watch: {
         showContainer(visible) {
             if (visible) {
-                this.$nextTick(this.setMaxHeight)
+                this.computeHeightNextTick()
             }
         },
         selectedFeatures(features) {
@@ -159,17 +157,20 @@ export default {
         // We can enable the teleport after the view has been rendered.
         this.$nextTick(() => {
             this.readyForTeleport = true
-            this.setMaxHeight()
+            this.computeHeightNextTick()
         })
     },
     methods: {
         ...mapActions(['clearAllSelectedFeatures', 'toggleFloatingTooltip']),
-
+        computeHeightNextTick() {
+            this.$nextTick(() => {
+                this.setMaxHeight()
+            })
+        },
         onToggleContent() {
             this.showContent = !this.showContent
-
             if (this.showContent) {
-                this.$nextTick(this.setMaxHeight)
+                this.computeHeightNextTick()
             }
         },
         onToggleFloating() {
@@ -181,12 +182,10 @@ export default {
         onClose() {
             this.clearAllSelectedFeatures()
         },
-
         setMaxHeight() {
             if (!this.showContainer || !this.$refs.content) {
                 return
             }
-
             const container = this.$refs.content
             const { paddingTop, paddingBottom } = getComputedStyle(container)
             const verticalPadding = parseInt(paddingTop) + parseInt(paddingBottom)