Merge pull request #872 from geoadmin/bug_PB-543_fix_cesium_css_spill…

…over PB-543 : fix Cesium CSS spillover
geoadmin · May 31, 2024 · 5d921d2 · 5d921d2
2 parents d98c795 + f8c7f07
commit 5d921d2
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 68 deletions.
diff --git a/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue b/src/modules/map/components/cesium/CesiumGeoJSONLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>

diff --git a/src/modules/map/components/cesium/CesiumInternalLayer.vue b/src/modules/map/components/cesium/CesiumInternalLayer.vue
@@ -1,70 +1,58 @@
 <template>
-    <div>
-        <CesiumVectorLayer
-            v-if="layerConfig.type === LayerTypes.VECTOR"
-            :layer-config="layerConfig"
-        />
-        <CesiumWMTSLayer
-            v-if="layerConfig.type === LayerTypes.WMTS"
-            :wmts-layer-config="layerConfig"
-            :preview-year="previewYear"
-            :projection="projection"
-            :parent-layer-opacity="parentLayerOpacity"
-            :z-index="zIndex"
-            :is-time-slider-active="isTimeSliderActive"
-        />
+    <CesiumVectorLayer v-if="layerConfig.type === LayerTypes.VECTOR" :layer-config="layerConfig" />
+    <CesiumWMTSLayer
+        v-if="layerConfig.type === LayerTypes.WMTS"
+        :wmts-layer-config="layerConfig"
+        :preview-year="previewYear"
+        :projection="projection"
+        :parent-layer-opacity="parentLayerOpacity"
+        :z-index="zIndex"
+        :is-time-slider-active="isTimeSliderActive"
+    />
+    <CesiumWMSLayer
+        v-if="layerConfig.type === LayerTypes.WMS"
+        :wms-layer-config="layerConfig"
+        :preview-year="previewYear"
+        :projection="projection"
+        :z-index="zIndex"
+        :is-time-slider-active="isTimeSliderActive"
+    />
+    <div v-if="layerConfig.type === LayerTypes.GROUP">
         <CesiumWMSLayer
-            v-if="layerConfig.type === LayerTypes.WMS"
-            :wms-layer-config="layerConfig"
+            v-for="(layer, index) in layerConfig.layers"
+            :key="`${layer.id}-${index}`"
+            :wms-layer-config="layer"
             :preview-year="previewYear"
             :projection="projection"
             :parent-layer-opacity="parentLayerOpacity"
-            :z-index="zIndex"
+            :z-index="zIndex + index"
             :is-time-slider-active="isTimeSliderActive"
         />
-        <div v-if="layerConfig.type === LayerTypes.GROUP">
-            <CesiumWMSLayer
-                v-for="(layer, index) in layerConfig.layers"
-                :key="`${layer.id}-${index}`"
-                :wms-layer-config="layer"
+    </div>
+    <div v-if="layerConfig.type === LayerTypes.AGGREGATE">
+        <!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
+        <div v-for="aggregateSubLayer in layerConfig.subLayers" :key="aggregateSubLayer.subLayerId">
+            <CesiumInternalLayer
+                v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
+                :layer-config="aggregateSubLayer.layer"
+                :parent-layer-opacity="layerConfig.opacity"
                 :preview-year="previewYear"
                 :projection="projection"
-                :parent-layer-opacity="layerConfig.opacity"
-                :z-index="zIndex + index"
                 :is-time-slider-active="isTimeSliderActive"
+                :z-index="zIndex"
             />
         </div>
-        <div v-if="layerConfig.type === LayerTypes.AGGREGATE">
-            <!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
-            <div
-                v-for="aggregateSubLayer in layerConfig.subLayers"
-                :key="aggregateSubLayer.subLayerId"
-            >
-                <CesiumInternalLayer
-                    v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
-                    :layer-config="aggregateSubLayer.layer"
-                    :parent-layer-opacity="layerConfig.opacity"
-                    :preview-year="previewYear"
-                    :projection="projection"
-                    :is-time-slider-active="isTimeSliderActive"
-                    :z-index="zIndex"
-                />
-            </div>
-        </div>
-        <CesiumGeoJSONLayer
-            v-if="layerConfig.type === LayerTypes.GEOJSON"
-            :layer-id="layerConfig.id"
-            :opacity="layerConfig.opacity"
-            :geojson-url="layerConfig.geoJsonUrl"
-            :style-url="layerConfig.styleUrl"
-            :projection="projection"
-        />
-        <CesiumKMLLayer
-            v-if="layerConfig.type === LayerTypes.KML"
-            :kml-layer-config="layerConfig"
-        />
-        <slot />
     </div>
