From 2c5d2eb7c6159228a32527d6e9bdbd2876fc50c1 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Fri, 12 Jul 2024 20:36:11 +0100
Subject: [PATCH] Fixed: More meaning full variable and help text, innerStyle
 not outer

---
 src/openseadragon.js |  8 +++++---
 src/overlay.js       | 12 ++++++------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index a907d84c..5207de83 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -230,8 +230,10 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
-  * @property {Boolean} [overlayContentFlipped=false]
-  *     Initial overlay content flip state.
+  * @property {Boolean} [overlayFlipReversal=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 overlayFlipReversal to false.
   *
   * @property {Number} [minZoomLevel=null]
   *
@@ -1340,7 +1342,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                    false,
-            overlayContentFlipped:      false,
+            overlayFlipReversal:        true,
 
             // APPEARANCE
             opacity:                           1,
diff --git a/src/overlay.js b/src/overlay.js
index bed6b4c5..f555d6b9 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -270,8 +270,8 @@
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
-                var outerElement = element.firstChild;
-                var outerStyle = outerElement.style;
+                var innerElement = element.firstChild;
+                var innerStyle = innerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -286,19 +286,19 @@
                     'transform');
                 if (transformOriginProp && transformProp) {
                     if (rotate && !viewport.flipped) {
-                        outerStyle[transformProp] = "";
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
-                        outerStyle[transformProp] = outerScale;
+                        innerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
-                        outerStyle[transformProp] = outerScale;
+                        innerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
-                        outerStyle[transformProp] = "";
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }