From 49e3ef6885405f8485d0e7380bd5258540aff4c7 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Mon, 1 Oct 2018 17:03:34 +0100
Subject: [PATCH 1/9] Code backup. Bug Semi-fix.

---
 src/openseadragon.js |  2 +-
 src/tiledimage.js    | 49 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index e3d9aed7..784d3e78 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1140,7 +1140,7 @@ function OpenSeadragon( options ){
             autoResize:             true,
             preserveImageSizeOnResize: false, // requires autoResize=true
             minScrollDeltaTime:     50,
-            rotationIncrement:      90,
+            rotationIncrement:      10,
 
             //DEFAULT CONTROL SETTINGS
             showSequenceControl:     true,  //SEQUENCE
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 52012071..d55656c9 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -52,6 +52,7 @@
  * @param {Number} [options.y=0] - Top position, in viewport coordinates.
  * @param {Number} [options.width=1] - Width, in viewport coordinates.
  * @param {Number} [options.height] - Height, in viewport coordinates.
+ * @param {Boolean} [options.flipped=false] - Whether to draw tiled image flipped.
  * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates
  * to fit the image into. If specified, x, y, width and height get ignored.
  * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER]
@@ -146,6 +147,9 @@ $.TiledImage = function( options ) {
     var degrees = options.degrees || 0;
     delete options.degrees;
 
+    // var flipped = options.flipped || false;
+    // delete options.flipped;
+
     $.extend( true, this, {
 
         //internal state properties
@@ -209,6 +213,9 @@ $.TiledImage = function( options ) {
         animationTime: this.animationTime
     });
 
+    this.flipped = options.flipped;
+    delete options.flipped;
+
     this._updateForScale();
 
     if (fitBounds) {
@@ -1879,24 +1886,35 @@ function drawTiles( tiledImage, lastDrawn ) {
                 tiledImage.getClippedBounds(true))
                 .getIntegerBoundingBox()
                 .times($.pixelDensityRatio);
+
+                if(tiledImage._drawer.viewer.viewport.flipped || tiledImage.flipped ) {
+                    // tiledImage._drawer._flip({});
+                    // bounds.width = bounds.width - bounds.x;
+                    // bounds.width = tiledImage._drawer.viewer.viewport.getContainerSize().width - bounds.x;
+                    // bounds.x = -bounds.x;
+                }
         }
         tiledImage._drawer._clear(true, bounds);
     }
+    console.log("BOUNDS: ", bounds);
 
     // When scaling, we must rotate only when blending the sketch canvas to
     // avoid interpolation
     if (!sketchScale) {
         if (tiledImage.viewport.degrees !== 0) {
+            console.log("tiledImage.viewport.degrees !== 0");
             tiledImage._drawer._offsetForRotation({
                 degrees: tiledImage.viewport.degrees,
                 useSketch: useSketch
             });
-        } else {
-            if(tiledImage._drawer.viewer.viewport.flipped) {
+        }/* else {
+            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+                console.log("FLIP");
                 tiledImage._drawer._flip({});
             }
-        }
+        }*/
         if (tiledImage.getRotation(true) % 360 !== 0) {
+            console.log("tiledImage.getRotation(true) % 360 !== 0");
             tiledImage._drawer._offsetForRotation({
                 degrees: tiledImage.getRotation(true),
                 point: tiledImage.viewport.pixelFromPointNoRotate(
@@ -1904,6 +1922,13 @@ function drawTiles( tiledImage, lastDrawn ) {
                 useSketch: useSketch
             });
         }
+
+        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+          if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+              console.log("FLIP");
+              tiledImage._drawer._flip({});
+          }
+        }
     }
 
     var usedClip = false;
@@ -1975,12 +2000,20 @@ function drawTiles( tiledImage, lastDrawn ) {
     if (!sketchScale) {
         if (tiledImage.getRotation(true) % 360 !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
-        }
+        }/* else {
+            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+                console.log("FLIP");
+                tiledImage._drawer._flip({});
+            }
+        }*/
         if (tiledImage.viewport.degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
-        } else{
-          if(tiledImage._drawer.viewer.viewport.flipped) {
-            tiledImage._drawer._flip({});
+        }
+
+        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+          if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+              console.log("FLIP");
+              tiledImage._drawer._flip({});
           }
         }
     }
@@ -2010,6 +2043,7 @@ function drawTiles( tiledImage, lastDrawn ) {
             bounds: bounds
         });
         if (sketchScale) {
+          console.log("--------------------sketchScale--------------------");
             if (tiledImage.getRotation(true) % 360 !== 0) {
                 tiledImage._drawer._restoreRotationChanges(false);
             }
@@ -2018,6 +2052,7 @@ function drawTiles( tiledImage, lastDrawn ) {
             }
         }
     }
