From 71fd747051e14d77bc096dacf5019c70ed0b4701 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 4 Apr 2018 11:31:18 +0100
Subject: [PATCH 01/17] Adds flip/mirror slides feature.

This commit adds full support for a new OpenSeaDragon(OSD) feature - Mirror/Flip.
In order to fully support this new feature, the following OSD objects had to be modified:
        - drawer.js:
        - navigator
        - openseadragon
        - strings
        - tiledImage
	- viewer

Additionally, a new flip button was created (similar to the existing ones).

Flip Logic
        Whenever the state is flip button is pressed, flip state is toogled, inverting all the controls and displays (the rotation direction is inverted as well).
        This means that all viewer coordinates (including user inputs) must me inverted too.

Summary of modifications
        - drawer.js: modified _offsetForRotation to invert rotation angle on flipped state. Added a _flip method to scale/mirror canvas context.
        - navigator.js: adds full flip support and inverts nagivator inputs.
        - openseadragon.js: new buttons, flip state variable and showFlipControl variable.
        - strings.js: flip tool help tips.
        - tiledImage.js: flips the actual drawing canvas.
	- viewer.js: Added keyboardshortcuts to rotate 90degrees (r/R) and flip image (f/F). flip button state is stored here and flip order is set.

The flipped state is stored on viewer object.
---
 images/flip_grouphover.png | Bin 0 -> 2179 bytes
 images/flip_hover.png      | Bin 0 -> 2340 bytes
 images/flip_pressed.png    | Bin 0 -> 2307 bytes
 images/flip_rest.png       | Bin 0 -> 2300 bytes
 src/drawer.js              |  25 ++++++++-
 src/navigator.js           |  64 +++++++++++++++++++++--
 src/openseadragon.js       |  20 +++++++
 src/strings.js             |   3 +-
 src/tiledimage.js          |  10 +++-
 src/viewer.js              | 104 ++++++++++++++++++++++++++++++++-----
 src/viewport.js            |   1 -
 11 files changed, 205 insertions(+), 22 deletions(-)
 create mode 100644 images/flip_grouphover.png
 create mode 100644 images/flip_hover.png
 create mode 100644 images/flip_pressed.png
 create mode 100644 images/flip_rest.png

diff --git a/images/flip_grouphover.png b/images/flip_grouphover.png
new file mode 100644
index 0000000000000000000000000000000000000000..014ead6a384c9b97f041f1c9b0dcc3b52e5c5bc6
GIT binary patch
literal 2179
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
FV1gXFMLYli

literal 0
HcmV?d00001

diff --git a/images/flip_hover.png b/images/flip_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..526dc991090671cadb69117b4ab4081e6c81c046
GIT binary patch
literal 2340
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
KMNUMnLSTaLa&622

literal 0
HcmV?d00001

diff --git a/images/flip_pressed.png b/images/flip_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..28b074c28a40bbc1915547d3d62fb176db322ed3
GIT binary patch
literal 2307
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

literal 0
HcmV?d00001

diff --git a/images/flip_rest.png b/images/flip_rest.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f15e5dad9d84211ca11659757a55e16ec05fdc1
GIT binary patch
literal 2300
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
WMCt8+d#a@X0000<MNUMnLSTaJHbg!E

literal 0
HcmV?d00001

diff --git a/src/drawer.js b/src/drawer.js
index c904abbb..9aa7ef44 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -500,6 +500,10 @@ $.Drawer.prototype = {
 
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
+        } else{
+          if(this.viewer.flipped) {
+            this._flip({});
+          }
         }
         if (tiledImage.getRotation(true) % 360 !== 0) {
             this._offsetForRotation({
@@ -620,10 +624,29 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        context.rotate(Math.PI / 180 * options.degrees);
+        if(this.viewer.flipped){
+          context.rotate(Math.PI / 180 * -options.degrees);
+          context.scale(-1, 1);
+        }
+        else{
+          context.rotate(Math.PI / 180 * options.degrees);
+        }
         context.translate(-point.x, -point.y);
     },
 
+    // private
+    _flip: function(options) {
+      var point = options.point ?
+        options.point.times($.pixelDensityRatio) :
+        this.getCanvasCenter();
+      var context = this._getContext(options.useSketch);
+      context.save();
+
+      context.translate(point.x, 0);
+      context.scale(-1, 1);
+      context.translate(-point.x, 0);
+    },
+
     // private
     _restoreRotationChanges: function(useSketch) {
         var context = this._getContext(useSketch);
diff --git a/src/navigator.js b/src/navigator.js
index 4c9848cf..7ee60297 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -208,12 +208,14 @@ $.Navigator = function( options ){
         var degrees = options.viewer.viewport ?
             options.viewer.viewport.getRotation() :
             options.viewer.degrees || 0;
+
         rotate(degrees);
         options.viewer.addHandler("rotate", function (args) {
             rotate(args.degrees);
         });
     }
 
+
     // Remove the base class' (Viewer's) innerTracker and replace it with our own
     this.innerTracker.destroy();
     this.innerTracker = new $.MouseTracker({
@@ -271,6 +273,50 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
             }
         }
     },
+    /**
+      /* Flip navigator element
+      */
+    toogleFlip: function() {
+      this.flipped = !this.flipped;
+      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.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();
+    },
 
     /**
      * Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
@@ -406,6 +452,9 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
+        if(this.viewer.flipped){
+          event.position.x = this.viewport.getContainerSize().x - event.position.x;
+        }
         this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position));
         this.viewer.viewport.applyConstraints();
     }
@@ -424,6 +473,11 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
+
+        if(this.viewer.flipped){
+            event.delta.x = -event.delta.x;
+        }
+
         this.viewer.viewport.panBy(
             this.viewport.deltaPointsFromPixels(
                 event.delta
@@ -488,11 +542,11 @@ function onCanvasScroll( event ) {
     * @param {Number} degrees
     */
 function _setTransformRotate (element, degrees) {
-    element.style.webkitTransform = "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)";
+      element.style.webkitTransform = "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)";
 }
 
 }( OpenSeadragon ));
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 4cb36dd3..8963e77f 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -478,6 +478,10 @@
   *     Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding
   *     this setting when set to false.
   *
+  * @property {Boolean} [showFlipControl=false]
+  *     If true then the flip controls will be displayed as part of the
+  *     standard controls.
+  *
   * @property {Boolean} [showSequenceControl=true]
   *     If sequenceMode is true, then provide buttons for navigating forward and
   *     backward through the images.
@@ -688,6 +692,12 @@
   * @property {String} rotateright.HOVER
   * @property {String} rotateright.DOWN
   *
+  * @property {Object} flip - Images for the flip button.
+  * @property {String} flip.REST
+  * @property {String} flip.GROUP
+  * @property {String} flip.HOVER
+  * @property {String} flip.DOWN
+  *
   * @property {Object} previous - Images for the previous button.
   * @property {String} previous.REST
   * @property {String} previous.GROUP
