Paste Layers using Ctrl+v

Maps4HTML · Dec 20, 2022 · 124fccd · 124fccd
1 parent 295224f
commit 124fccd
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -368,6 +368,24 @@ export class MapViewer extends HTMLElement {
               {target: this}}));
       }
     });
+    // pasting layer- and geojson using Ctrl+V 
+    this.parentElement.addEventListener('keydown', function (e) {
+      if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "MAPML-VIEWER"){
+        navigator.clipboard
+          .readText()
+          .then(
+            (layer) => {
+              layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+              if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
+                document.activeElement.insertAdjacentHTML("beforeend", layer);
+              } else {
+                try {
+                  document.activeElement.geojson2mapml(JSON.parse(layer));
+                } catch {
+                  console.log("Invalid Paste!");
+                }}});
+      }
+    });
     this.parentElement.addEventListener('mousedown', function (e) {
       if(document.activeElement.nodeName === "MAPML-VIEWER"){
         document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:

diff --git a/src/web-map.js b/src/web-map.js
@@ -409,6 +409,24 @@ export class WebMap extends HTMLMapElement {
               {target: this}}));
       }
     });
+    // pasting layer- and geojson using Ctrl+V 
+    this.parentElement.addEventListener('keydown', function (e) {
+      if(e.keyCode === 86 && e.ctrlKey && document.activeElement.nodeName === "MAPML-VIEWER"){
+        navigator.clipboard
+          .readText()
+          .then(
+            (layer) => {
+              layer = layer.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '').trim();
+              if ((layer.slice(0,7) === "<layer-") && (layer.slice(-9) === "</layer->")) {
+                document.activeElement.insertAdjacentHTML("beforeend", layer);
+              } else {
+                try {
+                  document.activeElement.geojson2mapml(JSON.parse(layer));
+                } catch {
+                  console.log("Invalid Paste!");
+                }}});
+      }
+    });
     this.parentElement.addEventListener('mousedown', function (e) {
       if(document.activeElement.nodeName === "MAPML-VIEWER"){
         document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:

diff --git a/test/e2e/mapml-viewer/mapml-viewer.html b/test/e2e/mapml-viewer/mapml-viewer.html
@@ -38,6 +38,7 @@
     </layer->
   </mapml-viewer>
   <textarea name="message" rows="10" cols="100"></textarea>
+  <textarea id="copyGeoJSON" name="message" rows="10" cols="100">{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"coordinates": [29.93926429273742,26.465501185936787],"type": "Point"}}]}</textarea>
 </body>
 
 </html>
diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js
@@ -25,6 +25,7 @@ test.describe("Playwright mapml-viewer Element 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();
     page = await context.newPage();
     await page.goto("mapml-viewer.html");
@@ -121,4 +122,17 @@ test.describe("Playwright mapml-viewer Element Tests", () => {
       });
     });
   });
+  test("Paste Layer to map using ctrl+v", async () => {
+   await page.click("body > textarea#copyGeoJSON");
+   await page.keyboard.press("Control+a");
+   await page.keyboard.press("Control+c");
+
+   await page.click("body > mapml-viewer");
+   await page.keyboard.press('Control+v');
+   const layerCount = await page.$eval(
+     "body > mapml-viewer", 
+     (map) => map.layers.length
+   );
+   expect(layerCount).toEqual(2);
+  });
 });