From f3ada784635ebdda595a8697ebe10b7b4f8b5c3e Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 23 Apr 2021 16:21:38 +0100
Subject: [PATCH] feat(viewer): adds native screenshot capability (image/png)

---
 packages/viewer/example/example.html           |  3 ++-
 packages/viewer/src/app.js                     | 18 +++++++++++++++++-
 packages/viewer/src/assets/example.html        |  3 ++-
 .../viewer/src/modules/InteractionHandler.js   |  2 +-
 packages/viewer/src/modules/Viewer.js          |  4 ++--
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/viewer/example/example.html b/packages/viewer/example/example.html
index 56b938bbf..082489bca 100644
--- a/packages/viewer/example/example.html
+++ b/packages/viewer/example/example.html
@@ -28,10 +28,11 @@
           <button onclick="v.interactions.zoomExtents()">Zoom Extents</button>
           <button onclick="v.interactions.toggleSectionBox()">Toggle Section Box</button>
           <button onclick="v.interactions.rotateCamera(undefined, undefined, false)">Rotate</button>
+          <button onclick="viewerScreenshot()">Screenshot</button>
         </div>
         <div class="twelve columns">
           <input id="objectUrlInput" type="text" name="objectId" placeholder="Object Url" style="width:49%" value="https://staging.speckle.dev/streams/a75ab4f10f/objects/a59617590b0bec4e9b5ee487ee75b1a7"/>
-          <button class="" onclick="LoadData()" style="width:49%">Load Object URL</button>
+          <button class="" onclick="loadData()" style="width:49%">Load Object URL</button>
         </div>
         <div class="twelve columns">
           <button onclick="v.sceneManager.removeAllObjects()">Dispose Everything</button>
diff --git a/packages/viewer/src/app.js b/packages/viewer/src/app.js
index cbca76ae9..412399ed1 100644
--- a/packages/viewer/src/app.js
+++ b/packages/viewer/src/app.js
@@ -11,7 +11,23 @@ window.addEventListener( 'load', () => {
 
 const token = 'e844747dc6f6b0b5c7d5fbd82d66de6e9529531d75'
 
-window.LoadData = async function LoadData( url ) {
+window.loadData = async function LoadData( url ) {
   url = url || document.getElementById( 'objectUrlInput' ).value
   await v.loadObject( url, token )
 }
+
+window.viewerScreenshot = function() {
+  let data = v.interactions.screenshot() // transparent png.
+
+  let pop = window.open()
+  pop.document.title = 'super screenshot'
+  pop.document.body.style.backgroundColor = 'grey'
+
+  let img = new Image()
+  img.src = data
+  pop.document.body.appendChild( img )
+}
+
+window.zoomFast = function(){
+  v.interactions.zoomExtents( 0.95, false )
+}
diff --git a/packages/viewer/src/assets/example.html b/packages/viewer/src/assets/example.html
index 5267fb546..c2200cebb 100644
--- a/packages/viewer/src/assets/example.html
+++ b/packages/viewer/src/assets/example.html
@@ -28,10 +28,11 @@
           <button onclick="v.interactions.zoomExtents()">Zoom Extents</button>
           <button onclick="v.interactions.toggleSectionBox()">Toggle Section Box</button>
           <button onclick="v.interactions.rotateCamera(undefined, undefined, false)">Rotate</button>
+          <button onclick="viewerScreenshot()">Screenshot</button>
         </div>
         <div class="twelve columns">
           <input id="objectUrlInput" type="text" name="objectId" placeholder="Object Url" style="width:49%" value="https://staging.speckle.dev/streams/a75ab4f10f/objects/a59617590b0bec4e9b5ee487ee75b1a7"/>
-          <button class="" onclick="LoadData()" style="width:49%">Load Object URL</button>
+          <button class="" onclick="loadData()" style="width:49%">Load Object URL</button>
         </div>
         <div class="twelve columns">
           <button onclick="v.sceneManager.removeAllObjects()">Dispose Everything</button>
diff --git a/packages/viewer/src/modules/InteractionHandler.js b/packages/viewer/src/modules/InteractionHandler.js
index d755e8ffe..ef2b531a6 100644
--- a/packages/viewer/src/modules/InteractionHandler.js
+++ b/packages/viewer/src/modules/InteractionHandler.js
@@ -150,6 +150,6 @@ export default class InteractionHandler {
   }
 
   screenshot() {
-    return this.viewer.renderer.domElement.toDataUrl()
+    return this.viewer.renderer.domElement.toDataURL( 'image/png' )
   }
 }
diff --git a/packages/viewer/src/modules/Viewer.js b/packages/viewer/src/modules/Viewer.js
index 18fbd0b0c..ab58d2f3b 100644
--- a/packages/viewer/src/modules/Viewer.js
+++ b/packages/viewer/src/modules/Viewer.js
@@ -26,7 +26,7 @@ export default class Viewer extends EventEmitter {
     this.camera.position.set( 1, 1, 1 )
     this.camera.updateProjectionMatrix()
 
-    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } )
+    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true, preserveDrawingBuffer: true } )
     this.renderer.setClearColor( 0xcccccc, 0 )
     this.renderer.setPixelRatio( window.devicePixelRatio )
     this.renderer.setSize( this.container.offsetWidth, this.container.offsetHeight )
@@ -44,7 +44,7 @@ export default class Viewer extends EventEmitter {
 
     CameraControls.install( { THREE: THREE } )
     this.controls = new CameraControls( this.camera, this.renderer.domElement )
-    // this.controls.maxPolarAngle = Math.PI / 2
+    this.controls.maxPolarAngle = Math.PI / 2
 
     this.composer = new EffectComposer( this.renderer )