Skip to content

Commit 92ccc41

Browse files
kevinkim31AliyanH
kevinkim31
and
AliyanH
authored
Copy layer with relative path fails when pasted layer does not have the same base path (#824)
* first fix * first fix -modified * include map-link url modifications * fix tests * fix tests * add testing * fix changes * fix changes 2 * make test name descriptive --------- Co-authored-by: AliyanH <aliyanulhaq@gmail.com>
1 parent ff13ef3 commit 92ccc41

File tree

7 files changed

+63
-9
lines changed

7 files changed

+63
-9
lines changed

‎src/layer.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,35 @@ export class MapLayer extends HTMLElement {
254254
}
255255
}, 0);
256256
}
257+
getOuterHTML() {
258+
259+
let tempElement = this.cloneNode(true);
260+
261+
if (this.hasAttribute('src')) {
262+
let newSrc = this._layer.getHref();
263+
tempElement.setAttribute('src',newSrc);
264+
}
265+
if (this.querySelector('map-link')) {
266+
let mapLinks = tempElement.querySelectorAll('map-link');
267+
268+
mapLinks.forEach((mapLink) => {
269+
270+
if (mapLink.hasAttribute('href')) {
271+
mapLink.setAttribute('href', decodeURI((new URL(mapLink.attributes.href.value, this.baseURI ? this.baseURI : document.baseURI)).href));
272+
}
273+
else if (mapLink.hasAttribute('tref')) {
274+
mapLink.setAttribute('tref', decodeURI((new URL(mapLink.attributes.tref.value, this.baseURI ? this.baseURI : document.baseURI)).href));
275+
}
276+
});
277+
}
278+
279+
let outerLayer = tempElement.outerHTML;
280+
281+
tempElement.remove();
282+
283+
return outerLayer;
284+
}
285+
257286
_onLayerChange() {
258287
if (this._layer._map) {
259288
// can't disable observers, have to set a flag telling it where

‎src/mapml/handlers/ContextMenu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export var ContextMenu = L.Handler.extend({
223223
_copyLayer: function (e) {
224224
let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu,
225225
layerElem = context._layerClicked.layer._layerEl;
226-
context._copyData(layerElem.outerHTML);
226+
context._copyData(layerElem.getOuterHTML());
227227
},
228228

229229
_goForward: function(e){

‎src/mapml/layers/MapMLLayer.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ export var MapMLLayer = L.Layer.extend({
6363

6464
return this;
6565
},
66+
getHref: function () {
67+
return this._href ?? "";
68+
},
6669
_updateZIndex: function () {
6770
if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) {
6871
this._container.style.zIndex = this.options.zIndex;

‎test/e2e/core/layerContextMenu.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@
2222
</head>
2323

2424
<body>
25-
<mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
25+
<mapml-viewer style="width: 1000px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
2626
<layer- label="CBMT - INLINE" checked>
27+
<map-link rel="license" title="Testing Inc."></map-link>
2728
<map-extent units="CBMTILE">
2829
<map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
2930
<map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
@@ -57,6 +58,7 @@
5758
<map-tile zoom="6" row="51" col="50" src="/data/cbmt/3/c14_r16.png"></map-tile>
5859
<map-tile zoom="6" row="51" col="51" src="/data/cbmt/2/c9_r10.png"></map-tile>
5960
</layer->
61+
<layer- src="data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->
6062
</mapml-viewer>
6163
<textarea id="messageExtent" name="messageExtent" rows="10" cols="100"></textarea>
6264
<textarea id="messageLayer" name="messageLayer" rows="10" cols="100"></textarea>

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

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ test.describe("Playwright Layer Context Menu Tests", () => {
4040
(text) => text.value
4141
);
4242

43-
expect(copyLayer).toEqual("<layer- label=\"CBMT - INLINE\" checked=\"\">\n <map-extent units=\"CBMTILE\" 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=\"/data/cbmt/{zoomLevel}/c{col}_r{row}.png\"></map-link>\n </map-extent>\n </layer->");
43+
expect(copyLayer).toEqual("<layer- label=\"CBMT - INLINE\" checked=\"\">\n <map-link rel=\"license\" title=\"Testing Inc.\"></map-link>\n <map-extent units=\"CBMTILE\" 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->");
4444
});
4545

4646
test("Map zooms in to layer 2", async () => {
@@ -60,7 +60,7 @@ test.describe("Playwright Layer Context Menu Tests", () => {
6060
);
6161

6262
expect(mapZoom).toEqual(11);
63-
expect(mapLocation).toEqual({ max: { x: 43130, y: 43130 }, min: { x: 42630, y: 42630 } });
63+
expect(mapLocation).toEqual({ max: { x: 43380, y: 43130 }, min: { x: 42380, y: 42630 } });
6464
});
6565

6666
test("Map zooms out to layer 3", async () => {
@@ -84,7 +84,7 @@ test.describe("Playwright Layer Context Menu Tests", () => {
8484
);
8585

8686
expect(mapZoom).toEqual(11);
87-
expect(mapLocation).toEqual({ max: { x: 43130, y: 43557 }, min: { x: 42630, y: 43057 } });
87+
expect(mapLocation).toEqual({ max: { x: 43380, y: 43557 }, min: { x: 42380, y: 43057 } });
8888
});
8989

9090
test("Map zooms out to layer 4", async () => {
@@ -108,6 +108,26 @@ test.describe("Playwright Layer Context Menu Tests", () => {
108108
);
109109

110110
expect(mapZoom).toEqual(5);
111-
expect(mapLocation).toEqual({ max: { x: 8084, y: 8084 }, min: { x: 7584, y: 7584 } });
111+
expect(mapLocation).toEqual({ max: { x: 8334, y: 8084 }, min: { x: 7334, y: 7584 } });
112112
});
113-
});
113+
114+
test("Copy layer with relative src attribute", async () => {
115+
await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
116+
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(5) > div:nth-child(1) > label > span",
117+
{ button: "right" });
118+
119+
await page.keyboard.press("l");
120+
await page.click("body > textarea#messageLayer");
121+
await page.keyboard.press("Control+a");
122+
await page.keyboard.press("Backspace");
123+
await page.keyboard.press("Control+v");
124+
const copyLayer = await page.$eval(
125+
"body > textarea#messageLayer",
126+
(text) => text.value
127+
);
128+
129+
expect(copyLayer).toEqual("<layer- src=\"http://localhost:30001/data/query/DouglasFir\" label=\"Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution\"></layer->");
130+
});
131+
132+
133+
});

‎test/e2e/core/mapContextMenu.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
533533
await page.waitForTimeout(200);
534534
await page.click("body > map", {
535535
button: 'right',
536-
position: {x: 495, y: 580}
536+
position: {x: 495, y: 550}
537537
});
538538
const contextMenu = await page.locator('div > div.mapml-contextmenu').first();
539539
expect(await contextMenu.isVisible()).toBeTruthy();

‎test/e2e/mapml-viewer/viewerContextMenu.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@ test.describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {
504504
await page.waitForTimeout(200);
505505
await page.click("body > mapml-viewer", {
506506
button: 'right',
507-
position: {x: 495, y: 580}
507+
position: {x: 495, y: 550}
508508
});
509509
const contextMenu = await page.locator('div > div.mapml-contextmenu').first();
510510
expect(await contextMenu.isVisible()).toBeTruthy();

0 commit comments

Comments
 (0)