jupyterlab_advanced_image_viewer_extension 1.0.9 → 1.1.0

package/README.md

@@ -18,10 +18,11 @@ 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 the image at any zoom (canvas-style); the grab cursor is always available and Fit recenters
+- **Drag to pan** - hold and drag to move the image at any zoom; the image can touch a viewport border but never leave it, 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/controller.d.ts

@@ -1,6 +1,9 @@
 export declare class ViewerController {
     private host;
+    private img;
     private layer;
+    private sizeObserver;
+    private styleObserver;
     private s;
     private tx;
     private ty;
@@ -21,6 +24,8 @@ export declare class ViewerController {
     private onMove;
     private onUp;
     private updateCursor;
+    private onRenderChange;
+    private write;
     private apply;
     dispose(): void;
 }

package/lib/controller.js

@@ -3,11 +3,41 @@
 // scale there for its keybindings (], [, h, v, 0). If we also wrote the <img>
 // transform we would clobber that (and it would clobber ours). Instead we wrap
 // the <img> in a pan layer and apply our translate+scale to the LAYER; the two
-// transforms then compose. The stock CSS (object-fit: contain, max-width/height:
-// 100%) still fits the image inside the layer, so the identity layer transform
-// equals the correct fit-to-screen view, and stock rotate/flip keeps working.
+// transforms then compose. Stock JupyterLab ships only two rules here,
+// .jp-ImageViewer { overflow: auto } and .jp-ImageViewer > img { box-sizing:
+// border-box; transform-origin: top left }. The contain fit comes from the
+// separately installed jupyterlab_fit_image_size_extension, whose
+// .jp-ImageViewer img rule is a descendant selector and so still matches
+// through the pan layer. With that fit in place the identity layer transform
+// equals the fitted view, and stock rotate/flip keeps working.
 const MIN_SCALE = 0.05;
 const MAX_SCALE = 40;
+// Per-axis pan correction, in rendered pixels. An image not larger than the
+// host must stay inside it, so an edge that hangs over a border is pushed
+// back; an image larger than the host must keep covering it, so a gap between
+// an image edge and a border is closed. Differences below half a pixel are
+// dropped: rects are fractional and the baseline transform must stay exactly
+// translate(0px, 0px) scale(1).
+function correction(lo, hi, hostLo, hostHi) {
+    let d = 0;
+    if (hi - lo <= hostHi - hostLo) {
+        if (lo < hostLo) {
+            d = hostLo - lo;
+        }
+        else if (hi > hostHi) {
+            d = hostHi - hi;
+        }
+    }
+    else {
+        if (lo > hostLo) {
+            d = hostLo - lo;
+        }
+        else if (hi < hostHi) {
+            d = hostHi - hi;
+        }
+    }
+    return Math.abs(d) < 0.5 ? 0 : d;
+}
 export class ViewerController {
     constructor(host, img, zoomStep) {
         this.s = 1;
@@ -44,13 +74,17 @@ export class ViewerController {
             window.removeEventListener('mousemove', this.onMove);
             window.removeEventListener('mouseup', this.onUp);
         };
+        this.onRenderChange = () => {
+            this.apply();
+        };
         this.host = host;
+        this.img = img;
         this.zoomStep = zoomStep;
         this.host.style.overflow = 'hidden';
         // Wrap the image so our zoom/pan compose with the stock rotate/flip
         // transform that the viewer writes onto the <img> element itself. The
-        // layer fills the host (which is a positioned widget), so the stock
-        // object-fit/max-width CSS fits the image exactly as before.
+        // layer fills the host (which is a positioned widget), so the fit CSS
+        // sizes the image exactly as before.
         const layer = document.createElement('div');
         layer.className = 'jp-AdvancedImageViewer-panlayer';
         const parent = img.parentNode;
@@ -61,6 +95,19 @@ export class ViewerController {
         this.layer = layer;
         this.host.addEventListener('wheel', this.onWheel, { passive: false });
         this.host.addEventListener('mousedown', this.onDown);
+        // Three things move the rendered image without any pan or zoom of ours,
+        // and each one changes the range the clamp allows: the panel is resized,
+        // the refresh button re-renders a different source into the same <img>,
+        // and the stock viewer writes a rotate or flip onto img.style. Only an
+        // attribute change reports the last one, since it moves no layout box.
+        this.img.addEventListener('load', this.onRenderChange);
+        this.styleObserver = new MutationObserver(this.onRenderChange);
+        this.styleObserver.observe(this.img, {
+            attributes: true,
+            attributeFilter: ['style']
+        });
+        this.sizeObserver = new ResizeObserver(this.onRenderChange);
+        this.sizeObserver.observe(this.host);
         this.apply();
     }
     setZoomStep(zoomStep) {
@@ -108,9 +155,33 @@ export class ViewerController {
     updateCursor() {
         this.host.style.cursor = this.panning ? 'grabbing' : 'grab';
     }
-    apply() {
+    write() {
         this.layer.style.transformOrigin = 'center center';
         this.layer.style.transform = `translate(${this.tx}px, ${this.ty}px) scale(${this.s})`;
+    }
+    // The pan clamp is measured, not derived. The layer scales about its centre
+    // and the stock viewer writes its own rotate / flip onto the <img>, so the
+    // rendered bounds do not follow any offset formula over the natural size.
+    // Write the transform, read both boxes, then move the layer by the one
+    // correction the measurement asks for. A translate shifts the box 1:1 in
+    // host pixels and does not resize it, so a single pass lands on the edge.
+    // Doing this in apply() makes the clamp an invariant of every state change:
+    // drag, zoom in, zoom out and reset. Zero-sized boxes are skipped, because
+    // the widget is hidden or the image has no source yet and any correction
+    // measured against them would pin a false offset.
+    apply() {
+        this.write();
+        const h = this.host.getBoundingClientRect();
+        const i = this.img.getBoundingClientRect();
+        if (h.width > 0 && h.height > 0 && i.width > 0 && i.height > 0) {
+            const dx = correction(i.left, i.right, h.left, h.right);
+            const dy = correction(i.top, i.bottom, h.top, h.bottom);
+            if (dx !== 0 || dy !== 0) {
+                this.tx += dx;
+                this.ty += dy;
+                this.write();
+            }
+        }
         this.updateCursor();
     }
     dispose() {
@@ -122,6 +193,9 @@ export class ViewerController {
         this.host.removeEventListener('mousedown', this.onDown);
         window.removeEventListener('mousemove', this.onMove);
         window.removeEventListener('mouseup', this.onUp);
+        this.img.removeEventListener('load', this.onRenderChange);
+        this.styleObserver.disconnect();
+        this.sizeObserver.disconnect();
         // Unwrap: restore the <img> as a direct child and drop the layer.
         const img = this.layer.querySelector('img');
         const parent = this.layer.parentNode;

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';
@@ -90,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',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.0.9",
+    "version": "1.1.0",
     "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/__tests__/controller.spec.ts

@@ -2,20 +2,96 @@ import { ViewerController } from '../controller';
 
 // jsdom has no ResizeObserver; provide a no-op stub.
 class MockResizeObserver {
-  observe(): void {
-    /* no-op */
+  static instances: MockResizeObserver[] = [];
+  callback: () => void;
+  disconnected = false;
+  targets: Element[] = [];
+
+  constructor(callback: () => void) {
+    this.callback = callback;
+    MockResizeObserver.instances.push(this);
+  }
+  observe(t: Element): void {
+    this.targets.push(t);
   }
   unobserve(): void {
     /* no-op */
   }
   disconnect(): void {
-    /* no-op */
+    this.disconnected = true;
   }
 }
 
+const HOST_X = 50;
+const HOST_Y = 30;
+const HOST_W = 200;
+const HOST_H = 100;
+
+function rect(left: number, top: number, w: number, h: number): DOMRect {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    right: left + w,
+    bottom: top + h,
+    width: w,
+    height: h,
+    toJSON: () => ({})
+  } as DOMRect;
+}
+
 describe('ViewerController', () => {
   let host: HTMLElement;
   let img: HTMLImageElement;
+  let baseW = 0;
+  let baseH = 0;
+
+  // jsdom runs no layout, so model the geometry the clamp measures: the host
+  // is a fixed box at (HOST_X, HOST_Y), away from the viewport origin, and the
+  // image is a baseW x baseH box at the layer top-left, moved by the layer
+  // transform the controller writes (translate in host pixels, scale about the
+  // layer centre). Call it again to change the rendered size, as a reload or a
+  // stock rotate does.
+  function stubGeometry(w: number, h: number): void {
+    baseW = w;
+    baseH = h;
+    host.getBoundingClientRect = () => rect(HOST_X, HOST_Y, HOST_W, HOST_H);
+    img.getBoundingClientRect = () => {
+      const layer = host.querySelector(
+        '.jp-AdvancedImageViewer-panlayer'
+      ) as HTMLElement;
+      const m =
+        /translate\((-?[\d.]+)px, (-?[\d.]+)px\) scale\(([\d.]+)\)/.exec(
+          layer.style.transform
+        )!;
+      const s = parseFloat(m[3]);
+      return rect(
+        HOST_X + (1 - s) * (HOST_W / 2) + parseFloat(m[1]),
+        HOST_Y + (1 - s) * (HOST_H / 2) + parseFloat(m[2]),
+        baseW * s,
+        baseH * s
+      );
+    };
+  }
+
+  function drag(dx: number, dy: number): void {
+    host.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }));
+    window.dispatchEvent(
+      new MouseEvent('mousemove', { clientX: dx, clientY: dy })
+    );
+    window.dispatchEvent(new MouseEvent('mouseup'));
+  }
+
+  function offset(): { tx: number; ty: number } {
+    const layer = host.querySelector(
+      '.jp-AdvancedImageViewer-panlayer'
+    ) as HTMLElement;
+    const m = /translate\((-?[\d.]+)px, (-?[\d.]+)px\)/.exec(
+      layer.style.transform
+    )!;
+    return { tx: parseFloat(m[1]), ty: parseFloat(m[2]) };
+  }
 
   beforeAll(() => {
     (window as any).ResizeObserver = MockResizeObserver;
@@ -26,6 +102,7 @@ describe('ViewerController', () => {
     img = document.createElement('img');
     host.appendChild(img);
     document.body.appendChild(host);
+    MockResizeObserver.instances = [];
   });
 
   afterEach(() => {
@@ -81,4 +158,152 @@ describe('ViewerController', () => {
     expect(host.querySelector('.jp-AdvancedImageViewer-panlayer')).toBeNull();
     expect(img.parentElement).toBe(host);
   });
+
+  // ACC-PAN-38: an image smaller than the host stops with its edge flush.
+  it('keeps an image smaller than the host inside the viewport', () => {
+    stubGeometry(80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    expect(offset()).toEqual({ tx: 0, ty: 0 });
+
+    // Both drags stay inside the legal range (x in [0, 120], y in [0, 40]),
+    // so the offset follows the drag delta with the clamp active.
+    drag(10, 10);
+    drag(10, 10);
+    expect(offset()).toEqual({ tx: 20, ty: 20 });
+
+    drag(500, 0);
+    expect(offset().tx).toBe(120);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + HOST_W);
+    expect(img.getBoundingClientRect().left).toBeGreaterThanOrEqual(HOST_X);
+
+    drag(-500, -500);
+    expect(offset()).toEqual({ tx: 0, ty: 0 });
+    expect(img.getBoundingClientRect().left).toBe(HOST_X);
+    expect(img.getBoundingClientRect().top).toBe(HOST_Y);
+    c.dispose();
+  });
+
+  // ACC-PAN-39: an image larger than the host never uncovers it.
+  it('keeps an image larger than the host covering the viewport', () => {
+    stubGeometry(400, 300);
+    const c = new ViewerController(host, img, 0.1);
+    expect(offset()).toEqual({ tx: 0, ty: 0 });
+
+    drag(-500, 0);
+    expect(offset().tx).toBe(-200);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + HOST_W);
+    expect(img.getBoundingClientRect().left).toBeLessThanOrEqual(HOST_X);
+
+    drag(500, 0);
+    expect(offset().tx).toBe(0);
+    expect(img.getBoundingClientRect().left).toBe(HOST_X);
+
+    drag(0, -500);
+    expect(offset().ty).toBe(-200);
+    expect(img.getBoundingClientRect().bottom).toBe(HOST_Y + HOST_H);
+    c.dispose();
+  });
+
+  // ACC-PAN-40: the clamp is an invariant, so shrinking the legal range by
+  // zooming out pulls an offset that was legal at the larger scale back in.
+  it('snaps an out-of-range offset back on zoom-out', () => {
+    stubGeometry(400, 300);
+    const c = new ViewerController(host, img, 1);
+    c.zoomIn();
+    drag(-1000, 0);
+    expect(offset().tx).toBe(-500);
+
+    c.zoomOut();
+    // Undoing the zoom alone would leave tx at -250, which is outside the
+    // range [-200, 0] that a 400px-wide image has over a 200px host.
+    expect(offset().tx).toBe(-200);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + HOST_W);
+    c.dispose();
+  });
+
+  // ACC-PAN-41: the panel resize changes the range, the ResizeObserver reports
+  // it and the stored offset is measured against the new one.
+  it('re-clamps when the host is resized', () => {
+    stubGeometry(80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    drag(500, 0);
+    expect(offset().tx).toBe(120);
+
+    host.getBoundingClientRect = () => rect(HOST_X, HOST_Y, 100, HOST_H);
+    expect(MockResizeObserver.instances[0].targets).toContain(host);
+    MockResizeObserver.instances[0].callback();
+    expect(offset().tx).toBe(20);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + 100);
+    c.dispose();
+  });
+
+  // ACC-PAN-42: a refresh renders a differently sized source into the same
+  // <img>, and the load event re-clamps the stored offset against it.
+  it('re-clamps when a differently sized image loads', () => {
+    stubGeometry(80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    drag(500, 0);
+    expect(offset().tx).toBe(120);
+
+    stubGeometry(150, 60);
+    img.dispatchEvent(new Event('load'));
+    expect(offset().tx).toBe(50);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + HOST_W);
+    c.dispose();
+  });
+
+  // ACC-PAN-43: a stock rotate or flip changes the rendered bounds through
+  // img.style alone, so the clamp is recomputed from the measured box.
+  it('re-clamps on a stock rotate written to the image style', async () => {
+    stubGeometry(80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    drag(500, 0);
+    expect(offset().tx).toBe(120);
+
+    stubGeometry(160, 60);
+    img.style.transform = 'rotate(90deg)';
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(offset().tx).toBe(40);
+    expect(img.getBoundingClientRect().right).toBe(HOST_X + HOST_W);
+    c.dispose();
+  });
+
+  // A hidden widget and an image with no source yet both measure zero, and a
+  // correction taken against them would pin a false offset.
+  it('does not clamp against zero-sized boxes', () => {
+    host.getBoundingClientRect = () => rect(50, 30, HOST_W, HOST_H);
+    img.getBoundingClientRect = () => rect(0, 0, 0, 0);
+    const c = new ViewerController(host, img, 0.1);
+    const layer = host.querySelector(
+      '.jp-AdvancedImageViewer-panlayer'
+    ) as HTMLElement;
+    expect(layer.style.transform).toBe('translate(0px, 0px) scale(1)');
+
+    drag(40, 20);
+    expect(layer.style.transform).toBe('translate(40px, 20px) scale(1)');
+    c.dispose();
+  });
+
+  // A rendered box overhanging a border by less than half a pixel is inside
+  // the deadband, so the baseline transform stays exactly at the identity.
+  it('leaves a sub-pixel overhang uncorrected', () => {
+    host.getBoundingClientRect = () => rect(HOST_X, HOST_Y, HOST_W, HOST_H);
+    img.getBoundingClientRect = () => rect(HOST_X - 0.4, HOST_Y, 80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    const layer = host.querySelector(
+      '.jp-AdvancedImageViewer-panlayer'
+    ) as HTMLElement;
+    expect(layer.style.transform).toBe('translate(0px, 0px) scale(1)');
+    c.dispose();
+  });
+
+  it('stops observing the host and the image on dispose', () => {
+    stubGeometry(80, 60);
+    const c = new ViewerController(host, img, 0.1);
+    c.dispose();
+    expect(MockResizeObserver.instances[0].disconnected).toBe(true);
+    // The geometry stub needs the layer, which dispose removed, so a surviving
+    // load listener would throw here.
+    expect(() => img.dispatchEvent(new Event('load'))).not.toThrow();
+  });
 });

package/src/controller.ts

@@ -3,16 +3,52 @@
 // scale there for its keybindings (], [, h, v, 0). If we also wrote the <img>
 // transform we would clobber that (and it would clobber ours). Instead we wrap
 // the <img> in a pan layer and apply our translate+scale to the LAYER; the two
-// transforms then compose. The stock CSS (object-fit: contain, max-width/height:
-// 100%) still fits the image inside the layer, so the identity layer transform
-// equals the correct fit-to-screen view, and stock rotate/flip keeps working.
+// transforms then compose. Stock JupyterLab ships only two rules here,
+// .jp-ImageViewer { overflow: auto } and .jp-ImageViewer > img { box-sizing:
+// border-box; transform-origin: top left }. The contain fit comes from the
+// separately installed jupyterlab_fit_image_size_extension, whose
+// .jp-ImageViewer img rule is a descendant selector and so still matches
+// through the pan layer. With that fit in place the identity layer transform
+// equals the fitted view, and stock rotate/flip keeps working.
 
 const MIN_SCALE = 0.05;
 const MAX_SCALE = 40;
 
+// Per-axis pan correction, in rendered pixels. An image not larger than the
+// host must stay inside it, so an edge that hangs over a border is pushed
+// back; an image larger than the host must keep covering it, so a gap between
+// an image edge and a border is closed. Differences below half a pixel are
+// dropped: rects are fractional and the baseline transform must stay exactly
+// translate(0px, 0px) scale(1).
+function correction(
+  lo: number,
+  hi: number,
+  hostLo: number,
+  hostHi: number
+): number {
+  let d = 0;
+  if (hi - lo <= hostHi - hostLo) {
+    if (lo < hostLo) {
+      d = hostLo - lo;
+    } else if (hi > hostHi) {
+      d = hostHi - hi;
+    }
+  } else {
+    if (lo > hostLo) {
+      d = hostLo - lo;
+    } else if (hi < hostHi) {
+      d = hostHi - hi;
+    }
+  }
+  return Math.abs(d) < 0.5 ? 0 : d;
+}
+
 export class ViewerController {
   private host: HTMLElement;
+  private img: HTMLImageElement;
   private layer: HTMLElement;
+  private sizeObserver: ResizeObserver;
+  private styleObserver: MutationObserver;
   private s = 1;
   private tx = 0;
   private ty = 0;
@@ -23,12 +59,13 @@ export class ViewerController {
 
   constructor(host: HTMLElement, img: HTMLImageElement, zoomStep: number) {
     this.host = host;
+    this.img = img;
     this.zoomStep = zoomStep;
     this.host.style.overflow = 'hidden';
     // Wrap the image so our zoom/pan compose with the stock rotate/flip
     // transform that the viewer writes onto the <img> element itself. The
-    // layer fills the host (which is a positioned widget), so the stock
-    // object-fit/max-width CSS fits the image exactly as before.
+    // layer fills the host (which is a positioned widget), so the fit CSS
+    // sizes the image exactly as before.
     const layer = document.createElement('div');
     layer.className = 'jp-AdvancedImageViewer-panlayer';
     const parent = img.parentNode;
@@ -39,6 +76,19 @@ export class ViewerController {
     this.layer = layer;
     this.host.addEventListener('wheel', this.onWheel, { passive: false });
     this.host.addEventListener('mousedown', this.onDown);
+    // Three things move the rendered image without any pan or zoom of ours,
+    // and each one changes the range the clamp allows: the panel is resized,
+    // the refresh button re-renders a different source into the same <img>,
+    // and the stock viewer writes a rotate or flip onto img.style. Only an
+    // attribute change reports the last one, since it moves no layout box.
+    this.img.addEventListener('load', this.onRenderChange);
+    this.styleObserver = new MutationObserver(this.onRenderChange);
+    this.styleObserver.observe(this.img, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    this.sizeObserver = new ResizeObserver(this.onRenderChange);
+    this.sizeObserver.observe(this.host);
     this.apply();
   }
 
@@ -127,9 +177,38 @@ export class ViewerController {
     this.host.style.cursor = this.panning ? 'grabbing' : 'grab';
   }
 
-  private apply(): void {
+  private onRenderChange = (): void => {
+    this.apply();
+  };
+
+  private write(): void {
     this.layer.style.transformOrigin = 'center center';
     this.layer.style.transform = `translate(${this.tx}px, ${this.ty}px) scale(${this.s})`;
+  }
+
+  // The pan clamp is measured, not derived. The layer scales about its centre
+  // and the stock viewer writes its own rotate / flip onto the <img>, so the
+  // rendered bounds do not follow any offset formula over the natural size.
+  // Write the transform, read both boxes, then move the layer by the one
+  // correction the measurement asks for. A translate shifts the box 1:1 in
+  // host pixels and does not resize it, so a single pass lands on the edge.
+  // Doing this in apply() makes the clamp an invariant of every state change:
+  // drag, zoom in, zoom out and reset. Zero-sized boxes are skipped, because
+  // the widget is hidden or the image has no source yet and any correction
+  // measured against them would pin a false offset.
+  private apply(): void {
+    this.write();
+    const h = this.host.getBoundingClientRect();
+    const i = this.img.getBoundingClientRect();
+    if (h.width > 0 && h.height > 0 && i.width > 0 && i.height > 0) {
+      const dx = correction(i.left, i.right, h.left, h.right);
+      const dy = correction(i.top, i.bottom, h.top, h.bottom);
+      if (dx !== 0 || dy !== 0) {
+        this.tx += dx;
+        this.ty += dy;
+        this.write();
+      }
+    }
     this.updateCursor();
   }
 
@@ -142,6 +221,9 @@ export class ViewerController {
     this.host.removeEventListener('mousedown', this.onDown);
     window.removeEventListener('mousemove', this.onMove);
     window.removeEventListener('mouseup', this.onUp);
+    this.img.removeEventListener('load', this.onRenderChange);
+    this.styleObserver.disconnect();
+    this.sizeObserver.disconnect();
     // Unwrap: restore the <img> as a direct child and drop the layer.
     const img = this.layer.querySelector('img');
     const parent = this.layer.parentNode;

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';
@@ -134,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({

package/style/base.css

@@ -12,6 +12,15 @@
   transform-origin: center center;
 }
 
+/* The stock rule that gives these two values is `.jp-ImageViewer > img`, a
+   direct-child selector the pan layer breaks. The stock rotate/flip transform
+   is written for a top-left origin, so without this the image jumps sideways
+   on rotate and the pan clamp then drags it to a border. */
+.jp-AdvancedImageViewer-panlayer > img {
+  box-sizing: border-box;
+  transform-origin: top left;
+}
+
 /* Help shown as an accent-coloured link at the right end of the toolbar.
    The selector is scoped under .jp-Toolbar to beat JupyterLab's toolbar `a`
    rule (otherwise the link renders in the default muted toolbar colour). */