From afd8b48d6b0688b63a4750e7fb66c9212efe7178 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Tue, 12 Aug 2014 15:27:16 +0100 Subject: [PATCH 1/3] Fixes #192. Navigator can now rotate together with the viewer. --- src/navigator.js | 12 +++++++++--- src/openseadragon.js | 4 ++++ src/viewer.js | 3 ++- src/viewport.js | 19 +++++++++++++++++++ 4 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/navigator.js b/src/navigator.js index 24d35a3d..8cfa3e13 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -161,6 +161,11 @@ $.Navigator = function( options ){ style.cursor = 'default'; }( this.displayRegion.style, this.borderWidth )); + this.displayRegionContainer = $.makeNeutralElement("div"); + this.displayRegionContainer.id = this.element.id + '-displayregioncontainer'; + this.displayRegionContainer.className = "displayregioncontainer"; + this.displayRegionContainer.style.width = "100%"; + this.displayRegionContainer.style.height = "100%"; this.element.innerTracker = new $.MouseTracker({ element: this.element, @@ -203,7 +208,8 @@ $.Navigator = function( options ){ $.Viewer.apply( this, [ options ] ); - this.element.getElementsByTagName( 'div' )[0].appendChild( this.displayRegion ); + this.displayRegionContainer.appendChild(this.displayRegion); + this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer); unneededElement = this.element.getElementsByTagName('textarea')[0]; if (unneededElement) { unneededElement.parentNode.removeChild(unneededElement); @@ -225,7 +231,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* (this.container.clientHeight === 0 ? 1 : this.container.clientHeight) ); if ( !containerSize.equals( this.oldContainerSize ) ) { - var oldBounds = this.viewport.getBounds(); + var oldBounds = this.viewport.getBounds().rotate(this.viewport.degrees); var oldCenter = this.viewport.getCenter(); this.viewport.resize( containerSize, true ); var imageHeight = 1 / this.source.aspectRatio; @@ -318,7 +324,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* */ function onCanvasClick( event ) { if ( event.quick && this.viewer.viewport ) { - this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) ); + this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ).rotate( -this.viewer.viewport.degrees, this.viewer.viewport.getHomeBounds().getCenter() ) ); this.viewer.viewport.applyConstraints(); } } diff --git a/src/openseadragon.js b/src/openseadragon.js index 5bccc84b..a74bbfcc 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -378,6 +378,9 @@ * Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior. * Setting to false can also improve performance when the navigator is configured to a fixed size. * + * @property {Boolean} [navigatorRotate=true] + * If true, the navigator will be rotated together with the viewer. + * * @property {Number} [controlsFadeDelay=2000] * The number of milliseconds to wait once the user has stopped interacting * with the interface before begining to fade the controls. Assumes @@ -955,6 +958,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorHeight: null, navigatorWidth: null, navigatorAutoResize: true, + navigatorRotate: true, // INITIAL ROTATION degrees: 0, diff --git a/src/viewer.js b/src/viewer.js index 9f420ffd..b710ac59 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1957,7 +1957,8 @@ function openTileSource( viewer, source ) { minZoomLevel: _this.minZoomLevel, maxZoomLevel: _this.maxZoomLevel, viewer: _this, - degrees: _this.degrees + degrees: _this.degrees, + navigatorRotate: _this.navigatorRotate }); } diff --git a/src/viewport.js b/src/viewport.js index 38ecfa27..2672983d 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -712,6 +712,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return this; }, + /** + * @function + * @private + * @param {Object} element + * @param {Number} degrees + */ + _setTransformRotate: function (element, degrees) { + element.style.webkitTransform = "rotate(" + degrees + "deg)"; + element.style.mozTransform = "rotate(" + degrees + "deg)"; + element.style.msTransform = "rotate(" + degrees + "deg)"; + element.style.oTransform = "rotate(" + degrees + "deg)"; + element.style.transform = "rotate(" + degrees + "deg)"; + }, + /** * Currently only 90 degree rotation is supported and it only works * with the canvas. Additionally, the navigator does not rotate yet, @@ -729,6 +743,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ if( degrees % 90 !== 0 ) { throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); } + if (this.viewer.navigator !== null && this.navigatorRotate) { + this._setTransformRotate(this.viewer.navigator.displayRegionContainer, degrees); + this._setTransformRotate(this.viewer.navigator.displayRegion, -degrees); + this.viewer.navigator.viewport.setRotation(degrees); + } this.degrees = degrees; this.viewer.forceRedraw(); From 873135b492c441b6c8d33d7ca5e20e1aedb148b1 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Wed, 13 Aug 2014 10:53:52 +0100 Subject: [PATCH 2/3] Adds rotate event. Fixes #454. --- src/navigator.js | 23 +++++++++++++++++++++++ src/viewer.js | 3 ++- src/viewport.js | 33 ++++++++++++++------------------- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/navigator.js b/src/navigator.js index 8cfa3e13..6910ae0c 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -215,6 +215,16 @@ $.Navigator = function( options ){ unneededElement.parentNode.removeChild(unneededElement); } + if (options.navigatorRotate) + { + var _this = this; + options.viewer.addHandler("rotate", function (args) { + _setTransformRotate(_this.viewer.navigator.displayRegionContainer, args.degrees); + _setTransformRotate(_this.viewer.navigator.displayRegion, -args.degrees); + _this.viewport.setRotation(args.degrees); + }); + + } }; $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{ @@ -396,5 +406,18 @@ function onCanvasScroll( event ) { return false; } +/** + * @function + * @private + * @param {Object} element + * @param {Number} degrees + */ +function _setTransformRotate (element, degrees) { + element.style.webkitTransform = "rotate(" + degrees + "deg)"; + element.style.mozTransform = "rotate(" + degrees + "deg)"; + element.style.msTransform = "rotate(" + degrees + "deg)"; + element.style.oTransform = "rotate(" + degrees + "deg)"; + element.style.transform = "rotate(" + degrees + "deg)"; +} }( OpenSeadragon )); diff --git a/src/viewer.js b/src/viewer.js index b710ac59..5435b3a0 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2025,7 +2025,8 @@ function openTileSource( viewer, source ) { tileSources: source, tileHost: _this.tileHost, prefixUrl: _this.prefixUrl, - viewer: _this + viewer: _this, + navigatorRotate: _this.navigatorRotate }); } } diff --git a/src/viewport.js b/src/viewport.js index 2672983d..ccc50a8a 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -712,20 +712,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return this; }, - /** - * @function - * @private - * @param {Object} element - * @param {Number} degrees - */ - _setTransformRotate: function (element, degrees) { - element.style.webkitTransform = "rotate(" + degrees + "deg)"; - element.style.mozTransform = "rotate(" + degrees + "deg)"; - element.style.msTransform = "rotate(" + degrees + "deg)"; - element.style.oTransform = "rotate(" + degrees + "deg)"; - element.style.transform = "rotate(" + degrees + "deg)"; - }, - /** * Currently only 90 degree rotation is supported and it only works * with the canvas. Additionally, the navigator does not rotate yet, @@ -743,14 +729,23 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ if( degrees % 90 !== 0 ) { throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); } - if (this.viewer.navigator !== null && this.navigatorRotate) { - this._setTransformRotate(this.viewer.navigator.displayRegionContainer, degrees); - this._setTransformRotate(this.viewer.navigator.displayRegion, -degrees); - this.viewer.navigator.viewport.setRotation(degrees); - } this.degrees = degrees; this.viewer.forceRedraw(); + /** + * Raised when rotation has been changed. + * + * @event update-viewport + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {Number} degrees - The number of degrees the rotation was set to. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + if (this.viewer.navigator !== null) + { + this.viewer.raiseEvent('rotate', {"degrees": degrees}); + } return this; }, From 01303787ce3174f78f954e581c25178ef6ca0017 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Fri, 15 Aug 2014 09:46:27 +0100 Subject: [PATCH 3/3] Cleanup. --- src/navigator.js | 6 +++--- src/viewport.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/navigator.js b/src/navigator.js index 6910ae0c..d07a2bba 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -50,6 +50,7 @@ $.Navigator = function( options ){ var viewer = options.viewer, + _this = this, viewerSize, navigatorSize, unneededElement; @@ -217,10 +218,9 @@ $.Navigator = function( options ){ if (options.navigatorRotate) { - var _this = this; options.viewer.addHandler("rotate", function (args) { - _setTransformRotate(_this.viewer.navigator.displayRegionContainer, args.degrees); - _setTransformRotate(_this.viewer.navigator.displayRegion, -args.degrees); + _setTransformRotate(_this.displayRegionContainer, args.degrees); + _setTransformRotate(_this.displayRegion, -args.degrees); _this.viewport.setRotation(args.degrees); }); diff --git a/src/viewport.js b/src/viewport.js index ccc50a8a..e1231500 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -742,7 +742,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ * @property {Number} degrees - The number of degrees the rotation was set to. * @property {?Object} userData - Arbitrary subscriber-defined object. */ - if (this.viewer.navigator !== null) + if (this.viewer !== null) { this.viewer.raiseEvent('rotate', {"degrees": degrees}); }