Skip to content

Commit

Permalink
More WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@prushforth
prushforth committed Jul 26, 2023
1 parent de2d217 commit 602ff1d
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 106 deletions.
115 changes: 58 additions & 57 deletions src/layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,22 +98,59 @@ export class MapLayer extends HTMLElement {
this.attachShadow({ mode: 'open' });
}
new Promise((resolve, reject) => {
this.addEventListener('extentload', () => {
// need to detect / handle layer.error here
resolve();
this.addEventListener(
'extentload',
(event) => {
event.stopPropagation();
if (event.detail.error) {
reject();
} else {
resolve();
}
},
{ once: true }
);
this.addEventListener(
'changestyle',
function (e) {
e.stopPropagation();
this.src = e.detail.src;
},
{ once: true }
);
this.addEventListener(
'changeprojection',
function (e) {
e.stopPropagation();
this.src = e.detail.href;
},
{ once: true }
);
let base = this.baseURI ? this.baseURI : document.baseURI;
let opacity_value = this.hasAttribute('opacity')
? this.getAttribute('opacity')
: '1.0';
this._layer = M.mapMLLayer(
this.src ? new URL(this.src, base).href : null,
this,
{
mapprojection: this.parentElement._map.options.projection,
opacity: opacity_value
}
);
})
.then(() => {
this._onLayerExtentLoad();
this._attachedToMap();
if (this._layerControl && !this.hidden) {
this._layerControl.addOrUpdateOverlay(this._layer, this.label);
}
})
.catch((e) => {
this.dispatchEvent(
new CustomEvent('error', { detail: { target: this } })
);
});
// this._layer.on('extentload', this._onLayerExtentLoad, this);
this._setUpEvents();
// add other event listeners possibly
this._ready(); // rename _ready
}).then(() => {
this._onLayerExtentLoad();
// refactor _attachedToMap
this._attachedToMap();
if (this._layerControl && !this.hidden) {
this._layerControl.addOrUpdateOverlay(this._layer, this.label);
}
});
}

