Add Copy/Paste Layer options in the context menu (#693)

* Add Copy/Paste Layer Context menu option
Can copy layers through the layer control context menu
Can paste layers on the map through map context menu

- need to add tests

* Add Testing + Validate Paste

* Add submenu for copy in layer control context menu

need to update keyboard access

* Remove layer control submenu

Author: AliyanH

src/mapml/handlers/ContextMenu.js

@@ -86,6 +86,10 @@ export var ContextMenu = L.Handler.extend({
         text: M.options.locale.cmCopyMapML + " (<kbd>M</kbd>)",
         callback:this._copyMapML,
       },
+      {
+        text: M.options.locale.cmPasteLayer + " (<kbd>P</kbd>)",
+        callback:this._pasteLayer,
+      },
       {
         text: M.options.locale.cmViewSource + " (<kbd>V</kbd>)",
         callback:this._viewSource,
@@ -101,6 +105,10 @@ export var ContextMenu = L.Handler.extend({
         text: M.options.locale.lmCopyExtent + " (<kbd>C</kbd>)",
         callback:this._copyLayerExtent
       },
+      {
+        text: M.options.locale.lmCopyLayer + " (<kbd>L</kbd>)",
+        callback:this._copyLayer
+      },
     ];
     this._mapMenuVisible = false;
     this._keyboardEvent = false;
@@ -125,6 +133,7 @@ export var ContextMenu = L.Handler.extend({
     this._items[6].el = this._createItem(this._container, this._items[6]);
     this._items[7].el = this._createItem(this._container, this._items[7]);
     this._items[8].el = this._createItem(this._container, this._items[8]);
+    this._items[9].el = this._createItem(this._container, this._items[9]);
 
     this._layerMenu = L.DomUtil.create("div", "mapml-contextmenu mapml-layer-menu", map._container);
     this._layerMenu.setAttribute('hidden', '');
@@ -194,6 +203,12 @@ export var ContextMenu = L.Handler.extend({
     context._layerClicked.layer._layerEl.focus();
   },
 
+  _copyLayer: function (e) {
+    let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu,
+      layerElem = context._layerClicked.layer._layerEl;
+    context._copyData(layerElem.outerHTML);
+  },
+
   _goForward: function(e){
     let mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
     mapEl.forward();
@@ -220,6 +235,22 @@ export var ContextMenu = L.Handler.extend({
     context._copyData(mapEl.outerHTML.replace(/<div class="mapml-web-map">.*?<\/div>|<style>\[is="web-map"].*?<\/style>|<style>mapml-viewer.*?<\/style>/gm, ""));
   },
 
+  // Add support for pasting GeoJSON in the future
+  _pasteLayer: function(e){
+    let context = e instanceof KeyboardEvent ? this._map.contextMenu : this.contextMenu,
+      mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
+    navigator.clipboard
+      .readText()
+      .then(
+          (layer) => {
+            layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+            if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
+              mapEl.insertAdjacentHTML("beforeend", layer);
+            }
+        }
+      );
+  },
+
   _viewSource: function(e){
     let mapEl = e instanceof KeyboardEvent?this._map.options.mapEl:this.options.mapEl;
     mapEl.viewSource();
@@ -552,7 +583,7 @@ export var ContextMenu = L.Handler.extend({
       } else {
         this._layerMenuTabs += 1;
       }
-      if(this._layerMenuTabs === 0 || this._layerMenuTabs === 3 || key === 27){
+      if(this._layerMenuTabs === 0 || this._layerMenuTabs === 4 || key === 27){
         L.DomEvent.stop(e);
         this._focusOnLayerControl();
       } 
@@ -586,6 +617,13 @@ export var ContextMenu = L.Handler.extend({
       case 70: //F KEY
         this._goForward(e);
         break;
+      case 76: //L KEY
+        if(this._layerClicked)
+          this._copyLayer(e);
+        break;
+      case 80: //P KEY
+        this._pasteLayer(e);
+        break;
       case 82: //R KEY
         this._reload(e);
         break;

src/mapml/options.js

@@ -9,10 +9,12 @@ export var Options = {
     cmCopyCoords: "Copy Coordinates",
     cmToggleDebug: "Toggle Debug Mode",
     cmCopyMapML: "Copy MapML",
+    cmPasteLayer: "Paste",
     cmViewSource: "View Map Source",
     cmCopyAll: "All",
     lmZoomToLayer: "Zoom To Layer",
     lmCopyExtent: "Copy Extent",
+    lmCopyLayer: "Copy Layer",
     lcOpacity: "Opacity",
     btnZoomIn: "Zoom in",
     btnZoomOut: "Zoom out",

test/e2e/core/layerContextMenu.html

@@ -25,10 +25,10 @@
   <mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
     <layer- label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE">
-        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
-        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
-        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
-        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel="tile" tref="/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
       </map-extent>
     </layer->
     <layer- label="Layer 2" checked>
@@ -58,7 +58,8 @@
       <map-tile zoom="6" row="51" col="51" src="/data/cbmt/2/c9_r10.png"></map-tile>
     </layer->
   </mapml-viewer>
-  <textarea name="message" rows="10" cols="100"></textarea>
+  <textarea id="messageExtent" name="messageExtent" rows="10" cols="100"></textarea>
+  <textarea id="messageLayer" name="messageLayer" rows="10" cols="100"></textarea>
 </body>
 
 </html>

test/e2e/core/layerContextMenu.test.js

@@ -29,16 +29,32 @@ test.describe("Playwright Layer Context Menu Tests", () => {
 
   test("Layer context menu copy layer extent", async () => {
     await page.keyboard.press("c");
-    await page.click("body > textarea");
+    await page.click("body > textarea#messageExtent");
     await page.keyboard.press("Control+v");
     const copyValue = await page.$eval(
-      "body > textarea",
+      "body > textarea#messageExtent",
       (text) => text.value
     );
 
     expect(copyValue).toEqual("<map-meta name=\"extent\" content=\"top-left-easting=-6207743.103886206, top-left-northing=10861943.103886206, bottom-right-easting=3952277.216154434, bottom-right-northing=-3362085.3441706896\"></map-meta>");
   });
 
+  test("Layer context menu copy layer", async () => {
+    await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
+    await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span",
+      { button: "right" });
+    
+    await page.keyboard.press("l");
+    await page.click("body > textarea#messageLayer");
+    await page.keyboard.press("Control+v");
+    const copyLayer = await page.$eval(
+      "body > textarea#messageLayer",
+      (text) => text.value
+    );
+    
+    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->");
+  });
+
   test("Map zooms in to layer 2", async () => {
     await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
     await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > label > span",

test/e2e/core/mapContextMenu.test.js

@@ -20,6 +20,7 @@ test.describe("Playwright Map Context Menu Tests", () => {
   let context;
   test.beforeAll(async () => {
     context = await chromium.launchPersistentContext('');
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
     page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
     await page.goto("mapElement.html");
   });
@@ -223,10 +224,10 @@ test.describe("Playwright Map Context Menu Tests", () => {
     await page.keyboard.press("Enter");
     await page.click("#mapml-copy-submenu > button:nth-child(10)");
 
-    await page.click("body > textarea");
+    await page.click("body > textarea#coord");
     await page.keyboard.press("Control+v");
     const copyValue = await page.$eval(
-      "body > textarea",
+      "body > textarea#coord",
       (text) => text.value
     );
     let expected = "z:1\n";
@@ -239,4 +240,35 @@ test.describe("Playwright Map Context Menu Tests", () => {
 
     expect(copyValue).toEqual(expected);
   });
+
+  test("Paste valid Layer to map", async () => {
+    await page.click("body > textarea#layer");
+    await page.keyboard.press("Control+a");
+    await page.keyboard.press("Control+c");
+
+    await page.click("body > map");
+    await page.keyboard.press("Shift+F10");
+    await page.keyboard.press("p");
+
+    const layerLabel = await page.$eval(
+      "body > map",
+      (map) => map.layers[1].label
+    );
+    expect(layerLabel).toEqual("Test Layer");
+  });
+
+  test("Paste invalid element to map", async () => {
+    await page.click("body > textarea#invalidLayer");
+    await page.keyboard.press("Control+a");
+    await page.keyboard.press("Control+c");
+
+    await page.click("body > map");
+    await page.keyboard.press("Shift+F10");
+    await page.keyboard.press("p");
+    const layerCount = await page.$eval(
+      "body > map",
+      (map) => map.children.length
+    );
+    expect(layerCount).toEqual(4);
+  });
 });

test/e2e/core/mapElement.html

@@ -26,18 +26,31 @@
   <map style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
     <layer- label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE">
-        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3" ></map-input>
-        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21" ></map-input>
-        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19" ></map-input>
-        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png' ></map-link>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
       </map-extent>
     </layer->
   </map>
 
   <map style="height: 600px;width:500px;" is="web-map" id="default-projection" zoom="0" lat="47" lon="-92" controls>
   </map>
-  
-  <textarea name="message" rows="10" cols="100"></textarea>
+
+  <textarea name="message" id="coord" rows="10" cols="100"></textarea>
+  <textarea name="message" id="layer" rows="10" cols="100">
+    <layer- label="Test Layer" checked="">
+   <map-meta name="projection" content="CBMTILE"></map-meta>
+   <map-feature>
+      <map-geometry cs="pcrs">
+         <map-polygon>
+            <map-coordinates>257421 -3567196 -271745 1221771 -3896544 242811 -3183549 -2613313</map-coordinates>
+         </map-polygon>
+      </map-geometry>
+   </map-feature>
+</layer->
+  </textarea>
+  <textarea name="message" id="invalidLayer" rows="10" cols="100"><b>test</b></textarea>
 </body>
 
 </html>