@@ -1120,6 +1130,7 @@ function OpenSeadragon( options ){
             showHomeControl:         true,  //HOME
             showFullPageControl:     true,  //FULL
             showRotationControl:     false, //ROTATION
+            showFlipControl:         false,  //FLIP
             controlsFadeDelay:       2000,  //ZOOM/HOME/FULL/SEQUENCE
             controlsFadeLength:      1500,  //ZOOM/HOME/FULL/SEQUENCE
             mouseNavEnabled:         true,  //GENERAL MOUSE INTERACTIVITY
@@ -1141,6 +1152,9 @@ function OpenSeadragon( options ){
             // INITIAL ROTATION
             degrees:                    0,
 
+            // INITIAL FLIP STATE
+            flipped:                    false,
+
             // APPEARANCE
             opacity:                    1,
             preload:                    false,
@@ -1209,6 +1223,12 @@ function OpenSeadragon( options ){
                     HOVER:  'rotateright_hover.png',
                     DOWN:   'rotateright_pressed.png'
                 },
+                flip: { // Flip icon by Yaroslav Samoylov from the Noun Project
+                    REST:   'flip_rest.png',
+                    GROUP:  'flip_grouphover.png',
+                    HOVER:  'flip_hover.png',
+                    DOWN:   'flip_pressed.png'
+                },
                 previous: {
                     REST:   'previous_rest.png',
                     GROUP:  'previous_grouphover.png',
diff --git a/src/strings.js b/src/strings.js
index cd3c7907..88a6a7e5 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -57,7 +57,8 @@ var I18N = {
         NextPage:       "Next page",
         PreviousPage:   "Previous page",
         RotateLeft:     "Rotate left",
-        RotateRight:    "Rotate right"
+        RotateRight:    "Rotate right",
+        Flip:           "Flip Horizontally"
     }
 };
 
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 49ebcb22..1523e5a7 100644
--- a/src/tiledimage.js
+++ b/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);
         }
@@ -1886,6 +1886,10 @@ function drawTiles( tiledImage, lastDrawn ) {
                 degrees: tiledImage.viewport.degrees,
                 useSketch: useSketch
             });
+        } else {
+            if(tiledImage._drawer.viewer.flipped) {
+                tiledImage._drawer._flip({});
+            }
         }
         if (tiledImage.getRotation(true) % 360 !== 0) {
             tiledImage._drawer._offsetForRotation({
@@ -1969,6 +1973,10 @@ function drawTiles( tiledImage, lastDrawn ) {
         }
         if (tiledImage.viewport.degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
+        } else{
+          if(tiledImage._drawer.viewer.flipped) {
+            tiledImage._drawer._flip({});
+          }
         }
     }
 
diff --git a/src/viewer.js b/src/viewer.js
index 341e3d49..792ebb73 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1252,6 +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 {String} [options.compositeOperation] How the image is composited onto other images.
      * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image,
      * overriding viewer.crossOriginPolicy.
@@ -1414,6 +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,
                     compositeOperation: queueItem.options.compositeOperation,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
@@ -1674,6 +1676,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             onFullScreenHandler     = $.delegate( this, onFullScreen ),
             onRotateLeftHandler     = $.delegate( this, onRotateLeft ),
             onRotateRightHandler    = $.delegate( this, onRotateRight ),
+            onFlipHandler           = $.delegate( this, onFlip),
             onFocusHandler          = $.delegate( this, onFocus ),
             onBlurHandler           = $.delegate( this, onBlur ),
             navImages               = this.navImages,
@@ -1685,7 +1688,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
             if( this.zoomInButton || this.zoomOutButton ||
                 this.homeButton || this.fullPageButton ||
-                this.rotateLeftButton || this.rotateRightButton ) {
+                this.rotateLeftButton || this.rotateRightButton ||
+                this.flipButton ) {
                 //if we are binding to custom buttons then layout and
                 //grouping is the responsibility of the page author
                 useGroup = false;
@@ -1789,7 +1793,22 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     onFocus:    onFocusHandler,
                     onBlur:     onBlurHandler
                 }));
+            }
 