adoptedCallback() {
Expand Down Expand Up @@ -202,18 +239,12 @@ export class MapLayer extends HTMLElement {
if (this._layerControl) {
this._layerControl.addOrUpdateOverlay(this._layer, this.label);
}
if (!this._layer.error) {
// re-use 'loadedmetadata' event from HTMLMediaElement inteface, applied
// to MapML extent as metadata
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
this.dispatchEvent(
new CustomEvent('loadedmetadata', { detail: { target: this } })
);
} else {
this.dispatchEvent(
new CustomEvent('error', { detail: { target: this } })
);
}
// re-use 'loadedmetadata' event from HTMLMediaElement inteface, applied
// to MapML extent as metadata
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
this.dispatchEvent(
new CustomEvent('loadedmetadata', { detail: { target: this } })
);
}
_validateDisabled() {
setTimeout(() => {
Expand Down Expand Up @@ -337,26 +368,6 @@ export class MapLayer extends HTMLElement {
this.checked = this._layer._map.hasLayer(this._layer);
}
}
_ready() {
// the layer might not be attached to a map
// so we need a way for non-src based layers to establish what their
// zoom range, extent and projection are. meta elements in content to
// allow the author to provide this explicitly are one way, they will
// be parsed from the second parameter here
// IE 11 did not have a value for this.baseURI for some reason
var base = this.baseURI ? this.baseURI : document.baseURI;
let opacity_value = this.hasAttribute('opacity')
? this.getAttribute('opacity')
: '1.0';
this._layer = M.mapMLLayer(
this.src ? new URL(this.src, base).href : null,
this,
{
mapprojection: this.parentElement._map.options.projection,
opacity: opacity_value
}
);
}
_attachedToMap() {
// set i to the position of this layer element in the set of layers
var i = 0,
Expand Down Expand Up @@ -414,16 +425,6 @@ export class MapLayer extends HTMLElement {
this._layer.off();
}
}
_setUpEvents() {
this.addEventListener('changestyle', function (e) {
e.stopPropagation();
this.src = e.detail.src;
});
this.addEventListener('changeprojection', function (e) {
e.stopPropagation();
this.src = e.detail.href;
});
}
zoomTo() {
if (!this.extent) return;
let map = this._layer._map,
Expand Down
28 changes: 22 additions & 6 deletions src/mapml/layers/MapMLLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1183,8 +1183,6 @@ export var MapMLLayer = L.Layer.extend({
fetch(url, { headers: headers })
.then((response) => {
if (!response.ok) {
layer.error = true;
layer.fire('extentload', layer, true);
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.text();
Expand All @@ -1193,7 +1191,11 @@ export var MapMLLayer = L.Layer.extend({
fCallback(response, false);
})
.catch((response) => {
console.log('wut');
layer.error = true;
layer._layerEl.dispatchEvent(
new CustomEvent('extentload', { detail: layer })
);
console.log(`HTTP error! Status: ${response.message}`);
});
}
function transcribe(element) {
Expand Down Expand Up @@ -1417,11 +1419,23 @@ export var MapMLLayer = L.Layer.extend({
var mapml = !local
? new DOMParser().parseFromString(content, 'text/xml')
: content;
if (
!local &&
(mapml.querySelector('parsererror') || !mapml.querySelector('mapml-'))
) {
layer.error = true;
layer._layerEl.dispatchEvent(
new CustomEvent('extentload', { detail: layer })
);
throw new Error('Parser error');
}
var base = new URL(
mapml.querySelector('map-base')
? mapml.querySelector('map-base').getAttribute('href')
: mapml.baseURI,
mapml.baseURI
: local
? mapml.baseURI
: layer._href,
layer._href
).href;
layer._properties = {};
if (mapml.querySelector && mapml.querySelector('map-feature'))
Expand All @@ -1442,8 +1456,10 @@ export var MapMLLayer = L.Layer.extend({
layer._layerEl.parentElement._toggleControls();
}
layer.fire('extentload', layer, false);
// need this to enable processing by the <layer-> element connectedCallback
// processing
layer._layerEl.dispatchEvent(
new CustomEvent('extentload', { detail: layer, bubbles: true })
new CustomEvent('extentload', { detail: layer })
);
// local functions
function thinkOfAGoodName() {
Expand Down
44 changes: 24 additions & 20 deletions src/web-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,23 +75,13 @@ export class WebMap extends HTMLMapElement {
}
}
get projection() {
return this.hasAttribute('projection')
return this.hasAttribute('projection') && M[this.getAttribute('projection')]
? this.getAttribute('projection')
: 'OSMTILE';
}
set projection(val) {
if (val && M[val]) {
this.setAttribute('projection', val);
if (this._map && this._map.options.projection !== val) {
this._map.options.crs = M[val];
this._map.options.projection = val;
for (let layer of this.querySelectorAll('layer-')) {
layer.removeAttribute('disabled');
let reAttach = this.removeChild(layer);
this.appendChild(reAttach);
}
if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
} else this.dispatchEvent(new CustomEvent('createmap'));
} else throw new Error('Undefined Projection');
}
get zoom() {
Expand Down Expand Up @@ -180,18 +170,16 @@ export class WebMap extends HTMLMapElement {
// is because the mapml-viewer element has / can have a size of 0 up until after
// something that happens between this point and the event handler executing
// perhaps a browser rendering cycle??
this.addEventListener('createmap', this._createMap);

let custom = !['CBMTILE', 'APSTILE', 'OSMTILE', 'WGS84'].includes(
this.projection
);
if (!custom) {
// this is worth a read, because dispatchEvent is synchronous
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
// In particular:
// "All applicable event handlers are called and return before dispatchEvent() returns."
this.dispatchEvent(new CustomEvent('createmap'));
}
// this is worth a read, because dispatchEvent is synchronous
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
// In particular:
// "All applicable event handlers are called and return before dispatchEvent() returns."
this._createMap();

this._toggleStatic();

/*
Expand Down Expand Up @@ -407,6 +395,22 @@ export class WebMap extends HTMLMapElement {
case 'static':
this._toggleStatic();
break;
case 'projection':
if (newValue && M[newValue]) {
if (this._map && this._map.options.projection !== newValue) {
this._map.options.crs = M[newValue];
this._map.options.projection = newValue;
for (let layer of this.querySelectorAll('layer-')) {
layer.removeAttribute('disabled');
let reAttach = this.removeChild(layer);
this.appendChild(reAttach);
}
if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
this.zoomTo(this.lat, this.lon, this.zoom);
//this.dispatchEvent(new CustomEvent('projectionchange'));
}
}
break;
}
}

Expand Down Expand Up @@ -860,7 +864,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
Expand Down
4 changes: 3 additions & 1 deletion test/e2e/api/domApi-HTMLLayerElement.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ test.describe('HTMLLayerElement DOM API Tests', () => {
let localWithTitleLabel = await page.evaluate(() => {
return document.querySelector('#local-with-title').label;
});
expect(localWithTitleLabel).toEqual('Layer name set via local map-title element - unsettable via HTMLLayerelement.label');
expect(localWithTitleLabel).toEqual(
'Layer name set via local map-title element - unsettable via HTMLLayerelement.label'
);
let localWithTitleName = await page.evaluate(() => {
let layer = document.querySelector('#local-with-title');
return layer._layer.getName();
Expand Down
8 changes: 4 additions & 4 deletions test/e2e/api/domApi-mapml-viewer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,10 @@ test.describe('mapml-viewer DOM API Tests', () => {
// locators avoid flaky tests, allegedly
const viewer = await page.locator('mapml-viewer');
await viewer.evaluate(() => {
let m = document.querySelector('mapml-viewer');
document.body.removeChild(m);
document.body.appendChild(m);
});
let m = document.querySelector('mapml-viewer');
document.body.removeChild(m);
document.body.appendChild(m);
});
await page.waitForTimeout(200);
expect(
await viewer.evaluate(() => {
Expand Down
8 changes: 4 additions & 4 deletions test/e2e/api/domApi-web-map.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@ test.describe('web-map DOM API Tests', () => {
// locators avoid flaky tests, allegedly
const viewer = await page.locator('map');
await viewer.evaluate(() => {
let m = document.querySelector('map');
document.body.removeChild(m);
document.body.appendChild(m);
});
let m = document.querySelector('map');
document.body.removeChild(m);
document.body.appendChild(m);
});
await page.waitForTimeout(200);
expect(
await viewer.evaluate(() => {
Expand Down
8 changes: 4 additions & 4 deletions test/e2e/core/drag.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ test.describe('UI Drag&Drop Test', () => {
(span) => span.innerText
);
const layerIndex = await page.$eval(
'.leaflet-pane.leaflet-overlay-pane > div:nth-child(1)',
(div) => div.style.zIndex
'.leaflet-pane.leaflet-overlay-pane .mapml-templated-tile-container',
(div) => div.parentElement.parentElement.style.zIndex
);
const domLayer = await page.$eval(
'body > map > layer-:nth-child(4)',
Expand Down Expand Up @@ -109,8 +109,8 @@ test.describe('UI Drag&Drop Test', () => {
(span) => span.innerText
);
const layerIndex = await page.$eval(
'.leaflet-overlay-pane > div:nth-child(2)',
(div) => div.style.zIndex
'.leaflet-overlay-pane .mapml-static-tile-layer',
(div) => div.parentElement.style.zIndex
);
const domLayer = await page.$eval(
'map > layer-:nth-child(3)',
Expand Down
13 changes: 3 additions & 10 deletions test/e2e/mapml-viewer/mapml-viewer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,24 +120,17 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
await page.$eval('body > mapml-viewer', (layer) =>
layer.setAttribute('controlslist', 'nolayer')
);
let layerControl = await page.locator('.leaflet-control-layers');
await expect(layerControl).toBeHidden();

let layerControlHidden = await page.$eval(
'.leaflet-top.leaflet-right',
(div) => div.firstChild.hidden
);
expect(layerControlHidden).toEqual(true);
await page.click('body > mapml-viewer', { button: 'right' });
// toggle controls
await page.click('.mapml-contextmenu > button:nth-of-type(6)');
await page.click('body > mapml-viewer', { button: 'right' });
// toggle controls
await page.click('.mapml-contextmenu > button:nth-of-type(6)');

layerControlHidden = await page.$eval(
'.leaflet-top.leaflet-right',
(div) => div.firstChild.hidden
);
expect(layerControlHidden).toEqual(true);
await expect(layerControl).toBeHidden();
});
});
});
Expand Down

0 comments on commit 602ff1d

Please sign in to comment.