Fixed: Outer div added to element to allow independent flipping

An outer div has been added to the internal HTML of the overlay element to allow for independent flipping of the content.  Flipping will invert the `scaleX` value of the transform property for the style of the element.  By setting the value `overlayContentFlipped: true` in the OSD config we can flip the content in the opposite direction to the overlay, but by setting this to false we can flip the content along with the overlay.  This allows for some people who are using images in their overlay to flip the images along with the overlay.

src/openseadragon.js

@@ -230,6 +230,9 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
+  * @property {Boolean} [overlayContentFlipped=false]
+  *     Initial overlay content flip state.
+  *
   * @property {Number} [minZoomLevel=null]
   *
   * @property {Number} [maxZoomLevel=null]
@@ -1337,6 +1340,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                    false,
+            overlayContentFlipped:      false,
 
             // APPEARANCE
             opacity:                           1,

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);
     };
@@ -242,9 +243,6 @@
          */
         drawHTML: function(container, viewport) {
             var element = this.element;
-            var text = document.createElement('div');
-            text.textContent = element.textContent;
-            element.textContent = "";
             if (element.parentNode !== container) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
@@ -257,27 +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;
+            var outerScale = "";
-            var scale = "";
+            if (viewport.overlayContentFlipped) {
-            if (viewport.flipped){
+                outerScale = viewport.flipped ? " scaleX(-1)" : " scaleX(1)";
-                rotate = -positionAndSize.rotate;
-                scale = " scaleX(-1)";
-            }
-            else {
-                rotate = positionAndSize.rotate;
             }
+            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 textStyle = text.style;
+                var outerElement = element.firstChild;
+                var outerStyle = outerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -292,23 +286,24 @@
                     'transform');
                 if (transformOriginProp && transformProp) {
                     if (rotate && !viewport.flipped) {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }
                 }
                 style.display = 'block';
-                element.appendChild(text);
             }
         },
 

src/viewer.js

@@ -397,6 +397,7 @@ $.Viewer = function( options ) {
         viewer:                     this,
         degrees:                    this.degrees,
         flipped:                    this.flipped,
+        overlayContentFlipped:      this.overlayContentFlipped,
         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,
+            overlayContentFlipped: 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";