mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-21 12:46:09 +03:00
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.
This commit is contained in:
Richard Benjamin Allen
parent
176fae11e5
commit
396fcb33a5
@ -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,
|
||||
|
||||
@ -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 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);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user