Modernize image widget and plugin, add to lab application.

jupyterlab/index.js

@@ -23,7 +23,7 @@ lab.registerPlugins([
   require('jupyterlab/lib/faq/plugin').faqExtension,
   require('jupyterlab/lib/filebrowser/plugin').fileBrowserProvider,
   require('jupyterlab/lib/help/plugin').helpHandlerExtension,
-  // require('jupyterlab/lib/imagewidget/plugin').imageHandlerExtension,
+  require('jupyterlab/lib/imagewidget/plugin').imageHandlerExtension,
   require('jupyterlab/lib/inspector/plugin').inspectorProvider,
   // require('jupyterlab/lib/leafletwidget/plugin').mapHandlerExtension,
   require('jupyterlab/lib/landing/plugin').landingExtension,

src/imagewidget/plugin.ts

@@ -2,11 +2,15 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  Application
-} from 'phosphide/lib/core/application';
+  JupyterLab, JupyterLabPlugin
+} from '../application';
 
 import {
-  DocumentRegistry
+  ICommandPalette
+} from '../commandpalette/plugin';
+
+import {
+  IDocumentRegistry
 } from '../docregistry';
 
 import {
@@ -29,9 +33,9 @@ const EXTENSIONS = ['.png', '.gif', '.jpeg', '.jpg', '.svg', '.bmp', '.ico',
  * The image file handler extension.
  */
 export
-const imageHandlerExtension = {
-  id: 'jupyter.extensions.imageHandler',
-  requires: [DocumentRegistry],
+const imageHandlerExtension: JupyterLabPlugin<void> = {
+  id: 'jupyter.extensions.image-handler',
+  requires: [IDocumentRegistry, ICommandPalette],
   activate: activateImageWidget
 };
 
@@ -39,14 +43,12 @@ const imageHandlerExtension = {
 /**
  * Activate the image widget extension.
  */
-function activateImageWidget(app: Application, registry: DocumentRegistry): void {
-    let zoomInImage = 'ImageWidget:zoomIn';
-    let zoomOutImage = 'ImageWidget:zoomOut';
-    let resetZoomImage = 'ImageWidget:resetZoom';
+function activateImageWidget(app: JupyterLab, registry: IDocumentRegistry, palette: ICommandPalette): void {
+    let zoomInImage = 'image-widget:zoom-in';
+    let zoomOutImage = 'image-widget:zoom-out';
+    let resetZoomImage = 'image-widget:reset-zoom';
     let tracker = new WidgetTracker<ImageWidget>();
-
     let image = new ImageWidgetFactory();
-
     let options = {
       fileExtensions: EXTENSIONS,
       displayName: 'Image',
@@ -62,37 +64,22 @@ function activateImageWidget(app: Application, registry: DocumentRegistry): void
       tracker.addWidget(newWidget);
     });
 
-    app.commands.add([
-      {
-        id: zoomInImage,
-        handler: zoomIn
-      },
-      {
-        id: zoomOutImage,
-        handler: zoomOut
-      },
-      {
-        id: resetZoomImage,
-        handler: resetZoom
-      }
-    ]);
-    app.palette.add([
-      {
-        command: zoomInImage,
-        category: 'Image Widget',
-        text: 'Zoom In',
-      },
-      {
-        command: zoomOutImage,
-        category: 'Image Widget',
-        text: 'Zoom Out',
-      },
-      {
-        command: resetZoomImage,
-        category: 'Image Widget',
-        text: 'Reset Zoom',
-      },
-    ]);
+    app.commands.addCommand(zoomInImage, {
+      execute: zoomIn,
+      label: 'Zoom In'
+    });
+    app.commands.addCommand(zoomOutImage, {
+      execute: zoomOut,
+      label: 'Zoom Out'
+    });
+    app.commands.addCommand(resetZoomImage, {
+      execute: resetZoom,
+      label: 'Reset Zoom'
+    });
+
+    let category = 'Image Widget';
+    [zoomInImage, zoomOutImage, resetZoomImage]
+      .forEach(command => palette.addItem({ command, category }));
 
     function zoomIn(): void {
       if (!tracker.activeWidget) {

src/imagewidget/widget.ts

@@ -7,11 +7,11 @@ import {
 
 import {
   Message
-} from 'phosphor-messaging';
+} from 'phosphor/lib/core/messaging';
 
 import {
   Widget
-} from 'phosphor-widget';
+} from 'phosphor/lib/ui/widget';
 
 import {
   ABCWidgetFactory, IDocumentModel, IDocumentContext
@@ -28,23 +28,11 @@ const IMAGE_CLASS = 'jp-ImageWidget';
  */
 export
 class ImageWidget extends Widget {
-  /**
-   * Create the node for the image widget.
-   */
-  static createNode(): HTMLElement {
-    let node = document.createElement('div');
-    let innerNode = document.createElement('div');
-    let image = document.createElement('img');
-    node.appendChild(innerNode);
-    innerNode.appendChild(image);
-    return node;
-  }
-
   /**
    * Construct a new image widget.
    */
   constructor(context: IDocumentContext<IDocumentModel>) {
-    super();
+    super({ node: Private.createNode() });
     this._context = context;
     this.node.tabIndex = -1;
     this.addClass(IMAGE_CLASS);
@@ -52,15 +40,9 @@ class ImageWidget extends Widget {
     if (context.model.toString()) {
       this.update();
     }
-    context.pathChanged.connect(() => {
-      this.update();
-    });
-    context.model.contentChanged.connect(() => {
-      this.update();
-    });
-    context.contentsModelChanged.connect(() => {
-      this.update();
-    });
+    context.pathChanged.connect(() => this.update());
+    context.model.contentChanged.connect(() => this.update());
+    context.contentsModelChanged.connect(() => this.update());
   }
 
   /**
@@ -101,7 +83,7 @@ class ImageWidget extends Widget {
    * Handle `update-request` messages for the widget.
    */
   protected onUpdateRequest(msg: Message): void {
-    this.title.text = this._context.path.split('/').pop();
+    this.title.label = this._context.path.split('/').pop();
     let cm = this._context.contentsModel;
     if (cm === null) {
       return;
@@ -130,3 +112,21 @@ class ImageWidgetFactory extends ABCWidgetFactory<ImageWidget, IDocumentModel> {
     return widget;
   }
 }
+
+/**
+ * A namespace for image widget private data.
+ */
+namespace Private {
+  /**
+   * Create the node for the image widget.
+   */
+  export
+  function createNode(): HTMLElement {
+    let node = document.createElement('div');
+    let innerNode = document.createElement('div');
+    let image = document.createElement('img');
+    node.appendChild(innerNode);
+    innerNode.appendChild(image);
+    return node;
+  }
+}

src/tsconfig.json

@@ -25,6 +25,7 @@
     "faq/plugin",
     "filebrowser/plugin",
     "help/plugin",
+    "imagewidget/plugin",
     "index",
     "inspector/plugin",
     "landing/plugin",