New Release v1.27.0 - #minor

src/config.js

@@ -340,3 +340,12 @@ export const DEFAULT_FEATURE_COUNT_SINGLE_POINT = 10
  * @see https://api3.geo.admin.ch/services/sdiservices.html#id10
  */
 export const DEFAULT_FEATURE_COUNT_RECTANGLE_SELECTION = 50
+
+/**
+ * The width under which we no longer use floating tooltips and enforce infoboxes.
+ *
+ * Found empirically, taking the tooltip width of 350px into account
+ *
+ * @type {Number}
+ */
+export const MAX_WIDTH_SHOW_FLOATING_TOOLTIP = 400

src/modules/infobox/InfoboxModule.vue

@@ -4,6 +4,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
+import { MAX_WIDTH_SHOW_FLOATING_TOOLTIP } from '@/config'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
 import FeatureElevationProfile from '@/modules/infobox/components/FeatureElevationProfile.vue'
 import FeatureList from '@/modules/infobox/components/FeatureList.vue'
@@ -23,7 +24,7 @@ const selectedFeatures = computed(() => store.getters.selectedFeatures)
 const showFeatureInfoInBottomPanel = computed(() => store.getters.showFeatureInfoInBottomPanel)
 const showFeatureInfoInTooltip = computed(() => store.getters.showFeatureInfoInTooltip)
 const showDrawingOverlay = computed(() => store.state.drawing.drawingOverlay.show)
-
+const width = computed(() => store.state.ui.width)
 const selectedFeature = computed(() => selectedFeatures.value[0])
 
 const isSelectedFeatureEditable = computed(() => selectedFeature.value?.isEditable)
@@ -41,7 +42,9 @@ const showContainer = computed(() => {
             (showElevationProfile.value && showFeatureInfoInTooltip.value))
     )
 })
