From f9a23ba3f3b9442871f06f3bdb397ce7e3cfbab9 Mon Sep 17 00:00:00 2001
From: Philipp Wambach <philippwambach@googlemail.com>
Date: Mon, 20 Jul 2020 17:50:52 +0200
Subject: [PATCH] feat(globe): add screenshot export

---
 .../globe-navigation/globe-navigation.tsx     |  3 +-
 src/scripts/components/globe/globe.tsx        |  7 +++-
 src/scripts/libs/download-screenshot.ts       | 42 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/scripts/libs/download-screenshot.ts

diff --git a/src/scripts/components/globe-navigation/globe-navigation.tsx b/src/scripts/components/globe-navigation/globe-navigation.tsx
index c516df828..5326220a5 100644
--- a/src/scripts/components/globe-navigation/globe-navigation.tsx
+++ b/src/scripts/components/globe-navigation/globe-navigation.tsx
@@ -8,6 +8,7 @@ import {DownloadIcon} from '../icons/download-icon';
 import setGlobeProjectionAction from '../../actions/set-globe-projection';
 import {projectionSelector} from '../../selectors/globe/projection';
 import setFlyToAction from '../../actions/set-fly-to';
+import {downloadScreenshot} from '../../libs/download-screenshot';
 
 import {GlobeProjection} from '../../types/globe-projection';
 
@@ -40,7 +41,7 @@ const GlobeNavigation: FunctionComponent = () => {
       <Button
         className={styles.downloadIcon}
         icon={DownloadIcon}
-        onClick={() => console.log('placeholder')}
+        onClick={() => downloadScreenshot()}
       />
     </div>
   );
diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
index a30a87047..0fdbe70b4 100644
--- a/src/scripts/components/globe/globe.tsx
+++ b/src/scripts/components/globe/globe.tsx
@@ -36,7 +36,12 @@ const cesiumOptions = {
   navigationHelpButton: false,
   animation: false,
   timeline: false,
-  baseLayerPicker: false
+  baseLayerPicker: false,
+  contextOptions: {
+    webgl: {
+      preserveDrawingBuffer: true
+    }
+  }
 };
 
 interface Props {
diff --git a/src/scripts/libs/download-screenshot.ts b/src/scripts/libs/download-screenshot.ts
new file mode 100644
index 000000000..f31cfb651
--- /dev/null
+++ b/src/scripts/libs/download-screenshot.ts
@@ -0,0 +1,42 @@
+// Downloads one or both Cesium canvases as an image file
+export function downloadScreenshot() {
+  const canvases = Array.from(
+    document.querySelectorAll('.cesium-viewer canvas') as NodeListOf<
+      HTMLCanvasElement
+    >
+  );
+
+  const finalCanvas = combineCanvases(canvases);
+  download(finalCanvas.toDataURL());
+}
+
+function combineCanvases(canvases: HTMLCanvasElement[]) {
+  if (canvases.length < 2) {
+    return canvases[0];
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  const ctx = canvas.getContext('2d');
+
+  canvases.forEach((tmpCanvas, index) =>
+    ctx?.drawImage(tmpCanvas, (window.innerWidth / 2) * index, 0)
+  );
+
+  return canvas;
+}
+
+function download(url: string) {
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', 'globe.png');
+  link.style.display = 'none';
+
+  document.body.appendChild(link);
+
+  setTimeout(() => {
+    link.click();
+    document.body.removeChild(link);
+  }, 1);
+}