jupyterlab_advanced_image_viewer_extension 1.1.4 → 1.1.6

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/index.js

@@ -3,8 +3,10 @@ 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 { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { imageIcon, refreshIcon } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
+// eslint-disable-next-line jupyter/prefer-lazy-imports -- activation attaches the controller to restored image tabs at once
 import { ViewerController } from './controller';
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
 const CommandIDs = {
@@ -22,11 +24,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
@@ -36,9 +47,10 @@ 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, IDefaultFileBrowser],
-    activate: (app, tracker, settingRegistry, fileBrowser) => {
+    optional: [ISettingRegistry, IDefaultFileBrowser, ITranslator],
+    activate: (app, tracker, settingRegistry, fileBrowser, translator) => {
         console.log('JupyterLab extension jupyterlab_advanced_image_viewer_extension is activated!');
+        const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab_advanced_image_viewer_extension');
         const controllers = new WeakMap();
         const state = { ...defaults };
         let keyBindings = [];
@@ -71,9 +83,9 @@ const plugin = {
                 '</ul>'
             ].join('');
             void showDialog({
-                title: 'Advanced Image Viewer',
+                title: trans.__('Advanced Image Viewer'),
                 body,
-                buttons: [Dialog.okButton({ label: 'Close' })]
+                buttons: [Dialog.okButton({ label: trans.__('Close') })]
             });
         };
         const attach = (widget) => {
@@ -97,7 +109,7 @@ const plugin = {
             // edited, so there is nothing here to discard.
             widget.toolbar.addItem('advanced-refresh', new ToolbarButton({
                 icon: refreshIcon,
-                tooltip: 'Reload image from disk',
+                tooltip: trans.__('Reload image from disk'),
                 noFocusOnClick: true,
                 onClick: async () => {
                     await widget.context.revert();
@@ -106,28 +118,28 @@ const plugin = {
             }));
             widget.toolbar.addItem('advanced-zoom-out', new ToolbarButton({
                 label: '-',
-                tooltip: 'Zoom out',
+                tooltip: trans.__('Zoom out'),
                 noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.zoomOut)
             }));
             widget.toolbar.addItem('advanced-zoom-in', new ToolbarButton({
                 label: '+',
-                tooltip: 'Zoom in',
+                tooltip: trans.__('Zoom in'),
                 noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.zoomIn)
             }));
             widget.toolbar.addItem('advanced-reset-fit', new ToolbarButton({
-                label: 'Fit',
-                tooltip: 'Reset to fit',
+                label: trans.__('Fit'),
+                tooltip: trans.__('Reset to fit'),
                 noFocusOnClick: true,
                 onClick: () => app.commands.execute(CommandIDs.resetFit)
             }));
             widget.toolbar.addItem('advanced-spacer', Toolbar.createSpacerItem());
             const helpLink = new Widget({ node: document.createElement('a') });
             const helpAnchor = helpLink.node;
-            helpAnchor.textContent = 'help';
+            helpAnchor.textContent = trans.__('help');
             helpAnchor.href = '#';
-            helpAnchor.title = 'Keybindings and help';
+            helpAnchor.title = trans.__('Keybindings and help');
             helpAnchor.className = 'jp-AdvancedImageViewer-help-link';
             helpAnchor.addEventListener('click', event => {
                 event.preventDefault();
@@ -148,18 +160,31 @@ 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)',
+            label: trans.__('Zoom In (Advanced Image Viewer)'),
+            describedBy: { args: { type: 'object', properties: {} } },
             isEnabled: () => currentController() !== null,
             execute: () => { var _a; return (_a = currentController()) === null || _a === void 0 ? void 0 : _a.zoomIn(); }
         });
         app.commands.addCommand(CommandIDs.zoomOut, {
-            label: 'Zoom Out (Advanced Image Viewer)',
+            label: trans.__('Zoom Out (Advanced Image Viewer)'),
+            describedBy: { args: { type: 'object', properties: {} } },
             isEnabled: () => currentController() !== null,
             execute: () => { var _a; return (_a = currentController()) === null || _a === void 0 ? void 0 : _a.zoomOut(); }
         });
         app.commands.addCommand(CommandIDs.resetFit, {
-            label: 'Reset to Fit (Advanced Image Viewer)',
+            label: trans.__('Reset to Fit (Advanced Image Viewer)'),
+            describedBy: { args: { type: 'object', properties: {} } },
             isEnabled: () => currentController() !== null,
             execute: () => { var _a; return (_a = currentController()) === null || _a === void 0 ? void 0 : _a.reset(); }
         });
@@ -175,7 +200,8 @@ const plugin = {
             return (_a = tracker.find(widget => widget.content.node === node)) !== null && _a !== void 0 ? _a : null;
         };
         app.commands.addCommand(CommandIDs.copyClipboard, {
-            label: 'Copy to Clipboard',
+            label: trans.__('Copy to Clipboard'),
+            describedBy: { args: { type: 'object', properties: {} } },
             // Raster only - SVG already has "Copy as PNG" from the drawio extension.
             isVisible: () => {
                 const widget = contextImageWidget();
@@ -281,12 +307,14 @@ const plugin = {
             }
         };
         app.commands.addCommand(CommandIDs.previous, {
-            label: 'Previous Image In Folder',
+            label: trans.__('Previous Image In Folder'),
+            describedBy: { args: { type: 'object', properties: {} } },
             isEnabled: () => state.navEnabled && tracker.currentWidget !== null,
             execute: () => navigate(-1)
         });
         app.commands.addCommand(CommandIDs.next, {
-            label: 'Next Image In Folder',
+            label: trans.__('Next Image In Folder'),
+            describedBy: { args: { type: 'object', properties: {} } },
             isEnabled: () => state.navEnabled && tracker.currentWidget !== null,
             execute: () => navigate(1)
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "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",
@@ -63,6 +63,7 @@
         "@jupyterlab/filebrowser": "^4.6.0",
         "@jupyterlab/imageviewer": "^4.6.0",
         "@jupyterlab/settingregistry": "^4.6.0",
+        "@jupyterlab/translation": "^4.6.0",
         "@jupyterlab/ui-components": "^4.6.0",
         "@lumino/disposable": "^2.1.0",
         "@lumino/widgets": "^2.9.0"

package/src/index.ts

@@ -20,12 +20,15 @@ import { IImageTracker, ImageViewer } from '@jupyterlab/imageviewer';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
-import { refreshIcon } from '@jupyterlab/ui-components';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+
+import { imageIcon, refreshIcon } from '@jupyterlab/ui-components';
 
 import { IDisposable } from '@lumino/disposable';
 
 import { Widget } from '@lumino/widgets';
 
+// eslint-disable-next-line jupyter/prefer-lazy-imports -- activation attaches the controller to restored image tabs at once
 import { ViewerController } from './controller';
 
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
@@ -46,12 +49,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;
@@ -69,16 +81,20 @@ 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, IDefaultFileBrowser],
+  optional: [ISettingRegistry, IDefaultFileBrowser, ITranslator],
   activate: (
     app: JupyterFrontEnd,
     tracker: IImageTracker,
     settingRegistry: ISettingRegistry | null,
-    fileBrowser: IDefaultFileBrowser | null
+    fileBrowser: IDefaultFileBrowser | null,
+    translator: ITranslator | null
   ): void => {
     console.log(
       'JupyterLab extension jupyterlab_advanced_image_viewer_extension is activated!'
     );
+    const trans = (translator ?? nullTranslator).load(
+      'jupyterlab_advanced_image_viewer_extension'
+    );
     const controllers = new WeakMap<ImageViewer, ViewerController>();
     const state: ISettingsState = { ...defaults };
     let keyBindings: IDisposable[] = [];
@@ -112,9 +128,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
         '</ul>'
       ].join('');
       void showDialog({
-        title: 'Advanced Image Viewer',
+        title: trans.__('Advanced Image Viewer'),
         body,
-        buttons: [Dialog.okButton({ label: 'Close' })]
+        buttons: [Dialog.okButton({ label: trans.__('Close') })]
       });
     };
 
@@ -146,7 +162,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         'advanced-refresh',
         new ToolbarButton({
           icon: refreshIcon,
-          tooltip: 'Reload image from disk',
+          tooltip: trans.__('Reload image from disk'),
           noFocusOnClick: true,
           onClick: async () => {
             await widget.context.revert();
@@ -158,7 +174,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         'advanced-zoom-out',
         new ToolbarButton({
           label: '-',
-          tooltip: 'Zoom out',
+          tooltip: trans.__('Zoom out'),
           noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomOut)
         })
@@ -167,7 +183,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
         'advanced-zoom-in',
         new ToolbarButton({
           label: '+',
-          tooltip: 'Zoom in',
+          tooltip: trans.__('Zoom in'),
           noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.zoomIn)
         })
@@ -175,8 +191,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       widget.toolbar.addItem(
         'advanced-reset-fit',
         new ToolbarButton({
-          label: 'Fit',
-          tooltip: 'Reset to fit',
+          label: trans.__('Fit'),
+          tooltip: trans.__('Reset to fit'),
           noFocusOnClick: true,
           onClick: () => app.commands.execute(CommandIDs.resetFit)
         })
@@ -184,9 +200,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
       widget.toolbar.addItem('advanced-spacer', Toolbar.createSpacerItem());
       const helpLink = new Widget({ node: document.createElement('a') });
       const helpAnchor = helpLink.node as HTMLAnchorElement;
-      helpAnchor.textContent = 'help';
+      helpAnchor.textContent = trans.__('help');
       helpAnchor.href = '#';
-      helpAnchor.title = 'Keybindings and help';
+      helpAnchor.title = trans.__('Keybindings and help');
       helpAnchor.className = 'jp-AdvancedImageViewer-help-link';
       helpAnchor.addEventListener('click', event => {
         event.preventDefault();
@@ -209,19 +225,35 @@ 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)',
+      label: trans.__('Zoom In (Advanced Image Viewer)'),
+      describedBy: { args: { type: 'object', properties: {} } },
       isEnabled: () => currentController() !== null,
       execute: () => currentController()?.zoomIn()
     });
     app.commands.addCommand(CommandIDs.zoomOut, {
-      label: 'Zoom Out (Advanced Image Viewer)',
+      label: trans.__('Zoom Out (Advanced Image Viewer)'),
+      describedBy: { args: { type: 'object', properties: {} } },
       isEnabled: () => currentController() !== null,
       execute: () => currentController()?.zoomOut()
     });
     app.commands.addCommand(CommandIDs.resetFit, {
-      label: 'Reset to Fit (Advanced Image Viewer)',
+      label: trans.__('Reset to Fit (Advanced Image Viewer)'),
+      describedBy: { args: { type: 'object', properties: {} } },
       isEnabled: () => currentController() !== null,
       execute: () => currentController()?.reset()
     });
@@ -240,7 +272,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
     };
 
     app.commands.addCommand(CommandIDs.copyClipboard, {
-      label: 'Copy to Clipboard',
+      label: trans.__('Copy to Clipboard'),
+      describedBy: { args: { type: 'object', properties: {} } },
       // Raster only - SVG already has "Copy as PNG" from the drawio extension.
       isVisible: () => {
         const widget = contextImageWidget();
@@ -359,12 +392,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
     };
 
     app.commands.addCommand(CommandIDs.previous, {
-      label: 'Previous Image In Folder',
+      label: trans.__('Previous Image In Folder'),
+      describedBy: { args: { type: 'object', properties: {} } },
       isEnabled: () => state.navEnabled && tracker.currentWidget !== null,
       execute: () => navigate(-1)
     });
     app.commands.addCommand(CommandIDs.next, {
-      label: 'Next Image In Folder',
+      label: trans.__('Next Image In Folder'),
+      describedBy: { args: { type: 'object', properties: {} } },
       isEnabled: () => state.navEnabled && tracker.currentWidget !== null,
       execute: () => navigate(1)
     });