jupyterlab_advanced_image_viewer_extension 1.1.3 → 1.1.5

package/README.md

@@ -23,7 +23,7 @@ The viewer toolbar adds zoom in / out / fit controls and a `help` link that list
 - **Arrow-key navigation** - Left and Right open the previous and next image in the same folder, in the order the file browser lists them, 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
-- **WebP support** - `.webp` files open in the image viewer with every feature above; stock JupyterLab opens them in the text editor
+- **WebP and AVIF support** - `.webp` and `.avif` files open in the image viewer with every feature above; stock JupyterLab does not open them and shows a File Load Error
 
 ## Requirements
 

package/lib/controller.js

@@ -53,7 +53,11 @@ export class ViewerController {
             this.zoomAt(factor, e.clientX - r.left, e.clientY - r.top);
         };
         this.onDown = (e) => {
+            // preventDefault stops the browser dragging the image out, and with it the
+            // focus a click would give the viewer; focus it here, or after a toolbar
+            // click the stock keys and Left/Right go to the button instead.
             e.preventDefault();
+            this.host.focus();
             this.panning = true;
             this.start = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
             this.host.style.cursor = 'grabbing';

package/lib/index.js

@@ -3,7 +3,7 @@ import { PathExt } from '@jupyterlab/coreutils';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { IImageTracker } from '@jupyterlab/imageviewer';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
-import { refreshIcon } from '@jupyterlab/ui-components';
+import { imageIcon, refreshIcon } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import { ViewerController } from './controller';
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
@@ -22,11 +22,20 @@ const IMAGE_EXTS = new Set([
     '.gif',
     '.bmp',
     '.svg',
-    '.webp'
+    '.webp',
+    '.avif'
 ]);
 // 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 RASTER_EXTS = new Set([
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.bmp',
+    '.webp',
+    '.avif'
+]);
 const defaults = {
     navEnabled: true,
     zoomStep: 0.1
@@ -98,6 +107,7 @@ const plugin = {
             widget.toolbar.addItem('advanced-refresh', new ToolbarButton({
                 icon: refreshIcon,
                 tooltip: 'Reload image from disk',
+                noFocusOnClick: true,
                 onClick: async () => {
                     await widget.context.revert();
                     widget.update();
@@ -106,16 +116,19 @@ const plugin = {
             widget.toolbar.addItem('advanced-zoom-out', new ToolbarButton({
                 label: '-',
                 tooltip: 'Zoom out',
+                noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.zoomOut)
             }));
             widget.toolbar.addItem('advanced-zoom-in', new ToolbarButton({
                 label: '+',
                 tooltip: 'Zoom in',
+                noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.zoomIn)
             }));
             widget.toolbar.addItem('advanced-reset-fit', new ToolbarButton({
                 label: 'Fit',
                 tooltip: 'Reset to fit',
+                noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.resetFit)
             }));
             widget.toolbar.addItem('advanced-spacer', Toolbar.createSpacerItem());
@@ -144,6 +157,16 @@ const plugin = {
         if (webp) {
             app.docRegistry.addFileType(webp, ['Image']);
         }
+        // JupyterLab registers no 'avif' file type at all, so add one with the
+        // same shape as its other image types, bound to the same factory.
+        app.docRegistry.addFileType({
+            name: 'avif',
+            displayName: 'Image',
+            mimeTypes: ['image/avif'],
+            extensions: ['.avif'],
+            icon: imageIcon,
+            fileFormat: 'base64'
+        }, ['Image']);
         app.commands.addCommand(CommandIDs.zoomIn, {
             label: 'Zoom In (Advanced Image Viewer)',
             isEnabled: () => currentController() !== null,
@@ -226,12 +249,17 @@ const plugin = {
             // sort plugin decide what comes next: a C-locale sort puts '.' before
             // '_' where localeCompare puts '_' first, and a re-sort here skipped
             // files. FileBrowser keeps `listing` protected, but it is the only
-            // source of the displayed order. Otherwise fall back to natural name
-            // order, the stock file browser default.
+            // source of the displayed order. The listing re-sorts on a refresh only
+            // while it is visible, so a hidden one is re-sorted here; re-sorting a
+            // visible one would re-render every row on each step. Otherwise fall
+            // back to natural name order, the stock file browser default.
             let images = [];
             if (fileBrowser && fileBrowser.model.path === dirPath) {
                 const shown = fileBrowser
                     .listing;
+                if (!shown.isVisible) {
+                    shown.sort(shown.sortState);
+                }
                 images = Array.from(shown.sortedItems()).filter(isImage);
             }
             if (!images.some(item => item.path === path)) {

package/package.json

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

@@ -297,6 +297,23 @@ describe('ViewerController', () => {
     c.dispose();
   });
 
+  // DEF-KEYS-2: the mousedown handler cancels the browser's image drag, which
+  // also cancels the focus a click gives; the viewer must take focus itself.
+  it('takes keyboard focus from a toolbar button when the image is pressed', () => {
+    host.tabIndex = 0;
+    const button = document.createElement('button');
+    document.body.appendChild(button);
+    new ViewerController(host, img, 0.1);
+    button.focus();
+    expect(document.activeElement).toBe(button);
+    host.dispatchEvent(
+      new MouseEvent('mousedown', { clientX: 0, clientY: 0, cancelable: true })
+    );
+    window.dispatchEvent(new MouseEvent('mouseup'));
+    expect(document.activeElement).toBe(host);
+    button.remove();
+  });
+
   it('stops observing the host and the image on dispose', () => {
     stubGeometry(80, 60);
     const c = new ViewerController(host, img, 0.1);

package/src/controller.ts

@@ -147,7 +147,11 @@ export class ViewerController {
   }
 
   private onDown = (e: MouseEvent): void => {
+    // preventDefault stops the browser dragging the image out, and with it the
+    // focus a click would give the viewer; focus it here, or after a toolbar
+    // click the stock keys and Left/Right go to the button instead.
     e.preventDefault();
+    this.host.focus();
     this.panning = true;
     this.start = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
     this.host.style.cursor = 'grabbing';

package/src/index.ts

@@ -20,7 +20,7 @@ import { IImageTracker, ImageViewer } from '@jupyterlab/imageviewer';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
-import { refreshIcon } from '@jupyterlab/ui-components';
+import { imageIcon, refreshIcon } from '@jupyterlab/ui-components';
 
 import { IDisposable } from '@lumino/disposable';
 
@@ -46,12 +46,21 @@ const IMAGE_EXTS = new Set([
   '.gif',
   '.bmp',
   '.svg',
-  '.webp'
+  '.webp',
+  '.avif'
 ]);
 
 // 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 RASTER_EXTS = new Set([
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.bmp',
+  '.webp',
+  '.avif'
+]);
 
 interface ISettingsState {
   navEnabled: boolean;
@@ -147,6 +156,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           icon: refreshIcon,
           tooltip: 'Reload image from disk',
+          noFocusOnClick: true,
           onClick: async () => {
             await widget.context.revert();
             widget.update();
@@ -158,6 +168,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '-',
           tooltip: 'Zoom out',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomOut)
         })
       );
@@ -166,6 +177,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '+',
           tooltip: 'Zoom in',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomIn)
         })
       );
@@ -174,6 +186,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: 'Fit',
           tooltip: 'Reset to fit',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.resetFit)
         })
       );
