Add download canvas image on hover (#214)

* Add image download option on hover

* Add release note

Author: coatless

_extensions/webr/qwebr-compute-engine.js

@@ -31,6 +31,27 @@ globalThis.qwebrLogCodeToHistory = function(codeToRun, options) {
     );
 }
 
+// Function to attach a download button onto the canvas
+// allowing the user to download the image.
+function qwebrImageCanvasDownloadButton(canvas, canvasContainer) {
+
+    // Create the download button
+    const downloadButton = document.createElement('button');
+    downloadButton.className = 'qwebr-canvas-image-download-btn';
+    downloadButton.textContent = 'Download Image';
+    canvasContainer.appendChild(downloadButton);
+
+    // Trigger a download of the image when the button is clicked
+    downloadButton.addEventListener('click', function() {
+        const image = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.href = image;
+        link.download = 'qwebr-canvas-image.png';
+        link.click();
+    });
+  }
+  
+
 // Function to parse the pager results
 globalThis.qwebrParseTypePager = async function (msg) { 
 
@@ -198,14 +219,20 @@ globalThis.qwebrComputeEngine = async function(
 
         // Determine if we have graphs to display
         if (result.images.length > 0) {
+
             // Create figure element
-            const figureElement = document.createElement('figure');
+            const figureElement = document.createElement("figure");
+            figureElement.className = "qwebr-canvas-image";
 
             // Place each rendered graphic onto a canvas element
             result.images.forEach((img) => {
+
                 // Construct canvas for object
                 const canvas = document.createElement("canvas");
 
+                // Add an image download button
+                qwebrImageCanvasDownloadButton(canvas, figureElement);
+
                 // Set canvas size to image
                 canvas.width = img.width;
                 canvas.height = img.height;
@@ -226,17 +253,19 @@ globalThis.qwebrComputeEngine = async function(
 
                 // Append canvas to figure output area
                 figureElement.appendChild(canvas);
-            });
 
+            });
+            
             if (options['fig-cap']) {
                 // Create figcaption element
                 const figcaptionElement = document.createElement('figcaption');
                 figcaptionElement.innerText = options['fig-cap'];
                 // Append figcaption to figure
                 figureElement.appendChild(figcaptionElement);    
             }
-
+        
             elements.outputGraphDiv.appendChild(figureElement);
+
         }
 
         // Display the pager data

_extensions/webr/qwebr-styling.css

@@ -169,6 +169,30 @@ body.quarto-dark .qwebr-button:hover {
   text-decoration: none !important;
 }
 
+/* Styling to download image that is created */
+
+.qwebr-canvas-image {
+  position: relative;
+  display: inline-block;
+  margin: 10px;
+}
+
+.qwebr-canvas-image-download-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: none;
+}
+
+figure:hover .qwebr-canvas-image-download-btn {
+  display: block;
+}
+
 /* Custom styling for RevealJS Presentations*/
 
 /* Reset the style of the interactive area */

docs/qwebr-release-notes.qmd

@@ -25,6 +25,8 @@ Features listed under the `-dev` version have not yet been solidified and may ch
 
 - Added ability to download the R history of commands executed through a new global menu in the right column and underneath Revealjs' "Tools" menu. ([#148](https://github.com/coatless/quarto-webr/issues/148))
 
+- Added a mouse over button to allow for downloading an image when generated. ([#147](https://github.com/coatless/quarto-webr/issues/147))
+
 - Added `cell-options` document-level option to specify global defaults for `{webr-r}` options ([#173](https://github.com/coatless/quarto-webr/pulls/173), thanks [ute](https://github.com/ute)!)
 
 - Added `version` document-level option to specify what version of webR should be used. ([#211](https://github.com/coatless/quarto-webr/issues/211))