Merge pull request #5652 from rldhont/fix-regression-popup-geometry

Fix UI regression: Clear popup geometry

Author: rldhont

assets/src/legacy/map.js

@@ -840,6 +840,9 @@ window.lizMap = function() {
      * @param {Array} coordinate - coordinate in map unit
      */
     function displayGetFeatureInfo(text, xy, coordinate){
+        // clear highlight layer
+        lizMap.mainLizmap.map.clearHighlightFeatures();
+
         var eventLonLatInfo = map.getLonLatFromPixel(xy);
 
         var popup = null;
@@ -1492,28 +1495,29 @@ window.lizMap = function() {
         }
 
         // Create the dock if needed
-        if( 'popupLocation' in config.options &&
-            config.options.popupLocation != 'map' ) {
+        if( 'popupLocation' in config.options && config.options.popupLocation != 'map' ){
+            var popupContainerId = 'popupcontent';
             if ( !$('#mapmenu .nav-list > li.popupcontent > a').length ) {
                 // Verifying the message
                 if ( !('popup.msg.start' in lizDict) )
                     lizDict['popup.msg.start'] = 'Click to the map to get informations.';
                 // Initialize dock
-                var popupContainerId = 'popupcontent';
                 var pcontent = '<div class="lizmapPopupContent"><h4>'+lizDict['popup.msg.start']+'</h4></div>';
                 addDock(popupContainerId, 'Popup', config.options.popupLocation, pcontent, 'icon-comment');
-                $('#button-popupcontent').click(function(){
-                    if($(this).parent().hasClass('active')) {
-                        // clear highlight layer
-                        lizMap.mainLizmap.map.clearHighlightFeatures();
-                        // remove information
-                        $('#popupcontent > div.menu-content').html('<div class="lizmapPopupContent"><h4>'+lizDict['popup.msg.start']+'</h4></div>');
-                    }
-                });
             } else {
                 $('#mapmenu .nav-list > li.popupcontent > a > span.icon').append('<i class="icon-comment icon-white" style="margin-left: 4px;"></i>');
                 $('#mapmenu .nav-list > li.popupcontent > a > span.icon').css('background-image', 'none');
             }
+
+            $('#button-popupcontent').click(function(){
+                if ($(this).parent().hasClass('active')) {
+                    // clear highlight layer but keep information
+                    lizMap.mainLizmap.map.clearHighlightFeatures();
+                } else {
+                    // Display geometry associated with popups
+                    addGeometryFeatureInfo(null, popupContainerId);
+                }
+            });
         }
 
         /**

tests/end2end/playwright/popup.spec.js

@@ -430,6 +430,82 @@ test.describe('Popup',
         });
     });
 
+test.describe('Popup Geometry',
+    {
+        tag: ['@readonly'],
+    },() => {
+
+        test('Show/hide the geometry on open/close dock', async ({ page }) => {
+            const project = new ProjectPage(page, 'feature_toolbar');
+            await project.open();
+
+            // Get default buffer with one point
+            let buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            const defaultByteLength = buffer.byteLength;
+            await expect(defaultByteLength).toBeGreaterThan(900); // 906
+            await expect(defaultByteLength).toBeLessThan(1000) // 906
+
+            // Click on a point
+            let getFeatureInfoPromise = project.waitForGetFeatureInfoRequest();
+            await project.clickOnMap(436, 290);
+            let getFeatureInfoRequest = await getFeatureInfoPromise;
+            await getFeatureInfoRequest.response();
+
+            // The geometry is displayed
+            buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            await expect(buffer.byteLength).not.toBe(defaultByteLength);
+            await expect(buffer.byteLength).toBeGreaterThan(defaultByteLength);
+
+            // Close popup
+            page.locator('#button-popupcontent').click();
+            await page.waitForTimeout(50);
+
+            buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            await expect(buffer.byteLength).toBe(defaultByteLength);
+
+            // Open popup
+            page.locator('#button-popupcontent').click();
+            await page.waitForTimeout(50);
+
+            buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            await expect(buffer.byteLength).not.toBe(defaultByteLength);
+            await expect(buffer.byteLength).toBeGreaterThan(defaultByteLength);
+        });
+
+        test('Show/hide the geometry on click on the map', async ({ page }) => {
+            const project = new ProjectPage(page, 'feature_toolbar');
+            await project.open();
+
+            // Get default buffer with one point
+            let buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            const defaultByteLength = buffer.byteLength;
+            await expect(defaultByteLength).toBeGreaterThan(900); // 906
+            await expect(defaultByteLength).toBeLessThan(1000) // 906
+
+            // Click on a point
+            let getFeatureInfoPromise = project.waitForGetFeatureInfoRequest();
+            await project.clickOnMap(436, 290);
+            let getFeatureInfoRequest = await getFeatureInfoPromise;
+            await getFeatureInfoRequest.response();
+
+            // The geometry is displayed
+            buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            await expect(buffer.byteLength).not.toBe(defaultByteLength);
+            await expect(buffer.byteLength).toBeGreaterThan(defaultByteLength);
+
+            // Not click on a point
+            getFeatureInfoPromise = project.waitForGetFeatureInfoRequest();
+            await project.clickOnMap(536, 290);
+            getFeatureInfoRequest = await getFeatureInfoPromise;
+            await getFeatureInfoRequest.response();
+            await page.waitForTimeout(500); // wait to be sure
+
+            // Nothing
+            buffer = await page.screenshot({clip:{x:425, y:325, width:100, height:100}});
+            await expect(buffer.byteLength).toBe(defaultByteLength);
+        });
+    });
+
 test.describe('Children in popup', () => {
 
     test.beforeEach(async ({ page }) => {