jupyterlab_advanced_image_viewer_extension 1.0.6 → 1.0.9

package/README.md

@@ -18,9 +18,10 @@ The viewer toolbar adds zoom in / out / fit controls and a `help` link that list
 
 - **Fit to screen** - every image opens scaled to fit the panel (same result as the stock viewer), and reset returns to that fit
 - **Wheel zoom** - scroll to zoom in and out, anchored at the cursor; zoom out as far as you like
-- **Drag to pan** - hold and drag to move around a zoomed-in image
+- **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/controller.d.ts

@@ -7,7 +7,6 @@ export declare class ViewerController {
     private panning;
     private start;
     private zoomStep;
-    private ro;
     private disposed;
     constructor(host: HTMLElement, img: HTMLImageElement, zoomStep: number);
     setZoomStep(zoomStep: number): void;
@@ -18,12 +17,9 @@ export declare class ViewerController {
     private onWheel;
     zoomIn(): void;
     zoomOut(): void;
-    private canPan;
-    private clampPan;
     private onDown;
     private onMove;
     private onUp;
-    private onResize;
     private updateCursor;
     private apply;
     dispose(): void;

package/lib/controller.js

@@ -23,9 +23,6 @@ export class ViewerController {
             this.zoomAt(factor, e.clientX - r.left, e.clientY - r.top);
         };
         this.onDown = (e) => {
-            if (!this.canPan()) {
-                return;
-            }
             e.preventDefault();
             this.panning = true;
             this.start = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
@@ -39,7 +36,6 @@ export class ViewerController {
             }
             this.tx = this.start.tx + (e.clientX - this.start.x);
             this.ty = this.start.ty + (e.clientY - this.start.y);
-            this.clampPan();
             this.apply();
         };
         this.onUp = () => {
@@ -65,8 +61,6 @@ export class ViewerController {
         this.layer = layer;
         this.host.addEventListener('wheel', this.onWheel, { passive: false });
         this.host.addEventListener('mousedown', this.onDown);
-        this.ro = new ResizeObserver(() => this.onResize());
-        this.ro.observe(this.host);
         this.apply();
     }
     setZoomStep(zoomStep) {
@@ -99,7 +93,6 @@ export class ViewerController {
         this.tx = ax - cx - k * (ax - cx - this.tx);
         this.ty = ay - cy - k * (ay - cy - this.ty);
         this.s = sNew;
-        this.clampPan();
         this.apply();
     }
     zoomIn() {
@@ -110,24 +103,10 @@ export class ViewerController {
         const { vw, vh } = this.viewport();
         this.zoomAt(1 / (1 + this.zoomStep), vw / 2, vh / 2);
     }
-    canPan() {
-        return this.s > 1;
-    }
-    // Bound the translate to the overflow implied by the zoom so the image
-    // cannot be panned out of view. Range collapses to 0 as s approaches 1.
-    clampPan() {
-        const { vw, vh } = this.viewport();
-        const mx = (Math.max(this.s, 1) - 1) * vw * 0.5;
-        const my = (Math.max(this.s, 1) - 1) * vh * 0.5;
-        this.tx = Math.min(mx, Math.max(-mx, this.tx));
-        this.ty = Math.min(my, Math.max(-my, this.ty));
-    }
-    onResize() {
-        this.clampPan();
-        this.apply();
-    }
+    // Pan is always available (canvas-style): show grab normally, grabbing
+    // while a drag is in progress (apply() re-runs on every pan move).
     updateCursor() {
-        this.host.style.cursor = this.canPan() ? 'grab' : 'default';
+        this.host.style.cursor = this.panning ? 'grabbing' : 'grab';
     }
     apply() {
         this.layer.style.transformOrigin = 'center center';
@@ -139,7 +118,6 @@ export class ViewerController {
             return;
         }
         this.disposed = true;
-        this.ro.disconnect();
         this.host.removeEventListener('wheel', this.onWheel);
         this.host.removeEventListener('mousedown', this.onDown);
         window.removeEventListener('mousemove', this.onMove);

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
@@ -52,7 +56,7 @@ const plugin = {
                 '<p class="jp-AdvancedImageViewer-help-section">This extension</p>',
                 '<ul>',
                 '<li><b>Wheel up / down</b> - zoom in / out at the cursor</li>',
-                '<li><b>Click and drag</b> - pan a zoomed-in image</li>',
+                '<li><b>Click and drag</b> - pan the image at any zoom</li>',
                 '<li><b>Toolbar buttons</b> - zoom in, zoom out, reset to fit</li>',
                 '<li><b>Left / Right arrows</b> - previous / next image in the folder</li>',
                 '</ul>',
@@ -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.6",
+    "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/controller.ts

@@ -19,7 +19,6 @@ export class ViewerController {
   private panning = false;
   private start = { x: 0, y: 0, tx: 0, ty: 0 };
   private zoomStep: number;
-  private ro: ResizeObserver;
   private disposed = false;
 
   constructor(host: HTMLElement, img: HTMLImageElement, zoomStep: number) {
@@ -40,8 +39,6 @@ export class ViewerController {
     this.layer = layer;
     this.host.addEventListener('wheel', this.onWheel, { passive: false });
     this.host.addEventListener('mousedown', this.onDown);
-    this.ro = new ResizeObserver(() => this.onResize());
-    this.ro.observe(this.host);
     this.apply();
   }
 
@@ -79,7 +76,6 @@ export class ViewerController {
     this.tx = ax - cx - k * (ax - cx - this.tx);
     this.ty = ay - cy - k * (ay - cy - this.ty);
     this.s = sNew;
-    this.clampPan();
     this.apply();
   }
 
@@ -100,24 +96,7 @@ export class ViewerController {
     this.zoomAt(1 / (1 + this.zoomStep), vw / 2, vh / 2);
   }
 
-  private canPan(): boolean {
-    return this.s > 1;
-  }
-
-  // Bound the translate to the overflow implied by the zoom so the image
-  // cannot be panned out of view. Range collapses to 0 as s approaches 1.
-  private clampPan(): void {
-    const { vw, vh } = this.viewport();
-    const mx = (Math.max(this.s, 1) - 1) * vw * 0.5;
-    const my = (Math.max(this.s, 1) - 1) * vh * 0.5;
-    this.tx = Math.min(mx, Math.max(-mx, this.tx));
-    this.ty = Math.min(my, Math.max(-my, this.ty));
-  }
-
   private onDown = (e: MouseEvent): void => {
-    if (!this.canPan()) {
-      return;
-    }
     e.preventDefault();
     this.panning = true;
     this.start = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
@@ -132,7 +111,6 @@ export class ViewerController {
     }
     this.tx = this.start.tx + (e.clientX - this.start.x);
     this.ty = this.start.ty + (e.clientY - this.start.y);
-    this.clampPan();
     this.apply();
   };
 
@@ -143,13 +121,10 @@ export class ViewerController {
     window.removeEventListener('mouseup', this.onUp);
   };
 
-  private onResize(): void {
-    this.clampPan();
-    this.apply();
-  }
-
+  // Pan is always available (canvas-style): show grab normally, grabbing
+  // while a drag is in progress (apply() re-runs on every pan move).
   private updateCursor(): void {
-    this.host.style.cursor = this.canPan() ? 'grab' : 'default';
+    this.host.style.cursor = this.panning ? 'grabbing' : 'grab';
   }
 
   private apply(): void {
@@ -163,7 +138,6 @@ export class ViewerController {
       return;
     }
     this.disposed = true;
-    this.ro.disconnect();
     this.host.removeEventListener('wheel', this.onWheel);
     this.host.removeEventListener('mousedown', this.onDown);
     window.removeEventListener('mousemove', this.onMove);

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;
@@ -89,7 +94,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         '<p class="jp-AdvancedImageViewer-help-section">This extension</p>',
         '<ul>',
         '<li><b>Wheel up / down</b> - zoom in / out at the cursor</li>',
-        '<li><b>Click and drag</b> - pan a zoomed-in image</li>',
+        '<li><b>Click and drag</b> - pan the image at any zoom</li>',
         '<li><b>Toolbar buttons</b> - zoom in, zoom out, reset to fit</li>',
         '<li><b>Left / Right arrows</b> - previous / next image in the folder</li>',
         '</ul>',
@@ -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) {