Merge pull request #12 from ppp-one/copy-to-clipboard

Copy to clipboard

Author: ppp-one

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to the "simple-fits-viewer" extension will be documented in
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [0.1.1] - 2025-07-28
+
+### Added
+
+- Added copy image to clipboard functionality
+
 ## [0.1.0] - 2025-03-23
 
 ### Added

package.json

@@ -2,7 +2,7 @@
     "name": "simple-fits-viewer",
     "displayName": "Simple FITS viewer",
     "description": "Preview FITS images in VSCode.",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "publisher": "ppp-one",
     "author": "@ppp-one",
     "homepage": "https://github.com/ppp-one/simple-fits-viewer",

webview.html

@@ -200,23 +200,58 @@
         contextMenu.style.borderRadius = "5px";
         contextMenu.style.zIndex = "1000";
 
-        // on hover
-        contextMenu.addEventListener("mouseenter", () => {
-          contextMenu.style.backgroundColor = "#ededed";
-        });
+        // Helper to add hover effect to menu options
+        function addHoverEffect(optionDiv) {
+          optionDiv.addEventListener("mouseenter", () => {
+            optionDiv.style.backgroundColor = "#ededed";
+          });
+          optionDiv.addEventListener("mouseleave", () => {
+            optionDiv.style.backgroundColor = "#fff";
+          });
+        }
 
-        contextMenu.addEventListener("mouseover", () => {
-          contextMenu.style.backgroundColor = "#ededed";
+        // Copy image to clipboard option
+        const copyOption = document.createElement("div");
+        copyOption.textContent = "Copy image to clipboard";
+        copyOption.style.cursor = "pointer";
+        copyOption.style.padding = "3px";
+        addHoverEffect(copyOption);
+
+        copyOption.addEventListener("click", async () => {
+          copyOption.textContent = "Copying...";
+          try {
+            // Use toBlob to get the image as a Blob
+            offscreenCanvas.toBlob(async (blob) => {
+              try {
+                await navigator.clipboard.write([
+                  new ClipboardItem({
+                    "image/png": blob,
+                  }),
+                ]);
+                copyOption.textContent = "Copied!";
+              } catch (err) {
+                copyOption.textContent = "Failed to copy";
+              }
+              setTimeout(() => {
+                copyOption.textContent = "Copy image to clipboard";
+              }, 1000);
+            }, "image/png");
+          } catch (err) {
+            copyOption.textContent = "Failed to copy";
+            setTimeout(() => {
+              copyOption.textContent = "Copy image to clipboard";
+            }, 1000);
+          }
         });
 
-        contextMenu.addEventListener("mouseout", () => {
-          contextMenu.style.backgroundColor = "#fff";
-        });
+        contextMenu.appendChild(copyOption);
 
+        // Save image as png option
         const saveOption = document.createElement("div");
         saveOption.textContent = "Save image as png";
         saveOption.style.cursor = "pointer";
         saveOption.style.padding = "3px";
+        addHoverEffect(saveOption);
 
         saveOption.addEventListener("click", () => {
           console.time("saveOption");