Adds two helpers for style formating and updates onCanvasKeyPress method.

There were created a new helper method "setDisplayTransform" to change navigator styling.
Also, a new general function "setElementTransform" was created to help on element styling.

For this commit, I also made some changes on viewer onCanvasKeyPress method:
- r is rotating the image clockwise;
- R is rotating the image counter clockwise;
- Freed "F" keycode to other purposes (like filters or others).

src/drawer.js

@@ -501,8 +501,8 @@ $.Drawer.prototype = {
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
         } else{
-          if(this.viewer.flipped) {
+          if(this.viewer.doFlip) {
-            this._flip({});
+            this._flip();
           }
         }
         if (tiledImage.getRotation(true) % 360 !== 0) {
@@ -624,11 +624,10 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        if(this.viewer.flipped){
+        if(this.viewer.doFlip){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
-        }
+        } else{
-        else{
           context.rotate(Math.PI / 180 * options.degrees);
         }
         context.translate(-point.x, -point.y);
@@ -636,11 +635,12 @@ $.Drawer.prototype = {
 
     // private
     _flip: function(options) {
+      options = options || {};
       var point = options.point ?
         options.point.times($.pixelDensityRatio) :
         this.getCanvasCenter();
       var context = this._getContext(options.useSketch);
-      context.save();
+      // context.save();
 
       context.translate(point.x, 0);
       context.scale(-1, 1);

src/navigator.js

@@ -277,47 +277,28 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
       /* Flip navigator element
       */
     toogleFlip: function() {
-      this.flipped = !this.flipped;
+      this.doFlip = !this.doFlip;
-      if (this.viewer.flipped){
-        this.displayRegion.style.webkitTransform = "scale(-1,1)";
-        this.displayRegion.style.mozTransform = "scale(-1,1)";
-        this.displayRegion.style.msTransform = "scale(-1,1)";
-        this.displayRegion.style.oTransform = "scale(-1,1)";
-        this.displayRegion.style.transform = "scale(-1,1)";
 
-        this.canvas.style.webkitTransform = "scale(-1,1)";
+      this.setDisplayTransform(this.viewer.doFlip ? "scale(-1,1)" : "scale(1,1)");
-        this.canvas.style.mozTransform = "scale(-1,1)";
-        this.canvas.style.msTransform = "scale(-1,1)";
-        this.canvas.style.oTransform = "scale(-1,1)";
-        this.canvas.style.transform = "scale(-1,1)";
-
-        this.element.style.webkitTransform = "scale(-1,1)";
-        this.element.style.mozTransform = "scale(-1,1)";
-        this.element.style.msTransform = "scale(-1,1)";
-        this.element.style.oTransform = "scale(-1,1)";
-        this.element.style.transform = "scale(-1,1)";
-      } else{
-        this.displayRegion.style.webkitTransform = "scale(1,1)";
-        this.displayRegion.style.mozTransform = "scale(1,1)";
-        this.displayRegion.style.msTransform = "scale(1,1)";
-        this.displayRegion.style.oTransform = "scale(1,1)";
-        this.displayRegion.style.transform = "scale(1,1)";
-
-        this.canvas.style.webkitTransform = "scale(1,1)";
-        this.canvas.style.mozTransform = "scale(1,1)";
-        this.canvas.style.msTransform = "scale(1,1)";
-        this.canvas.style.oTransform = "scale(1,1)";
-        this.canvas.style.transform = "scale(1,1)";
-
-        this.element.style.webkitTransform = "scale(1,1)";
-        this.element.style.mozTransform = "scale(1,1)";
-        this.element.style.msTransform = "scale(1,1)";
-        this.element.style.oTransform = "scale(1,1)";
-        this.element.style.transform = "scale(1,1)";
-      }
       this.viewport.viewer.forceRedraw();
     },
 
+    setDisplayTransform: function(rule) {
+      this.displayRegion.style.webkitTransform = rule;
+      this.displayRegion.style.mozTransform = rule;
+      this.displayRegion.style.msTransform = rule;
+      this.displayRegion.style.oTransform = rule;
+      this.displayRegion.style.transform = rule;
+
+      this.canvas.style.webkitTransform = rule;
+      this.canvas.style.mozTransform = rule;
+      this.canvas.style.msTransform = rule;
+      this.canvas.style.oTransform = rule;
+      this.canvas.style.transform = rule;
+
+      setElementTransform(this.element, rule);
+    },
+
     /**
      * Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
      * @function
@@ -445,6 +426,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     }
 });
 
+
 /**
  * @private
  * @inner
@@ -452,7 +434,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
-        if(this.viewer.flipped){
+        if(this.viewer.doFlip){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
         this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position));
@@ -474,7 +456,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if(this.viewer.flipped){
+        if(this.viewer.doFlip){
             event.delta.x = -event.delta.x;
         }
 
@@ -541,12 +523,17 @@ function onCanvasScroll( event ) {
     * @param {Object} element
     * @param {Number} degrees
     */
-function _setTransformRotate (element, degrees) {
+function _setTransformRotate( element, degrees ) {
-      element.style.webkitTransform = "rotate(" + degrees + "deg)";
+  setElementTransform(element, "rotate(" + degrees + "deg)");
-      element.style.mozTransform = "rotate(" + degrees + "deg)";
-      element.style.msTransform = "rotate(" + degrees + "deg)";
-      element.style.oTransform = "rotate(" + degrees + "deg)";
-      element.style.transform = "rotate(" + degrees + "deg)";
 }
 
+function setElementTransform( element, rule ) {
+  element.style.webkitTransform = rule;
+  element.style.mozTransform = rule;
+  element.style.msTransform = rule;
+  element.style.oTransform = rule;
+  element.style.transform = rule;
+}
+
+
 }( OpenSeadragon ));

src/openseadragon.js

@@ -1130,13 +1130,13 @@ function OpenSeadragon( options ){
             showHomeControl:         true,  //HOME
             showFullPageControl:     true,  //FULL
             showRotationControl:     false, //ROTATION
-            showFlipControl:         false,  //FLIP
+            showFlipControl:         true,  //FLIP
             controlsFadeDelay:       2000,  //ZOOM/HOME/FULL/SEQUENCE
             controlsFadeLength:      1500,  //ZOOM/HOME/FULL/SEQUENCE
             mouseNavEnabled:         true,  //GENERAL MOUSE INTERACTIVITY
 
             //VIEWPORT NAVIGATOR SETTINGS
-            showNavigator:              false,
+            showNavigator:              true,
             navigatorId:                null,
             navigatorPosition:          null,
             navigatorSizeRatio:         0.2,
@@ -1153,7 +1153,7 @@ function OpenSeadragon( options ){
             degrees:                    0,
 
             // INITIAL FLIP STATE
-            flipped:                    false,
+            doFlip:                    false,
 
             // APPEARANCE
             opacity:                    1,
@@ -1223,7 +1223,7 @@ function OpenSeadragon( options ){
                     HOVER:  'rotateright_hover.png',
                     DOWN:   'rotateright_pressed.png'
                 },
-                flip: { // Flip icon by Yaroslav Samoylov from the Noun Project
+                flip: { // Flip icon designed by Yaroslav Samoylov from the Noun Project and modified by Nelson Campos ncampos@criteriamarathon.com, https://thenounproject.com/term/flip/136289/
                     REST:   'flip_rest.png',
                     GROUP:  'flip_grouphover.png',
                     HOVER:  'flip_hover.png',

src/tiledimage.js

@@ -844,7 +844,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             return;
         }
         if (immediately) {
-          this._degreesSpring.resetTo(degrees);
+            this._degreesSpring.resetTo(degrees);
         } else {
             this._degreesSpring.springTo(degrees);
         }
@@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) {
                 useSketch: useSketch
             });
         } else {
-            if(tiledImage._drawer.viewer.flipped) {
+            if(tiledImage._drawer.viewer.doFlip) {
                 tiledImage._drawer._flip({});
             }
         }
@@ -1974,7 +1974,7 @@ function drawTiles( tiledImage, lastDrawn ) {
         if (tiledImage.viewport.degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
         } else{
-          if(tiledImage._drawer.viewer.flipped) {
+          if(tiledImage._drawer.viewer.doFlip) {
             tiledImage._drawer._flip({});
           }
         }

src/viewer.js

@@ -1252,7 +1252,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * @param {Boolean} [options.preload=false]  Default switch for loading hidden images (true loads, false blocks)
      * @param {Number} [options.degrees=0] Initial rotation of the tiled image around
      * its top left corner in degrees.
-     * @param {Boolean} [options.flipped=false] Initial flip/mirror state
+     * @param {Boolean} [options.doFlip=false] Initial flip/mirror state
      * @param {String} [options.compositeOperation] How the image is composited onto other images.
      * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image,
      * overriding viewer.crossOriginPolicy.
@@ -1415,7 +1415,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     opacity: queueItem.options.opacity,
                     preload: queueItem.options.preload,
                     degrees: queueItem.options.degrees,
-                    flipped: queueItem.options.flipped,
+                    doFlip: queueItem.options.doFlip,
                     compositeOperation: queueItem.options.compositeOperation,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
@@ -2621,18 +2621,24 @@ function onCanvasKeyPress( event ) {
                   this.viewport.applyConstraints();
                 }
                 return false;
-            case 114: //r
+            case 114: //r - 90 degrees clockwise rotation
-            case 82: //R
+              if(this.doFlip){
-              if(this.flipped){
                 this.viewport.setRotation(this.viewport.degrees - 90);
               } else{
                 this.viewport.setRotation(this.viewport.degrees + 90);
               }
               this.viewport.applyConstraints();
               return false;
-            case 70: //F
+            case 82: //R - 90 degrees counter clockwise  rotation
+              if(this.doFlip){
+                this.viewport.setRotation(this.viewport.degrees + 90);
+              } else{
+                this.viewport.setRotation(this.viewport.degrees - 90);
+              }
+              this.viewport.applyConstraints();
+              return false;
             case 102: //f
-              this.flipped = !this.flipped;
+              this.doFlip = !this.doFlip;
               if(this.navigator){
                 this.navigator.toogleFlip();
               }
@@ -2657,7 +2663,7 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if(this.flipped){
+    if(this.doFlip){
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2779,7 +2785,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if(this.flipped){
+        if(this.doFlip){
             event.delta.x = -event.delta.x;
         }
 
@@ -3107,7 +3113,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if(this.flipped){
+        if(this.doFlip){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3476,7 +3482,7 @@ function onFullScreen() {
 function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.flipped ){
+        if ( this.doFlip ){
           if (currRotation === 270) {
               currRotation = 0;
           }
@@ -3501,7 +3507,7 @@ function onRotateLeft() {
 function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.flipped ){
+        if ( this.doFlip ){
           if (currRotation === 0) {
               currRotation = 270;
           }
@@ -3524,7 +3530,7 @@ function onRotateRight() {
  * Note: The current rotation feature is limited to 90 degree turns.
  */
 function onFlip() {
-  this.flipped = !this.flipped;
+  this.doFlip = !this.doFlip;
   if(this.navigator){
     this.navigator.toogleFlip();
   }

src/viewport.js

@@ -886,6 +886,7 @@ $.Viewport.prototype = {
             this.viewer.world.getHomeBounds(),
             this.viewer.world.getContentFactor());
         this.viewer.forceRedraw();
+
         /**
          * Raised when rotation has been changed.
          *