+    <CesiumGeoJSONLayer
+        v-if="layerConfig.type === LayerTypes.GEOJSON"
+        :layer-id="layerConfig.id"
+        :opacity="layerConfig.opacity"
+        :geojson-url="layerConfig.geoJsonUrl"
+        :style-url="layerConfig.styleUrl"
+        :projection="projection"
+    />
+    <CesiumKMLLayer v-if="layerConfig.type === LayerTypes.KML" :kml-layer-config="layerConfig" />
+    <slot />
 </template>
 
 <script>

diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
@@ -3,7 +3,7 @@
         v-if="isProjectionWebMercator"
         id="cesium"
         ref="viewer"
-        class="cesium-widget"
+        class="cesium-map"
         data-cy="cesium-map"
         @touchstart.passive="onTouchStart"
         @touchmove.passive="clearLongPressTimer"
@@ -78,7 +78,6 @@
     </div>
 </template>
 <script>
-import 'cesium/Build/Cesium/Widgets/widgets.css'
 import '@geoblocks/cesium-compass'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -634,16 +633,47 @@ export default {
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 @import '@/modules/map/scss/toolbox-buttons';
+@import '@/scss/media-query.mixin';
+
+.cesium-map,
+.cesium-widget,
+:global(.cesium-viewer),
+:global(.cesium-viewer-cesiumWidgetContainer),
+:global(.cesium-widget),
+:global(.cesium-widget canvas) {
+    overflow: hidden;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
 // rule can't be scoped otherwise styles will be not applied
 :global(.cesium-viewer .cesium-widget-credits) {
     display: none !important;
 }
 :global(.cesium-performanceDisplay-defaultContainer) {
-    left: $screen-padding-for-ui-elements;
+    position: absolute;
+    right: $screen-padding-for-ui-elements;
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     top: unset;
-    right: unset;
+    left: unset;
+    border: $border-width solid $danger-border-subtle;
+    border-radius: $border-radius;
+    background-color: $danger-bg-subtle;
+    padding: 0.5rem;
+}
+
+@include respond-above(phone) {
+    :global(.cesium-performanceDisplay-defaultContainer) {
+        // Background wheel is on the opposite side of the screen past the phone threshold,
+        // so we move the debug box to the other side too (so that it is not covered/covering the
+        // BG wheel button)
+        left: $screen-padding-for-ui-elements;
+        right: unset;
+    }
 }
 
 .cesium-compass {

diff --git a/src/modules/map/components/cesium/CesiumWMSLayer.vue b/src/modules/map/components/cesium/CesiumWMSLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>

diff --git a/src/modules/map/components/cesium/CesiumWMTSLayer.vue b/src/modules/map/components/cesium/CesiumWMTSLayer.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <slot />
-    </div>
+    <slot />
 </template>
 
 <script>

diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -13,7 +13,8 @@ const resolution = computed(() => store.getters.resolution)
 
 useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
-const getViewer = inject('getViewer')
+// telling vue that getViewer is a factory method (avoid unnecessary computation or side effects)
+const getViewer = inject('getViewer', () => {}, true)
 
 // The `step` variable is used with the 3D viewer. The goal was to find an increase or
 // decrease in the zoom that emulated a zoom level in an agreeable way. `200` here is a

diff --git a/tests/cypress/tests-e2e/legacyParamImport.cy.js b/tests/cypress/tests-e2e/legacyParamImport.cy.js
@@ -249,6 +249,7 @@ describe('Test on legacy param import', () => {
             )
             cy.readStoreValue('state.search.query').should('eq', '1530 Payerne')
             cy.url().should('include', 'swisssearch=1530+Payerne')
+            cy.get('[data-cy="searchbar"]').click()
             cy.get('[data-cy="search-results-locations"]').should('be.visible')
         })
         it('External WMS layer', () => {