add functions for flipping and color inversion

packages/imageviewer-extension/src/index.ts

@@ -26,11 +26,20 @@ namespace CommandIDs {
   export
   const zoomOut = 'imageviewer:zoom-out';
 
+  export
+  const flipHorizontal = 'imageviewer:flip-horizontal';
+
+  export
+  const flipVertical = 'imageviewer:flip-vertical';
+
   export
   const rotateClockwise = 'imageviewer:rotate-clockwise';
 
   export
   const rotateCounterclockwise = 'imageviewer:rotate-counterclockwise';
+
+  export
+  const invertColors = 'imageviewer:invert-colors';
 }
 
 
@@ -104,7 +113,7 @@ function activate(app: JupyterLab, palette: ICommandPalette, restorer: ILayoutRe
 
   const category = 'Image Viewer';
 
-  [CommandIDs.zoomIn, CommandIDs.zoomOut, CommandIDs.resetImage, CommandIDs.rotateClockwise, CommandIDs.rotateCounterclockwise]
+  [CommandIDs.zoomIn, CommandIDs.zoomOut, CommandIDs.resetImage, CommandIDs.rotateClockwise, CommandIDs.rotateCounterclockwise, CommandIDs.flipHorizontal, CommandIDs.flipVertical, CommandIDs.invertColors]
     .forEach(command => { palette.addItem({ command, category }); });
 
   return tracker;
@@ -156,6 +165,24 @@ function addCommands(app: JupyterLab, tracker: IImageTracker) {
     isEnabled
   });
 
+  commands.addCommand('imageviewer:flip-horizontal', {
+    execute: flipHorizontal,
+    label: 'Flip image horizontally',
+    isEnabled
+  });
+
+  commands.addCommand('imageviewer:flip-vertical', {
+    execute: flipVertical,
+    label: 'Flip image vertically',
+    isEnabled
+  });
+
+  commands.addCommand('imageviewer:invert-colors', {
+    execute: invertColors,
+    label: 'Invert Colors',
+    isEnabled
+  });
+
   function zoomIn(): void {
     const widget = tracker.currentWidget;
 
@@ -178,6 +205,9 @@ function addCommands(app: JupyterLab, tracker: IImageTracker) {
     if (widget) {
       widget.scale = 1;
       widget.rotation = 0;
+      widget.horizontalflip = 1;
+      widget.verticalflip = 1;
+      widget.colorinversion = 0;
     }
   }
 
@@ -196,5 +226,30 @@ function addCommands(app: JupyterLab, tracker: IImageTracker) {
       widget.rotation -= 90;
     }
   }
+
+  function flipHorizontal(): void {
+    const widget = tracker.currentWidget;
+
+    if (widget) {
+      widget.horizontalflip *= -1;
+    }
+  }
+
+  function flipVertical(): void {
+    const widget = tracker.currentWidget;
+
+    if (widget) {
+      widget.verticalflip *= -1;
+    }
+  }
+  
+  function invertColors(): void {
+    const widget = tracker.currentWidget;
+
+    if (widget) {
+      widget.colorinversion += 1;
+      widget.colorinversion %= 2;
+    }
+  }
 }
 

packages/imageviewer/src/widget.ts

@@ -79,10 +79,7 @@ class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
       return;
     }
     this._scale = value;
-    let scaleNode = this.node.querySelector('div') as HTMLElement;
-    let transform: string;
-    transform = `translate(-50%,-50%) scale(${value}) rotate(${this._rotation}deg)`;
-    scaleNode.style.transform = transform;
+    this.updateStyle();
   }
 
   /**
@@ -96,12 +93,51 @@ class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
         return;
     }
     this._rotation = value % 360;
-    let rotNode = this.node.querySelector('div') as HTMLElement;
-    let transform: string;
-    transform = `translate(-50%,-50%) scale(${this._scale}) rotate(${value}deg)`;
-    rotNode.style.transform = transform;
+    this.updateStyle();
+  }
+  
+  /**
+   * The horizontal flip of the image.
+   */
+  get horizontalflip(): number {
+    return this._horizontalflip;
+  }
+  set horizontalflip(value: number) {
+    if (value === this._horizontalflip) {
+        return;
+    }
+    this._horizontalflip = value;
+    this.updateStyle();
   }
 
+  /**
+   * The vertical flip of the image.
+   */
+  get verticalflip(): number {
+    return this._verticalflip;
+  }
+  set verticalflip(value: number) {
+    if (value === this._verticalflip) {
+        return;
+    }
+    this._verticalflip = value;
+    this.updateStyle();
+  }
+
+  /**
+   * The color inversion of the image.
+   */
+  get colorinversion(): number {
+    return this._colorinversion;
+  }
+  set colorinversion(value: number) {
+    if (value === this._colorinversion) {
+        return;
+    }
+    this._colorinversion = value;
+    this.updateStyle();
+  }
+  
   /**
    * Handle `update-request` messages for the widget.
    */
@@ -141,8 +177,25 @@ class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
     node.setAttribute('src', src);
   }
 
+  private updateStyle(): void {
+      let transformString: string;
+      let filterString: string;
+  
+      transformString = `translate(-50%,-50%) `;
+      transformString += `scale(${this._scale*this._horizontalflip},${this._scale*this._verticalflip}) `;
+      transformString += `rotate(${this._rotation}deg)`;
+      filterString = `invert(${this._colorinversion})`;
+
+      let rotNode = this.node.querySelector('div') as HTMLElement;
+      rotNode.style.transform = transformString;
+      rotNode.style.filter = filterString;
+  }
+
   private _scale = 1;
   private _rotation = 0;
+  private _horizontalflip = 1;
+  private _verticalflip = 1;
+  private _colorinversion = 0;
   private _ready = new PromiseDelegate<void>();
 }