+
     drawDebugInfo( tiledImage, lastDrawn );
 }
 

From 7a7ba07902d4745125a719b0f92995e4145706d6 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 2 Oct 2018 16:57:31 +0100
Subject: [PATCH 2/9] Moved flip call to the end of drawTiles method. Just code
 backup

---
 src/drawer.js     | 13 +++++++-----
 src/tiledimage.js | 51 +++++++++++++++++++++--------------------------
 src/viewer.js     |  1 +
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 7c4852cb..a68e1bcb 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -500,10 +500,6 @@ $.Drawer.prototype = {
 
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
-        } else{
-          if(this.viewer.viewport.flipped) {
-            this._flip();
-          }
         }
         if (tiledImage.getRotation(true) % 360 !== 0) {
             this._offsetForRotation({
@@ -512,6 +508,11 @@ $.Drawer.prototype = {
                     tiledImage._getRotationPoint(true), true)
             });
         }
+        if((this.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 !== 0) || (this.viewport.degrees !== 0 && tiledImage.getRotation(true) % 360 == 0)){
+          if((this.viewport.flipped && !tiledImage.flipped) || (!this.viewport.flipped && tiledImage.flipped) ) {
+              this._flip();
+          }
+        }
 
         context.strokeRect(
             tile.position.x * $.pixelDensityRatio,
@@ -645,7 +646,9 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        if(this.viewer.viewport.flipped){
+        // If viewport and tiledImage are flipped, it would draw the image without flipping
+        // This if sentence is intended to represent a logical XOR
+        if((!this.viewer.viewport.flipped && this.viewer.world._items[0].flipped) || (this.viewer.viewport.flipped && !this.viewer.world._items[0].flipped)){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
         } else{
diff --git a/src/tiledimage.js b/src/tiledimage.js
index d55656c9..eeb5a686 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -147,9 +147,6 @@ $.TiledImage = function( options ) {
     var degrees = options.degrees || 0;
     delete options.degrees;
 
-    // var flipped = options.flipped || false;
-    // delete options.flipped;
-
     $.extend( true, this, {
 
         //internal state properties
@@ -1887,34 +1884,31 @@ function drawTiles( tiledImage, lastDrawn ) {
                 .getIntegerBoundingBox()
                 .times($.pixelDensityRatio);
 
-                if(tiledImage._drawer.viewer.viewport.flipped || tiledImage.flipped ) {
+                // if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
                     // tiledImage._drawer._flip({});
                     // bounds.width = bounds.width - bounds.x;
                     // bounds.width = tiledImage._drawer.viewer.viewport.getContainerSize().width - bounds.x;
+                    // console.log("BOUNDS before: ", bounds);
+
+                    // bounds.width = bounds.width + bounds.x;
                     // bounds.x = -bounds.x;
-                }
+                    // console.log("Bounds Image: ", tiledImage._drawer.viewer.viewport.getContainerSize());
+                // }
         }
         tiledImage._drawer._clear(true, bounds);
     }
-    console.log("BOUNDS: ", bounds);
+    console.log("BOUNDS after: ", bounds);
 
     // When scaling, we must rotate only when blending the sketch canvas to
     // avoid interpolation
     if (!sketchScale) {
         if (tiledImage.viewport.degrees !== 0) {
-            console.log("tiledImage.viewport.degrees !== 0");
             tiledImage._drawer._offsetForRotation({
                 degrees: tiledImage.viewport.degrees,
                 useSketch: useSketch
             });
-        }/* else {
-            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-                console.log("FLIP");
-                tiledImage._drawer._flip({});
-            }
-        }*/
+        }
         if (tiledImage.getRotation(true) % 360 !== 0) {
-            console.log("tiledImage.getRotation(true) % 360 !== 0");
             tiledImage._drawer._offsetForRotation({
                 degrees: tiledImage.getRotation(true),
                 point: tiledImage.viewport.pixelFromPointNoRotate(
@@ -1925,7 +1919,7 @@ function drawTiles( tiledImage, lastDrawn ) {
 
         if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
           if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-              console.log("FLIP");
+              console.log("FLIP1");
               tiledImage._drawer._flip({});
           }
         }
@@ -2000,22 +1994,17 @@ function drawTiles( tiledImage, lastDrawn ) {
     if (!sketchScale) {
         if (tiledImage.getRotation(true) % 360 !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
-        }/* else {
-            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-                console.log("FLIP");
-                tiledImage._drawer._flip({});
-            }
-        }*/
+        }
         if (tiledImage.viewport.degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
         }
 
-        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-          if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-              console.log("FLIP");
-              tiledImage._drawer._flip({});
-          }
-        }
+        // if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+        //   if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+        //       console.log("FLIP2");
+        //       tiledImage._drawer._flip({});
+        //   }
+        // }
     }
 
     if (useSketch) {
@@ -2043,7 +2032,6 @@ function drawTiles( tiledImage, lastDrawn ) {
             bounds: bounds
         });
         if (sketchScale) {
-          console.log("--------------------sketchScale--------------------");
             if (tiledImage.getRotation(true) % 360 !== 0) {
                 tiledImage._drawer._restoreRotationChanges(false);
             }
@@ -2053,6 +2041,13 @@ function drawTiles( tiledImage, lastDrawn ) {
         }
     }
 
+    if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+      if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+          console.log("FLIP3");
+          tiledImage._drawer._flip({});
+      }
+    }
+
     drawDebugInfo( tiledImage, lastDrawn );
 }
 
diff --git a/src/viewer.js b/src/viewer.js
index 9be3e7fa..d023e985 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1435,6 +1435,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,

From cf20d9fb43bb6f301ebc368ea1c025c19335641c Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Tue, 16 Oct 2018 17:24:26 +0100
Subject: [PATCH 3/9] Fix drawer clearance bounds

---
 src/openseadragon.js |  4 ++--
 src/tiledimage.js    | 35 +++++++++++------------------------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index 784d3e78..30cf6ed3 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -271,7 +271,7 @@
   *     events between different devices, causing the faster devices to slow down enough to make the zoom control
   *     more manageable.
   *
-  * @property {Number} [rotationIncrement=90]
+  * @property {Number} [rotationIncrement=10]
   *     The number of degrees to rotate right or left when the rotate buttons or keyboard shortcuts are activated.
   *
   * @property {Number} [pixelsPerWheelLine=40]
@@ -1140,7 +1140,7 @@ function OpenSeadragon( options ){
             autoResize:             true,
             preserveImageSizeOnResize: false, // requires autoResize=true
             minScrollDeltaTime:     50,
-            rotationIncrement:      10,
+            rotationIncrement:      90,
 
             //DEFAULT CONTROL SETTINGS
             showSequenceControl:     true,  //SEQUENCE
diff --git a/src/tiledimage.js b/src/tiledimage.js
index eeb5a686..d09b8857 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1884,21 +1884,14 @@ function drawTiles( tiledImage, lastDrawn ) {
                 .getIntegerBoundingBox()
                 .times($.pixelDensityRatio);
 
-                // if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-                    // tiledImage._drawer._flip({});
-                    // bounds.width = bounds.width - bounds.x;
-                    // bounds.width = tiledImage._drawer.viewer.viewport.getContainerSize().width - bounds.x;
-                    // console.log("BOUNDS before: ", bounds);
-
-                    // bounds.width = bounds.width + bounds.x;
-                    // bounds.x = -bounds.x;
-                    // console.log("Bounds Image: ", tiledImage._drawer.viewer.viewport.getContainerSize());
-                // }
+            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+              if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){
+                bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width);
+              }
+            }
         }
         tiledImage._drawer._clear(true, bounds);
     }
