jupyterlab_advanced_image_viewer_extension 1.0.5 → 1.0.7

package/README.md

@@ -10,11 +10,15 @@
 
 A JupyterLab 4 extension that makes the built-in image viewer interactive. Images open fitted to the panel just like the stock viewer, then you can zoom with the wheel, pan by dragging, and step through a folder of images with the arrow keys - all in a single viewer tab.
 
+![Advanced image viewer](https://raw.githubusercontent.com/stellarshenson/jupyterlab_advanced_image_viewer_extension/main/.resources/screenshot.png)
+
+The viewer toolbar adds zoom in / out / fit controls and a `help` link that lists every keybinding.
+
 ## Features
 
 - **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
 

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

@@ -52,16 +52,16 @@ 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>+ / - / Fit</b> - zoom in, zoom out, reset to fit</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>',
                 '<p class="jp-AdvancedImageViewer-help-section">Standard viewer keys (compose with the above)</p>',
                 '<ul>',
+                '<li><b>= / - / 0</b> - zoom in / out / reset</li>',
                 '<li><b>] / [</b> - rotate clockwise / counter-clockwise</li>',
                 '<li><b>H / V</b> - flip horizontal / vertical</li>',
                 '<li><b>I</b> - invert colours</li>',
-                '<li><b>= / - / 0</b> - zoom in / out / reset</li>',
                 '</ul>'
             ].join('');
             void showDialog({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "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

@@ -89,16 +89,16 @@ 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>+ / - / Fit</b> - zoom in, zoom out, reset to fit</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>',
         '<p class="jp-AdvancedImageViewer-help-section">Standard viewer keys (compose with the above)</p>',
         '<ul>',
+        '<li><b>= / - / 0</b> - zoom in / out / reset</li>',
         '<li><b>] / [</b> - rotate clockwise / counter-clockwise</li>',
         '<li><b>H / V</b> - flip horizontal / vertical</li>',
         '<li><b>I</b> - invert colours</li>',
-        '<li><b>= / - / 0</b> - zoom in / out / reset</li>',
         '</ul>'
       ].join('');
       void showDialog({