Added map-change event for extents (#1005)

* added map-change event for extents, added test cases for map-change events * Added timeout * Changed to headed mode, added different methods of changing checking/unchecking * Cleaned up some parts * Modified logic so that map-change is only called when layer/extent is checked/unchecked on the layer menu * Edited comments, removed timeout * Added test for checking/unchecking with keyboard
Maps4HTML · Nov 6, 2024 · 72c23f5 · 72c23f5
1 parent 9f737ad
commit 72c23f5
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 1 deletion.
diff --git a/src/layer.js b/src/layer.js
@@ -92,7 +92,6 @@ export class BaseLayerElement extends HTMLElement {
             this.parentElement._map.removeLayer(this._layer);
           }
           this._layerControlCheckbox.checked = this.checked;
-          this.dispatchEvent(new CustomEvent('map-change'));
           break;
         case 'hidden':
           if (typeof newValue === 'string') {

diff --git a/src/mapml/elementSupport/extents/createLayerControlForExtent.js b/src/mapml/elementSupport/extents/createLayerControlForExtent.js
@@ -131,6 +131,7 @@ export var createLayerControlExtentHTML = function () {
   extentItemNameSpan.innerHTML = this.label;
   const changeCheck = function () {
     this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent('map-change'));
   };
   // save for later access by API
   this._layerControlCheckbox = input;

diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
@@ -134,6 +134,7 @@ export var createLayerControlHTML = async function () {
   layerItemName.layer = this._layer;
   const changeCheck = function () {
     this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent('map-change'));
     this._layerControlCheckbox.focus();
   };
   input.addEventListener('change', changeCheck.bind(this));

diff --git a/test/e2e/api/events/map-change-event.html b/test/e2e/api/events/map-change-event.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>map-change event</title>
+    <!-- the layer in this map should continue to be visible when you change
+    the viewer projection from OSMTILE to CBMTILE.  -->
+    <script type="module" src="/mapml.js"></script>
+    <style>
+        mapml-viewer {
+            width: 100%;
+            height: 100vh
+        }
+    </style>    
+</head>
+
+<body>
+    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls=""
+        controlslist="geolocation">
+        <map-layer label="OpenStreetMap" checked="">
+            <map-link rel="license" title="Â© OpenStreetMap contributors CC BY-SA"
+                href="https://www.openstreetmap.org/copyright"></map-link>
+            <map-extent units="OSMTILE" checked="checked">
+                <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+                <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+                <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+                <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+            </map-extent>
+        </map-layer>
+    </mapml-viewer>
+</body>
+
+</html>
diff --git a/test/e2e/api/events/map-change-event.test.js b/test/e2e/api/events/map-change-event.test.js
@@ -0,0 +1,131 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('Map-change event are only fired when layers/extents are checked or unchecked in the layer menu ', () => {
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('', {
+      headless: false,
+      slowMo: 250
+    });
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('events/map-change-event.html');
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test('Map-change event for layers work', async () => {
+    let layerClicked = 0;
+    page.on('console', (msg) => {
+      if (msg.text() === 'Layer clicked') {
+        layerClicked++;
+      }
+    });
+
+    // check and uncheck layers in the DOM shouldn't call map-change
+    await page.evaluate(() => {
+      const layer = document.querySelector('map-layer');
+      layer.addEventListener('map-change', () => {
+        console.log('Layer clicked');
+      });
+      layer.checked = false;
+      layer.checked = true;
+    });
+    expect(layerClicked).toBe(0);
+
+    // check and uncheck layers using removeAttribute and setAttribute
+    // shouldn't call map-change
+    await page.evaluate(() => {
+      const layer = document.querySelector('map-layer');
+      layer.removeAttribute('checked');
+      layer.setAttribute('checked', '');
+    });
+    expect(layerClicked).toBe(0);
+
+    // check and uncheck layers in the layer menu should call map-change
+    await page.hover('.leaflet-top.leaflet-right');
+    const button = await page.locator('.leaflet-control-layers-selector');
+    await button.click();
+    await button.click();
+
+    expect(layerClicked).toBe(2);
+
+    // using keyboard to check and uncheck layers in the layer menu should
+    // call map-change
+    await page.locator('mapml-viewer').click();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Space');
+    await page.keyboard.press('Space');
+
+    expect(layerClicked).toBe(4);
+  });
+
+  test('Map-change event for sub-layers work', async () => {
+    let extentClicked = 0;
+    page.on('console', (msg) => {
+      if (msg.text() === 'Sub-layer clicked') {
+        extentClicked++;
+      }
+    });
+
+    // check and uncheck extents in the DOM shouldn't call map-change
+    await page.evaluate(() => {
+      const extent = document.querySelector('map-extent');
+      extent.addEventListener('map-change', () => {
+        console.log('Sub-layer clicked');
+      });
+      extent.checked = false;
+      extent.checked = true;
+    });
+    expect(extentClicked).toBe(0);
+
+    // check and uncheck extents using removeAttribute and setAttribute
+    // shouldn't call map-change
+    await page.evaluate(() => {
+      const extent = document.querySelector('map-extent');
+      extent.removeAttribute('checked');
+      extent.setAttribute('checked', '');
+    });
+    expect(extentClicked).toBe(0);
+
+    // check and uncheck extents in the layer menu should call map-change
+    const layerSettings = await page.locator(
+      '.mapml-layer-item-settings-control'
+    );
+    await page.hover('.leaflet-top.leaflet-right');
+    await layerSettings.first().click();
+    const extentControls = await page.locator('.mapml-layer-extent');
+    const button = await extentControls.locator('.mapml-layer-item-toggle');
+    await button.click();
+    await button.click();
+
+    expect(extentClicked).toBe(2);
+
+    // using keyboard to check and uncheck extents in the layer menu should
+    // call map-change
+    await page.locator('mapml-viewer').click();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Space');
+    await page.keyboard.press('Space');
+
+    expect(extentClicked).toBe(4);
+  });
+});