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.
geoadmin · Aug 22, 2023 · 5077582 · 5077582
1 parent ad9a9bb
commit 5077582
Showing 1 changed file with 9 additions and 13 deletions.
diff --git a/src/modules/infobox/InfoboxModule.vue b/src/modules/infobox/InfoboxModule.vue
@@ -70,6 +70,7 @@
 
 <script>
 import { EditableFeatureTypes } from '@/api/features.api'
+import { calculateHeight } from '@/modules/map/components/cesium/utils/cameraUtils'
 import promptUserToPrintHtmlContent from '@/utils/print'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapActions, mapState } from 'vuex'
@@ -100,7 +101,6 @@ export default {
             floatingTooltip: (state) => state.ui.floatingTooltip,
             showDrawingOverlay: (state) => state.ui.showDrawingOverlay,
         }),
-
         selectedFeature() {
             return this.selectedFeatures[0]
         },
@@ -123,7 +123,6 @@ export default {
                 this.isEdit && this.selectedFeature.featureType === EditableFeatureTypes.LINEPOLYGON
             )
         },
-
         showContainer() {
             return this.isList || this.isEdit || this.showElevationProfile || this.isCombo
         },
@@ -136,11 +135,6 @@ export default {
         },
     },
     watch: {
-        showContainer(visible) {
-            if (visible) {
-                this.$nextTick(this.setMaxHeight)
-            }
-        },
         selectedFeatures(features) {
             if (features.length === 0) {
                 return
@@ -159,17 +153,21 @@ export default {
         // We can enable the teleport after the view has been rendered.
         this.$nextTick(() => {
             this.readyForTeleport = true
-            this.setMaxHeight()
+            this.computeHeightNextTick()
         })
     },
     methods: {
+        calculateHeight,
         ...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 +179,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)