jupyterlab_advanced_image_viewer_extension 1.0.7 → 1.0.11

package/README.md

@@ -21,6 +21,8 @@ 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
+- **Refresh** - a toolbar refresh button reloads the image from disk, the same control the HTML viewer provides
 
 ## Requirements
 

package/lib/index.js

@@ -2,6 +2,7 @@ import { Dialog, showDialog, Toolbar, ToolbarButton } from '@jupyterlab/apputils
 import { PathExt } from '@jupyterlab/coreutils';
 import { IImageTracker } from '@jupyterlab/imageviewer';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { refreshIcon } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import { ViewerController } from './controller';
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
@@ -10,7 +11,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 +23,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
@@ -86,6 +91,17 @@ const plugin = {
                 controller.dispose();
                 controllers.delete(viewer);
             });
+            // Reload from disk, like the HTML viewer's refresh button. That button
+            // skips the reload while the model is dirty; an image model is never
+            // edited, so there is nothing here to discard.
+            widget.toolbar.addItem('advanced-refresh', new ToolbarButton({
+                icon: refreshIcon,
+                tooltip: 'Reload image from disk',
+                onClick: async () => {
+                    await widget.context.revert();
+                    widget.update();
+                }
+            }));
             widget.toolbar.addItem('advanced-zoom-out', new ToolbarButton({
                 label: '-',
                 tooltip: 'Zoom out',
@@ -131,6 +147,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.11",
     "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",
@@ -62,6 +62,7 @@
         "@jupyterlab/docregistry": "^4.0.0",
         "@jupyterlab/imageviewer": "^4.0.0",
         "@jupyterlab/settingregistry": "^4.0.0",
+        "@jupyterlab/ui-components": "^4.0.0",
         "@lumino/disposable": "^2.0.0",
         "@lumino/widgets": "^2.0.0"
     },

package/src/index.ts

@@ -18,6 +18,8 @@ import { IImageTracker, ImageViewer } from '@jupyterlab/imageviewer';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { refreshIcon } from '@jupyterlab/ui-components';
+
 import { IDisposable } from '@lumino/disposable';
 
 import { Widget } from '@lumino/widgets';
@@ -31,7 +33,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 +47,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;
@@ -129,6 +136,20 @@ const plugin: JupyterFrontEndPlugin<void> = {
         controllers.delete(viewer);
       });
 
+      // Reload from disk, like the HTML viewer's refresh button. That button
+      // skips the reload while the model is dirty; an image model is never
+      // edited, so there is nothing here to discard.
+      widget.toolbar.addItem(
+        'advanced-refresh',
+        new ToolbarButton({
+          icon: refreshIcon,
+          tooltip: 'Reload image from disk',
+          onClick: async () => {
+            await widget.context.revert();
+            widget.update();
+          }
+        })
+      );
       widget.toolbar.addItem(
         'advanced-zoom-out',
         new ToolbarButton({
@@ -186,6 +207,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) {