From 396fcb33a516e8eca591a713d85fd07306863060 Mon Sep 17 00:00:00 2001 From: Richard Benjamin Allen Date: Thu, 11 Jul 2024 22:08:37 +0100 Subject: [PATCH] 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 | 4 ++++ src/overlay.js | 29 ++++++++++++----------------- src/viewer.js | 1 + test/demo/overlay.html | 16 +++++++++++++++- 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 2cb2ac0d..a907d84c 100644 --- a/src/openseadragon.js +++ b/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, diff --git a/src/overlay.js b/src/overlay.js index 6d355c7a..bed6b4c5 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -129,6 +129,7 @@ } this.element = options.element; + this.element.innerHTML = "
" + this.element.innerHTML + "
"; 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 scale = ""; - if (viewport.flipped){ - rotate = -positionAndSize.rotate; - scale = " scaleX(-1)"; - } - else { - rotate = positionAndSize.rotate; + var outerScale = ""; + if (viewport.overlayContentFlipped) { + 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 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); } }, diff --git a/src/viewer.js b/src/viewer.js index d82a2d77..b918fab3 100644 --- a/src/viewer.js +++ b/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, diff --git a/test/demo/overlay.html b/test/demo/overlay.html index 527ebef3..bf5e3548 100644 --- a/test/demo/overlay.html +++ b/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 = "
" + 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";