WIP: Pass thru with download button, take 2

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Don't set RTL text plugin if already in progress
 - Add branch name to screenshots if looking at branch pattern
 - Add precompile option
+- Add download screenshot button
 
 ## 0.17.0
 

src/components/MapControls.svelte

@@ -3,6 +3,7 @@
   import html2canvas from 'html2canvas';
   import {
     faCamera,
+    faDownload,
     faPlus,
     faExpand,
     faCompress,
@@ -107,6 +108,65 @@
       return false;
     };
 
+    html2canvas(mapsView, { ignoreElements }).then(canvas => {
+      canvas.toBlob(blob => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        const prefix = 'screenshot'; // Ideally get from currently selected map type(s), or even better from a prefix optionally defined in the config
+        link.download = `${prefix}-${mapState.zoom}_${mapState.center.lat}_${mapState.center.lng}_${mapState.pitch}_${mapState.bearing}.png`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      });
+    });
+
+    // Cleanup labels
+    adjustedLabels.forEach(el => {
+      el.classList.remove('screenshot-label');
+      el.classList.add('screenshot-label-transparent');
+    });
+
+    // Cleanup for mirror mode border
+    if (viewMode === 'mirror') {
+      adjustedBorders.forEach(el => {
+        el.classList.remove('map-container-border-transparent');
+        el.classList.add('map-container-border');
+      });
+    }
+  };
+
+  const copyScreenshotToClipboard = async () => {
+    const mapsView = document.getElementsByClassName('maps')[0];
+
+    let adjustedLabels = [
+      ...document.getElementsByClassName('screenshot-label-transparent'),
+    ];
+    adjustedLabels.forEach(el => {
+      el.classList.remove('screenshot-label-transparent');
+      el.classList.add('screenshot-label');
+    });
+
+    let adjustedBorders = [];
+    // Remove border on mirror mode screenshot
+    if (viewMode === 'mirror') {
+      adjustedBorders = [
+        ...document.getElementsByClassName('map-container-border'),
+      ];
+      adjustedBorders.forEach(el => {
+        el.classList.remove('map-container-border');
+        el.classList.add('map-container-border-transparent');
+      });
+    }
+
+    const ignoreElements = el => {
+      if (el.className && typeof el.className === 'string') {
+        return el.className.includes('map-label');
+      }
+      return false;
+    };
+
     html2canvas(mapsView, { ignoreElements }).then(canvas => {
       canvas.toBlob(blob =>
         navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
@@ -219,7 +279,7 @@
             <Fa icon={faPlus} /> Add map
           </button>
           <button
-            on:click={downloadScreenshot}
+            on:click={copyScreenshotToClipboard}
             disabled={viewMode === 'swipe'}
             title={viewMode === 'swipe'
               ? 'Must be in phone or mirror mode to screenshot.'
@@ -228,6 +288,15 @@
             <Fa icon={faCamera} />
             Copy image
           </button>
+          <button
+            on:click={downloadScreenshot}
+            disabled={viewMode === 'swipe'}
+            title={viewMode === 'swipe'
+              ? 'Must be in phone or mirror mode to screenshot.'
+              : 'Copy image to clipboard'}
+          >
+            <Fa icon={faDownload} />
+          </button>
         </div>
       </div>
       <div class="control-section">

src/components/MapStyleInputWrapper.svelte

@@ -129,7 +129,9 @@
         return {
           ...item,
           dropdownType: 'preset',
-          selected: url === item?.url && type === item?.type,
+          selected: map.id
+            ? map.id === item.id
+            : url === item?.url && type === item?.type,
           dropdownId: hat(),
           ...(item.precompile && {
             selectedPrecompileOption:
@@ -142,7 +144,9 @@
             presets: item.presets.map(v => ({
               ...v,
               dropdownType: 'preset',
-              selected: url === v?.url && type === v?.type,
+              selected: map.id
+                ? map.id === v.id
+                : url === v?.url && type === v?.type,
               dropdownId: hat(),
               ...(v.precompile && {
                 selectedPrecompileOption: