jupyterlab_advanced_image_viewer_extension 1.1.2 → 1.1.4

package/README.md

@@ -20,14 +20,14 @@ The viewer toolbar adds zoom in / out / fit controls and a `help` link that list
 - **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; 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
+- **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
 
 ## Requirements
 
-- JupyterLab >= 4.0.0
+- JupyterLab >= 4.6
 
 ## Install
 

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

@@ -1,5 +1,6 @@
 import { Dialog, showDialog, Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 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';
@@ -35,8 +36,8 @@ const plugin = {
     description: 'Advanced image viewer: cursor-anchored wheel zoom, drag-to-pan, fit-to-screen reset, and arrow-key folder navigation.',
     autoStart: true,
     requires: [IImageTracker],
-    optional: [ISettingRegistry],
-    activate: (app, tracker, settingRegistry) => {
+    optional: [ISettingRegistry, IDefaultFileBrowser],
+    activate: (app, tracker, settingRegistry, fileBrowser) => {
         console.log('JupyterLab extension jupyterlab_advanced_image_viewer_extension is activated!');
         const controllers = new WeakMap();
         const state = { ...defaults };
@@ -97,6 +98,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();
@@ -105,16 +107,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());
@@ -218,20 +223,39 @@ const plugin = {
             }
             const path = widget.context.path;
             const dirPath = PathExt.dirname(path);
-            const listing = await app.serviceManager.contents.get(dirPath, {
-                content: true
-            });
-            const content = listing.content;
-            if (!content) {
-                return;
+            const isImage = (item) => item.type === 'file' &&
+                IMAGE_EXTS.has(PathExt.extname(item.name).toLowerCase());
+            // Step through the images in the order the file browser shows them
+            // when it lists this folder, so its sort key, its direction and any
+            // 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. 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)) {
+                const listing = await app.serviceManager.contents.get(dirPath, {
+                    content: true
+                });
+                const content = listing.content;
+                if (!content) {
+                    return;
+                }
+                images = content.filter(isImage).sort((a, b) => a.name.localeCompare(b.name, undefined, {
+                    numeric: true,
+                    sensitivity: 'base'
+                }));
             }
-            const images = content
-                .filter(item => item.type === 'file' &&
-                IMAGE_EXTS.has(PathExt.extname(item.name).toLowerCase()))
-                .sort((a, b) => a.name.localeCompare(b.name, undefined, {
-                numeric: true,
-                sensitivity: 'base'
-            }));
             if (images.length <= 1) {
                 return;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.1.2",
+    "version": "1.1.4",
     "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",
@@ -31,8 +31,8 @@
     "scripts": {
         "build": "jlpm build:lib && jlpm build:labextension:dev",
         "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
-        "build:labextension": "jupyter labextension build .",
-        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:labextension": "jupyter-builder build .",
+        "build:labextension:dev": "jupyter-builder build --development True .",
         "build:lib": "tsc --sourceMap",
         "build:lib:prod": "tsc",
         "clean": "jlpm clean:lib",
@@ -41,7 +41,7 @@
         "clean:labextension": "rimraf jupyterlab_advanced_image_viewer_extension/labextension jupyterlab_advanced_image_viewer_extension/_version.py",
         "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
         "eslint": "jlpm eslint:check --fix",
-        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "eslint:check": "eslint . --cache",
         "install:extension": "jlpm build",
         "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
         "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
@@ -53,46 +53,46 @@
         "test": "jest --coverage",
         "watch": "run-p watch:src watch:labextension",
         "watch:src": "tsc -w --sourceMap",
-        "watch:labextension": "jupyter labextension watch ."
+        "watch:labextension": "jupyter-builder watch ."
     },
     "dependencies": {
-        "@jupyterlab/application": "^4.0.0",
-        "@jupyterlab/apputils": "^4.0.0",
-        "@jupyterlab/coreutils": "^6.0.0",
-        "@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"
+        "@jupyterlab/application": "^4.6.0",
+        "@jupyterlab/apputils": "^4.7.0",
+        "@jupyterlab/coreutils": "^6.6.0",
+        "@jupyterlab/docregistry": "^4.6.0",
+        "@jupyterlab/filebrowser": "^4.6.0",
+        "@jupyterlab/imageviewer": "^4.6.0",
+        "@jupyterlab/settingregistry": "^4.6.0",
+        "@jupyterlab/ui-components": "^4.6.0",
+        "@lumino/disposable": "^2.1.0",
+        "@lumino/widgets": "^2.9.0"
     },
     "devDependencies": {
-        "@jupyterlab/builder": "^4.0.0",
-        "@jupyterlab/testutils": "^4.0.0",
-        "@types/jest": "^29.2.0",
+        "@eslint/js": "^9.39.0",
+        "@jupyter/builder": "^1.2.0",
+        "@jupyter/eslint-plugin": "^1.3.0",
+        "@jupyterlab/testutils": "^4.6.0",
+        "@types/jest": "^29.5.0",
         "@types/json-schema": "^7.0.11",
-        "@types/react": "^18.0.26",
+        "@types/react": "^18.3.0",
         "@types/react-addons-linked-state-mixin": "^0.14.22",
-        "@typescript-eslint/eslint-plugin": "^6.1.0",
-        "@typescript-eslint/parser": "^6.1.0",
-        "css-loader": "^6.7.1",
-        "eslint": "^8.36.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-prettier": "^5.0.0",
-        "jest": "^29.2.0",
+        "eslint": "^9.39.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.5.0",
+        "globals": "^15.15.0",
+        "jest": "^29.7.0",
         "mkdirp": "^1.0.3",
         "npm-run-all2": "^7.0.1",
-        "prettier": "^3.0.0",
+        "prettier": "^3.9.0",
         "rimraf": "^5.0.1",
-        "source-map-loader": "^1.0.2",
-        "style-loader": "^3.3.1",
-        "stylelint": "^15.10.1",
+        "stylelint": "^15.11.0",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
-        "stylelint-csstree-validator": "^3.0.0",
-        "stylelint-prettier": "^4.0.0",
+        "stylelint-csstree-validator": "^3.1.0",
+        "stylelint-prettier": "^4.1.0",
         "typescript": "~5.8.0",
-        "yjs": "^13.5.0"
+        "typescript-eslint": "^8.71.0",
+        "yjs": "^13.6.0"
     },
     "resolutions": {
         "lib0": "0.2.111",
@@ -117,69 +117,6 @@
         "outputDir": "jupyterlab_advanced_image_viewer_extension/labextension",
         "schemaDir": "schema"
     },
-    "eslintIgnore": [
-        "node_modules",
-        "dist",
-        "coverage",
-        "**/*.d.ts",
-        "tests",
-        "**/__tests__",
-        "ui-tests"
-    ],
-    "eslintConfig": {
-        "extends": [
-            "eslint:recommended",
-            "plugin:@typescript-eslint/eslint-recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:prettier/recommended"
-        ],
-        "parser": "@typescript-eslint/parser",
-        "parserOptions": {
-            "project": "tsconfig.json",
-            "sourceType": "module"
-        },
-        "plugins": [
-            "@typescript-eslint"
-        ],
-        "rules": {
-            "@typescript-eslint/naming-convention": [
-                "error",
-                {
-                    "selector": "interface",
-                    "format": [
-                        "PascalCase"
-                    ],
-                    "custom": {
-                        "regex": "^I[A-Z]",
-                        "match": true
-                    }
-                }
-            ],
-            "@typescript-eslint/no-unused-vars": [
-                "warn",
-                {
-                    "args": "none"
-                }
-            ],
-            "@typescript-eslint/no-explicit-any": "off",
-            "@typescript-eslint/no-namespace": "off",
-            "@typescript-eslint/no-use-before-define": "off",
-            "@typescript-eslint/quotes": [
-                "error",
-                "single",
-                {
-                    "avoidEscape": true,
-                    "allowTemplateLiterals": false
-                }
-            ],
-            "curly": [
-                "error",
-                "all"
-            ],
-            "eqeqeq": "error",
-            "prefer-arrow-callback": "error"
-        }
-    },
     "prettier": {
         "singleQuote": true,
         "trailingComma": "none",

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

@@ -14,6 +14,8 @@ import { PathExt } from '@jupyterlab/coreutils';
 
 import { IDocumentWidget } from '@jupyterlab/docregistry';
 
+import { DirListing, IDefaultFileBrowser } from '@jupyterlab/filebrowser';
+
 import { IImageTracker, ImageViewer } from '@jupyterlab/imageviewer';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
@@ -67,11 +69,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
     'Advanced image viewer: cursor-anchored wheel zoom, drag-to-pan, fit-to-screen reset, and arrow-key folder navigation.',
   autoStart: true,
   requires: [IImageTracker],
-  optional: [ISettingRegistry],
+  optional: [ISettingRegistry, IDefaultFileBrowser],
   activate: (
     app: JupyterFrontEnd,
     tracker: IImageTracker,
-    settingRegistry: ISettingRegistry | null
+    settingRegistry: ISettingRegistry | null,
+    fileBrowser: IDefaultFileBrowser | null
   ): void => {
     console.log(
       'JupyterLab extension jupyterlab_advanced_image_viewer_extension is activated!'
@@ -144,6 +147,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           icon: refreshIcon,
           tooltip: 'Reload image from disk',
+          noFocusOnClick: true,
           onClick: async () => {
             await widget.context.revert();
             widget.update();
@@ -155,6 +159,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '-',
           tooltip: 'Zoom out',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomOut)
         })
       );
@@ -163,6 +168,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '+',
           tooltip: 'Zoom in',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomIn)
         })
       );
