Fix widget tracker bug and clean up image widget/plugin

src/imagewidget/plugin.ts

@@ -2,22 +2,20 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  DocumentRegistry
-} from '../docregistry';
+  Application
+} from 'phosphide/lib/core/application';
 
 import {
-  ImageWidgetFactory
-} from './widget';
+  DocumentRegistry
+} from '../docregistry';
 
-import {
-  Application
-} from 'phosphide/lib/core/application';
 import {
   WidgetTracker
 } from '../widgettracker';
+
 import {
-  ImageWidget
-} from './widget.ts';
+  ImageWidget, ImageWidgetFactory
+} from './widget';
 
 
 /**
@@ -37,14 +35,16 @@ const imageHandlerExtension = {
   activate: activateImageWidget
 };
 
-function activateImageWidget (app: Application, registry: DocumentRegistry): void {
+
+/**
+ * Activate the image widget extension.
+ */
+function activateImageWidget(app: Application, registry: DocumentRegistry): void {
     let zoomInImage = 'ImageWidget:zoomIn';
     let zoomOutImage = 'ImageWidget:zoomOut';
     let resetZoomImage = 'ImageWidget:resetZoom';
     let tracker = new WidgetTracker<ImageWidget>();
 
-    let scale = 1.0;
-
     let image = new ImageWidgetFactory();
 
     let options = {
@@ -59,7 +59,7 @@ function activateImageWidget (app: Application, registry: DocumentRegistry): voi
     registry.addWidgetFactory(image, options);
 
     image.widgetCreated.connect((sender, newWidget) => {
-        tracker.addWidget(newWidget);
+      tracker.addWidget(newWidget);
     });
 
     app.commands.add([
@@ -95,24 +95,34 @@ function activateImageWidget (app: Application, registry: DocumentRegistry): voi
     ]);
 
     function zoomIn(): void {
-        if (scale > 1) {
-            scale += .5;
-        } else {
-            scale *= 2;
-        }
-        tracker.activeWidget.levelZoom(scale);
-
+      if (!tracker.activeWidget) {
+        return;
+      }
+      let widget = tracker.activeWidget;
+      if (widget.scale > 1) {
+        widget.scale += .5;
+      } else {
+        widget.scale *= 2;
+      }
     }
+
     function zoomOut(): void {
-        if (scale > 1) {
-            scale -= .5;
-        } else {
-            scale /= 2;
-        }
-        tracker.activeWidget.levelZoom(scale);
+      if (!tracker.activeWidget) {
+        return;
+      }
+      let widget = tracker.activeWidget;
+      if (widget.scale > 1) {
+        widget.scale -= .5;
+      } else {
+        widget.scale /= 2;
+      }
     }
+
     function resetZoom(): void {
-        scale = 1;
-        tracker.activeWidget.levelZoom(scale);
+      if (!tracker.activeWidget) {
+        return;
+      }
+      let widget = tracker.activeWidget;
+      widget.scale = 1;
     }
 }

src/imagewidget/widget.ts

@@ -14,7 +14,7 @@ import {
 } from 'phosphor-widget';
 
 import {
-  ABCWidgetFactory, IDocumentModel, IWidgetFactory, IDocumentContext
+  ABCWidgetFactory, IDocumentModel, IDocumentContext
 } from '../docregistry';
 
 /**
@@ -22,6 +22,7 @@ import {
  */
 const IMAGE_CLASS = 'jp-ImageWidget';
 
+
 /**
  * A widget for images.
  */
@@ -62,6 +63,28 @@ class ImageWidget extends Widget {
     });
   }
 
+  /**
+   * The scale factor for the image.
+   */
+  get scale(): number {
+    return this._scale;
+  }
+  set scale(value: number) {
+    if (value === this._scale) {
+      return;
+    }
+    this._scale = value;
+    let scaleNode = this.node.querySelector('div') as HTMLElement;
+    let zoomString: string;
+    if (value > 1) {
+      zoomString = 'scale(' + value + ') translate(' + (((value-1)/2)*100/value) + '%, ' + (((value-1)/2)*100/value) + '%)';
+    } else {
+      zoomString = 'scale(' + value + ') translateY(' + (((value-1)/2)*100/value) + '%)';
+    }
+    scaleNode.style.transform = zoomString;
+    this.update();
+  }
+
   /**
    * Dispose of the resources used by the widget.
    */
@@ -86,22 +109,8 @@ class ImageWidget extends Widget {
     this.node.querySelector('img').setAttribute('src', `data:${cm.mimetype};${cm.format},${content}`);
   }
 
-  levelZoom(level: number): void {
-      let scaleNode = (<HTMLElement>this.node.querySelector('div'));
-      let zoomString: string;
-      if (level > 1) {
-        zoomString = 'scale(' + level + ') translate(' + (((level-1)/2)*100/level) + '%, ' + (((level-1)/2)*100/level) + '%)';
-      } else {
-        zoomString = 'scale(' + level + ') translateY(' + (((level-1)/2)*100/level) + '%)';
-      }
-
-      console.log(zoomString);
-      console.log(scaleNode.style.width);
-      scaleNode.style.transform = zoomString;
-      this.update();
-  }
-
   private _context: IDocumentContext<IDocumentModel>;
+  private _scale = 1;
 }
 
 

src/widgettracker/index.ts

@@ -85,16 +85,6 @@ class WidgetTracker<T extends Widget> implements IDisposable {
     if (this._widgets.indexOf(widget) === -1) {
       return;
     }
-    // Activate the widget in the dock panel.
-    // TODO: Use an API for this for this when available.
-    let stack = widget.parent;
-    if (!stack) {
-      return;
-    }
-    let tabs = stack.parent;
-    if (tabs instanceof TabPanel) {
-      tabs.currentWidget = widget;
-    }
     // Toggle the active class in the widget titles.
     if (this._activeWidget) {
       let className =  this._activeWidget.title.className;
@@ -106,6 +96,16 @@ class WidgetTracker<T extends Widget> implements IDisposable {
       widget.title.className += ` ${SEMANTIC_FOCUS_CLASS}`;
     }
     this.activeWidgetChanged.emit(widget);
+    // Activate the widget in the dock panel.
+    // TODO: Use an API for this for this when available.
+    let stack = widget.parent;
+    if (!stack) {
+      return;
+    }
+    let tabs = stack.parent;
+    if (tabs instanceof TabPanel) {
+      tabs.currentWidget = widget;
+    }
   }
 
   /**