Issue #941: downloadScreenshot() added

src/TmFv3DApp/index.tsx

@@ -9,9 +9,12 @@ import { RcsbFvDOMConstants } from "../RcsbFvConstants/RcsbFvConstants";
 import { BlockSelectorManager, FeatureBlockInterface } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 import * as React from "react";
 import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import { PluginContext } from "molstar/lib/mol-plugin/context";
 
 customElements.define(TmFv1DElement.TagName, TmFv1DElement);
 
+let rcsbViewer: TmFv3DCustom|undefined = undefined;
+
 function createRcsb3DViewer(configParams: any) {
     document.addEventListener("DOMContentLoaded", (event) => {
         (async function(event) {
@@ -23,6 +26,7 @@ function createRcsb3DViewer(configParams: any) {
             DebugUtil.log('Panel config', JSON.stringify(panel3dConfig));
 
             const panel3d = new TmFv3DCustom(panel3dConfig);
+            rcsbViewer = panel3d;
             panel3d.render();
 
             const sequenceViewerContainerId = panel3dConfig.sequencePanelConfig.config.customViewContainerId;
@@ -124,9 +128,34 @@ function createBlockSelectorCreator(blockConfigs: Array<BlockConfigType>): Block
     };
 }
 
+async function downloadScreenshot(): Promise<Blob|boolean> {
+    if (!rcsbViewer) {
+        console.log("RCSB Viewer is not initialized. Call createRcsb3DViewer()");
+        return false;
+    }
+    let plugin: PluginContext;
+    let data: string = "";
+    rcsbViewer.pluginCall(pluginCtx => { plugin = pluginCtx; });
+    try {
+        plugin!.helpers.viewportScreenshot!.values.resolution.name = "custom";
+        plugin!.helpers.viewportScreenshot!.values.resolution.params = { width: 100, height: 100 };
+        console.log(plugin!.helpers.viewportScreenshot?.values);
+        data = await plugin!.helpers.viewportScreenshot!.getImageDataUri();
+    } catch (error: any) {
+        console.error('TmFv3DApp: getImageDataUri() failed:' + error);
+    }
+
+    const base64Data = atob(data.split(",")[1]);
+    const byteArray: Uint8Array =  Uint8Array.from(base64Data.split("").map(char => char.charCodeAt(0)));
+
+    return new Blob([ byteArray ], { type: "image/png" });
+}
+
 export {
     DebugUtil,
+    rcsbViewer,
     createRcsb3DViewer,
     createRcsbFeatureViewer,
+    downloadScreenshot,
     TmFv1DElement
 };