@@ -171,6 +177,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: 'Fit',
           tooltip: 'Reset to fit',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.resetFit)
         })
       );
@@ -285,29 +292,46 @@ const plugin: JupyterFrontEndPlugin<void> = {
       }
       const path = widget.context.path;
       const dirPath = PathExt.dirname(path);
-      const listing = await app.serviceManager.contents.get(dirPath, {
-        content: true
-      });
-      const content = listing.content as Array<{
-        name: string;
-        path: string;
-        type: string;
-      }> | null;
-      if (!content) {
-        return;
+      const isImage = (item: { name: string; type: string }): boolean =>
+        item.type === 'file' &&
+        IMAGE_EXTS.has(PathExt.extname(item.name).toLowerCase());
+      // Step through the images in the order the file browser shows them
+      // when it lists this folder, so its sort key, its direction and any
+      // 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. 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);
       }
-      const images = content
-        .filter(
-          item =>
-            item.type === 'file' &&
-            IMAGE_EXTS.has(PathExt.extname(item.name).toLowerCase())
-        )
-        .sort((a, b) =>
+      if (!images.some(item => item.path === path)) {
+        const listing = await app.serviceManager.contents.get(dirPath, {
+          content: true
+        });
+        const content = listing.content as Array<{
+          name: string;
+          path: string;
+          type: string;
+        }> | null;
+        if (!content) {
+          return;
+        }
+        images = content.filter(isImage).sort((a, b) =>
           a.name.localeCompare(b.name, undefined, {
             numeric: true,
             sensitivity: 'base'
           })
         );
+      }
       if (images.length <= 1) {
         return;
       }