mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-31 23:21:42 +03:00
Code Issues Projects Releases Wiki Activity

A little cleanup of the border issue

Browse Source
This commit is contained in:
houseofyin 2013-03-23 23:06:34 -04:00
parent 450760d3b7
commit 8db1a15282
2 changed files with 8 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/navigator.js
View File

@ -57,11 +57,15 @@ $.Navigator = function( options ){
this.viewerDimensionsInPoints = viewer.viewport.deltaPointsFromPixels($.getElementSize( viewer.element)); this.viewerDimensionsInPoints = viewer.viewport.deltaPointsFromPixels($.getElementSize( viewer.element));
this.borderWidth = 2; this.borderWidth = 2;
this.borderWidths = new $.Point(this.borderWidth, this.borderWidth); //At some browser magnification levels the display regions lines up correctly, but at some there appears to
//be a one pixel gap.
this.fudge = new $.Point(1, 1);
this.totalBorderWidths = new $.Point(this.borderWidth*2, this.borderWidth*2).minus(this.fudge);
(function( style, borderWidth ){ (function( style, borderWidth ){
style.margin = '0px'; style.margin = '0px';
style.border = borderWidth + 'px solid #555'; style.border = borderWidth + 'px solid #FF0';
style.padding = '0px'; style.padding = '0px';
style.background = '#000'; style.background = '#000';
style.opacity = 0.8; style.opacity = 0.8;
@ -114,80 +118,9 @@ $.Navigator = function( options ){
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
// 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 );
// (function( style ){
// style.border = '2px solid #437AB2';
// //style.outline = '2px auto #437AB2';
// }( this.element.style ));
//
// },
// blurHandler: function(){
//// _this.viewer.setControlsEnabled( false );
// (function( style ){
// style.border = '2px solid #900';
// //style.outline = '2px auto #900';
// }( this.element.style ));
// },
// keyHandler: function(tracker, keyCode, shiftKey){
// //console.log( keyCode );
// switch( keyCode ){
// case 61://=|+
// _this.viewer.viewport.zoomBy(1.1);
// _this.viewer.viewport.applyConstraints();
// return false;
// case 45://-|_
// _this.viewer.viewport.zoomBy(0.9);
// _this.viewer.viewport.applyConstraints();
// return false;
// case 48://0|)
// _this.viewer.viewport.goHome();
// _this.viewer.viewport.applyConstraints();
// return false;
// case 119://w
// case 87://W
// case 38://up arrow
// if (shiftKey)
// _this.viewer.viewport.zoomBy(1.1);
// else
// _this.viewer.viewport.panBy(new $.Point(0, -0.05));
// _this.viewer.viewport.applyConstraints();
// return false;
// case 115://s
// case 83://S
// case 40://down arrow
// if (shiftKey)
// _this.viewer.viewport.zoomBy(0.9);
// else
// _this.viewer.viewport.panBy(new $.Point(0, 0.05));
// _this.viewer.viewport.applyConstraints();
// return false;
// case 97://a
// case 37://left arrow
// _this.viewer.viewport.panBy(new $.Point(-0.05, 0));
// _this.viewer.viewport.applyConstraints();
// return false;
// case 100://d
// case 39://right arrow
// _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({
@ -234,7 +167,7 @@ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
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());
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.borderWidths).minus(this.borderWidths); bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.totalBorderWidths);
//update style for navigator-box //update style for navigator-box
(function(style, borderWidth){ (function(style, borderWidth){

3
test/navigator.js
View File

@ -24,11 +24,10 @@ QUnit.config.autostart = false;
var displayRegion = $(theDisplayRegionSelector); var displayRegion = $(theDisplayRegionSelector);
var mainViewerBounds = theViewer.viewport.getBounds(); var mainViewerBounds = theViewer.viewport.getBounds();
var borderSpaceInPixels = new OpenSeadragon.Point(theViewer.navigator.borderWidth * 2, theViewer.navigator.borderWidth * 2);
var displayTopLeftLocationInPixels = new OpenSeadragon.Point(displayRegion.position().left, displayRegion.position().top); var displayTopLeftLocationInPixels = new OpenSeadragon.Point(displayRegion.position().left, displayRegion.position().top);
var displayRegionDimensionsInPixels = new OpenSeadragon.Point((displayRegion.width()),(displayRegion.height())) var displayRegionDimensionsInPixels = new OpenSeadragon.Point((displayRegion.width()),(displayRegion.height()))
.plus(borderSpaceInPixels); .plus(theViewer.navigator.totalBorderWidths);
var displayBottomRightLocationInPixels = displayTopLeftLocationInPixels.plus(displayRegionDimensionsInPixels); var displayBottomRightLocationInPixels = displayTopLeftLocationInPixels.plus(displayRegionDimensionsInPixels);
var displayLocationInPoints = theViewer.navigator.viewport.pointFromPixel(displayTopLeftLocationInPixels); var displayLocationInPoints = theViewer.navigator.viewport.pointFromPixel(displayTopLeftLocationInPixels);