mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 16:46:08 +03:00
Code Issues Projects Releases Wiki Activity

Another checkpoint

Browse Source
This commit is contained in:
houseofyin 2013-03-15 22:29:27 -04:00
parent 3b2bde2940
commit 3e2b337a52
1 changed files with 123 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/navigator.js
View File

@ -52,29 +52,31 @@ $.Navigator = function( options ){
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio; options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
(function( style ){ this.viewerDimensionsInPoints = viewer.viewport.deltaPointsFromPixels($.getElementSize( viewer.element));
style.marginTop = '0px'; this.borderWidth = 2;
style.marginRight = '0px';
style.marginBottom = '0px'; (function( style, borderWidth ){
style.marginLeft = '0px'; style.margin = '0px';
style.border = '2px solid #555'; style.border = borderWidth + 'px solid #555';
style.padding = '0px';
style.background = '#000'; style.background = '#000';
style.opacity = 0.8; style.opacity = 0.8;
style.overflow = 'hidden'; style.overflow = 'hidden';
}( this.element.style )); }( this.element.style, this.borderWidth));
this.displayRegion = $.makeNeutralElement( "textarea" ); this.displayRegion = $.makeNeutralElement( "div" );
this.displayRegion.id = this.element.id + '-displayregion'; this.displayRegion.id = this.element.id + '-displayregion';
this.displayRegion.className = 'displayregion'; this.displayRegion.className = 'displayregion';
(function( style ){ (function( style, borderWidth ){
style.position = 'relative'; style.position = 'relative';
style.top = '0px'; style.top = '0px';
style.left = '0px'; style.left = '0px';
style.fontSize = '0px'; style.fontSize = '0px';
style.overflow = 'hidden'; style.overflow = 'hidden';
style.border = '2px solid #900'; style.border = borderWidth + 'px solid #900';
style.margin = '0px';
style.padding = '0px';
//TODO: IE doesnt like this property being set //TODO: IE doesnt like this property being set
//try{ style.outline = '2px auto #909'; }catch(e){/*ignore*/} //try{ style.outline = '2px auto #909'; }catch(e){/*ignore*/}
@ -89,10 +91,13 @@ $.Navigator = function( options ){
style.styleFloat = 'left'; //IE style.styleFloat = 'left'; //IE
style.zIndex = 999999999; style.zIndex = 999999999;
style.cursor = 'default'; style.cursor = 'default';
}( this.displayRegion.style )); }( this.displayRegion.style, this.borderWidth ));
this.element.innerTracker = new $.MouseTracker({ this.element.innerTracker = new $.MouseTracker({
element: this.element, element: this.element,
clickHandler: $.delegate( this, onCanvasClick ),
releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: function(){ scrollHandler: function(){
//dont scroll the page up and down if the user is scrolling //dont scroll the page up and down if the user is scrolling
//in the navigator //in the navigator
@ -104,77 +109,81 @@ $.Navigator = function( options ){
element: this.displayRegion, element: this.displayRegion,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
clickHandler: $.delegate( this, onCanvasClick ),
// clickHandler: $.delegate( this, onCanvasClick ),
dragHandler: $.delegate( this, onCanvasDrag ), dragHandler: $.delegate( this, onCanvasDrag ),
releaseHandler: $.delegate( this, onCanvasRelease ), releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: $.delegate( this, onCanvasScroll ), scrollHandler: $.delegate( this, onCanvasScroll )
focusHandler: function(){
var point = $.getElementPosition( _this.viewer.element );
window.scrollTo( 0, point.y );
_this.viewer.setControlsEnabled( true ); // focusHandler: function(){
(function( style ){ // var point = $.getElementPosition( _this.viewer.element );
style.border = '2px solid #437AB2'; //
//style.outline = '2px auto #437AB2'; // window.scrollTo( 0, point.y );
}( this.element.style )); //
//// _this.viewer.setControlsEnabled( true );
}, // (function( style ){
blurHandler: function(){ // style.border = '2px solid #437AB2';
_this.viewer.setControlsEnabled( false ); // //style.outline = '2px auto #437AB2';
(function( style ){ // }( this.element.style ));
style.border = '2px solid #900'; //
//style.outline = '2px auto #900'; // },
}( this.element.style )); // blurHandler: function(){
}, //// _this.viewer.setControlsEnabled( false );
keyHandler: function(tracker, keyCode, shiftKey){ // (function( style ){
//console.log( keyCode ); // style.border = '2px solid #900';
switch( keyCode ){ // //style.outline = '2px auto #900';
case 61://=|+ // }( this.element.style ));
_this.viewer.viewport.zoomBy(1.1); // },
_this.viewer.viewport.applyConstraints(); // keyHandler: function(tracker, keyCode, shiftKey){
return false; // //console.log( keyCode );
case 45://-|_ // switch( keyCode ){
_this.viewer.viewport.zoomBy(0.9); // case 61://=|+
_this.viewer.viewport.applyConstraints(); // _this.viewer.viewport.zoomBy(1.1);
return false; // _this.viewer.viewport.applyConstraints();
case 48://0|) // return false;
_this.viewer.viewport.goHome(); // case 45://-|_
_this.viewer.viewport.applyConstraints(); // _this.viewer.viewport.zoomBy(0.9);
return false; // _this.viewer.viewport.applyConstraints();
case 119://w // return false;
case 87://W // case 48://0|)
case 38://up arrow // _this.viewer.viewport.goHome();
if (shiftKey) // _this.viewer.viewport.applyConstraints();
_this.viewer.viewport.zoomBy(1.1); // return false;
else // case 119://w
_this.viewer.viewport.panBy(new $.Point(0, -0.05)); // case 87://W
_this.viewer.viewport.applyConstraints(); // case 38://up arrow
return false; // if (shiftKey)
case 115://s // _this.viewer.viewport.zoomBy(1.1);
case 83://S // else
case 40://down arrow // _this.viewer.viewport.panBy(new $.Point(0, -0.05));
if (shiftKey) // _this.viewer.viewport.applyConstraints();
_this.viewer.viewport.zoomBy(0.9); // return false;
else // case 115://s
_this.viewer.viewport.panBy(new $.Point(0, 0.05)); // case 83://S
_this.viewer.viewport.applyConstraints(); // case 40://down arrow
return false; // if (shiftKey)
case 97://a // _this.viewer.viewport.zoomBy(0.9);
case 37://left arrow // else
_this.viewer.viewport.panBy(new $.Point(-0.05, 0)); // _this.viewer.viewport.panBy(new $.Point(0, 0.05));
_this.viewer.viewport.applyConstraints(); // _this.viewer.viewport.applyConstraints();
return false; // return false;
case 100://d // case 97://a
case 39://right arrow // case 37://left arrow
_this.viewer.viewport.panBy(new $.Point(0.05, 0)); // _this.viewer.viewport.panBy(new $.Point(-0.05, 0));
_this.viewer.viewport.applyConstraints(); // _this.viewer.viewport.applyConstraints();
return false; // return false;
default: // case 100://d
//console.log( 'navigator keycode %s', keyCode ); // case 39://right arrow
return true; // _this.viewer.viewport.panBy(new $.Point(0.05, 0));
} // _this.viewer.viewport.applyConstraints();
} // return false;
// default:
// //console.log( 'navigator keycode %s', keyCode );
// return true;
// }
// }
}).setTracking( true ); // default state }).setTracking( true ); // default state
/*this.displayRegion.outerTracker = new $.MouseTracker({ /*this.displayRegion.outerTracker = new $.MouseTracker({
@ -224,34 +233,60 @@ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight() ); bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight() );
//update style for navigator-box //update style for navigator-box
(function(style){ (function(style, borderWidth){
style.top = topleft.y + 'px'; style.top = topleft.y + 'px';
style.left = topleft.x + 'px'; style.left = topleft.x + 'px';
var width = Math.abs( topleft.x - bottomright.x ) - 3; // TODO: What does this magic number mean? var width = Math.abs( topleft.x - bottomright.x ) - (borderWidth);
var height = Math.abs( topleft.y - bottomright.y ) - 3; var height = Math.abs( topleft.y - bottomright.y ) - (borderWidth);
// make sure width and height are non-negative so IE doesn't throw // make sure width and height are non-negative so IE doesn't throw
style.width = Math.max( width, 0 ) + 'px'; style.width = Math.max( width, 0 ) + 'px';
style.height = Math.max( height, 0 ) + 'px'; style.height = Math.max( height, 0 ) + 'px';
}( this.displayRegion.style )); }( this.displayRegion.style, this.borderWidth));
} }
} }
}); });
/** /**
* @private * @private
* @inner * @inner
* @function * @function
*/ */
function onCanvasClick( tracker, position, quick, shift ) { function onCanvasClick( tracker, position, quick, shift ) {
this.displayRegion.focus(); var theNewBounds;
var positionInPoints;
var dimensionsInPoints;
var contentAspectRatio = this.viewer.source.dimensions.x / this.viewer.source.dimensions.y;
if (! this.drag)
{
if ( this.viewer.viewport ) {
positionInPoints = this.viewport.deltaPointsFromPixels(position);
dimensionsInPoints = this.viewer.viewport.getBounds().getSize();
theNewBounds = new $.Rect(
positionInPoints.x,
positionInPoints.y,
dimensionsInPoints.x,
dimensionsInPoints.y
);
if (contentAspectRatio > this.viewer.viewport.getAspectRatio())
{
theNewBounds.y = theNewBounds.y - ((this.viewerDimensionsInPoints.y - (1/contentAspectRatio)) /2 );
}
else {
theNewBounds.x = theNewBounds.x - ((this.viewerDimensionsInPoints.x -1) /2 );
}
this.viewer.viewport.fitBounds(theNewBounds);
}
}
else
{
this.drag = false;
}
} }
/** /**
* @private * @private
@ -260,6 +295,7 @@ function onCanvasClick( tracker, position, quick, shift ) {
*/ */
function onCanvasDrag( tracker, position, delta, shift ) { function onCanvasDrag( tracker, position, delta, shift ) {
if ( this.viewer.viewport ) { if ( this.viewer.viewport ) {
this.drag = true;
if( !this.panHorizontal ){ if( !this.panHorizontal ){
delta.x = 0; delta.x = 0;
} }