Merge pull request #2546 from BeebBenjamin/flip-overlay

Fixed: Invert overlay scale and rotate on flip

src/openseadragon.js

@@ -240,6 +240,11 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
+  * @property {Boolean} [overlayPreserveContentDirection=true]
+  *     When the viewport is flipped (by pressing 'f'), the overlay is flipped using ScaleX.
+  *     Normally, this setting (default true) keeps the overlay's content readable by flipping it back.
+  *     To make the content flip with the overlay, set overlayPreserveContentDirection to false.
+  *
   * @property {Number} [minZoomLevel=null]
   *
   * @property {Number} [maxZoomLevel=null]
@@ -1357,6 +1362,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                          false,
+            overlayPreserveContentDirection:  true,
 
             // APPEARANCE
             opacity:                           1, // to be passed into each TiledImage

src/overlay.js

@@ -129,6 +129,7 @@
         }
 
         this.element = options.element;
+        this.element.innerHTML = "<div>" + this.element.innerHTML + "</div>";
         this.style = options.element.style;
         this._init(options);
     };
@@ -254,19 +255,23 @@
                 // least one direction when this.checkResize is set to false.
                 this.size = $.getElementSize(element);
             }
-
             var positionAndSize = this._getOverlayPositionAndSize(viewport);
-
             var position = positionAndSize.position;
             var size = this.size = positionAndSize.size;
-            var rotate = positionAndSize.rotate;
+            var outerScale = "";
-
+            if (viewport.overlayPreserveContentDirection) {
+                outerScale = viewport.flipped ? " scaleX(-1)" : " scaleX(1)";
+            }
+            var rotate = viewport.flipped ? -positionAndSize.rotate : positionAndSize.rotate;
+            var scale = viewport.flipped ? " scaleX(-1)" : "";
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
             if (this.onDraw) {
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
+                var innerElement = element.firstChild;
+                var innerStyle = innerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -280,10 +285,20 @@
                 var transformProp = $.getCssPropertyWithVendorPrefix(
                     'transform');
                 if (transformOriginProp && transformProp) {
-                    if (rotate) {
+                    if (rotate && !viewport.flipped) {
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
+                    } else if (!rotate && viewport.flipped) {
+                        innerStyle[transformProp] = outerScale;
+                        style[transformOriginProp] = this._getTransformOrigin();
+                        style[transformProp] = scale;
+                    } else if (rotate && viewport.flipped){
+                        innerStyle[transformProp] = outerScale;
+                        style[transformOriginProp] = this._getTransformOrigin();
+                        style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }
@@ -314,6 +329,9 @@
                 }
             }
 
+            if (viewport.flipped) {
+                position.x = (viewport.getContainerSize().x - position.x);
+            }
             return {
                 position: position,
                 size: size,

src/viewer.js

@@ -413,6 +413,7 @@ $.Viewer = function( options ) {
         viewer:                             this,
         degrees:                            this.degrees,
         flipped:                            this.flipped,
+        overlayPreserveContentDirection:    this.overlayPreserveContentDirection,
         navigatorRotate:                    this.navigatorRotate,
         homeFillsViewer:                    this.homeFillsViewer,
         margins:                            this.viewportMargins,

test/demo/overlay.html

@@ -26,7 +26,8 @@
             prefixUrl: "../../build/openseadragon/images/",
             tileSources: "../data/testpattern.dzi",
             minZoomImageRatio: 0,
-            maxZoomPixelRatio: 10
+            maxZoomPixelRatio: 10,
+            overlayPreserveContentDirection: true  // change this to true to test overlay content flipping
         });
 
         viewer.addHandler("open", function(event) {
@@ -42,6 +43,19 @@
                 rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
             });
 
+            // test with image of letter B to see that images flip too
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.outline = "1px solid blue";
+            elt.style.height = "100px";
+            elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Point(0.0, 0.0),
+                width: 0.1,
+                height: 0.1
+            });
+
             elt = document.createElement("div");
             elt.className = "runtime-overlay";
             elt.style.background = "white";