@@ -205,6 +218,19 @@ const plugin: JupyterFrontEndPlugin<void> = {
     if (webp) {
       app.docRegistry.addFileType(webp, ['Image']);
     }
+    // JupyterLab registers no 'avif' file type at all, so add one with the
+    // same shape as its other image types, bound to the same factory.
+    app.docRegistry.addFileType(
+      {
+        name: 'avif',
+        displayName: 'Image',
+        mimeTypes: ['image/avif'],
+        extensions: ['.avif'],
+        icon: imageIcon,
+        fileFormat: 'base64'
+      },
+      ['Image']
+    );
 
     app.commands.addCommand(CommandIDs.zoomIn, {
       label: 'Zoom In (Advanced Image Viewer)',
@@ -296,12 +322,17 @@ const plugin: JupyterFrontEndPlugin<void> = {
       // sort plugin decide what comes next: a C-locale sort puts '.' before
       // '_' where localeCompare puts '_' first, and a re-sort here skipped
       // files. FileBrowser keeps `listing` protected, but it is the only
-      // source of the displayed order. Otherwise fall back to natural name
-      // order, the stock file browser default.
+      // source of the displayed order. The listing re-sorts on a refresh only
+      // while it is visible, so a hidden one is re-sorted here; re-sorting a
+      // visible one would re-render every row on each step. Otherwise fall
+      // back to natural name order, the stock file browser default.
       let images: Array<{ name: string; path: string; type: string }> = [];
       if (fileBrowser && fileBrowser.model.path === dirPath) {
         const shown = (fileBrowser as unknown as { listing: DirListing })
           .listing;
+        if (!shown.isVisible) {
+          shown.sort(shown.sortState);
+        }
         images = Array.from(shown.sortedItems()).filter(isImage);
       }
       if (!images.some(item => item.path === path)) {