-    console.log("BOUNDS after: ", bounds);
-
     // When scaling, we must rotate only when blending the sketch canvas to
     // avoid interpolation
     if (!sketchScale) {
@@ -1919,7 +1912,6 @@ function drawTiles( tiledImage, lastDrawn ) {
 
         if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
           if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-              console.log("FLIP1");
               tiledImage._drawer._flip({});
           }
         }
@@ -1998,13 +1990,6 @@ function drawTiles( tiledImage, lastDrawn ) {
         if (tiledImage.viewport.degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
         }
-
-        // if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-        //   if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-        //       console.log("FLIP2");
-        //       tiledImage._drawer._flip({});
-        //   }
-        // }
     }
 
     if (useSketch) {
@@ -2041,13 +2026,15 @@ function drawTiles( tiledImage, lastDrawn ) {
         }
     }
 
-    if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-      if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
-          console.log("FLIP3");
-          tiledImage._drawer._flip({});
+    if (!sketchScale) {
+      if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+        if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+            tiledImage._drawer._flip({});
+        }
       }
     }
 
+
     drawDebugInfo( tiledImage, lastDrawn );
 }
 

From bfd170689d76bc58dc45fb5987bc30af129765d2 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 17 Oct 2018 11:09:45 +0100
Subject: [PATCH 4/9] Fix navigator flipped drag and click handlers

