mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 06:36:11 +03:00
Code Issues Projects Releases Wiki Activity

Fixes #192.

Browse Source 
Navigator can now rotate together with the viewer.
This commit is contained in:
Dominik Picheta 2014-08-12 15:27:16 +01:00
parent e1dde133e1
commit afd8b48d6b
4 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/navigator.js
View File

@ -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();
}
}

4
src/openseadragon.js
View File

@ -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,

3
src/viewer.js
View File

@ -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
});
}

19
src/viewport.js
View File

@ -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();