+            if ( this.showFlipControl ) {
+                buttons.push( this.flipButton = new $.Button({
+                    element:    this.flipButton ? $.getElement( this.flipButton ) : null,
+                    clickTimeThreshold: this.clickTimeThreshold,
+                    clickDistThreshold: this.clickDistThreshold,
+                    tooltip:    $.getString( "Tooltips.Flip" ),
+                    srcRest:    resolveUrl( this.prefixUrl, navImages.flip.REST ),
+                    srcGroup:   resolveUrl( this.prefixUrl, navImages.flip.GROUP ),
+                    srcHover:   resolveUrl( this.prefixUrl, navImages.flip.HOVER ),
+                    srcDown:    resolveUrl( this.prefixUrl, navImages.flip.DOWN ),
+                    onRelease:  onFlipHandler,
+                    onFocus:    onFocusHandler,
+                    onBlur:     onBlurHandler
+                }));
             }
 
             if ( useGroup ) {
@@ -2602,8 +2621,26 @@ function onCanvasKeyPress( event ) {
                   this.viewport.applyConstraints();
                 }
                 return false;
+            case 114: //r
+            case 82: //R
+              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 102: //f
+              this.flipped = !this.flipped;
+              if(this.navigator){
+                this.navigator.toogleFlip();
+              }
+              this._forceRedraw = !this._forceRedraw;
+              this.forceRedraw();
+              return false;
             default:
-                //console.log( 'navigator keycode %s', event.keyCode );
+                // console.log( 'navigator keycode %s', event.keyCode );
                 return true;
         }
     } else {
@@ -2620,6 +2657,9 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
+    if(this.flipped){
+        event.position.x = this.viewport.getContainerSize().x - event.position.x;
+    }
 
     var canvasClickEventArgs = {
         tracker: event.eventSource,
@@ -2739,6 +2779,9 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
+        if(this.flipped){
+            event.delta.x = -event.delta.x;
+        }
 
         if( this.constrainDuringPan ){
             var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() );
@@ -3064,6 +3107,10 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
+        if(this.flipped){
+          event.position.x = this.viewport.getContainerSize().x - event.position.x;
+        }
+
         if ( !event.preventDefaultAction && this.viewport ) {
             gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
             if ( gestureSettings.scrollToZoom ) {
@@ -3259,7 +3306,7 @@ function updateOnce( viewer ) {
         drawWorld( viewer );
         viewer._drawOverlays();
         if( viewer.navigator ){
-            viewer.navigator.update( viewer.viewport );
+          viewer.navigator.update( viewer.viewport );
         }
 
         THIS[ viewer.hash ].forceRedraw = false;
@@ -3429,11 +3476,20 @@ function onFullScreen() {
 function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if (currRotation === 0) {
-            currRotation = 270;
-        }
-        else {
-            currRotation -= 90;
+        if ( this.flipped ){
+          if (currRotation === 270) {
+              currRotation = 0;
+          }
+          else {
+              currRotation += 90;
+          }
+        } else {
+          if (currRotation === 0) {
+              currRotation = 270;
+          }
+          else {
+              currRotation -= 90;
+          }
         }
         this.viewport.setRotation(currRotation);
     }
@@ -3445,16 +3501,38 @@ function onRotateLeft() {
 function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if (currRotation === 270) {
-            currRotation = 0;
-        }
-        else {
-            currRotation += 90;
+        if ( this.flipped ){
+          if (currRotation === 0) {
+              currRotation = 270;
+          }
+          else {
+              currRotation -= 90;
+          }
+        } else {
+          if (currRotation === 270) {
+              currRotation = 0;
+          }
+          else {
+              currRotation += 90;
+          }
         }
         this.viewport.setRotation(currRotation);
     }
 }
 
+/**
+ * Note: The current rotation feature is limited to 90 degree turns.
+ */
+function onFlip() {
+  this.flipped = !this.flipped;
+  if(this.navigator){
+    this.navigator.toogleFlip();
+  }
+  this._forceRedraw = !this._forceRedraw;
+  this.forceRedraw();
+}
+
+
 
 function onPrevious(){
     var previous = this._sequenceIndex - 1;
diff --git a/src/viewport.js b/src/viewport.js
index 9d357910..e44f46bb 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -886,7 +886,6 @@ $.Viewport.prototype = {
             this.viewer.world.getHomeBounds(),
             this.viewer.world.getContentFactor());
         this.viewer.forceRedraw();
-
         /**
          * Raised when rotation has been changed.
          *

From 6e4012976b967c1ee830a00d9f1d1dd2f3369c12 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Fri, 6 Apr 2018 11:52:10 +0100
Subject: [PATCH 02/17] 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        | 12 +++----
 src/navigator.js     | 77 ++++++++++++++++++--------------------------
 src/openseadragon.js |  8 ++---
 src/tiledimage.js    |  6 ++--
 src/viewer.js        | 32 ++++++++++--------
 src/viewport.js      |  1 +
 6 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 9aa7ef44..894b59a9 100644
--- a/src/drawer.js
+++ b/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) {
-            this._flip({});
+          if(this.viewer.doFlip) {
+            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);
diff --git a/src/navigator.js b/src/navigator.js
index 7ee60297..5556c5e0 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -277,47 +277,28 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
       /* Flip navigator element
       */
     toogleFlip: function() {
-      this.flipped = !this.flipped;
-      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.doFlip = !this.doFlip;
 
-        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)";
-      } 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.setDisplayTransform(this.viewer.doFlip ? "scale(-1,1)" : "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) {
-      element.style.webkitTransform = "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 _setTransformRotate( element, degrees ) {
+  setElementTransform(element, "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 ));
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 8963e77f..a180e522 100644
--- a/src/openseadragon.js
+++ b/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',
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 1523e5a7..5c35de31 100644
--- a/src/tiledimage.js
+++ b/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({});
           }
         }
diff --git a/src/viewer.js b/src/viewer.js
index 792ebb73..e597041c 100644
--- a/src/viewer.js
+++ b/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 82: //R
-              if(this.flipped){
+            case 114: //r - 90 degrees 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 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();
   }
diff --git a/src/viewport.js b/src/viewport.js
index e44f46bb..9d357910 100644
--- a/src/viewport.js
+++ b/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.
          *

From f65dbd3a39dce698695f97ae317255323b303d3b Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Fri, 6 Apr 2018 12:02:45 +0100
Subject: [PATCH 03/17] Changes back showFlipControl and showNavigator
 variables to false default state

---
 images/flip_grouphover.png | Bin 2179 -> 4920 bytes
 images/flip_hover.png      | Bin 2340 -> 4920 bytes
 images/flip_pressed.png    | Bin 2307 -> 4920 bytes
 images/flip_rest.png       | Bin 2300 -> 4920 bytes
 src/drawer.js              |   5 ++--
 src/navigator.js           |  29 ++++++++++-------------
 src/openseadragon.js       |   2 +-
 src/tiledimage.js          |   4 ++--
 src/viewer.js              |  46 ++++++++++++++++++++-----------------
 9 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/images/flip_grouphover.png b/images/flip_grouphover.png
index 014ead6a384c9b97f041f1c9b0dcc3b52e5c5bc6..24c110c892c8f9210beefc92531111e6c8148329 100644
GIT binary patch
literal 4920
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
I@7C@7FR0<AtN;K2

delta 2120
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

diff --git a/images/flip_hover.png b/images/flip_hover.png
index 526dc991090671cadb69117b4ab4081e6c81c046..af97e717f4893563f0308939b027004d26ecbb2a 100644
GIT binary patch
literal 4920
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
LSiP(Fsh|EA06U4g

delta 2282
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
Ef;{(U1poj5

diff --git a/images/flip_pressed.png b/images/flip_pressed.png
index 28b074c28a40bbc1915547d3d62fb176db322ed3..026d55ec06395b5873780dfe0039c6b672a3fa3e 100644
GIT binary patch
literal 4920
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
B9b5na

delta 2249
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
XX&@MbolIe300000NkvXXu0mjfj+S8G

diff --git a/images/flip_rest.png b/images/flip_rest.png
index 6f15e5dad9d84211ca11659757a55e16ec05fdc1..97145821a10c97b791e8803c3f4085f849ecdb76 100644
GIT binary patch
literal 4920
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
NW|x+gR7@}b@-Go_2<QL+

delta 2242
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
Qr2qf`07*qoM6N<$g4_u`rT_o{

diff --git a/src/drawer.js b/src/drawer.js
index 894b59a9..83159404 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -501,7 +501,7 @@ $.Drawer.prototype = {
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
         } else{
-          if(this.viewer.doFlip) {
+          if(this.viewer.flipped) {
             this._flip();
           }
         }
@@ -624,7 +624,7 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        if(this.viewer.doFlip){
+        if(this.viewer.flipped){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
         } else{
@@ -640,7 +640,6 @@ $.Drawer.prototype = {
         options.point.times($.pixelDensityRatio) :
         this.getCanvasCenter();
       var context = this._getContext(options.useSketch);
-      // context.save();
 
       context.translate(point.x, 0);
       context.scale(-1, 1);
diff --git a/src/navigator.js b/src/navigator.js
index 5556c5e0..435127f4 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -276,26 +276,16 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     /**
       /* Flip navigator element
       */
-    toogleFlip: function() {
-      this.doFlip = !this.doFlip;
+    toggleFlip: function() {
+      this.flipped = !this.flipped;
 
-      this.setDisplayTransform(this.viewer.doFlip ? "scale(-1,1)" : "scale(1,1)");
+      this.setDisplayTransform(this.viewer.flipped ? "scale(-1,1)" : "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.displayRegion, rule);
+      setElementTransform(this.canvas, rule);
       setElementTransform(this.element, rule);
     },
 
@@ -434,7 +424,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
-        if(this.viewer.doFlip){
+        if(this.viewer.flipped){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
         this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position));
@@ -456,7 +446,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if(this.viewer.doFlip){
+        if(this.viewer.flipped){
             event.delta.x = -event.delta.x;
         }
 
@@ -536,4 +526,9 @@ function setElementTransform( element, rule ) {
 }
 
 
+
+
+
+
+
 }( OpenSeadragon ));
diff --git a/src/openseadragon.js b/src/openseadragon.js
index a180e522..85efbb1a 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1153,7 +1153,7 @@ function OpenSeadragon( options ){
             degrees:                    0,
 
             // INITIAL FLIP STATE
-            doFlip:                    false,
+            flipped:                    false,
 
             // APPEARANCE
             opacity:                    1,
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 5c35de31..f14a7d2c 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) {
                 useSketch: useSketch
             });
         } else {
-            if(tiledImage._drawer.viewer.doFlip) {
+            if(tiledImage._drawer.viewer.flipped) {
                 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.doFlip) {
+          if(tiledImage._drawer.viewer.flipped) {
             tiledImage._drawer._flip({});
           }
         }
diff --git a/src/viewer.js b/src/viewer.js
index e597041c..4aa909e3 100644
--- a/src/viewer.js
+++ b/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.doFlip=false] Initial flip/mirror state
+     * @param {Boolean} [options.flipped=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,
-                    doFlip: queueItem.options.doFlip,
+                    flipped: queueItem.options.flipped,
                     compositeOperation: queueItem.options.compositeOperation,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
@@ -1676,7 +1676,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             onFullScreenHandler     = $.delegate( this, onFullScreen ),
             onRotateLeftHandler     = $.delegate( this, onRotateLeft ),
             onRotateRightHandler    = $.delegate( this, onRotateRight ),
-            onFlipHandler           = $.delegate( this, onFlip),
+            onFlipHandler           = $.delegate( this, onButtonFlip),
             onFocusHandler          = $.delegate( this, onFocus ),
             onBlurHandler           = $.delegate( this, onBlur ),
             navImages               = this.navImages,
@@ -2622,15 +2622,15 @@ function onCanvasKeyPress( event ) {
                 }
                 return false;
             case 114: //r - 90 degrees clockwise rotation
-              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 82: //R - 90 degrees counter clockwise  rotation
-              if(this.doFlip){
+            case 82: //R - 90 degrees counterclockwise  rotation
+              if(this.flipped){
                 this.viewport.setRotation(this.viewport.degrees + 90);
               } else{
                 this.viewport.setRotation(this.viewport.degrees - 90);
@@ -2638,12 +2638,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 102: //f
-              this.doFlip = !this.doFlip;
-              if(this.navigator){
-                this.navigator.toogleFlip();
-              }
-              this._forceRedraw = !this._forceRedraw;
-              this.forceRedraw();
+              onKeyboardFlip();
               return false;
             default:
                 // console.log( 'navigator keycode %s', event.keyCode );
@@ -2663,7 +2658,7 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if(this.doFlip){
+    if(this.flipped){
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2785,7 +2780,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if(this.doFlip){
+        if(this.flipped){
             event.delta.x = -event.delta.x;
         }
 
@@ -3113,7 +3108,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if(this.doFlip){
+        if(this.flipped){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3482,7 +3477,7 @@ function onFullScreen() {
 function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.doFlip ){
+        if ( this.flipped ){
           if (currRotation === 270) {
               currRotation = 0;
           }
@@ -3507,7 +3502,7 @@ function onRotateLeft() {
 function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.doFlip ){
+        if ( this.flipped ){
           if (currRotation === 0) {
               currRotation = 270;
           }
@@ -3527,17 +3522,26 @@ function onRotateRight() {
 }
 
 /**
- * Note: The current rotation feature is limited to 90 degree turns.
+ * Note: When pressed f on keyboard or flip control button
  */
-function onFlip() {
-  this.doFlip = !this.doFlip;
+function onButtonFlip() {
+  this.flipped = !this.flipped;
   if(this.navigator){
-    this.navigator.toogleFlip();
+    this.navigator.toggleFlip();
   }
   this._forceRedraw = !this._forceRedraw;
   this.forceRedraw();
 }
 
+function onKeyboardFlip() {
+  this.viewer.flipped = !this.viewer.flipped;
+  if(this.viewer.navigator){
+    this.viewer.navigator.toggleFlip();
+  }
+  this.viewer._forceRedraw = !this.viewer._forceRedraw;
+  this.viewer.forceRedraw();
+}
+
 
 
 function onPrevious(){

From 7c7d714839ea503b0d1410fea5f3f8687d9b9f7c Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Mon, 9 Apr 2018 15:09:29 +0100
Subject: [PATCH 04/17] Changes back default state values

---
 src/openseadragon.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index 85efbb1a..ae051506 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1130,13 +1130,13 @@ function OpenSeadragon( options ){
             showHomeControl:         true,  //HOME
             showFullPageControl:     true,  //FULL
             showRotationControl:     false, //ROTATION
-            showFlipControl:         true,  //FLIP
+            showFlipControl:         false,  //FLIP
             controlsFadeDelay:       2000,  //ZOOM/HOME/FULL/SEQUENCE
             controlsFadeLength:      1500,  //ZOOM/HOME/FULL/SEQUENCE
             mouseNavEnabled:         true,  //GENERAL MOUSE INTERACTIVITY
 
             //VIEWPORT NAVIGATOR SETTINGS
-            showNavigator:              true,
+            showNavigator:              false,
             navigatorId:                null,
             navigatorPosition:          null,
             navigatorSizeRatio:         0.2,

From 7e5c9e189733704a56dd56fae07afcab10c5f15b Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 10 Apr 2018 11:51:06 +0100
Subject: [PATCH 05/17] Changes flip store object from viewer to viewport.

More than changing the store object of flip state, the code was simplified and the onFlip function from openseadragon was changed to receive a viewer argument.
TiledImage had a flipped variable wrongly stored.

From now on, flipped state must be read from the viewport object.
---
 src/drawer.js     |  4 ++--
 src/navigator.js  |  8 ++++----
 src/tiledimage.js |  4 ++--
 src/viewer.js     | 42 ++++++++++++++++++------------------------
 src/viewport.js   |  1 +
 5 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 83159404..fbf66a76 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -501,7 +501,7 @@ $.Drawer.prototype = {
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
         } else{
-          if(this.viewer.flipped) {
+          if(this.viewer.viewport.flipped) {
             this._flip();
           }
         }
@@ -624,7 +624,7 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        if(this.viewer.flipped){
+        if(this.viewer.viewport.flipped){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
         } else{
diff --git a/src/navigator.js b/src/navigator.js
index 435127f4..790c8c2b 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -277,9 +277,9 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
       /* Flip navigator element
       */
     toggleFlip: function() {
-      this.flipped = !this.flipped;
+      this.viewport.flipped = !this.viewport.flipped;
 
-      this.setDisplayTransform(this.viewer.flipped ? "scale(-1,1)" : "scale(1,1)");
+      this.setDisplayTransform(this.viewer.viewport.flipped ? "scale(-1,1)" : "scale(1,1)");
       this.viewport.viewer.forceRedraw();
     },
 
@@ -424,7 +424,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
-        if(this.viewer.flipped){
+        if(this.viewer.viewport.flipped){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
         this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position));
@@ -446,7 +446,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if(this.viewer.flipped){
+        if(this.viewer.viewport.flipped){
             event.delta.x = -event.delta.x;
         }
 
diff --git a/src/tiledimage.js b/src/tiledimage.js
index f14a7d2c..cc2c32d3 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) {
                 useSketch: useSketch
             });
         } else {
-            if(tiledImage._drawer.viewer.flipped) {
+            if(tiledImage._drawer.viewer.viewport.flipped) {
                 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.viewport.flipped) {
             tiledImage._drawer._flip({});
           }
         }
diff --git a/src/viewer.js b/src/viewer.js
index 4aa909e3..8cdd6fd7 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1252,7 +1252,6 @@ $.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 {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 +1414,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     opacity: queueItem.options.opacity,
                     preload: queueItem.options.preload,
                     degrees: queueItem.options.degrees,
-                    flipped: queueItem.options.flipped,
                     compositeOperation: queueItem.options.compositeOperation,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
@@ -2622,7 +2620,7 @@ function onCanvasKeyPress( event ) {
                 }
                 return false;
             case 114: //r - 90 degrees clockwise rotation
-              if(this.flipped){
+              if(this.viewport.flipped){
                 this.viewport.setRotation(this.viewport.degrees - 90);
               } else{
                 this.viewport.setRotation(this.viewport.degrees + 90);
@@ -2630,7 +2628,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 82: //R - 90 degrees counterclockwise  rotation
-              if(this.flipped){
+              if(this.viewport.flipped){
                 this.viewport.setRotation(this.viewport.degrees + 90);
               } else{
                 this.viewport.setRotation(this.viewport.degrees - 90);
@@ -2638,7 +2636,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 102: //f
-              onKeyboardFlip();
+              onFlip(this);
               return false;
             default:
                 // console.log( 'navigator keycode %s', event.keyCode );
@@ -2658,7 +2656,7 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if(this.flipped){
+    if(this.viewport.flipped){
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2780,7 +2778,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if(this.flipped){
+        if(this.viewport.flipped){
             event.delta.x = -event.delta.x;
         }
 
@@ -3108,7 +3106,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if(this.flipped){
+        if(this.viewport.flipped){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3477,7 +3475,7 @@ function onFullScreen() {
 function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.flipped ){
+        if ( this.viewport.flipped ){
           if (currRotation === 270) {
               currRotation = 0;
           }
@@ -3502,7 +3500,7 @@ function onRotateLeft() {
 function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
-        if ( this.flipped ){
+        if ( this.viewport.flipped ){
           if (currRotation === 0) {
               currRotation = 270;
           }
@@ -3524,22 +3522,18 @@ function onRotateRight() {
 /**
  * Note: When pressed f on keyboard or flip control button
  */
-function onButtonFlip() {
-  this.flipped = !this.flipped;
-  if(this.navigator){
-    this.navigator.toggleFlip();
-  }
-  this._forceRedraw = !this._forceRedraw;
-  this.forceRedraw();
+function onFlip( viewer ){
+   viewer.viewport.flipped = !viewer.viewport.flipped;
+
+   if(viewer.navigator){
+     viewer.navigator.toggleFlip();
+   }
+   viewer._forceRedraw = !viewer._forceRedraw;
+   viewer.forceRedraw();
 }
 
-function onKeyboardFlip() {
-  this.viewer.flipped = !this.viewer.flipped;
-  if(this.viewer.navigator){
-    this.viewer.navigator.toggleFlip();
-  }
-  this.viewer._forceRedraw = !this.viewer._forceRedraw;
-  this.viewer.forceRedraw();
+function onButtonFlip() {
+  onFlip(this);
 }
 
 
diff --git a/src/viewport.js b/src/viewport.js
index 9d357910..95632271 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -107,6 +107,7 @@ $.Viewport = function( options ) {
         minZoomLevel:       $.DEFAULT_SETTINGS.minZoomLevel,
         maxZoomLevel:       $.DEFAULT_SETTINGS.maxZoomLevel,
         degrees:            $.DEFAULT_SETTINGS.degrees,
+        flipped:            $.DEFAULT_SETTINGS.flipped,
         homeFillsViewer:    $.DEFAULT_SETTINGS.homeFillsViewer
 
     }, options );

From 6e2c1258df4045365d8e6cca17eb16830aab5e4e Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 10 Apr 2018 12:04:58 +0100
Subject: [PATCH 06/17] Comments on functions

---
 src/viewer.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/viewer.js b/src/viewer.js
index 8cdd6fd7..49d972db 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -3520,7 +3520,7 @@ function onRotateRight() {
 }
 
 /**
- * Note: When pressed f on keyboard or flip control button
+ * Note: When pressed f on keyboard
  */
 function onFlip( viewer ){
    viewer.viewport.flipped = !viewer.viewport.flipped;
@@ -3532,12 +3532,13 @@ function onFlip( viewer ){
    viewer.forceRedraw();
 }
 
+/**
+ * Note: When pressed flip control button
+ */
 function onButtonFlip() {
   onFlip(this);
 }
 
-
-
 function onPrevious(){
     var previous = this._sequenceIndex - 1;
     if(this.navPrevNextWrap && previous < 0){

From b8a4f7e7a04b1c0158d8516ba24231521baa23f2 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 11 Apr 2018 11:25:46 +0100
Subject: [PATCH 07/17] Reorganizes code to match standard calls of viewport
 object methods.

A new viewport function was created (toggleFlip()) to change viewport's flip state and demand new viewers drawing.

The onFlip function exists on openseadragon to handle flip control button press and demand viewport toggle flip.
---
 src/viewer.js   | 21 ++++-----------------
 src/viewport.js | 13 +++++++++++++
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/viewer.js b/src/viewer.js
index 49d972db..76b78094 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1674,7 +1674,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             onFullScreenHandler     = $.delegate( this, onFullScreen ),
             onRotateLeftHandler     = $.delegate( this, onRotateLeft ),
             onRotateRightHandler    = $.delegate( this, onRotateRight ),
-            onFlipHandler           = $.delegate( this, onButtonFlip),
+            onFlipHandler           = $.delegate( this, onFlip),
             onFocusHandler          = $.delegate( this, onFocus ),
             onBlurHandler           = $.delegate( this, onBlur ),
             navImages               = this.navImages,
@@ -2636,7 +2636,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 102: //f
-              onFlip(this);
+              this.viewport.toggleFlip();
               return false;
             default:
                 // console.log( 'navigator keycode %s', event.keyCode );
@@ -3519,24 +3519,11 @@ function onRotateRight() {
     }
 }
 
-/**
- * Note: When pressed f on keyboard
- */
-function onFlip( viewer ){
-   viewer.viewport.flipped = !viewer.viewport.flipped;
-
-   if(viewer.navigator){
-     viewer.navigator.toggleFlip();
-   }
-   viewer._forceRedraw = !viewer._forceRedraw;
-   viewer.forceRedraw();
-}
-
 /**
  * Note: When pressed flip control button
  */
-function onButtonFlip() {
-  onFlip(this);
+function onFlip() {
+   this.viewport.toggleFlip();
 }
 
 function onPrevious(){
diff --git a/src/viewport.js b/src/viewport.js
index 95632271..4c30dcee 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1519,7 +1519,20 @@ $.Viewport.prototype = {
         var scale = this._contentBoundsNoRotate.width;
         var viewportToImageZoomRatio = (imageWidth / containerWidth) / scale;
         return imageZoom * viewportToImageZoomRatio;
+    },
+
+    /**
+     * Toggle flip state and demands a new drawing on navigator and viewer objects.
+    */
+    toggleFlip: function() {
+      this.flipped = !this.flipped;
+      if(this.viewer.navigator){
+        this.viewer.navigator.toggleFlip();
+      }
+      this.viewer._forceRedraw = !this.viewer._forceRedraw;
+      this.viewer.forceRedraw();
     }
+
 };
 
 }( OpenSeadragon ));

From 84dc60632ce64330f2df08e92e5a04f6693fb922 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 11 Apr 2018 18:24:01 +0100
Subject: [PATCH 08/17] code simplification and impro^Cments on toggleFlip
 function

---
 src/navigator.js     |  4 ++--
 src/openseadragon.js |  3 +++
 src/viewer.js        |  1 +
 src/viewport.js      | 13 ++++++++++---
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/navigator.js b/src/navigator.js
index 790c8c2b..8f03be43 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -276,8 +276,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     /**
       /* Flip navigator element
       */
-    toggleFlip: function() {
-      this.viewport.flipped = !this.viewport.flipped;
+    setFlip: function() {
+      this.viewport.toggleFlip();
 
       this.setDisplayTransform(this.viewer.viewport.flipped ? "scale(-1,1)" : "scale(1,1)");
       this.viewport.viewer.forceRedraw();
diff --git a/src/openseadragon.js b/src/openseadragon.js
index ae051506..72f90bd5 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -206,6 +206,9 @@
   * @property {Number} [degrees=0]
   *     Initial rotation.
   *
+  * @property {Boolean} [flip=false]
+  *     Initial flip state.
+  *
   * @property {Number} [minZoomLevel=null]
   *
   * @property {Number} [maxZoomLevel=null]
diff --git a/src/viewer.js b/src/viewer.js
index 76b78094..8be90044 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -367,6 +367,7 @@ $.Viewer = function( options ) {
         maxZoomLevel:       this.maxZoomLevel,
         viewer:             this,
         degrees:            this.degrees,
+        flipped:            this.flipped,
         navigatorRotate:    this.navigatorRotate,
         homeFillsViewer:    this.homeFillsViewer,
         margins:            this.viewportMargins
diff --git a/src/viewport.js b/src/viewport.js
index 4c30dcee..1f7b7e8f 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1525,12 +1525,19 @@ $.Viewport.prototype = {
      * Toggle flip state and demands a new drawing on navigator and viewer objects.
     */
     toggleFlip: function() {
-      this.flipped = !this.flipped;
+      this.setFlip(!this.getFlip());
       if(this.viewer.navigator){
-        this.viewer.navigator.toggleFlip();
+        this.viewer.navigator.setFlip();
       }
-      this.viewer._forceRedraw = !this.viewer._forceRedraw;
       this.viewer.forceRedraw();
+    },
+
+    getFlip: function() {
+      return this.flipped;
+    },
+
+    setFlip: function( state ) {
+      this.flipped = state;
     }
 
 };

From 194d1c060692516f27d375d79705208bf6d92fca Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 12 Apr 2018 10:36:34 +0100
Subject: [PATCH 09/17] Documentation comments

---
 src/viewport.js | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/viewport.js b/src/viewport.js
index 1f7b7e8f..132e88c4 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1522,22 +1522,52 @@ $.Viewport.prototype = {
     },
 
     /**
-     * Toggle flip state and demands a new drawing on navigator and viewer objects.
-    */
+     * Toggles flip state and demands a new drawing on navigator and viewer objects.
+     * @function
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
     toggleFlip: function() {
       this.setFlip(!this.getFlip());
       if(this.viewer.navigator){
         this.viewer.navigator.setFlip();
       }
       this.viewer.forceRedraw();
+      return this;
     },
 
+
+    /**
+     * Gets flip state stored on viewport.
+     * @function
+     * @return {Boolean} Flip state.
+     */
     getFlip: function() {
       return this.flipped;
     },
 
+
+    /**
+     * Sets flip state according to the state input argument.
+     * @function
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
     setFlip: function( state ) {
+      if ( this.flipped != state ) {
+        /**
+         * Raised when flip state has been changed.
+         *
+         * @event flip
+         * @memberof OpenSeadragon.Viewer
+         * @type {object}
+         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+         * @property {Number} flipped - The flip state after this change.
+         * @property {?Object} userData - Arbitrary subscriber-defined object.
+         */
+        this.viewer.raiseEvent('flip', {"flipped": state});
+      }
+
       this.flipped = state;
+      return this;
     }
 
 };

From b7badc7d32da89506063c5f5a0a8cc617e9b70b3 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 12 Apr 2018 10:39:37 +0100
Subject: [PATCH 10/17] Documentation comments fix

---
 src/viewport.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/viewport.js b/src/viewport.js
index 132e88c4..534b8816 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1549,6 +1549,7 @@ $.Viewport.prototype = {
     /**
      * Sets flip state according to the state input argument.
      * @function
+     * @param {Boolean} state - Flip state to set.
      * @return {OpenSeadragon.Viewport} Chainable.
      */
     setFlip: function( state ) {

From c2fd5322e215300ac4eb742ae4c291aadc853085 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 12 Apr 2018 18:24:11 +0100
Subject: [PATCH 11/17] Code cleaning and function calls reorganization

---
 src/navigator.js     |  9 +++++----
 src/openseadragon.js |  2 +-
 src/viewport.js      | 14 +++++++++-----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/navigator.js b/src/navigator.js
index 8f03be43..e06ba658 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -275,12 +275,13 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     },
     /**
       /* Flip navigator element
+      * @param {Boolean} state - Flip state to set.
       */
-    setFlip: function() {
-      this.viewport.toggleFlip();
+    setFlip: function(state) {
+      this.viewport.setFlip(state);
 
-      this.setDisplayTransform(this.viewer.viewport.flipped ? "scale(-1,1)" : "scale(1,1)");
-      this.viewport.viewer.forceRedraw();
+      this.setDisplayTransform(this.viewer.viewport.getFlip() ? "scale(-1,1)" : "scale(1,1)");
+      return this;
     },
 
     setDisplayTransform: function(rule) {
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 72f90bd5..7e8373ed 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -206,7 +206,7 @@
   * @property {Number} [degrees=0]
   *     Initial rotation.
   *
-  * @property {Boolean} [flip=false]
+  * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
   * @property {Number} [minZoomLevel=null]
diff --git a/src/viewport.js b/src/viewport.js
index 534b8816..41ea7246 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1528,10 +1528,6 @@ $.Viewport.prototype = {
      */
     toggleFlip: function() {
       this.setFlip(!this.getFlip());
-      if(this.viewer.navigator){
-        this.viewer.navigator.setFlip();
-      }
-      this.viewer.forceRedraw();
       return this;
     },
 
@@ -1554,6 +1550,9 @@ $.Viewport.prototype = {
      */
     setFlip: function( state ) {
       if ( this.flipped != state ) {
+        this.flipped = state;
+        this.viewer.forceRedraw();
+
         /**
          * Raised when flip state has been changed.
          *
@@ -1565,9 +1564,14 @@ $.Viewport.prototype = {
          * @property {?Object} userData - Arbitrary subscriber-defined object.
          */
         this.viewer.raiseEvent('flip', {"flipped": state});
+      } else {
+        this.flipped = state;
       }
 
-      this.flipped = state;
+      if(this.viewer.navigator){
+        this.viewer.navigator.setFlip(this.getFlip());
+      }
+      this.viewer.forceRedraw();
       return this;
     }
 

From ec0f55098abbe7cceb194c8f44c0d1a5416355c7 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Fri, 13 Apr 2018 17:51:43 +0100
Subject: [PATCH 12/17] Simplifies viewport setFlip function.

---
 src/viewport.js | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/viewport.js b/src/viewport.js
index 41ea7246..a3e207b8 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1549,29 +1549,27 @@ $.Viewport.prototype = {
      * @return {OpenSeadragon.Viewport} Chainable.
      */
     setFlip: function( state ) {
-      if ( this.flipped != state ) {
-        this.flipped = state;
-        this.viewer.forceRedraw();
-
-        /**
-         * Raised when flip state has been changed.
-         *
-         * @event flip
-         * @memberof OpenSeadragon.Viewer
-         * @type {object}
-         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
-         * @property {Number} flipped - The flip state after this change.
-         * @property {?Object} userData - Arbitrary subscriber-defined object.
-         */
-        this.viewer.raiseEvent('flip', {"flipped": state});
-      } else {
-        this.flipped = state;
+      if ( this.flipped === state ) {
+        return this;
       }
 
+      this.flipped = state;
       if(this.viewer.navigator){
         this.viewer.navigator.setFlip(this.getFlip());
       }
       this.viewer.forceRedraw();
+
+      /**
+       * Raised when flip state has been changed.
+       *
+       * @event flip
+       * @memberof OpenSeadragon.Viewer
+       * @type {object}
+       * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+       * @property {Number} flipped - The flip state after this change.
+       * @property {?Object} userData - Arbitrary subscriber-defined object.
+       */
+      this.viewer.raiseEvent('flip', {"flipped": state});
       return this;
     }
 

From 43d3949dd12ec4e12a9f6bdd41c091d31a737d4d Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 17 Apr 2018 11:19:15 +0100
Subject: [PATCH 13/17] Refactored 90 degrees rotation button's actions.

---
 src/navigator.js |  6 ------
 src/viewer.js    | 30 ++++++------------------------
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/navigator.js b/src/navigator.js
index e06ba658..89562bcb 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -526,10 +526,4 @@ function setElementTransform( element, rule ) {
   element.style.transform = rule;
 }
 
-
-
-
-
-
-
 }( OpenSeadragon ));
diff --git a/src/viewer.js b/src/viewer.js
index 8be90044..b24086e0 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -3476,20 +3476,11 @@ function onFullScreen() {
 function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
+
         if ( this.viewport.flipped ){
-          if (currRotation === 270) {
-              currRotation = 0;
-          }
-          else {
-              currRotation += 90;
-          }
+          currRotation = $.positiveModulo(currRotation + 90, 360);
         } else {
-          if (currRotation === 0) {
-              currRotation = 270;
-          }
-          else {
-              currRotation -= 90;
-          }
+          currRotation = $.positiveModulo(currRotation - 90, 360);
         }
         this.viewport.setRotation(currRotation);
     }
@@ -3501,20 +3492,11 @@ function onRotateLeft() {
 function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
+
         if ( this.viewport.flipped ){
-          if (currRotation === 0) {
-              currRotation = 270;
-          }
-          else {
-              currRotation -= 90;
-          }
+          currRotation = $.positiveModulo(currRotation - 90, 360);
         } else {
-          if (currRotation === 270) {
-              currRotation = 0;
-          }
-          else {
-              currRotation += 90;
-          }
+          currRotation = $.positiveModulo(currRotation + 90, 360);
         }
         this.viewport.setRotation(currRotation);
     }

From a31587df2f9a694d0ad090249ee013b0155a1bbb Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 17 Apr 2018 16:23:21 +0100
Subject: [PATCH 14/17] Adds tests about flip methods

---
 src/viewport.js          |  3 ---
 test/modules/viewport.js | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/viewport.js b/src/viewport.js
index a3e207b8..dec8513f 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -881,7 +881,6 @@ $.Viewport.prototype = {
         if (!this.viewer || !this.viewer.drawer.canRotate()) {
             return this;
         }
-
         this.degrees = $.positiveModulo(degrees, 360);
         this._setContentBounds(
             this.viewer.world.getHomeBounds(),
@@ -1531,7 +1530,6 @@ $.Viewport.prototype = {
       return this;
     },
 
-
     /**
      * Gets flip state stored on viewport.
      * @function
@@ -1541,7 +1539,6 @@ $.Viewport.prototype = {
       return this.flipped;
     },
 
-
     /**
      * Sets flip state according to the state input argument.
      * @function
diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index bebe7d77..abc1306f 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -1140,4 +1140,43 @@
         });
     });
 
+    QUnit.test('toggleFlipState', function(assert) {
+      var done = assert.async();
+      var openHandler = function(event) {
+          viewer.removeHandler('open', openHandler);
+          var viewport = viewer.viewport;
+
+          assert.deepEqual(viewport.getFlip(), false, "Get original flip state should be false");
+
+          viewport.toggleFlip();
+          assert.deepEqual(viewport.getFlip(), true, "Toggling flip state variable, viewport should be true");
+
+          viewport.toggleFlip();
+          assert.deepEqual(viewport.getFlip(), false, "Toggling back flip state variable, viewport should be false again");
+
+          done();
+      };
+      viewer.addHandler('open', openHandler);
+      viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('setFlipState', function(assert) {
+      var done = assert.async();
+      var openHandler = function(event) {
+          viewer.removeHandler('open', openHandler);
+          var viewport = viewer.viewport;
+
+          assert.deepEqual(viewport.getFlip(), false, "Get original flip state should be false");
+
+          viewport.setFlip(true);
+          assert.deepEqual(viewport.getFlip(), true, "Setting flip state variable should be true");
+
+          viewport.setFlip(false);
+          assert.deepEqual(viewport.getFlip(), false, "Unsetting flip state variable, viewport should be false again");
+
+          done();
+      };
+      viewer.addHandler('open', openHandler);
+      viewer.open(DZI_PATH);
+    });
 })();

From 3615ad412fbd01a989946f23ce121bd1aa3ce7d2 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 6 Jun 2018 17:03:40 +0100
Subject: [PATCH 15/17] Adds some more tests and tries to solve some code bugs.

A new variance parameter was added to assertPointsEquals function.

Variance value was set on loopingTestHelper function (1e-15).

The following tests were modified to execute tests on flipped viewport:
* 'panBy'
* 'panTo'
* 'zoomBy with ref point'
---
 test/modules/viewport.js | 59 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index abc1306f..2c03ced3 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -118,6 +118,7 @@
                         assert,
                         actual,
                         expected,
+                        1e-15,
                         "Correctly converted coordinates " + orig
                     );
                 } else {
@@ -136,8 +137,8 @@
         viewer.open(DZI_PATH);
     };
 
-    function assertPointsEquals(assert, actual, expected, message) {
-        Util.assertPointsEquals(assert, actual, expected, 1e-15, message);
+    function assertPointsEquals(assert, actual, expected, variance, message) {
+        Util.assertPointsEquals(assert, actual, expected, variance, message);
     }
 
 // Tests start here.
@@ -736,6 +737,19 @@
                 );
             }
 
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            for (var i = 0; i < testPoints.length; i++){
+                var expected = viewport.getCenter().plus(testPoints[i]);
+                viewport.panBy(testPoints[i], true);
+                assert.propEqual(
+                    viewport.getCenter(),
+                    expected,
+                    "Panned flipped by the correct amount."
+                );
+            }
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -757,6 +771,18 @@
                 );
             }
 
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            for (var i = 0; i < testPoints.length; i++){
+                viewport.panTo(testPoints[i], true);
+                assert.propEqual(
+                    viewport.getCenter(),
+                    testPoints[i],
+                    "Panned flipped to the correct location."
+                );
+            }
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -815,6 +841,34 @@
                 );
             }
 
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            var expectedFlippedCenters = [
+                new OpenSeadragon.Point(12.121, 11.871),
+                new OpenSeadragon.Point(14.117, 13.867),
+                new OpenSeadragon.Point(14.367, 13.867),
+                new OpenSeadragon.Point(14.367, 13.867),
+                new OpenSeadragon.Point(14.742, 14.242),
+                new OpenSeadragon.Point(14.742, 14.242),
+            ];
+
+            for (var i = 0; i < testZoomLevels.length; i++) {
+                viewport.zoomBy(testZoomLevels[i], testPoints[i], true);
+                assert.propEqual(
+                    testZoomLevels[i],
+                    viewport.getZoom(),
+                    "Zoomed flipped by the correct amount."
+                );
+                assertPointsEquals(
+                    assert,
+                    expectedFlippedCenters[i],
+                    viewport.getCenter(),
+                    1e-6,
+                    "Panned flipped to the correct location."
+                );
+            }
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -1179,4 +1233,5 @@
       viewer.addHandler('open', openHandler);
       viewer.open(DZI_PATH);
     });
+    
 })();

From 6a2cd1ff841c0f35f965427835a5a624f9e5fd2d Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 6 Jun 2018 17:56:37 +0100
Subject: [PATCH 16/17] Adds some more tests

---
 test/modules/viewport.js | 70 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 2c03ced3..6ea704c7 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -471,6 +471,21 @@
                 bounds,
                 EPSILON,
                 "Viewport.applyConstraints should move viewport.");
+
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
+            viewport.visibilityRatio = 0.3;
+            viewport.applyConstraints(true);
+            var bounds = viewport.getBounds();
+            Util.assertRectangleEquals(
+                assert,
+                new OpenSeadragon.Rect(0.7, 0.7, 1, 1),
+                bounds,
+                EPSILON,
+                "Viewport.applyConstraints should move flipped viewport.");
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -515,6 +530,21 @@
                 new OpenSeadragon.Rect(1, 0, Math.sqrt(2), Math.sqrt(2), 45),
                 EPSILON,
                 "Viewport.applyConstraints with rotation should move viewport.");
+
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            viewport.setRotation(45);
+            viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
+            viewport.applyConstraints(true);
+            var bounds = viewport.getBounds();
+            Util.assertRectangleEquals(
+                assert,
+                bounds,
+                new OpenSeadragon.Rect(1, 0, Math.sqrt(2), Math.sqrt(2), 45),
+                EPSILON,
+                "Viewport.applyConstraints flipped and with rotation should move viewport.");
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -927,6 +957,34 @@
                 );
             }
 
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            var expectedFlippedCenters = [
+                new OpenSeadragon.Point(54.7205, 54.8705),
+                new OpenSeadragon.Point(54.471, 54.621),
+                new OpenSeadragon.Point(54.321, 54.621),
+                new OpenSeadragon.Point(54.566, 54.866),
+                new OpenSeadragon.Point(54.941, 55.241),
+                new OpenSeadragon.Point(54.941, 55.241),
+            ];
+
+            for (var i = 0; i < testZoomLevels.length; i++) {
+                viewport.zoomTo(testZoomLevels[i], testPoints[i], true);
+                assert.propEqual(
+                    viewport.getZoom(),
+                    testZoomLevels[i],
+                    "Zoomed flipped to the correct level."
+                );
+                assertPointsEquals(
+                    assert,
+                    viewport.getCenter(),
+                    expectedFlippedCenters[i],
+                    1e-14,
+                    "Panned flipped to the correct location."
+                );
+            }
+
             done();
         };
         viewer.addHandler('open', openHandler);
@@ -944,6 +1002,16 @@
             assert.propEqual(viewport.getRotation, 90, "Rotation should be 90 degrees");
             viewport.setRotation(-75);
             assert.propEqual(viewport.getRotation, -75, "Rotation should be -75 degrees");
+
+            viewport = viewer.viewport; // Get viewport original state
+            viewport.setFlip(true);
+
+            assert.propEqual(viewport.getRotation, 0, "Original rotation should be 0 degrees");
+            viewport.setRotation(90);
+            assert.propEqual(viewport.getRotation, 90, "Rotation should be 90 degrees");
+            viewport.setRotation(-75);
+            assert.propEqual(viewport.getRotation, -75, "Rotation should be -75 degrees");
+
             done();
         };
 
@@ -1233,5 +1301,5 @@
       viewer.addHandler('open', openHandler);
       viewer.open(DZI_PATH);
     });
-    
+
 })();

From 0023ae980166384e13d7adc6a3d6b00e76dc6749 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 7 Jun 2018 11:41:45 +0100
Subject: [PATCH 17/17] Put flip tests out from the original tests in their own
 test cases

---
 test/modules/viewport.js | 128 +++++++++++++++++++++++++++++++--------
 1 file changed, 103 insertions(+), 25 deletions(-)

diff --git a/test/modules/viewport.js b/test/modules/viewport.js
index 6ea704c7..d820d5d6 100644
--- a/test/modules/viewport.js
+++ b/test/modules/viewport.js
@@ -472,7 +472,18 @@
                 EPSILON,
                 "Viewport.applyConstraints should move viewport.");
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('applyConstraints flipped', function(assert) {
+        var done = assert.async();
+        var openHandler = function() {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
             viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
@@ -531,10 +542,21 @@
                 EPSILON,
                 "Viewport.applyConstraints with rotation should move viewport.");
 
-            viewport = viewer.viewport; // Get viewport original state
-            viewport.setFlip(true);
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
 
+    QUnit.test('applyConstraints flipped with rotation', function(assert) {
+        var done = assert.async();
+        var openHandler = function() {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
+            viewport.setFlip(true);
             viewport.setRotation(45);
+
             viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
             viewport.applyConstraints(true);
             var bounds = viewport.getBounds();
@@ -767,7 +789,18 @@
                 );
             }
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('panBy flipped', function(assert) {
+        var done = assert.async();
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
             for (var i = 0; i < testPoints.length; i++){
@@ -801,7 +834,18 @@
                 );
             }
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('panTo flipped', function(assert) {
+        var done = assert.async();
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
             for (var i = 0; i < testPoints.length; i++){
@@ -871,16 +915,27 @@
                 );
             }
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('zoomBy flipped with ref point', function(assert) {
+        var done = assert.async();
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
             var expectedFlippedCenters = [
-                new OpenSeadragon.Point(12.121, 11.871),
-                new OpenSeadragon.Point(14.117, 13.867),
-                new OpenSeadragon.Point(14.367, 13.867),
-                new OpenSeadragon.Point(14.367, 13.867),
-                new OpenSeadragon.Point(14.742, 14.242),
-                new OpenSeadragon.Point(14.742, 14.242),
+                new OpenSeadragon.Point(5, 5),
+                new OpenSeadragon.Point(6.996, 6.996),
+                new OpenSeadragon.Point(7.246, 6.996),
+                new OpenSeadragon.Point(7.246, 6.996),
+                new OpenSeadragon.Point(7.621, 7.371),
+                new OpenSeadragon.Point(7.621, 7.371),
             ];
 
             for (var i = 0; i < testZoomLevels.length; i++) {
@@ -950,23 +1005,34 @@
                 );
                 assertPointsEquals(
                     assert,
-                    viewport.getCenter(),
                     expectedCenters[i],
+                    viewport.getCenter(),
                     1e-14,
                     "Panned to the correct location."
                 );
             }
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('zoomTo flipped with ref point', function(assert) {
+        var done = assert.async();
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
             var expectedFlippedCenters = [
-                new OpenSeadragon.Point(54.7205, 54.8705),
-                new OpenSeadragon.Point(54.471, 54.621),
-                new OpenSeadragon.Point(54.321, 54.621),
-                new OpenSeadragon.Point(54.566, 54.866),
-                new OpenSeadragon.Point(54.941, 55.241),
-                new OpenSeadragon.Point(54.941, 55.241),
+                new OpenSeadragon.Point(5, 5),
+                new OpenSeadragon.Point(4.7505, 4.7505),
+                new OpenSeadragon.Point(4.6005, 4.7505),
+                new OpenSeadragon.Point(4.8455, 4.9955),
+                new OpenSeadragon.Point(5.2205, 5.3705),
+                new OpenSeadragon.Point(5.2205, 5.3705),
             ];
 
             for (var i = 0; i < testZoomLevels.length; i++) {
@@ -978,8 +1044,8 @@
                 );
                 assertPointsEquals(
                     assert,
-                    viewport.getCenter(),
                     expectedFlippedCenters[i],
+                    viewport.getCenter(),
                     1e-14,
                     "Panned flipped to the correct location."
                 );
@@ -1003,14 +1069,26 @@
             viewport.setRotation(-75);
             assert.propEqual(viewport.getRotation, -75, "Rotation should be -75 degrees");
 
-            viewport = viewer.viewport; // Get viewport original state
+            done();
+        };
+
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    QUnit.test('rotation (flipped)', function(assert){
+        var done = assert.async();
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+
             viewport.setFlip(true);
 
-            assert.propEqual(viewport.getRotation, 0, "Original rotation should be 0 degrees");
+            assert.propEqual(viewport.getRotation, 0, "Original flipped rotation should be 0 degrees");
             viewport.setRotation(90);
-            assert.propEqual(viewport.getRotation, 90, "Rotation should be 90 degrees");
+            assert.propEqual(viewport.getRotation, 90, "Flipped rotation should be 90 degrees");
             viewport.setRotation(-75);
-            assert.propEqual(viewport.getRotation, -75, "Rotation should be -75 degrees");
+            assert.propEqual(viewport.getRotation, -75, "Flipped rotation should be -75 degrees");
 
             done();
         };