---
 src/navigator.js |  4 ++--
 src/viewer.js    | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/navigator.js b/src/navigator.js
index 115d052d..64b8c3a8 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -455,7 +455,7 @@ function onCanvasClick( event ) {
    this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
 
    if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) {
-    if(this.viewer.viewport.flipped) {
+    if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) {
       event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
     var target = this.viewport.pointFromPixel(event.position);
@@ -515,7 +515,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if(this.viewer.viewport.flipped){
+        if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) {
             event.delta.x = -event.delta.x;
         }
 
diff --git a/src/viewer.js b/src/viewer.js
index d023e985..5ea11eb4 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2642,7 +2642,7 @@ function onCanvasKeyPress( event ) {
                 }
                 return false;
             case 114: //r - clockwise rotation
-              if(this.viewport.flipped){
+              if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
@@ -2650,7 +2650,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 82: //R - counterclockwise  rotation
-              if(this.viewport.flipped){
+              if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
@@ -2678,7 +2678,7 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if(this.viewport.flipped){
+    if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2800,7 +2800,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if(this.viewport.flipped){
+        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
             event.delta.x = -event.delta.x;
         }
 
@@ -3128,7 +3128,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if(this.viewport.flipped){
+        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3495,7 +3495,7 @@ function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if ( this.viewport.flipped ){
+        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
@@ -3508,7 +3508,7 @@ function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if ( this.viewport.flipped ){
+        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);

From 132c68c8bb55f8a0233905e36992cec83a13a356 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Wed, 17 Oct 2018 12:45:10 +0100
Subject: [PATCH 5/9] Create getFlip function to retrieve tiledImage flipped
 state

---
 src/drawer.js     |  4 ++--
 src/navigator.js  | 10 ++++++----
 src/tiledimage.js | 16 +++++++++++++---
 src/viewer.js     | 15 ++++++++-------
 src/viewport.js   |  2 +-
 5 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index a68e1bcb..a099a5b7 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -509,7 +509,7 @@ $.Drawer.prototype = {
             });
         }
         if((this.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 !== 0) || (this.viewport.degrees !== 0 && tiledImage.getRotation(true) % 360 == 0)){
-          if((this.viewport.flipped && !tiledImage.flipped) || (!this.viewport.flipped && tiledImage.flipped) ) {
+          if((this.viewport.getFlip() && !tiledImage.flipped) || (!this.viewport.getFlip() && tiledImage.flipped) ) {
               this._flip();
           }
         }
@@ -648,7 +648,7 @@ $.Drawer.prototype = {
         context.translate(point.x, point.y);
         // If viewport and tiledImage are flipped, it would draw the image without flipping
         // This if sentence is intended to represent a logical XOR
-        if((!this.viewer.viewport.flipped && this.viewer.world._items[0].flipped) || (this.viewer.viewport.flipped && !this.viewer.world._items[0].flipped)){
+        if((!this.viewer.viewport.getFlip() && this.viewer.world._items[0].flipped) || (this.viewer.viewport.getFlip() && !this.viewer.world._items[0].flipped)){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
         } else{
diff --git a/src/navigator.js b/src/navigator.js
index 64b8c3a8..41d6e8d0 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -284,7 +284,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     setFlip: function(state) {
       this.viewport.setFlip(state);
 
-      this.setDisplayTransform(this.viewer.viewport.getFlip() ? "scale(-1,1)" : "scale(1,1)");
+      var flip = ((this.viewport.getFlip() && !this.viewer.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.viewer.world._items[0].getFlip()));
+      this.setDisplayTransform(flip ? "scale(-1,1)" : "scale(1,1)");
       return this;
     },
 
@@ -350,6 +351,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
             style.height = Math.round( Math.max( height, 0 ) ) + 'px';
         }
 
+
+
     },
 
     // overrides Viewer.addTiledImage
@@ -453,9 +456,8 @@ function onCanvasClick( event ) {
    */
 
    this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
-
    if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) {
-    if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) {
+    if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) {
       event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
     var target = this.viewport.pointFromPixel(event.position);
@@ -515,7 +517,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) {
+        if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) {
             event.delta.x = -event.delta.x;
         }
 
diff --git a/src/tiledimage.js b/src/tiledimage.js
index d09b8857..0da96e7d 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -860,6 +860,16 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         this._raiseBoundsChange();
     },
 
+    /**
+     * Get flip state stored on tiledImage.
+     * @function
+     * @return {Boolean} Flip state.
+     */
+    getFlip: function() {
+      return this.flipped;
+    },
+
+
     /**
      * Get the point around which this tiled image is rotated
      * @private
@@ -1884,7 +1894,7 @@ function drawTiles( tiledImage, lastDrawn ) {
                 .getIntegerBoundingBox()
                 .times($.pixelDensityRatio);
 
-            if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+            if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
               if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){
                 bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width);
               }
@@ -1911,7 +1921,7 @@ function drawTiles( tiledImage, lastDrawn ) {
         }
 
         if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-          if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
               tiledImage._drawer._flip({});
           }
         }
@@ -2028,7 +2038,7 @@ function drawTiles( tiledImage, lastDrawn ) {
 
     if (!sketchScale) {
       if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-        if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) {
+        if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
             tiledImage._drawer._flip({});
         }
       }
diff --git a/src/viewer.js b/src/viewer.js
index 5ea11eb4..e1d50bc5 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2642,7 +2642,7 @@ function onCanvasKeyPress( event ) {
                 }
                 return false;
             case 114: //r - clockwise rotation
-              if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+              if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
@@ -2650,7 +2650,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 82: //R - counterclockwise  rotation
-              if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+              if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
@@ -2678,7 +2678,8 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+    if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+        console.log("FLipped Click");
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2800,7 +2801,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
             event.delta.x = -event.delta.x;
         }
 
@@ -3128,7 +3129,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3495,7 +3496,7 @@ function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
@@ -3508,7 +3509,7 @@ function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){
+        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
diff --git a/src/viewport.js b/src/viewport.js
index 3413dbc1..07c941c6 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1531,7 +1531,7 @@ $.Viewport.prototype = {
     },
 
     /**
-     * Gets flip state stored on viewport.
+     * Get flip state stored on viewport.
      * @function
      * @return {Boolean} Flip state.
      */

From 2670f62892d725278140e519b69f179320444497 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 18 Oct 2018 11:31:55 +0100
Subject: [PATCH 6/9] Fix navigator flip transformation

Flip transformation wasn't correctly applied on navigator for all images when its tileSource is flipped by default.
---
 src/drawer.js        | 4 ++--
 src/navigator.js     | 3 +--
 src/openseadragon.js | 2 +-
 src/tiledimage.js    | 2 +-
 src/viewer.js        | 5 ++++-
 src/viewport.js      | 3 ++-
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index a099a5b7..e99b56fe 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -509,7 +509,7 @@ $.Drawer.prototype = {
             });
         }
         if((this.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 !== 0) || (this.viewport.degrees !== 0 && tiledImage.getRotation(true) % 360 == 0)){
-          if((this.viewport.getFlip() && !tiledImage.flipped) || (!this.viewport.getFlip() && tiledImage.flipped) ) {
+          if((this.viewport.getFlip() && !tiledImage.getFlip()) || (!this.viewport.getFlip() && tiledImage.getFlip()) ) {
               this._flip();
           }
         }
@@ -648,7 +648,7 @@ $.Drawer.prototype = {
         context.translate(point.x, point.y);
         // If viewport and tiledImage are flipped, it would draw the image without flipping
         // This if sentence is intended to represent a logical XOR
-        if((!this.viewer.viewport.getFlip() && this.viewer.world._items[0].flipped) || (this.viewer.viewport.getFlip() && !this.viewer.world._items[0].flipped)){
+        if((!this.viewer.viewport.getFlip() && this.viewer.world._items[0].getFlip()) || (this.viewer.viewport.getFlip() && !this.viewer.world._items[0].getFlip())){
           context.rotate(Math.PI / 180 * -options.degrees);
           context.scale(-1, 1);
         } else{
diff --git a/src/navigator.js b/src/navigator.js
index 41d6e8d0..bb4e08d6 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -351,8 +351,6 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
             style.height = Math.round( Math.max( height, 0 ) ) + 'px';
         }
 
-
-
     },
 
     // overrides Viewer.addTiledImage
@@ -456,6 +454,7 @@ function onCanvasClick( event ) {
    */
 
    this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
+
    if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) {
     if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) {
       event.position.x = this.viewport.getContainerSize().x - event.position.x;
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 30cf6ed3..e3d9aed7 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -271,7 +271,7 @@
   *     events between different devices, causing the faster devices to slow down enough to make the zoom control
   *     more manageable.
   *
-  * @property {Number} [rotationIncrement=10]
+  * @property {Number} [rotationIncrement=90]
   *     The number of degrees to rotate right or left when the rotate buttons or keyboard shortcuts are activated.
   *
   * @property {Number} [pixelsPerWheelLine=40]
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 0da96e7d..6501751a 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -1902,6 +1902,7 @@ function drawTiles( tiledImage, lastDrawn ) {
         }
         tiledImage._drawer._clear(true, bounds);
     }
+
     // When scaling, we must rotate only when blending the sketch canvas to
     // avoid interpolation
     if (!sketchScale) {
@@ -2044,7 +2045,6 @@ function drawTiles( tiledImage, lastDrawn ) {
       }
     }
 
-
     drawDebugInfo( tiledImage, lastDrawn );
 }
 
diff --git a/src/viewer.js b/src/viewer.js
index e1d50bc5..f622829c 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2679,7 +2679,6 @@ function onCanvasClick( event ) {
         this.canvas.focus();
     }
     if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
-        console.log("FLipped Click");
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -3367,6 +3366,10 @@ function updateOnce( viewer ) {
 
     THIS[ viewer.hash ].animating = animated;
 
+    // Update navigator flip transformation
+    if (viewer.navigator && viewer.viewport != "undefined"){
+      viewer.navigator.setFlip(viewer.viewport.getFlip());
+    }
     //viewer.profiler.endUpdate();
 }
 
diff --git a/src/viewport.js b/src/viewport.js
index 07c941c6..61cee041 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1552,7 +1552,8 @@ $.Viewport.prototype = {
 
       this.flipped = state;
       if(this.viewer.navigator){
-        this.viewer.navigator.setFlip(this.getFlip());
+        var flip = ((this.getFlip() || !this.viewer.world._items[0].getFlip()) || (!this.getFlip() || this.viewer.world._items[0].getFlip()));
+        this.viewer.navigator.setFlip(flip);
       }
       this.viewer.forceRedraw();
 

From 4fe5a841704162db2cd2a72a29a4f63368cce687 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Thu, 18 Oct 2018 15:29:08 +0100
Subject: [PATCH 7/9] Fix flipped debug drawing context

---
 src/drawer.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index e99b56fe..cf86b61b 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -508,9 +508,9 @@ $.Drawer.prototype = {
                     tiledImage._getRotationPoint(true), true)
             });
         }
-        if((this.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 !== 0) || (this.viewport.degrees !== 0 && tiledImage.getRotation(true) % 360 == 0)){
-          if((this.viewport.getFlip() && !tiledImage.getFlip()) || (!this.viewport.getFlip() && tiledImage.getFlip()) ) {
-              this._flip();
+        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
+              tiledImage._drawer._flip({});
           }
         }
 
@@ -578,6 +578,13 @@ $.Drawer.prototype = {
         if (tiledImage.getRotation(true) % 360 !== 0) {
             this._restoreRotationChanges();
         }
+
+        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
+          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
+              tiledImage._drawer._flip({});
+          }
+        }
+
         context.restore();
     },
 

From 546efcc1dbafac20caee6ac11ae55d12311dc9a3 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Fri, 19 Oct 2018 10:58:47 +0100
Subject: [PATCH 8/9] Fix undefined return from getFlip

Navigator setFlip was looking for tiledImage flip state using the getFlip method.
The item this.viewer.world._items[0] can be undefined and trying to use its methods would fail.
---
 src/navigator.js | 2 +-
 src/viewer.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/navigator.js b/src/navigator.js
index bb4e08d6..4b2018fb 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -284,7 +284,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     setFlip: function(state) {
       this.viewport.setFlip(state);
 
-      var flip = ((this.viewport.getFlip() && !this.viewer.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.viewer.world._items[0].getFlip()));
+      var flip = ((this.viewport.getFlip() && this.viewer.world._items[0] && !this.viewer.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.viewer.world._items[0] && this.viewer.world._items[0].getFlip()));
       this.setDisplayTransform(flip ? "scale(-1,1)" : "scale(1,1)");
       return this;
     },
diff --git a/src/viewer.js b/src/viewer.js
index f622829c..ac3701b4 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -3367,7 +3367,7 @@ function updateOnce( viewer ) {
     THIS[ viewer.hash ].animating = animated;
 
     // Update navigator flip transformation
-    if (viewer.navigator && viewer.viewport != "undefined"){
+    if (viewer.navigator && viewer.viewport != undefined){
       viewer.navigator.setFlip(viewer.viewport.getFlip());
     }
     //viewer.profiler.endUpdate();

From dc8331e6411f877ef9fe577d6159df14b42c8038 Mon Sep 17 00:00:00 2001
From: Nelson Campos <ncampos@criteriamarathon.com>
Date: Fri, 19 Oct 2018 15:34:13 +0100
Subject: [PATCH 9/9] Clean unnecessary code.

Clean tiled image's flip property and methods.
---
 src/drawer.js     | 16 +++++++---------
 src/navigator.js  |  7 +++----
 src/tiledimage.js | 30 ++++++++----------------------
 src/viewer.js     | 19 +++++++------------
 src/viewport.js   |  3 +--
 5 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index cf86b61b..614e6cbe 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -508,9 +508,9 @@ $.Drawer.prototype = {
                     tiledImage._getRotationPoint(true), true)
             });
         }
