jupyterlab_advanced_image_viewer_extension 1.0.7 → 1.0.9

package/README.md

@@ -21,6 +21,7 @@ The viewer toolbar adds zoom in / out / fit controls and a `help` link that list
 - **Drag to pan** - hold and drag to move the image at any zoom (canvas-style); the grab cursor is always available and Fit recenters
 - **Toolbar controls** - zoom in, zoom out, and reset-to-fit buttons on the viewer toolbar
 - **Arrow-key navigation** - Left and Right open the previous and next image in the same folder, advancing within one viewer instead of opening new tabs
+- **Copy to clipboard** - right-click a raster image (PNG/JPG/…) and choose "Copy to Clipboard" to copy it as PNG to the system clipboard
 
 ## Requirements
 

package/lib/index.js

@@ -10,7 +10,8 @@ const CommandIDs = {
     zoomOut: 'advanced-image-viewer:zoom-out',
     resetFit: 'advanced-image-viewer:reset-fit',
     previous: 'advanced-image-viewer:previous-image',
-    next: 'advanced-image-viewer:next-image'
+    next: 'advanced-image-viewer:next-image',
+    copyClipboard: 'advanced-image-viewer:copy-to-clipboard'
 };
 const IMAGE_EXTS = new Set([
     '.png',
@@ -21,6 +22,9 @@ const IMAGE_EXTS = new Set([
     '.svg',
     '.webp'
 ]);
+// Raster formats that can be drawn to a canvas and copied as PNG. SVG is
+// excluded - the drawio/SVG extension already adds its own "Copy as PNG".
+const RASTER_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp']);
 const defaults = {
     navEnabled: true,
     zoomStep: 0.1
@@ -131,6 +135,59 @@ const plugin = {
             isEnabled: () => currentController() !== null,
             execute: () => { var _a; return (_a = currentController()) === null || _a === void 0 ? void 0 : _a.reset(); }
         });
+        // Resolve the image widget under the context-menu target. Right-click does
+        // not activate the widget, so hit-test the clicked node rather than rely on
+        // tracker.currentWidget.
+        const contextImageWidget = () => {
+            var _a;
+            const node = app.contextMenuHitTest(n => n.classList.contains('jp-ImageViewer'));
+            if (!node) {
+                return null;
+            }
+            return (_a = tracker.find(widget => widget.content.node === node)) !== null && _a !== void 0 ? _a : null;
+        };
+        app.commands.addCommand(CommandIDs.copyClipboard, {
+            label: 'Copy to Clipboard',
+            // Raster only - SVG already has "Copy as PNG" from the drawio extension.
+            isVisible: () => {
+                const widget = contextImageWidget();
+                return (widget !== null &&
+                    RASTER_EXTS.has(PathExt.extname(widget.context.path).toLowerCase()));
+            },
+            execute: async () => {
+                var _a;
+                const img = (_a = contextImageWidget()) === null || _a === void 0 ? void 0 : _a.content.node.querySelector('img');
+                if (!img) {
+                    return;
+                }
+                // Copy the source pixels, not the on-screen zoom/pan/rotate view.
+                const canvas = document.createElement('canvas');
+                canvas.width = img.naturalWidth;
+                canvas.height = img.naturalHeight;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    return;
+                }
+                ctx.drawImage(img, 0, 0);
+                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+                if (!blob) {
+                    return;
+                }
+                try {
+                    await navigator.clipboard.write([
+                        new ClipboardItem({ 'image/png': blob })
+                    ]);
+                }
+                catch (err) {
+                    console.error('Advanced image viewer: clipboard copy failed', err);
+                }
+            }
+        });
+        app.contextMenu.addItem({
+            command: CommandIDs.copyClipboard,
+            selector: '.jp-ImageViewer',
+            rank: 0
+        });
         const navigate = async (delta) => {
             const widget = tracker.currentWidget;
             if (!widget) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.0.7",
+    "version": "1.0.9",
     "description": "JupyterLab extension for advanced image viewing: fit-to-screen, cursor-anchored wheel zoom, drag-to-pan, and Left/Right arrow keys to move to the previous and next image in a folder",
     "keywords": [
         "jupyter",

package/src/index.ts

@@ -31,7 +31,8 @@ const CommandIDs = {
   zoomOut: 'advanced-image-viewer:zoom-out',
   resetFit: 'advanced-image-viewer:reset-fit',
   previous: 'advanced-image-viewer:previous-image',
-  next: 'advanced-image-viewer:next-image'
+  next: 'advanced-image-viewer:next-image',
+  copyClipboard: 'advanced-image-viewer:copy-to-clipboard'
 };
 
 const IMAGE_EXTS = new Set([
@@ -44,6 +45,10 @@ const IMAGE_EXTS = new Set([
   '.webp'
 ]);
 
+// Raster formats that can be drawn to a canvas and copied as PNG. SVG is
+// excluded - the drawio/SVG extension already adds its own "Copy as PNG".
+const RASTER_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp']);
+
 interface ISettingsState {
   navEnabled: boolean;
   zoomStep: number;
@@ -186,6 +191,65 @@ const plugin: JupyterFrontEndPlugin<void> = {
       execute: () => currentController()?.reset()
     });
 
+    // Resolve the image widget under the context-menu target. Right-click does
+    // not activate the widget, so hit-test the clicked node rather than rely on
+    // tracker.currentWidget.
+    const contextImageWidget = (): IDocumentWidget<ImageViewer> | null => {
+      const node = app.contextMenuHitTest(n =>
+        n.classList.contains('jp-ImageViewer')
+      );
+      if (!node) {
+        return null;
+      }
+      return tracker.find(widget => widget.content.node === node) ?? null;
+    };
+
+    app.commands.addCommand(CommandIDs.copyClipboard, {
+      label: 'Copy to Clipboard',
+      // Raster only - SVG already has "Copy as PNG" from the drawio extension.
+      isVisible: () => {
+        const widget = contextImageWidget();
+        return (
+          widget !== null &&
+          RASTER_EXTS.has(PathExt.extname(widget.context.path).toLowerCase())
+        );
+      },
+      execute: async () => {
+        const img = contextImageWidget()?.content.node.querySelector('img');
+        if (!img) {
+          return;
+        }
+        // Copy the source pixels, not the on-screen zoom/pan/rotate view.
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          return;
+        }
+        ctx.drawImage(img, 0, 0);
+        const blob = await new Promise<Blob | null>(resolve =>
+          canvas.toBlob(resolve, 'image/png')
+        );
+        if (!blob) {
+          return;
+        }
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({ 'image/png': blob })
+          ]);
+        } catch (err) {
+          console.error('Advanced image viewer: clipboard copy failed', err);
+        }
+      }
+    });
+
+    app.contextMenu.addItem({
+      command: CommandIDs.copyClipboard,
+      selector: '.jp-ImageViewer',
+      rank: 0
+    });
+
     const navigate = async (delta: number): Promise<void> => {
       const widget = tracker.currentWidget;
       if (!widget) {