add rotation functions and commands

packages/imageviewer-extension/src/index.ts

@@ -25,6 +25,12 @@ namespace CommandIDs {
 
   export
   const zoomOut = 'imageviewer:zoom-out';
+
+  export
+  const rot90 = 'imageviewer:rot90';
+
+  export
+  const rot270 = 'imageviewer:rot270';
 }
 
 
@@ -98,7 +104,7 @@ function activate(app: JupyterLab, palette: ICommandPalette, restorer: ILayoutRe
 
   const category = 'Image Viewer';
 
-  [CommandIDs.zoomIn, CommandIDs.zoomOut, CommandIDs.resetZoom]
+  [CommandIDs.zoomIn, CommandIDs.zoomOut, CommandIDs.resetZoom, CommandIDs.rot90, CommandIDs.rot270]
     .forEach(command => { palette.addItem({ command, category }); });
 
   return tracker;
@@ -138,6 +144,18 @@ function addCommands(app: JupyterLab, tracker: IImageTracker) {
     isEnabled
   });
 
+  commands.addCommand('imageviewer:rot90', {
+    execute: rot90,
+    label: 'Rotate clockwise',
+    isEnabled
+  });
+    
+  commands.addCommand('imageviewer:rot270', {
+    execute: rot270,
+    label: 'Rotate counterclockwise',
+    isEnabled
+  });
+    
   function zoomIn(): void {
     const widget = tracker.currentWidget;
 
@@ -161,5 +179,21 @@ function addCommands(app: JupyterLab, tracker: IImageTracker) {
       widget.scale = 1;
     }
   }
+    
+  function rot90(): void {
+    const widget = tracker.currentWidget;
+
+    if (widget) {
+      widget.rotation += 90;
+    }
+  }
+
+  function rot270(): void {
+    const widget = tracker.currentWidget;
+
+    if (widget) {
+      widget.rotation += 270;
+    }
+  }
 }
 

packages/imageviewer/src/widget.ts

@@ -85,6 +85,23 @@ class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
     scaleNode.style.transform = transform;
   }
 
+  /**
+   * The rotation of the image.
+   */
+  get rotation(): number{
+    return this._rotation;
+  }
+  set rotation(value: number) {
+    if (value === this._rotation) {
+        return;
+    }
+    this._rotation = value;
+    let scaleNode = this.node.querySelector('div') as HTMLElement;
+    let transform: string;
+      transform = `rotate(${value}deg)`;
+    scaleNode.style.transform = transform;
+  }
+
   /**
    * Handle `update-request` messages for the widget.
    */
@@ -125,6 +142,7 @@ class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
   }
 
   private _scale = 1;
+  private _rotation = 0;
   private _ready = new PromiseDelegate<void>();
 }