From d897e5454fe9f17e629a1d69449458a82b8eb7b3 Mon Sep 17 00:00:00 2001 From: "oro.niccolo" Date: Tue, 23 May 2023 09:27:32 +0200 Subject: [PATCH 1/2] 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. +
+
+ + + From 7fb5744495fc24d2ab71af0a7501e23bf3f895db Mon Sep 17 00:00:00 2001 From: lcl45 Date: Wed, 24 May 2023 08:45:15 +0200 Subject: [PATCH 2/2] Resolved suggestions - Avoid useless parameters _navigatorRotate since it already exists within the navigator; - Automatically rotate the image in the demo page. --- src/navigator.js | 4 +--- test/demo/rotating-navigator-region.html | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/navigator.js b/src/navigator.js index 9bcbb376..0cee49a7 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -224,8 +224,6 @@ $.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); @@ -399,7 +397,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false) .minus( this.totalBorderWidths ); - if (!this._navigatorRotate) { + if (!this.navigatorRotate) { var degrees = viewport.getRotation(true); _setTransformRotate(this.displayRegion, -degrees); } diff --git a/test/demo/rotating-navigator-region.html b/test/demo/rotating-navigator-region.html index fc81bb22..1005f682 100644 --- a/test/demo/rotating-navigator-region.html +++ b/test/demo/rotating-navigator-region.html @@ -20,7 +20,6 @@