Add Screenshot functionality (#44)

* Add screenshot button

* Move screenshot button to menu

* Add option for screenshots to be copied to clipboard

* Update English and Spanish lang files

public/lang/en.js

@@ -78,6 +78,11 @@ export default {
     compass: {
         tooltip: "Compass / Face North"
     },
+    screenshot: {
+        title: "Screenshot",
+        button: "Take Screenshot",
+        clipboard: "Copy to Clipboard"
+    },
     controls: {
         title: "View / Controls",
         perspective: {

public/lang/es.js

@@ -76,6 +76,11 @@ export default {
     compass: {
         tooltip: "Brújula / Norte"
     },
+    screenshot: {
+        title: "Captura de Pantalla",
+        button: "Tomar Captura de Pantalla",
+        clipboard: "Copiar al Portapapeles",
+    },
     controls: {
         title: "Vista / Controles",
         perspective: {

src/components/Menu/MainMenu.vue

@@ -13,6 +13,7 @@
       <hr>
       <SimpleButton @action="goFullscreen">{{ $t("goFullscreen.button") }}</SimpleButton>
       <SimpleButton @action="$bluemap.resetCamera()">{{ $t("resetCamera.button") }}</SimpleButton>
+      <SimpleButton @action="$bluemap.takeScreenshot()">{{ $t("screenshot.button") }}</SimpleButton>
       <SimpleButton @action="$bluemap.updateMap()" :title="$t('updateMap.tooltip')">{{ $t("updateMap.button") }}</SimpleButton>
     </div>
 

src/components/Menu/SettingsMenu.vue

@@ -41,6 +41,10 @@
       >{{theme.name}}</SimpleButton>
     </Group>
 
+    <Group :title="$t('screenshot.title')">
+      <SwitchButton :on="appState.screenshot.clipboard" @action="appState.screenshot.clipboard = !appState.screenshot.clipboard; $bluemap.saveUserSettings()">{{ $t("screenshot.clipboard") }}</SwitchButton>
+    </Group>
+
     <Group v-if="$i18n.languages.length > 1" :title="$t('language.title')">
       <SimpleButton v-for="lang of $i18n.languages" :key="lang.locale"
                     :active="lang.locale === $i18n.locale"

src/i18n/fallback.js

@@ -78,6 +78,11 @@ export default {
 	compass: {
 		tooltip: "Compass / Face North"
 	},
+	screenshot: {
+		title: "Screenshot",
+		button: "Take Screenshot",
+    clipboard: "Copy to Clipboard"
+	},
 	controls: {
 		title: "View / Controls",
 		perspective: {

src/js/BlueMapApp.js

@@ -96,6 +96,9 @@ export class BlueMapApp {
             menu: this.mainMenu,
             maps: [],
             theme: null,
+            screenshot: {
+                clipboard: true
+            },
             debug: false
         };
 
@@ -518,6 +521,10 @@ export class BlueMapApp {
         }
     }
 
+    setScreenshotClipboard(clipboard) {
+        this.appState.screenshot.clipboard = clipboard;
+    }
+
     async updateMap() {
         try {
             this.mapViewer.clearTileCache();
@@ -559,6 +566,7 @@ export class BlueMapApp {
         this.appState.controls.pauseTileLoading = this.loadUserSetting("pauseTileLoading", this.appState.controls.pauseTileLoading);
         this.updateControlsSettings();
         this.setTheme(this.loadUserSetting("theme", this.appState.theme));
+        this.setScreenshotClipboard(this.loadUserSetting("screenshotClipboard", this.appState.screenshot.clipboard));
         await i18n.setLanguage(this.loadUserSetting("lang", i18n.locale));
         this.setDebug(this.loadUserSetting("debug", this.appState.debug));
 
@@ -578,6 +586,7 @@ export class BlueMapApp {
         this.saveUserSetting("invertMouse", this.appState.controls.invertMouse);
         this.saveUserSetting("pauseTileLoading", this.appState.controls.pauseTileLoading);
         this.saveUserSetting("theme", this.appState.theme);
+        this.saveUserSetting("screenshotClipboard", this.appState.screenshot.clipboard);
         this.saveUserSetting("lang", i18n.locale);
         this.saveUserSetting("debug", this.appState.debug);
 
@@ -704,4 +713,20 @@ export class BlueMapApp {
         }
     }
 
+    takeScreenshot = () => {
+        let link = document.createElement("a");
+        link.download = "bluemap-screenshot.png";
+        link.href = this.mapViewer.renderer.domElement.toDataURL('image/png');
+        link.click();
+
+        if (this.appState.screenshot.clipboard) {
+            this.mapViewer.renderer.domElement.toBlob(blob => {
+                // eslint-disable-next-line no-undef
+                navigator.clipboard.write([new ClipboardItem({ ['image/png']: blob })]).catch(e => {
+                    alert(this.events, "Failed to copy screenshot to clipboard: " + e, "error");
+                });
+            });
+        }
+    }
+
 }