mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-02-21 09:13:14 +03:00
Added navigatorAutoResize option
Improved resizable navigator support.
This commit is contained in:
parent
a189ba97d7
commit
1e9ea154f2
@ -105,7 +105,8 @@ $.Navigator = function( options ){
|
|||||||
showSequenceControl: false,
|
showSequenceControl: false,
|
||||||
immediateRender: true,
|
immediateRender: true,
|
||||||
blendTime: 0,
|
blendTime: 0,
|
||||||
animationTime: 0
|
animationTime: 0,
|
||||||
|
autoResize: options.autoResize
|
||||||
});
|
});
|
||||||
|
|
||||||
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
|
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
|
||||||
@ -193,6 +194,8 @@ $.Navigator = function( options ){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.oldContainerSize = new $.Point( 0, 0 );
|
||||||
|
|
||||||
$.Viewer.apply( this, [ options ] );
|
$.Viewer.apply( this, [ options ] );
|
||||||
|
|
||||||
this.element.getElementsByTagName('form')[0].appendChild( this.displayRegion );
|
this.element.getElementsByTagName('form')[0].appendChild( this.displayRegion );
|
||||||
@ -206,8 +209,42 @@ $.Navigator = function( options ){
|
|||||||
$.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
|
$.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Used to notify the navigator when its size has changed.
|
||||||
|
* Especially useful when {@link OpenSeadragon.Options}.navigatorAutoResize is set to false and the navigator is resizable.
|
||||||
* @function
|
* @function
|
||||||
*/
|
*/
|
||||||
|
updateSize: function () {
|
||||||
|
if ( this.viewport ) {
|
||||||
|
var containerSize = new $.Point(
|
||||||
|
(this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
|
||||||
|
(this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
|
||||||
|
);
|
||||||
|
if ( !containerSize.equals( this.oldContainerSize ) ) {
|
||||||
|
var oldBounds = this.viewport.getBounds();
|
||||||
|
var oldCenter = this.viewport.getCenter();
|
||||||
|
this.viewport.resize( containerSize, true );
|
||||||
|
var imageHeight = 1 / this.source.aspectRatio;
|
||||||
|
var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
|
||||||
|
var newHeight = oldBounds.height <= imageHeight ?
|
||||||
|
oldBounds.height : imageHeight;
|
||||||
|
var newBounds = new $.Rect(
|
||||||
|
oldCenter.x - ( newWidth / 2.0 ),
|
||||||
|
oldCenter.y - ( newHeight / 2.0 ),
|
||||||
|
newWidth,
|
||||||
|
newHeight
|
||||||
|
);
|
||||||
|
this.viewport.fitBounds( newBounds, true );
|
||||||
|
this.oldContainerSize = containerSize;
|
||||||
|
this.drawer.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
|
||||||
|
* @function
|
||||||
|
* @param {OpenSeadragon.Viewport} The viewport this navigator is tracking.
|
||||||
|
*/
|
||||||
update: function( viewport ) {
|
update: function( viewport ) {
|
||||||
|
|
||||||
var viewerSize,
|
var viewerSize,
|
||||||
@ -221,13 +258,14 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
|
|||||||
this.element.style.height = ( viewerSize.y * this.sizeRatio ) + 'px';
|
this.element.style.height = ( viewerSize.y * this.sizeRatio ) + 'px';
|
||||||
this.element.style.width = ( viewerSize.x * this.sizeRatio ) + 'px';
|
this.element.style.width = ( viewerSize.x * this.sizeRatio ) + 'px';
|
||||||
this.oldViewerSize = viewerSize;
|
this.oldViewerSize = viewerSize;
|
||||||
|
this.updateSize();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if( viewport && this.viewport ) {
|
if( viewport && this.viewport ) {
|
||||||
bounds = viewport.getBounds( true );
|
bounds = viewport.getBounds( true );
|
||||||
topleft = this.viewport.pixelFromPoint( bounds.getTopLeft());
|
topleft = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
|
||||||
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.totalBorderWidths);
|
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false ).minus( this.totalBorderWidths );
|
||||||
|
|
||||||
//update style for navigator-box
|
//update style for navigator-box
|
||||||
(function(style) {
|
(function(style) {
|
||||||
@ -247,6 +285,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
|
|||||||
},
|
},
|
||||||
|
|
||||||
open: function( source ) {
|
open: function( source ) {
|
||||||
|
this.updateSize();
|
||||||
var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
|
var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
|
||||||
if( source.tileSize > containerSize.x ||
|
if( source.tileSize > containerSize.x ||
|
||||||
source.tileSize > containerSize.y ){
|
source.tileSize > containerSize.y ){
|
||||||
|
@ -300,6 +300,10 @@
|
|||||||
* Specifies the size of the navigator minimap (see navigatorPosition).
|
* Specifies the size of the navigator minimap (see navigatorPosition).
|
||||||
* If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
|
* If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
|
||||||
*
|
*
|
||||||
|
* @property {Boolean} [navigatorAutoResize=true]
|
||||||
|
* 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 {Number} [controlsFadeDelay=2000]
|
* @property {Number} [controlsFadeDelay=2000]
|
||||||
* The number of milliseconds to wait once the user has stopped interacting
|
* The number of milliseconds to wait once the user has stopped interacting
|
||||||
* with the interface before begining to fade the controls. Assumes
|
* with the interface before begining to fade the controls. Assumes
|
||||||
@ -736,6 +740,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
|
|||||||
navigatorLeft: null,
|
navigatorLeft: null,
|
||||||
navigatorHeight: null,
|
navigatorHeight: null,
|
||||||
navigatorWidth: null,
|
navigatorWidth: null,
|
||||||
|
navigatorAutoResize: true,
|
||||||
|
|
||||||
// INITIAL ROTATION
|
// INITIAL ROTATION
|
||||||
degrees: 0,
|
degrees: 0,
|
||||||
|
@ -1484,6 +1484,7 @@ function openTileSource( viewer, source ) {
|
|||||||
left: _this.navigatorLeft,
|
left: _this.navigatorLeft,
|
||||||
width: _this.navigatorWidth,
|
width: _this.navigatorWidth,
|
||||||
height: _this.navigatorHeight,
|
height: _this.navigatorHeight,
|
||||||
|
autoResize: _this.navigatorAutoResize,
|
||||||
tileSources: source,
|
tileSources: source,
|
||||||
tileHost: _this.tileHost,
|
tileHost: _this.tileHost,
|
||||||
prefixUrl: _this.prefixUrl,
|
prefixUrl: _this.prefixUrl,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user