-const showTooltipToggle = computed(() => showFeatureInfoInBottomPanel.value)
+const showTooltipToggle = computed(
+    () => showFeatureInfoInBottomPanel.value && width.value >= MAX_WIDTH_SHOW_FLOATING_TOOLTIP
+)
 const title = computed(() => {
     if (!showDrawingOverlay.value && showElevationProfile.value) {
         return `${i18n.t('profile_title')}: ${profileFeature.value.title}`

src/modules/map/components/MapPopover.vue

@@ -241,7 +241,7 @@ function printContent() {
         pointer-events: auto;
     }
     .map-popover-content {
-        max-height: 350px;
+        max-height: min(60vh, 350px);
         overflow-y: auto;
     }
     .card-body {

src/modules/map/components/openlayers/OpenLayersRectangleSelectionFeedback.vue

@@ -38,16 +38,15 @@ const vectorLayer = new VectorLayer({
 watch(selectionPolygon, () => updateLayer())
 
 function updateLayer() {
+    map.removeLayer(vectorLayer)
     vectorLayer.getSource().clear()
     if (selectionPolygon.value) {
         vectorLayer.getSource().addFeature(selectionPolygon.value)
         map.addLayer(vectorLayer)
-    } else {
-        map.removeLayer(vectorLayer)
     }
 }
 </script>
 
 <template>
     <slot />
-</template>
+</template>

src/modules/map/components/openlayers/utils/useMapInteractions.composable.js

@@ -1,5 +1,5 @@
 import GeoJSON from 'ol/format/GeoJSON'
-import { defaults as getDefaultInteractions, DragPan, MouseWheelZoom } from 'ol/interaction'
+import { DragPan, MouseWheelZoom } from 'ol/interaction'
 import DoubleClickZoomInteraction from 'ol/interaction/DoubleClickZoom'
 import { computed, onBeforeUnmount, watch } from 'vue'
 import { useStore } from 'vuex'
@@ -28,17 +28,16 @@ export default function useMapInteractions(map) {
 
     // Make it possible to select by dragging the map with ctrl down
     const { dragBoxSelect } = useDragBoxSelect()
+    map.addInteraction(dragBoxSelect)
 
-    const interactions = getDefaultInteractions().extend([
-        dragBoxSelect,
-        // Add middle mouse button for panning
+    // Add interaction to drag the map using the middle mouse button
+    map.addInteraction(
         new DragPan({
             condition: function (event) {
                 return event.originalEvent.buttons === 4
             },
-        }),
-    ])
-    interactions.forEach((interaction) => map.addInteraction(interaction))
+        })
+    )
 
     watch(isCurrentlyDrawing, (newValue) => {
         // We iterate through the map "interaction" classes, to enable/disable the "double click zoom" interaction

src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js

@@ -14,15 +14,16 @@ export default function usePrintAreaRenderer(map) {
     const POINTS_PER_INCH = 72 // PostScript points 1/72"
     const MM_PER_INCHES = 25.4
     const UNITS_RATIO = 39.37 // inches per meter
-    let printRectangle = []
 
     const isActive = computed(() => store.state.print.printSectionShown)
     const printLayoutSize = computed(() => store.getters.printLayoutSize)
     const selectedScale = computed(() => store.state.print.selectedScale)
     // For simplicity we use the screen size for the map size
     const mapWidth = computed(() => store.state.ui.width)
-    // Same here for simplicity we take the screen size minus the header size for the map size
-    const mapHeight = computed(() => store.state.ui.height - store.state.ui.headerHeight)
+    // Same here for simplicity we take the screen size minus the header size for the map size (map
+    // is under the header). We take the header size twice as the overlay is then centered on the
+    // whole map (not only the part below the header)
+    const mapHeight = computed(() => store.state.ui.height - store.state.ui.headerHeight * 2)
 
     watch(isActive, (newValue) => {
         if (newValue) {
@@ -45,21 +46,20 @@ export default function usePrintAreaRenderer(map) {
                     scale: getOptimalScale(),
                     ...dispatcher,
                 })
-                updatePrintRectanglePixels(selectedScale.value, printLayoutSize.value)
             }),
             watch(selectedScale, () => {
-                updatePrintRectanglePixels(selectedScale.value, printLayoutSize.value)
+                updatePrintOverlay()
             }),
             map.on('change:size', () => {
-                updatePrintRectanglePixels(selectedScale.value, printLayoutSize.value)
+                updatePrintOverlay()
             }),
             map.getView().on('propertychange', () => {
-                updatePrintRectanglePixels(selectedScale.value, printLayoutSize.value)
+                updatePrintOverlay()
             }),
         ]
         const scale = getOptimalScale()
         store.dispatch('setSelectedScale', { scale, ...dispatcher })
-        updatePrintRectanglePixels(scale, printLayoutSize.value)
+        updatePrintOverlay()
     }
 
     function deactivatePrintArea() {
@@ -74,34 +74,32 @@ export default function usePrintAreaRenderer(map) {
         map.render()
     }
 
-    function updatePrintRectanglePixels(scale, size) {
+    function updatePrintOverlay() {
         if (isActive.value) {
-            printRectangle = calculatePageBoundsPixels(scale, size)
             map.render()
         }
     }
 
     function calculatePageBoundsPixels(scale, size) {
-        log.debug(`Calculate page bounds pixels for scale ${scale}`)
+        log.debug(`Calculate page bounds pixels for scale ${scale} size=${JSON.stringify(size)}`)
         const s = parseFloat(scale)
         const view = map.getView()
         const resolution = view.getResolution()
-        const w =
-            (((((size.width / POINTS_PER_INCH) * MM_PER_INCHES) / 1000.0) * s) / resolution) *
-            olHas.DEVICE_PIXEL_RATIO
-        const h =
-            (((((size.height / POINTS_PER_INCH) * MM_PER_INCHES) / 1000.0) * s) / resolution) *
-            olHas.DEVICE_PIXEL_RATIO
+        const w = ((((size.width / POINTS_PER_INCH) * MM_PER_INCHES) / 1000.0) * s) / resolution
+        const h = ((((size.height / POINTS_PER_INCH) * MM_PER_INCHES) / 1000.0) * s) / resolution
         const mapSize = map.getSize()
-        const center = [
-            (mapSize[0] * olHas.DEVICE_PIXEL_RATIO) / 2,
-            (mapSize[1] * olHas.DEVICE_PIXEL_RATIO) / 2,
-        ]
+        const center = [mapSize[0] / 2, mapSize[1] / 2]
 
         const minx = center[0] - w / 2
         const miny = center[1] - h / 2
         const maxx = center[0] + w / 2
         const maxy = center[1] + h / 2
+
+        log.debug(`resolution=${resolution} ratio=${olHas.DEVICE_PIXEL_RATIO} w=${w} h=${h} `)
+        log.debug(`mapSize=${JSON.stringify(mapSize)} center=${JSON.stringify(center)}`)
+        log.debug(
+            `Calculated page bounds pixels for scale ${scale}: [${minx}, ${miny}, ${maxx}, ${maxy}]`
+        )
         return [minx, miny, maxx, maxy]
     }
 
@@ -115,8 +113,10 @@ export default function usePrintAreaRenderer(map) {
         const context = event.context
         const size = map.getSize()
 
-        const height = size[1] * olHas.DEVICE_PIXEL_RATIO
-        const width = size[0] * olHas.DEVICE_PIXEL_RATIO
+        const height = size[1]
+        const width = size[0]
+
+        const printRectangle = calculatePageBoundsPixels(selectedScale.value, printLayoutSize.value)
 
         const minx = printRectangle[0]
         const miny = printRectangle[1]
@@ -170,6 +170,6 @@ export default function usePrintAreaRenderer(map) {
             selectedLayoutScales
         )
         // Find the first scale that is smaller than the testScale in descending order
-        return selectedLayoutScales.find((scale) => scale < testScale) ?? selectedLayoutScales[0]
+        return selectedLayoutScales.find((scale) => scale <= testScale) ?? selectedLayoutScales[0]
     }
 }

src/store/modules/layers.store.js

@@ -242,7 +242,9 @@ const actions = {
                 clone.visible = layer.visible
                 clone.opacity = layer.opacity
                 if (layer.timeConfig) {
-                    clone.timeConfig.currentYear = layer.timeConfig.currentYear
+                    clone.timeConfig.updateCurrentTimeEntry(
+                        clone.timeConfig.getTimeEntryForYear(layer.timeConfig.currentYear)
+                    )
                 }
                 return clone
             } else {

src/store/modules/ui.store.js

@@ -1,6 +1,7 @@
 import {
     BREAKPOINT_TABLET,
     GIVE_FEEDBACK_HOSTNAMES,
+    MAX_WIDTH_SHOW_FLOATING_TOOLTIP,
     NO_WARNING_BANNER_HOSTNAMES,
     REPORT_PROBLEM_HOSTNAMES,
     WARNING_RIBBON_HOSTNAMES,
@@ -257,12 +258,24 @@ export default {
         },
     },
     actions: {
-        setSize({ commit }, { width, height, dispatcher }) {
+        setSize({ commit, state }, { width, height, dispatcher }) {
             commit('setSize', {
                 height,
                 width,
                 dispatcher,
             })
+            // on resize with a very narrow width, the tooltip would overlap with the right side menu
+            // we enforce the features information to be set into an infobox when we want to show them
+            // in this situation
+            if (
+                state.featureInfoPosition !== FeatureInfoPositions.NONE &&
+                width < MAX_WIDTH_SHOW_FLOATING_TOOLTIP
+            ) {
+                commit('setFeatureInfoPosition', {
+                    position: FeatureInfoPositions.BOTTOMPANEL,
+                    dispatcher,
+                })
+            }
         },
         toggleMenu({ commit, state }, { dispatcher }) {
             commit('setShowMenu', { show: !state.showMenu, dispatcher })
@@ -324,19 +337,28 @@ export default {
             commit('setCompareSliderActive', args)
         },
         setFeatureInfoPosition({ commit, state }, { position, dispatcher }) {
-            const upCasePos = position?.toUpperCase()
-            if (!FeatureInfoPositions[upCasePos]) {
+            let featurePosition = FeatureInfoPositions[position?.toUpperCase()]
+            if (!featurePosition) {
                 log.error(
-                    `invalid feature Info Position given as parameter. ${upCasePos} is not a valid key`
+                    `invalid feature Info Position given as parameter. ${position} is not a valid key`
                 )
                 return
             }
-            if (state.featureInfoPosition === FeatureInfoPositions[upCasePos]) {
+            // when the viewport width is too small, the layout of the floating infobox will be
+            // partially under the menu, making it hard to use. In those conditions, the option to
+            // set it as a floating tooltip is disabled.
+            if (
+                featurePosition !== FeatureInfoPositions.NONE &&
+                state.width < MAX_WIDTH_SHOW_FLOATING_TOOLTIP
+            ) {
+                featurePosition = FeatureInfoPositions.BOTTOMPANEL
+            }
+            if (state.featureInfoPosition === featurePosition) {
                 // no need to commit anything if we're trying to switch to the current value
                 return
             }
             commit('setFeatureInfoPosition', {
-                position: FeatureInfoPositions[upCasePos],
+                position: featurePosition,
                 dispatcher: dispatcher,
             })
         },

tests/cypress/tests-e2e/drawing.cy.js

@@ -1161,7 +1161,8 @@ describe('Drawing module tests', () => {
         it('can switch from floating edit popup to back at bottom', () => {
             cy.goToDrawing()
             // to avoid overlaping with the map footer and the floating tooltip, increase the vertical size.
-            cy.viewport(320, 1024)
+            // if the width of the viewport is less than 400px, we can't switch the edit popup position.
+            cy.viewport(400, 1024)
 
             cy.wait('@icon-sets')
             cy.wait('@icon-set-default')

tests/cypress/tests-e2e/featureSelection.cy.js

@@ -74,11 +74,33 @@ describe('Testing the feature selection', () => {
             cy.goToMapView(params)
         }
 
-        it('Adds pre-selected features and place the tooltip according to URL param', () => {
+        it('Adds pre-selected features and place the tooltip according to URL param on a narrow width screen', () => {
             cy.log('When featureInfo is not specified, we should have no tooltip visible')
             goToMapViewWithFeatureSelection()
             checkFeatures()
             checkFeatureInfoPosition(FeatureInfoPositions.NONE)
+            // --------------------------------- WIDTH < 400 pixels ---------------------------------------
+            cy.log(
+                'When using a viewport with width inferior to 400 pixels, we should always go to infobox when featureInfo is not None.'
+            )
+            cy.log('When featureInfo is specified, we should see the infobox')
+            goToMapViewWithFeatureSelection(FeatureInfoPositions.DEFAULT)
+            checkFeatures()
+            checkFeatureInfoPosition(FeatureInfoPositions.BOTTOMPANEL)
+            cy.log('parameter is case insensitive, but we should see an infobox here')
+            goToMapViewWithFeatureSelection('TOoLtIp')
+            checkFeatures()
+            checkFeatureInfoPosition(FeatureInfoPositions.BOTTOMPANEL)
+        })
+        it.skip('Adds pre-selected features and place the tooltip according to URL param on a bigger screen', () => {
+            // currently, this breaks on the CI, but works perfectly fine locally. It sets the featureInfo param
+            // to 'bottomPanel', when it should be set to 'default'.
+            // When we review all e2e tests to include viewport differences, we will re activate this
+            // also, we might want to add it to the test on top to spare the extra 'it'
+            cy.log(
+                'When using a viewport with width superior or equal to 400 pixels, the tooltip should behave normally'
+            )
+            cy.viewport(400, 800)
             cy.log(
                 'When featureInfo is specified, as the viewport is mobile-sized, we should see the infobox'
             )
@@ -109,7 +131,11 @@ describe('Testing the feature selection', () => {
             cy.wait(`@featureDetail_${expectedFeatureIds[0]}`)
 
             cy.url().should((url) => {
-                expect(new URLSearchParams(url.split('map')[1]).get('featureInfo')).to.eq('default')
+                // the viewport is smaller than 400 px, 'bottompanel' is the only possible option for
+                // featureInfo value.
+                expect(new URLSearchParams(url.split('map')[1]).get('featureInfo')).to.eq(
+                    'bottomPanel'
+                )
             })
             cy.url().should((url) => {
                 new URLSearchParams(url.split('map')[1])

tests/cypress/tests-e2e/infobox.cy.js

@@ -18,6 +18,9 @@ describe('The infobox', () => {
             cy.get('[data-cy="highlighted-features"]').should('be.visible')
         })
         it('can float or stick to the bottom', () => {
+            // the option to have a floating tooltip require the width of the viewport to be
+            // at least 400 pixels.
+            cy.viewport(400, 800)
             cy.get(mapSelector).click()
             cy.waitUntilState((_, getters) => {
                 return getters.selectedFeatures.length > 0

tests/cypress/tests-e2e/layers.cy.js

@@ -879,6 +879,18 @@ describe('Test of layer handling', () => {
                     expect(layer.timeConfig.currentTimestamp).to.eq(timestamp)
                 })
 
+                //---------------------------------------------------------------------------------
+                cy.log('keep timestamp configuration when the language changes')
+                cy.get('[data-cy="menu-settings-section"]').should('be.visible').click()
+                cy.get('[data-cy="menu-lang-en"]').should('have.class', 'btn-primary')
+                cy.get('[data-cy="menu-lang-fr"]').should('be.visible').click()
+                cy.get('[data-cy="menu-lang-fr"]').should('have.class', 'btn-primary')
+                cy.get('[data-cy="menu-active-layers"]').should('be.visible').click()
+                cy.get('[data-cy="time-selector-test.timeenabled.wmts.layer-2"]').contains('2016')
+                cy.get('[data-cy="menu-settings-section"]').should('be.visible').click()
+                cy.get('[data-cy="menu-lang-en"]').should('be.visible').click()
+                cy.get('[data-cy="menu-active-layers"]').should('be.visible').click()
+
                 //---------------------------------------------------------------------------------
                 cy.log(`duplicate time layer`)
                 cy.get(`[data-cy^="button-open-visible-layer-settings-${timedLayerId}-2"]`)