Skip to content

Commit 60fe62c

Browse files
AliyanHAliyanH
committed
map-extent layer control - add Locale+ tests + getOuterHTML() to resovle copied links
1 parent 35cfca4 commit 60fe62c

File tree

7 files changed

+221
-6
lines changed

7 files changed

+221
-6
lines changed

‎src/map-extent.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,45 @@ export class MapExtent extends HTMLElement {
7171
? getExtent(this)
7272
: getCalculatedExtent(this);
7373
}
74+
75+
getOuterHTML() {
76+
let tempElement = this.cloneNode(true);
77+
78+
if (this.querySelector('map-link')) {
79+
let mapLinks = tempElement.querySelectorAll('map-link');
80+
81+
mapLinks.forEach((mapLink) => {
82+
if (mapLink.hasAttribute('href')) {
83+
mapLink.setAttribute(
84+
'href',
85+
decodeURI(
86+
new URL(
87+
mapLink.attributes.href.value,
88+
this.baseURI ? this.baseURI : document.baseURI
89+
).href
90+
)
91+
);
92+
} else if (mapLink.hasAttribute('tref')) {
93+
mapLink.setAttribute(
94+
'tref',
95+
decodeURI(
96+
new URL(
97+
mapLink.attributes.tref.value,
98+
this.baseURI ? this.baseURI : document.baseURI
99+
).href
100+
)
101+
);
102+
}
103+
});
104+
}
105+
106+
let outerLayer = tempElement.outerHTML;
107+
108+
tempElement.remove();
109+
110+
return outerLayer;
111+
}
112+
74113
zoomTo() {
75114
let extent = this.extent;
76115
let map = this.getMapEl()._map,

‎src/mapml/handlers/ContextMenu.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,12 @@ export var ContextMenu = L.Handler.extend({
148148
this._extentLayerItems = [
149149
{
150150
// 0
151-
text: 'Zoom to Sub Layer' + ' (<kbd>Z</kbd>)',
151+
text: M.options.locale.lmZoomToExtent + ' (<kbd>Z</kbd>)',
152152
callback: this._zoomToMapExtent
153153
},
154154
{
155155
// 1
156-
text: 'Copy Sub Layer' + ' (<kbd>L</kbd>)',
156+
text: M.options.locale.lmCopyExtent + ' (<kbd>L</kbd>)',
157157
callback: this._copyMapExtent
158158
}
159159
];
@@ -256,7 +256,7 @@ export var ContextMenu = L.Handler.extend({
256256

257257
this._extentLayerMenu = L.DomUtil.create(
258258
'div',
259-
'mapml-contextmenu mapml-layer-menu',
259+
'mapml-contextmenu mapml-extent-menu',
260260
map.getContainer()
261261
);
262262
this._extentLayerMenu.setAttribute('hidden', '');
@@ -418,7 +418,7 @@ export var ContextMenu = L.Handler.extend({
418418
let context =
419419
e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu,
420420
extentElem = context._layerClicked.extent;
421-
context._copyData(extentElem.outerHTML);
421+
context._copyData(extentElem.getOuterHTML());
422422
},
423423

424424
_goForward: function (e) {

‎src/mapml/options.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export var Options = {
1818
cmViewSource: 'View Map Source',
1919
lmZoomToLayer: 'Zoom To Layer',
2020
lmCopyLayer: 'Copy Layer',
21+
lmZoomToExtent: 'Zoom To Sub-layer',
22+
lmCopyExtent: 'Copy Sub-layer',
2123
lcOpacity: 'Opacity',
2224
btnAttribution: 'Map data attribution',
2325
btnZoomIn: 'Zoom in',

‎test/e2e/core/ArrowKeyNavContextMenu.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@
7474
<body>
7575
<mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
7676
<layer- label="CBMT" src="tiles/cbmt/cbmt.mapml" checked></layer->
77+
<layer- label="CBMT - INLINE" >
78+
<map-link rel="license" title="Testing Inc."></map-link>
79+
<map-extent units="CBMTILE" checked>
80+
<map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
81+
<map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
82+
<map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
83+
<map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
84+
</map-extent>
85+
</layer->
7786
</mapml-viewer>
7887
</body>
7988
</html>

‎test/e2e/core/ArrowKeyNavContextMenu.test.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,85 @@ test.describe('Using arrow keys to navigate context menu', () => {
7171
expect(hide).toEqual(true);
7272
});
7373

74+
test('Testing Extent layer contextmenu', async () => {
75+
await page.pause()
76+
await page.waitForTimeout(500);
77+
await page.click('body > mapml-viewer');
78+
await page.waitForTimeout(500);
79+
await page.keyboard.press('Tab');
80+
await page.keyboard.press('Tab');
81+
await page.keyboard.press('Tab');
82+
await page.keyboard.press('Tab');
83+
await page.keyboard.press('Tab');
84+
// opening layer control
85+
await page.keyboard.press('Enter');
86+
await page.waitForTimeout(500);
87+
await page.keyboard.press('Tab');
88+
await page.keyboard.press('Tab');
89+
await page.keyboard.press('Tab');
90+
await page.keyboard.press('Tab');
91+
await page.keyboard.press('Tab');
92+
// expanding layer to reveal extents
93+
await page.keyboard.press('Enter');
94+
// tabbing to extent layer
95+
await page.keyboard.press('Tab');
96+
await page.keyboard.press('Tab');
97+
98+
await page.keyboard.press('Shift+F10');
99+
100+
let activeElement = await page.evaluate(
101+
() => document.activeElement.shadowRoot.activeElement.innerHTML
102+
);
103+
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
104+
await page.keyboard.press('Tab');
105+
activeElement = await page.evaluate(
106+
() => document.activeElement.shadowRoot.activeElement.innerHTML
107+
);
108+
expect(activeElement).toEqual('Copy Sub-layer (<kbd>L</kbd>)');
109+
await page.keyboard.press('ArrowUp');
110+
activeElement = await page.evaluate(
111+
() => document.activeElement.shadowRoot.activeElement.innerHTML
112+
);
113+
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
114+
115+
await page.keyboard.press('Escape');
116+
let hide = await page.$eval(
117+
'body > mapml-viewer',
118+
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
119+
);
120+
expect(hide).toEqual(true);
121+
122+
await page.keyboard.press('Shift+F10');
123+
124+
await page.click('body > mapml-viewer');
125+
hide = await page.$eval(
126+
'body > mapml-viewer',
127+
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
128+
);
129+
expect(hide).toEqual(true);
130+
131+
// Ensuring the extent is still being revealed after layercontrol was closed and reopened
132+
await page.keyboard.press('Tab');
133+
await page.keyboard.press('Tab');
134+
await page.keyboard.press('Tab');
135+
await page.keyboard.press('Tab');
136+
await page.keyboard.press('Tab');
137+
// opening layer control
138+
await page.keyboard.press('Enter');
139+
await page.keyboard.press('Tab');
140+
await page.keyboard.press('Tab');
141+
await page.keyboard.press('Tab');
142+
await page.keyboard.press('Tab');
143+
await page.keyboard.press('Tab');
144+
await page.keyboard.press('Tab');
145+
await page.keyboard.press('Tab');
146+
await page.keyboard.press('Shift+F10');
147+
activeElement = await page.evaluate(
148+
() => document.activeElement.shadowRoot.activeElement.innerHTML
149+
);
150+
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
151+
});
152+
74153
test('(partial) Up and Down Arrow keys to navigate the contextmenu', async () => {
75154
await page.click('body > mapml-viewer', { button: 'right' });
76155
await page.keyboard.press('ArrowDown');

‎test/e2e/core/layerContextMenu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<mapml-viewer style="width: 1000px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
2626
<layer- label="CBMT - INLINE" checked>
2727
<map-link rel="license" title="Testing Inc."></map-link>
28-
<map-extent units="CBMTILE" checked hidden>
28+
<map-extent units="CBMTILE" checked>
2929
<map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
3030
<map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
3131
<map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>

‎test/e2e/core/layerContextMenu.test.js‎

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
7373
);
7474

7575
expect(copyLayer).toEqual(
76-
'<layer- label="CBMT - INLINE" checked="">\n <map-link rel="license" title="Testing Inc."></map-link>\n <map-extent units="CBMTILE" checked="" hidden="">\n <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n </map-extent>\n </layer->'
76+
'<layer- label="CBMT - INLINE" checked="">\n <map-link rel="license" title="Testing Inc."></map-link>\n <map-extent units="CBMTILE" checked="">\n <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n </map-extent>\n </layer->'
7777
);
7878
});
7979

@@ -184,4 +184,90 @@ test.describe('Playwright Layer Context Menu Tests', () => {
184184
'<layer- src="http://localhost:30001/data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->'
185185
);
186186
});
187+
188+
test('Map Extent context menu shows when extent layer is right clicked', async () => {
189+
await page.hover(
190+
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
191+
);
192+
await page
193+
.getByRole('group', { name: 'CBMT - INLINE' })
194+
.getByTitle('Layer Settings')
195+
.click();
196+
await page
197+
.getByRole('group', { name: 'Sub-layer' })
198+
.locator('label')
199+
.click({
200+
button: 'right'
201+
});
202+
203+
const aHandle = await page.evaluateHandle(() =>
204+
document.querySelector('mapml-viewer')
205+
);
206+
const nextHandle = await page.evaluateHandle(
207+
(doc) => doc.shadowRoot,
208+
aHandle
209+
);
210+
const resultHandle = await page.evaluateHandle(
211+
(root) => root.querySelector('.mapml-contextmenu.mapml-extent-menu'),
212+
nextHandle
213+
);
214+
215+
const menuDisplay = await (
216+
await page.evaluateHandle(
217+
(elem) => window.getComputedStyle(elem).getPropertyValue('display'),
218+
resultHandle
219+
)
220+
).jsonValue();
221+
222+
expect(menuDisplay).toEqual('block');
223+
await page.keyboard.press('Escape');
224+
});
225+
226+
test('Layer context menu - copy extent layer', async () => {
227+
await page
228+
.getByRole('group', { name: 'Sub-layer' })
229+
.locator('label')
230+
.click({
231+
button: 'right'
232+
});
233+
234+
await page.keyboard.press('l');
235+
await page.click('body > textarea#messageLayer');
236+
await page.keyboard.press('Control+a');
237+
await page.keyboard.press('Control+v');
238+
const copyLayer = await page.$eval(
239+
'body > textarea#messageLayer',
240+
(text) => text.value
241+
);
242+
243+
expect(copyLayer).toEqual(
244+
'<map-extent units="CBMTILE" checked="">\n <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n </map-extent>'
245+
);
246+
});
247+
248+
test('Map zooms to extent layer', async () => {
249+
await page.pause();
250+
await page.hover(
251+
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
252+
);
253+
await page
254+
.getByRole('group', { name: 'Sub-layer' })
255+
.locator('label')
256+
.click({
257+
button: 'right'
258+
});
259+
await page.keyboard.press('z');
260+
await page.waitForTimeout(1000);
261+
const mapZoom = await page
262+
.locator('mapml-viewer')
263+
.evaluate((viewer) => viewer.zoom);
264+
expect(mapZoom).toEqual(0);
265+
const mapLocation = await page
266+
.locator('mapml-viewer')
267+
.evaluate((viewer) => viewer._map.getPixelBounds());
268+
expect(mapLocation).toEqual({
269+
max: { x: 1374, y: 1177 },
270+
min: { x: 374, y: 677 }
271+
});
272+
});
187273
});

0 commit comments

Comments
 (0)