From d897e5454fe9f17e629a1d69449458a82b8eb7b3 Mon Sep 17 00:00:00 2001 From: "oro.niccolo" Date: Tue, 23 May 2023 09:27:32 +0200 Subject: [PATCH] Added navigator's region rotation When the "navigatorRotate" option is set to false, rotate the navigator's region accordigly to the image rotation. --- src/navigator.js | 7 +++++ test/demo/rotating-navigator-region.html | 34 ++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 test/demo/rotating-navigator-region.html diff --git a/src/navigator.js b/src/navigator.js index 9d2cf6b7..9bcbb376 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -224,6 +224,8 @@ $.Navigator = function( options ){ this.displayRegionContainer.appendChild(this.displayRegion); this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer); + this._navigatorRotate = options.navigatorRotate; + function rotate(degrees, immediately) { _setTransformRotate(_this.displayRegionContainer, degrees); _setTransformRotate(_this.displayRegion, -degrees); @@ -397,6 +399,11 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false) .minus( this.totalBorderWidths ); + if (!this._navigatorRotate) { + var degrees = viewport.getRotation(true); + _setTransformRotate(this.displayRegion, -degrees); + } + //update style for navigator-box var style = this.displayRegion.style; style.display = this.world.getItemCount() ? 'block' : 'none'; diff --git a/test/demo/rotating-navigator-region.html b/test/demo/rotating-navigator-region.html new file mode 100644 index 00000000..fc81bb22 --- /dev/null +++ b/test/demo/rotating-navigator-region.html @@ -0,0 +1,34 @@ + + + + OpenSeadragon Basic Demo + + + + + +
+ Simple demo page. The navigator region is expected to rotate when the image is rotated. + The default behaviour is to keep the region still as the image below it rotates. +
+
+ + +