jupyterlab_advanced_image_viewer_extension 1.1.3 → 1.1.4

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

@@ -98,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();
@@ -106,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());
@@ -226,12 +230,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.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",

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

@@ -147,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();
@@ -158,6 +159,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '-',
           tooltip: 'Zoom out',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomOut)
         })
       );
@@ -166,6 +168,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: '+',
           tooltip: 'Zoom in',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomIn)
         })
       );
@@ -174,6 +177,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         new ToolbarButton({
           label: 'Fit',
           tooltip: 'Reset to fit',
+          noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.resetFit)
         })
       );
@@ -296,12 +300,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)) {