Merge pull request #440 from geoadmin/feat_BGDIINF_SB-3060_persist_se…

…lected_feature_when_going_3D

BGDIINF_SB-3060 : persistence of selected feature when going 3D

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)

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 */

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]

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() {

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,

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')
+            })
+        })
+    })
 })

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 = () => {