jupyterlab_advanced_image_viewer_extension 1.0.2 → 1.0.3

package/lib/index.js

@@ -1,7 +1,8 @@
-import { ToolbarButton } from '@jupyterlab/apputils';
+import { Dialog, showDialog, Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
 import { IImageTracker } from '@jupyterlab/imageviewer';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { Widget } from '@lumino/widgets';
 import { ViewerController } from './controller';
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
 const CommandIDs = {
@@ -43,6 +44,24 @@ const plugin = {
             }
             return (_a = controllers.get(widget.content)) !== null && _a !== void 0 ? _a : null;
         };
+        const showHelp = () => {
+            const body = new Widget();
+            body.addClass('jp-AdvancedImageViewer-help');
+            body.node.innerHTML = [
+                '<p>Interactive viewing layered on the standard image viewer.</p>',
+                '<ul>',
+                '<li><b>Wheel up / down</b> - zoom in / out at the cursor</li>',
+                '<li><b>Click and drag</b> - pan a zoomed-in image</li>',
+                '<li><b>+ / - / Fit</b> - zoom in, zoom out, reset to fit</li>',
+                '<li><b>Left / Right arrows</b> - previous / next image in the folder</li>',
+                '</ul>'
+            ].join('');
+            void showDialog({
+                title: 'Advanced Image Viewer',
+                body,
+                buttons: [Dialog.okButton({ label: 'Close' })]
+            });
+        };
         const attach = (widget) => {
             const viewer = widget.content;
             if (controllers.has(viewer)) {
@@ -74,6 +93,13 @@ const plugin = {
                 tooltip: 'Reset to fit',
                 onClick: () => app.commands.execute(CommandIDs.resetFit)
             }));
+            widget.toolbar.addItem('advanced-spacer', Toolbar.createSpacerItem());
+            widget.toolbar.addItem('advanced-help', new ToolbarButton({
+                label: '?',
+                tooltip: 'Keybindings and help',
+                className: 'jp-AdvancedImageViewer-help-button',
+                onClick: () => showHelp()
+            }));
         };
         tracker.forEach(widget => attach(widget));
         tracker.widgetAdded.connect((_, widget) => attach(widget));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_advanced_image_viewer_extension",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "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,7 +62,8 @@
         "@jupyterlab/docregistry": "^4.0.0",
         "@jupyterlab/imageviewer": "^4.0.0",
         "@jupyterlab/settingregistry": "^4.0.0",
-        "@lumino/disposable": "^2.0.0"
+        "@lumino/disposable": "^2.0.0",
+        "@lumino/widgets": "^2.0.0"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",

package/src/index.ts

@@ -3,7 +3,12 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { ToolbarButton } from '@jupyterlab/apputils';
+import {
+  Dialog,
+  showDialog,
+  Toolbar,
+  ToolbarButton
+} from '@jupyterlab/apputils';
 
 import { PathExt } from '@jupyterlab/coreutils';
 
@@ -15,6 +20,8 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { IDisposable } from '@lumino/disposable';
 
+import { Widget } from '@lumino/widgets';
+
 import { ViewerController } from './controller';
 
 const PLUGIN_ID = 'jupyterlab_advanced_image_viewer_extension:plugin';
@@ -74,6 +81,25 @@ const plugin: JupyterFrontEndPlugin<void> = {
       return controllers.get(widget.content) ?? null;
     };
 
+    const showHelp = (): void => {
+      const body = new Widget();
+      body.addClass('jp-AdvancedImageViewer-help');
+      body.node.innerHTML = [
+        '<p>Interactive viewing layered on the standard image viewer.</p>',
+        '<ul>',
+        '<li><b>Wheel up / down</b> - zoom in / out at the cursor</li>',
+        '<li><b>Click and drag</b> - pan a zoomed-in image</li>',
+        '<li><b>+ / - / Fit</b> - zoom in, zoom out, reset to fit</li>',
+        '<li><b>Left / Right arrows</b> - previous / next image in the folder</li>',
+        '</ul>'
+      ].join('');
+      void showDialog({
+        title: 'Advanced Image Viewer',
+        body,
+        buttons: [Dialog.okButton({ label: 'Close' })]
+      });
+    };
+
     const attach = (widget: IDocumentWidget<ImageViewer>): void => {
       const viewer = widget.content;
       if (controllers.has(viewer)) {
@@ -119,6 +145,16 @@ const plugin: JupyterFrontEndPlugin<void> = {
           onClick: () => app.commands.execute(CommandIDs.resetFit)
         })
       );
+      widget.toolbar.addItem('advanced-spacer', Toolbar.createSpacerItem());
+      widget.toolbar.addItem(
+        'advanced-help',
+        new ToolbarButton({
+          label: '?',
+          tooltip: 'Keybindings and help',
+          className: 'jp-AdvancedImageViewer-help-button',
+          onClick: () => showHelp()
+        })
+      );
     };
 
     tracker.forEach(widget => attach(widget));

package/style/base.css

@@ -3,3 +3,16 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+
+.jp-AdvancedImageViewer-help {
+  max-width: 360px;
+}
+
+.jp-AdvancedImageViewer-help ul {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.jp-AdvancedImageViewer-help li {
+  margin: 2px 0;
+}