From 7a53ef8de80d3be2e59be51e0511f0704739a1ce Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sun, 3 Nov 2024 20:44:05 -0700
Subject: [PATCH] Add download image button

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 includes/GlModelHooks.php | 11 +++++++++--
 modules/glmv.js           | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/includes/GlModelHooks.php b/includes/GlModelHooks.php
index e224910..fd75a9b 100644
--- a/includes/GlModelHooks.php
+++ b/includes/GlModelHooks.php
@@ -65,7 +65,8 @@ class GlModelHooks {
      * @return bool|void True to continue default processing or false to abort for custom processing
      */
     public static function onAlternateEditPreview( $editor, $content, string &$previewHTML, ?ParserOutput &$parserOutput ) {
-        $file = MediaWikiServices::getInstance()->getRepoGroup()->findFile($editor->getTitle());
+        $title = $editor->getTitle();
+        $file = MediaWikiServices::getInstance()->getRepoGroup()->findFile($title);
         if (!$file || $file->getMimeType() !== 'model/gltf-binary') {
             return true;
         }
@@ -91,10 +92,16 @@ class GlModelHooks {
             'onclick' => 'readyDelHotspot()'
         );
 
+        $dldButtonAttr = array(
+            'class' => 'preview-button MakeImage',
+            'onclick' => 'downloadImage("' . $title . '")'
+        );
+
         $addHsButton = array(
             Html::rawElement('button',$addButtonAttr,'Add a new hotspot'),
             Html::rawElement('button',$readButtonAttr,'Update hotspots'),
-            Html::rawElement('button',$delButtonAttr,'Delete hotspot')
+            Html::rawElement('button',$delButtonAttr,'Delete hotspot'),
+            Html::rawElement('button',$dldButtonAttr,'Download image')
         );
 
         $previewHTML = Html::rawElement('div',NULL,$previewViewer.implode($addHsButton));
diff --git a/modules/glmv.js b/modules/glmv.js
index 3c8784a..201aa20 100644
--- a/modules/glmv.js
+++ b/modules/glmv.js
@@ -392,4 +392,29 @@ enableViewer = function() {
     previewMv[0].disableTap = false
     previewMv[0].toggleAttribute('camera-controls', true)
     return previewMv[0]
+}
+
+/**
+ * Use the model viewer methods to get image 
+ * of current view and download
+ * 
+ * @param {string} defName wiki page name to use as base file name
+ */
+downloadImage = function(defName) {
+    const imgName = defName.substring(5).split('.')[0]
+    const mView = $('model-viewer')[0]
+
+    const dlA = document.createElement('a')
+    dlA.setAttribute('download',imgName + '.png')
+
+    const reader = new FileReader()
+    reader.addEventListener("load", () => {
+        dlA.setAttribute('href',reader.result)
+        dlA.click()
+    },{once: true})
+
+    mView.toBlob(null, null, true)
+        .then(imgBlob => {
+            reader.readAsDataURL(imgBlob)
+        })
 }
\ No newline at end of file