Skip to content

Added map-change event for extents #1005

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 6, 2024
Merged

Added map-change event for extents #1005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ae58ad3
added map-change event for extents, added test cases for map-change e…
yushan-mu Oct 30, 2024
015b188
Added timeout
yushan-mu Oct 30, 2024
c736d38
Changed to headed mode, added different methods of changing checking/…
yushan-mu Oct 30, 2024
ef6f283
Cleaned up some parts
yushan-mu Oct 31, 2024
34aedbd
Modified logic so that map-change is only called when layer/extent is…
yushan-mu Oct 31, 2024
3a6437b
Edited comments, removed timeout
yushan-mu Nov 1, 2024
602f031
Added test for checking/unchecking with keyboard
yushan-mu Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
1 change: 1 addition & 0 deletions src/mapml/elementSupport/extents/createLayerControlForExtent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/mapml/elementSupport/layers/createLayerControlForLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
34 changes: 34 additions & 0 deletions test/e2e/api/events/map-change-event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
131 changes: 131 additions & 0 deletions test/e2e/api/events/map-change-event.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});