-        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
-              tiledImage._drawer._flip({});
+        if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
+          if(tiledImage._drawer.viewer.viewport.getFlip()) {
+              tiledImage._drawer._flip();
           }
         }
 
@@ -579,9 +579,9 @@ $.Drawer.prototype = {
             this._restoreRotationChanges();
         }
 
-        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
-              tiledImage._drawer._flip({});
+        if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
+          if(tiledImage._drawer.viewer.viewport.getFlip()) {
+              tiledImage._drawer._flip();
           }
         }
 
@@ -653,9 +653,7 @@ $.Drawer.prototype = {
         context.save();
 
         context.translate(point.x, point.y);
-        // If viewport and tiledImage are flipped, it would draw the image without flipping
-        // This if sentence is intended to represent a logical XOR
-        if((!this.viewer.viewport.getFlip() && this.viewer.world._items[0].getFlip()) || (this.viewer.viewport.getFlip() && !this.viewer.world._items[0].getFlip())){
+        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 4b2018fb..115d052d 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -284,8 +284,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     setFlip: function(state) {
       this.viewport.setFlip(state);
 
-      var flip = ((this.viewport.getFlip() && this.viewer.world._items[0] && !this.viewer.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.viewer.world._items[0] && this.viewer.world._items[0].getFlip()));
-      this.setDisplayTransform(flip ? "scale(-1,1)" : "scale(1,1)");
+      this.setDisplayTransform(this.viewer.viewport.getFlip() ? "scale(-1,1)" : "scale(1,1)");
       return this;
     },
 
@@ -456,7 +455,7 @@ function onCanvasClick( event ) {
    this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
 
    if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) {
-    if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) {
+    if(this.viewer.viewport.flipped) {
       event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
     var target = this.viewport.pointFromPixel(event.position);
@@ -516,7 +515,7 @@ function onCanvasDrag( event ) {
             event.delta.y = 0;
         }
 
-        if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) {
+        if(this.viewer.viewport.flipped){
             event.delta.x = -event.delta.x;
         }
 
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 6501751a..abe8c2da 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -52,7 +52,6 @@
  * @param {Number} [options.y=0] - Top position, in viewport coordinates.
  * @param {Number} [options.width=1] - Width, in viewport coordinates.
  * @param {Number} [options.height] - Height, in viewport coordinates.
- * @param {Boolean} [options.flipped=false] - Whether to draw tiled image flipped.
  * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates
  * to fit the image into. If specified, x, y, width and height get ignored.
  * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER]
@@ -210,9 +209,6 @@ $.TiledImage = function( options ) {
         animationTime: this.animationTime
     });
 
-    this.flipped = options.flipped;
-    delete options.flipped;
-
     this._updateForScale();
 
     if (fitBounds) {
@@ -860,16 +856,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         this._raiseBoundsChange();
     },
 
-    /**
-     * Get flip state stored on tiledImage.
-     * @function
-     * @return {Boolean} Flip state.
-     */
-    getFlip: function() {
-      return this.flipped;
-    },
-
-
     /**
      * Get the point around which this tiled image is rotated
      * @private
@@ -1689,7 +1675,7 @@ function blendTile( tiledImage, tile, x, y, level, levelOpacity, currentTime ){
 
     tiledImage.lastDrawn.push( tile );
 
-    if ( opacity == 1 ) {
+    if ( opacity === 1 ) {
         setCoverage( tiledImage.coverage, level, x, y, true );
         tiledImage._hasOpaqueTile = true;
     } else if ( deltaTime < blendTimeMillis ) {
@@ -1894,7 +1880,7 @@ function drawTiles( tiledImage, lastDrawn ) {
                 .getIntegerBoundingBox()
                 .times($.pixelDensityRatio);
 
-            if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
+            if(tiledImage._drawer.viewer.viewport.getFlip()) {
               if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){
                 bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width);
               }
@@ -1921,9 +1907,9 @@ function drawTiles( tiledImage, lastDrawn ) {
             });
         }
 
-        if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-          if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
-              tiledImage._drawer._flip({});
+        if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
+          if(tiledImage._drawer.viewer.viewport.getFlip()) {
+              tiledImage._drawer._flip();
           }
         }
     }
@@ -2038,9 +2024,9 @@ function drawTiles( tiledImage, lastDrawn ) {
     }
 
     if (!sketchScale) {
-      if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){
-        if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) {
-            tiledImage._drawer._flip({});
+      if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
+        if(tiledImage._drawer.viewer.viewport.getFlip()) {
+            tiledImage._drawer._flip();
         }
       }
     }
diff --git a/src/viewer.js b/src/viewer.js
index ac3701b4..9be3e7fa 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1435,7 +1435,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,
@@ -2642,7 +2641,7 @@ function onCanvasKeyPress( event ) {
                 }
                 return false;
             case 114: //r - clockwise rotation
-              if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+              if(this.viewport.flipped){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
@@ -2650,7 +2649,7 @@ function onCanvasKeyPress( event ) {
               this.viewport.applyConstraints();
               return false;
             case 82: //R - counterclockwise  rotation
-              if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+              if(this.viewport.flipped){
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
               } else{
                 this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
@@ -2678,7 +2677,7 @@ function onCanvasClick( event ) {
     if ( !haveKeyboardFocus ) {
         this.canvas.focus();
     }
-    if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+    if(this.viewport.flipped){
         event.position.x = this.viewport.getContainerSize().x - event.position.x;
     }
 
@@ -2800,7 +2799,7 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+        if(this.viewport.flipped){
             event.delta.x = -event.delta.x;
         }
 
@@ -3128,7 +3127,7 @@ function onCanvasScroll( event ) {
     if (deltaScrollTime > this.minScrollDeltaTime) {
         this._lastScrollTime = thisScrollTime;
 
-        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+        if(this.viewport.flipped){
           event.position.x = this.viewport.getContainerSize().x - event.position.x;
         }
 
@@ -3366,10 +3365,6 @@ function updateOnce( viewer ) {
 
     THIS[ viewer.hash ].animating = animated;
 
-    // Update navigator flip transformation
-    if (viewer.navigator && viewer.viewport != undefined){
-      viewer.navigator.setFlip(viewer.viewport.getFlip());
-    }
     //viewer.profiler.endUpdate();
 }
 
@@ -3499,7 +3494,7 @@ function onRotateLeft() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+        if ( this.viewport.flipped ){
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
@@ -3512,7 +3507,7 @@ function onRotateRight() {
     if ( this.viewport ) {
         var currRotation = this.viewport.getRotation();
 
-        if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){
+        if ( this.viewport.flipped ){
           currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
         } else {
           currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
diff --git a/src/viewport.js b/src/viewport.js
index 61cee041..07c941c6 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -1552,8 +1552,7 @@ $.Viewport.prototype = {
 
       this.flipped = state;
       if(this.viewer.navigator){
-        var flip = ((this.getFlip() || !this.viewer.world._items[0].getFlip()) || (!this.getFlip() || this.viewer.world._items[0].getFlip()));
-        this.viewer.navigator.setFlip(flip);
+        this.viewer.navigator.setFlip(this.getFlip());
       }
       this.viewer.forceRedraw();