PB-1121: using pre compose event to handle COG slider

Issue : When importing or toggling visibility on WebGL layers, the layerconfig was updated before the map, and the new layer would not have the prerender and postrender events set.

Fix : OpenLayers Map fire precompose events when webGL layers are involved. This allows us to add a precompose event on the map to add the prerender events just before the first rendering is supposed to happen.

src/modules/map/components/CompareSlider.vue

@@ -17,9 +17,6 @@ const compareRatio = ref(-0.5)
 const store = useStore()
 const storeCompareRatio = computed(() => store.state.ui.compareRatio)
 const clientWidth = computed(() => store.state.ui.width)
-const shouldUpdateCompareSlider = computed(
-    () => store.state.ui.isCompareSliderInNeedOfAForcedUpdate
-)
 const compareSliderPosition = computed(() => {
     return {
         left: compareRatio.value * 100 + '%',
@@ -37,20 +34,22 @@ watch(storeCompareRatio, (newValue) => {
 
 watch(visibleLayerOnTop, (newLayerOnTop, oldLayerOnTop) => {
     unRegisterRenderingEvents(oldLayerOnTop.id)
-    registerRenderingEvents(newLayerOnTop.id)
-    olMap.render()
-})
 
-watch(shouldUpdateCompareSlider, (newValue) => {
-    // when importing COGTiffs, we update the layerconfig before the map,
-    // which means the 'visible layer on top' watcher tries to register the
-    // rendering events too soon. This watcher waits for a signal sent by the
-    // finally in the import file function to register the pre rendering again.
-    if (newValue) {
-        store.dispatch('forceCompareSliderUpdate', { shouldUpdate: false, ...dispatcher })
-        registerRenderingEvents(visibleLayerOnTop.value.id)
-        olMap.render()
+    if (getLayerFromMapById(newLayerOnTop.id)) {
+        registerRenderingEvents(newLayerOnTop.id)
+    } else {
+        // The layer config is always modified before the map, which means the
+        // visible layer on top according to the config could not exist within
+        // the map. This is problematic with COG layers due to the webGL context
+
+        // to mitigate the issue, we use the precompose event (which is fired when
+        // the olMap changes due to a webGL layer being added or removed) to still add the
+        // rendering events to the top layer.
+        olMap?.once('precompose', () => {
+            registerRenderingEvents(newLayerOnTop.id)
+        })
     }
+    olMap.render()
 })
 
 onMounted(() => {

src/modules/menu/components/advancedTools/ImportFile/useImportFile.composable.js

@@ -52,11 +52,6 @@ export default function useImportFile() {
                 requester: source.name ?? source,
                 ...dispatcher,
             })
-            // When importing file, the compare slider sometimes doesn't update
-            // correctly, as it checks for the changes in the layers config before
-            // the map is registered in the openlayers Map itself. So we need to send a flag to tell
-            // the compare slider to update itself.
-            store.dispatch('forceCompareSliderUpdate', { shouldUpdate: true, ...dispatcher })
         }
     }
 

src/store/modules/ui.store.js

@@ -139,14 +139,8 @@ export default {
          *
          * @type Boolean
          */
+
         isCompareSliderActive: false,
-        /**
-         * Flag telling if we need to enforce a compare slider update, as sometimes the order in
-         * which some events occur won't let the compare slider update correctly
-         *
-         * @type Boolean
-         */
-        isCompareSliderInNeedOfAForcedUpdate: false,
         /**
          * Flag telling if the time slider is currently active or not
          *
@@ -366,11 +360,6 @@ export default {
         setCompareSliderActive({ commit }, args) {
             commit('setCompareSliderActive', args)
         },
-        forceCompareSliderUpdate({ commit, state }, args) {
-            commit('forceCompareSliderUpdate', {
-                shouldUpdate: state.isCompareSliderActive && args?.shouldUpdate,
-            })
-        },
         setFeatureInfoPosition({ commit, state }, { position, dispatcher }) {
             let featurePosition = FeatureInfoPositions[position?.toUpperCase()]
             if (!featurePosition) {
@@ -514,9 +503,6 @@ export default {
         setCompareSliderActive(state, { compareSliderActive }) {
             state.isCompareSliderActive = compareSliderActive
         },
-        forceCompareSliderUpdate(state, { shouldUpdate }) {
-            state.isCompareSliderInNeedOfAForcedUpdate = !!shouldUpdate
-        },
         setTimeSliderActive(state, { timeSliderActive }) {
             state.isTimeSliderActive = timeSliderActive
         },