From 5e7c82f69f93f71bcbad2d1d587091ea754010ee Mon Sep 17 00:00:00 2001 From: AliyanH Date: Mon, 10 Jul 2023 10:39:00 -0400 Subject: [PATCH 1/4] refactor locationfound, locationerror, load, preclick, dblclick, mousemove, mouseover, mouseout --- src/mapml-viewer.js | 16 ++++++++-------- src/web-map.js | 16 ++++++++-------- test/e2e/api/locateApi.test.js | 10 +++++----- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 1210f4b72..8b098c512 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -620,7 +620,7 @@ export class MapViewer extends HTMLElement { 'locationfound', function (e) { this.dispatchEvent( - new CustomEvent('maplocationfound', { + new CustomEvent('map-locationfound', { detail: { latlng: e.latlng, accuracy: e.accuracy } }) ); @@ -631,7 +631,7 @@ export class MapViewer extends HTMLElement { 'locationerror', function (e) { this.dispatchEvent( - new CustomEvent('locationerror', { detail: { error: e.message } }) + new CustomEvent('map-locationerror', { detail: { error: e.message } }) ); }, this @@ -640,7 +640,7 @@ export class MapViewer extends HTMLElement { 'load', function () { this.dispatchEvent( - new CustomEvent('load', { detail: { target: this } }) + new CustomEvent('map-load', { detail: { target: this } }) ); }, this @@ -649,7 +649,7 @@ export class MapViewer extends HTMLElement { 'preclick', function (e) { this.dispatchEvent( - new CustomEvent('preclick', { + new CustomEvent('map-preclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -681,7 +681,7 @@ export class MapViewer extends HTMLElement { 'dblclick', function (e) { this.dispatchEvent( - new CustomEvent('dblclick', { + new CustomEvent('map-dblclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -697,7 +697,7 @@ export class MapViewer extends HTMLElement { 'mousemove', function (e) { this.dispatchEvent( - new CustomEvent('mousemove', { + new CustomEvent('map-mousemove', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -713,7 +713,7 @@ export class MapViewer extends HTMLElement { 'mouseover', function (e) { this.dispatchEvent( - new CustomEvent('mouseover', { + new CustomEvent('map-mouseover', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -729,7 +729,7 @@ export class MapViewer extends HTMLElement { 'mouseout', function (e) { this.dispatchEvent( - new CustomEvent('mouseout', { + new CustomEvent('map-mouseout', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, diff --git a/src/web-map.js b/src/web-map.js index ff03f80ae..247b6ce52 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -665,7 +665,7 @@ export class WebMap extends HTMLMapElement { 'locationfound', function (e) { this.dispatchEvent( - new CustomEvent('maplocationfound', { + new CustomEvent('map-locationfound', { detail: { latlng: e.latlng, accuracy: e.accuracy } }) ); @@ -676,7 +676,7 @@ export class WebMap extends HTMLMapElement { 'locationerror', function (e) { this.dispatchEvent( - new CustomEvent('locationerror', { detail: { error: e.message } }) + new CustomEvent('map-locationerror', { detail: { error: e.message } }) ); }, this @@ -685,7 +685,7 @@ export class WebMap extends HTMLMapElement { 'load', function () { this.dispatchEvent( - new CustomEvent('load', { detail: { target: this } }) + new CustomEvent('map-load', { detail: { target: this } }) ); }, this @@ -694,7 +694,7 @@ export class WebMap extends HTMLMapElement { 'preclick', function (e) { this.dispatchEvent( - new CustomEvent('preclick', { + new CustomEvent('map-preclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -726,7 +726,7 @@ export class WebMap extends HTMLMapElement { 'dblclick', function (e) { this.dispatchEvent( - new CustomEvent('dblclick', { + new CustomEvent('map-dblclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -742,7 +742,7 @@ export class WebMap extends HTMLMapElement { 'mousemove', function (e) { this.dispatchEvent( - new CustomEvent('mousemove', { + new CustomEvent('map-mousemove', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -758,7 +758,7 @@ export class WebMap extends HTMLMapElement { 'mouseover', function (e) { this.dispatchEvent( - new CustomEvent('mouseover', { + new CustomEvent('map-mouseover', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -774,7 +774,7 @@ export class WebMap extends HTMLMapElement { 'mouseout', function (e) { this.dispatchEvent( - new CustomEvent('mouseout', { + new CustomEvent('map-mouseout', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, diff --git a/test/e2e/api/locateApi.test.js b/test/e2e/api/locateApi.test.js index eb76d56b0..ce40f70e3 100644 --- a/test/e2e/api/locateApi.test.js +++ b/test/e2e/api/locateApi.test.js @@ -39,12 +39,12 @@ test.describe('Locate API Test', () => { expect(locateAPI_lng).toEqual('-73.568'); }); - test('Testing maplocationfound event', async () => { + test('Testing map-locationfound event', async () => { const latlng = await page.evaluate(() => { const viewer = document.querySelector('body > mapml-viewer'); return new Promise((resolve) => { viewer.addEventListener( - 'maplocationfound', + 'map-locationfound', (e) => { resolve(e.detail.latlng); }, @@ -57,18 +57,18 @@ test.describe('Locate API Test', () => { expect(latlng.lng).toEqual(-73.56766530667056); }); - test('Testing locationerror event', async () => { + test('Testing map-locationerror event', async () => { const error = await page.evaluate(() => { const viewer = document.querySelector('body > mapml-viewer'); return new Promise((resolve) => { viewer.addEventListener( - 'locationerror', + 'map-locationerror', (e) => { resolve(e.detail.error); }, { once: true } ); - const errorEvent = new CustomEvent('locationerror', { + const errorEvent = new CustomEvent('map-locationerror', { detail: { error: 'Your location could not be determined.' } }); viewer.dispatchEvent(errorEvent); From 13fac8a9ada6ba0a495a8d88e03f4aac21d4ea9d Mon Sep 17 00:00:00 2001 From: AliyanH Date: Mon, 10 Jul 2023 17:38:11 -0400 Subject: [PATCH 2/4] refactor rest of leaflet specific events --- src/mapml-viewer.js | 22 +++++++++++----------- src/mapml/handlers/AnnounceMovement.js | 10 ++++++++-- src/web-map.js | 22 +++++++++++----------- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 8b098c512..aa3e850a2 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -640,7 +640,7 @@ export class MapViewer extends HTMLElement { 'load', function () { this.dispatchEvent( - new CustomEvent('map-load', { detail: { target: this } }) + new CustomEvent('load', { detail: { target: this } }) ); }, this @@ -681,7 +681,7 @@ export class MapViewer extends HTMLElement { 'dblclick', function (e) { this.dispatchEvent( - new CustomEvent('map-dblclick', { + new CustomEvent('dblclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -697,7 +697,7 @@ export class MapViewer extends HTMLElement { 'mousemove', function (e) { this.dispatchEvent( - new CustomEvent('map-mousemove', { + new CustomEvent('mousemove', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -713,7 +713,7 @@ export class MapViewer extends HTMLElement { 'mouseover', function (e) { this.dispatchEvent( - new CustomEvent('map-mouseover', { + new CustomEvent('mouseover', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -729,7 +729,7 @@ export class MapViewer extends HTMLElement { 'mouseout', function (e) { this.dispatchEvent( - new CustomEvent('map-mouseout', { + new CustomEvent('mouseout', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -794,7 +794,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('movestart', { detail: { target: this } }) + new CustomEvent('map-movestart', { detail: { target: this } }) ); }, this @@ -804,7 +804,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('move', { detail: { target: this } }) + new CustomEvent('map-move', { detail: { target: this } }) ); }, this @@ -815,7 +815,7 @@ export class MapViewer extends HTMLElement { this._updateMapCenter(); this._addToHistory(); this.dispatchEvent( - new CustomEvent('moveend', { detail: { target: this } }) + new CustomEvent('map-moveend', { detail: { target: this } }) ); }, this @@ -825,7 +825,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomstart', { detail: { target: this } }) + new CustomEvent('map-zoomstart', { detail: { target: this } }) ); }, this @@ -835,7 +835,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoom', { detail: { target: this } }) + new CustomEvent('map-zoom', { detail: { target: this } }) ); }, this @@ -845,7 +845,7 @@ export class MapViewer extends HTMLElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomend', { detail: { target: this } }) + new CustomEvent('map-zoomend', { detail: { target: this } }) ); }, this diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js index f0beef557..960efdd3a 100644 --- a/src/mapml/handlers/AnnounceMovement.js +++ b/src/mapml/handlers/AnnounceMovement.js @@ -5,7 +5,10 @@ export var AnnounceMovement = L.Handler.extend({ layerremove: this.totalBounds }); - this._map.options.mapEl.addEventListener('moveend', this.announceBounds); + this._map.options.mapEl.addEventListener( + 'map-moveend', + this.announceBounds + ); this._map.dragging._draggable.addEventListener('dragstart', this.dragged); this._map.options.mapEl.addEventListener( 'mapfocused', @@ -18,7 +21,10 @@ export var AnnounceMovement = L.Handler.extend({ layerremove: this.totalBounds }); - this._map.options.mapEl.removeEventListener('moveend', this.announceBounds); + this._map.options.mapEl.removeEventListener( + 'map-moveend', + this.announceBounds + ); this._map.dragging._draggable.removeEventListener( 'dragstart', this.dragged diff --git a/src/web-map.js b/src/web-map.js index 247b6ce52..af0e84d38 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -685,7 +685,7 @@ export class WebMap extends HTMLMapElement { 'load', function () { this.dispatchEvent( - new CustomEvent('map-load', { detail: { target: this } }) + new CustomEvent('load', { detail: { target: this } }) ); }, this @@ -726,7 +726,7 @@ export class WebMap extends HTMLMapElement { 'dblclick', function (e) { this.dispatchEvent( - new CustomEvent('map-dblclick', { + new CustomEvent('dblclick', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -742,7 +742,7 @@ export class WebMap extends HTMLMapElement { 'mousemove', function (e) { this.dispatchEvent( - new CustomEvent('map-mousemove', { + new CustomEvent('mousemove', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -758,7 +758,7 @@ export class WebMap extends HTMLMapElement { 'mouseover', function (e) { this.dispatchEvent( - new CustomEvent('map-mouseover', { + new CustomEvent('mouseover', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -774,7 +774,7 @@ export class WebMap extends HTMLMapElement { 'mouseout', function (e) { this.dispatchEvent( - new CustomEvent('map-mouseout', { + new CustomEvent('mouseout', { detail: { lat: e.latlng.lat, lon: e.latlng.lng, @@ -839,7 +839,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('movestart', { detail: { target: this } }) + new CustomEvent('map-movestart', { detail: { target: this } }) ); }, this @@ -849,7 +849,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('move', { detail: { target: this } }) + new CustomEvent('map-move', { detail: { target: this } }) ); }, this @@ -860,7 +860,7 @@ export class WebMap extends HTMLMapElement { this._updateMapCenter(); this._addToHistory(); this.dispatchEvent( - new CustomEvent('moveend', { detail: { target: this } }) + new CustomEvent('map-moveend', { detail: { target: this } }) ); }, this @@ -870,7 +870,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomstart', { detail: { target: this } }) + new CustomEvent('map-zoomstart', { detail: { target: this } }) ); }, this @@ -880,7 +880,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoom', { detail: { target: this } }) + new CustomEvent('map-zoom', { detail: { target: this } }) ); }, this @@ -890,7 +890,7 @@ export class WebMap extends HTMLMapElement { function () { this._updateMapCenter(); this.dispatchEvent( - new CustomEvent('zoomend', { detail: { target: this } }) + new CustomEvent('map-zoomend', { detail: { target: this } }) ); }, this From 4abfc151f207a9220239c347ac71643cfef1d390 Mon Sep 17 00:00:00 2001 From: AliyanH Date: Tue, 11 Jul 2023 09:53:47 -0400 Subject: [PATCH 3/4] remove unused loadstart event from layer.js --- src/layer.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/layer.js b/src/layer.js index 2e5f0e428..481617c00 100644 --- a/src/layer.js +++ b/src/layer.js @@ -412,15 +412,6 @@ export class MapLayer extends HTMLElement { } } _setUpEvents() { - this._layer.on( - 'loadstart', - function () { - this.dispatchEvent( - new CustomEvent('loadstart', { detail: { target: this } }) - ); - }, - this - ); this._layer.on( 'changestyle', function (e) { From a08fca64553cb9b8994226f90ebe02219e626d26 Mon Sep 17 00:00:00 2001 From: Aliyan Haq <55751566+AliyanH@users.noreply.github.com> Date: Wed, 15 Nov 2023 13:41:39 -0500 Subject: [PATCH 4/4] remove layer 'error' event, and modify changestyle->map-changestyle + dispatch map-change event for map-extent + remove mapml-viewer/web-map preclick and layerchange event + modify templated tile tileloadstart->map-tileloadstart --- src/layer.js | 5 +--- src/map-extent.js | 1 + src/mapml-viewer.js | 29 ------------------- src/mapml/layers/Crosshair.js | 11 ++----- src/mapml/layers/MapMLLayer.js | 2 +- src/mapml/layers/TemplatedTileLayer.js | 2 +- src/web-map.js | 29 ------------------- test/e2e/layers/clientTemplatedTileLayer.html | 2 +- 8 files changed, 7 insertions(+), 74 deletions(-) diff --git a/src/layer.js b/src/layer.js index cfb9629dc..a38824276 100644 --- a/src/layer.js +++ b/src/layer.js @@ -126,7 +126,7 @@ export class MapLayer extends HTMLElement { } new Promise((resolve, reject) => { this.addEventListener( - 'changestyle', + 'map-changestyle', function (e) { e.stopPropagation(); this.src = e.detail.src; @@ -200,9 +200,6 @@ export class MapLayer extends HTMLElement { this.src = e.detail.href; } else { console.log(e); - this.dispatchEvent( - new CustomEvent('error', { detail: { target: this } }) - ); } }); } diff --git a/src/map-extent.js b/src/map-extent.js index 0aa6bdbf1..2ea1f3d2a 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -68,6 +68,7 @@ export class MapExtent extends HTMLElement { this._handleChange(); this._calculateBounds(); this._layerControlCheckbox.checked = newValue !== null; + this.dispatchEvent(new CustomEvent('map-change')); break; case 'opacity': if (oldValue !== newValue) { diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 577e91466..28818e2ba 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -612,19 +612,6 @@ export class MapViewer extends HTMLElement { _setUpEvents() { this.addEventListener('drop', this._dropHandler, false); this.addEventListener('dragover', this._dragoverHandler, false); - this.addEventListener( - 'change', - function (e) { - if (e.target.tagName === 'LAYER-') { - this.dispatchEvent( - new CustomEvent('layerchange', { - details: { target: this, originalEvent: e } - }) - ); - } - }, - false - ); this.parentElement.addEventListener('keyup', function (e) { if ( @@ -688,22 +675,6 @@ export class MapViewer extends HTMLElement { }, this ); - this._map.on( - 'preclick', - function (e) { - this.dispatchEvent( - new CustomEvent('map-preclick', { - detail: { - lat: e.latlng.lat, - lon: e.latlng.lng, - x: e.containerPoint.x, - y: e.containerPoint.y - } - }) - ); - }, - this - ); this._map.on( 'click', function (e) { diff --git a/src/mapml/layers/Crosshair.js b/src/mapml/layers/Crosshair.js index 67848530b..2205f967d 100644 --- a/src/mapml/layers/Crosshair.js +++ b/src/mapml/layers/Crosshair.js @@ -13,11 +13,7 @@ export var Crosshair = L.Layer.extend({ map.isFocused = false; this._isQueryable = false; - map.on( - 'layerchange layeradd layerremove overlayremove', - this._toggleEvents, - this - ); + map.on('layeradd layerremove overlayremove', this._toggleEvents, this); map.on('popupopen', this._isMapFocused, this); L.DomEvent.on( map._container, @@ -30,10 +26,7 @@ export var Crosshair = L.Layer.extend({ }, onRemove: function (map) { - map.off( - 'layerchange layeradd layerremove overlayremove', - this._toggleEvents - ); + map.off('layeradd layerremove overlayremove', this._toggleEvents); map.off('popupopen', this._isMapFocused); L.DomEvent.off( map._container, diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js index 670f5ca54..887e55111 100644 --- a/src/mapml/layers/MapMLLayer.js +++ b/src/mapml/layers/MapMLLayer.js @@ -481,7 +481,7 @@ export var MapMLLayer = L.Layer.extend({ var changeStyle = function (e) { L.DomEvent.stop(e); layer._layerEl.dispatchEvent( - new CustomEvent('changestyle', { + new CustomEvent('map-changestyle', { detail: { src: e.target.getAttribute('data-href') } diff --git a/src/mapml/layers/TemplatedTileLayer.js b/src/mapml/layers/TemplatedTileLayer.js index c34b77698..006dbc16f 100644 --- a/src/mapml/layers/TemplatedTileLayer.js +++ b/src/mapml/layers/TemplatedTileLayer.js @@ -85,7 +85,7 @@ export var TemplatedTileLayer = L.TileLayer.extend({ L.DomUtil.addClass(tileGroup, 'leaflet-tile'); this._template.linkEl.dispatchEvent( - new CustomEvent('tileloadstart', { + new CustomEvent('map-tileloadstart', { detail: { x: coords.x, y: coords.y, diff --git a/src/web-map.js b/src/web-map.js index f83d3dcdd..417fbf189 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -657,19 +657,6 @@ export class WebMap extends HTMLMapElement { _setUpEvents() { this.addEventListener('drop', this._dropHandler, false); this.addEventListener('dragover', this._dragoverHandler, false); - this.addEventListener( - 'change', - function (e) { - if (e.target.tagName === 'LAYER-') { - this.dispatchEvent( - new CustomEvent('layerchange', { - details: { target: this, originalEvent: e } - }) - ); - } - }, - false - ); let mapEl = this; this.parentElement.addEventListener('keyup', function (e) { @@ -735,22 +722,6 @@ export class WebMap extends HTMLMapElement { }, this ); - this._map.on( - 'preclick', - function (e) { - this.dispatchEvent( - new CustomEvent('map-preclick', { - detail: { - lat: e.latlng.lat, - lon: e.latlng.lng, - x: e.containerPoint.x, - y: e.containerPoint.y - } - }) - ); - }, - this - ); this._map.on( 'click', function (e) { diff --git a/test/e2e/layers/clientTemplatedTileLayer.html b/test/e2e/layers/clientTemplatedTileLayer.html index 80de6982a..2b04b7cb5 100644 --- a/test/e2e/layers/clientTemplatedTileLayer.html +++ b/test/e2e/layers/clientTemplatedTileLayer.html @@ -38,7 +38,7 @@