From 792165fdf997b570700b38f71ccfcdd5a4e2b638 Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 5 Feb 2013 21:26:40 -0500 Subject: [PATCH] accidently left alwaysBlend global defaul set to true during development. Looking forward to our new org based repo where I'll be constrained more than my current wild-west repo, sorry. corrections also to pan constrainment details which came to the forefront while working on collections zoom and panconstraints. Added new ui feature page to demo basics. --- build.properties | 2 +- build.xml | 1 + openseadragon.js | 199 +++++++++++++++++++++++++------------------ src/openseadragon.js | 46 +++++----- src/viewer.js | 27 ++---- src/viewport.js | 124 +++++++++++++++++---------- www/base.html | 3 + 7 files changed, 232 insertions(+), 170 deletions(-) diff --git a/build.properties b/build.properties index 2ce678e8..7c375c5b 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 97 +BUILD_ID: 98 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/build.xml b/build.xml index e3cc316d..0a308132 100644 --- a/build.xml +++ b/build.xml @@ -72,6 +72,7 @@ + diff --git a/openseadragon.js b/openseadragon.js index 929c4217..9e7df3df 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,7 +1,7 @@ /*globals OpenSeadragon */ /** - * @version OpenSeadragon 0.9.97 + * @version OpenSeadragon 0.9.98 * * @fileOverview *

@@ -468,34 +468,42 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ xmlPath: null, tileSources: null, tileHost: null, - - //INTERFACE FEATURES - animationTime: 1.5, - blendTime: 0.5, - alwaysBlend: true, - autoHideControls: true, - immediateRender: false, - wrapHorizontal: false, - wrapVertical: false, + + //PAN AND ZOOM SETTINGS AND CONSTRAINTS panHorizontal: true, panVertical: true, - + wrapHorizontal: false, + wrapVertical: false, visibilityRatio: 0.5, + minPixelRatio: 0.5, + minZoomImageRatio: 0.8, + maxZoomPixelRatio: 2, + defaultZoomLevel: 0, + minZoomLevel: null, + maxZoomLevel: null, + + //UI RESPONSIVENESS AND FEEL springStiffness: 5.0, clickTimeThreshold: 300, clickDistThreshold: 5, zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, + animationTime: 1.5, + blendTime: 0.5, + alwaysBlend: false, + autoHideControls: true, + immediateRender: false, - showNavigationControl: true, - showSequenceControl: true, - controlsFadeDelay: 2000, - controlsFadeLength: 1500, - mouseNavEnabled: true, - preserveViewport: false, - defaultZoomLevel: 0, + //DEFAULT CONTROL SETTINGS + showSequenceControl: true, //SEQUENCE + preserveViewport: false, //SEQUENCE + showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE + controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE + controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE + mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY + //VIEWPORT NAVIGATOR SETTINGS showNavigator: true, //promoted to default in 0.9.64 navigatorElement: null, navigatorHeight: null, @@ -503,6 +511,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorPosition: null, navigatorSizeRatio: 0.2, + //REFERENCE STRIP SETTINGS showReferenceStrip: false, referenceStripScroll: 'horizontal', referenceStripElement: null, @@ -521,11 +530,8 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ onPageChange: null, //PERFORMANCE SETTINGS - minPixelRatio: 0.5, imageLoaderLimit: 0, maxImageCacheCount: 200, - minZoomImageRatio: 0.8, - maxZoomPixelRatio: 2, timeout: 5000, //INTERFACE RESOURCE SETTINGS @@ -3688,7 +3694,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, animationTime: this.animationTime, showNavigator: false, minZoomImageRatio: 1, - maxZoomPixelRatio: 1 + maxZoomPixelRatio: 1//, + //TODO: figure out how to support these in a way that makes sense + //minZoomLevel: this.minZoomLevel, + //maxZoomLevel: this.maxZoomLevel }); }else{ if( source ){ @@ -3703,7 +3712,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, maxZoomPixelRatio: this.maxZoomPixelRatio, visibilityRatio: this.visibilityRatio, wrapHorizontal: this.wrapHorizontal, - wrapVertical: this.wrapVertical + wrapVertical: this.wrapVertical, + defaultZoomLevel: this.defaultZoomLevel, + minZoomLevel: this.minZoomLevel, + maxZoomLevel: this.maxZoomLevel }); } @@ -3711,22 +3723,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, this.viewport.resetContentSize( this.source.dimensions ); - } else if( this.defaultZoomLevel || this.collectionMode ){ - - if( this.collectionMode ){ - /*this.viewport.zoomTo( - ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, - this.viewport.getCenter(), - true - );*/ - }else{ - this.viewport.zoomTo( - this.defaultZoomLevel, - this.viewport.getCenter(), - true - ); - } - } + } this.drawer = new $.Drawer({ source: this.source, @@ -9133,7 +9130,10 @@ $.Viewport = function( options ) { maxZoomPixelRatio: $.DEFAULT_SETTINGS.maxZoomPixelRatio, visibilityRatio: $.DEFAULT_SETTINGS.visibilityRatio, wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, - wrapVertical: $.DEFAULT_SETTINGS.wrapVertical + wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, + defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel, + minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, + maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel }, options ); @@ -9155,7 +9155,6 @@ $.Viewport = function( options ) { this.resetContentSize( this.contentSize ); this.goHome( true ); - //this.fitHorizontally( true ); this.update(); }; @@ -9176,13 +9175,40 @@ $.Viewport.prototype = { * @function */ getHomeZoom: function() { - var aspectFactor = this.contentAspectX / this.getAspectRatio(); - return ( aspectFactor >= 1 ) ? - 1 : - aspectFactor; + if( this.defaultZoomLevel ){ + return this.defaultZoomLevel; + } else { + return ( aspectFactor >= 1 ) ? + 1 : + aspectFactor; + } + }, + + /** + * @function + */ + getHomeBounds: function() { + var center = this.homeBounds.getCenter( ), + width = 1.0 / this.getHomeZoom( ), + height = width / this.getAspectRatio(); + + return new $.Rect( + center.x - ( width / 2.0 ), + center.y - ( height / 2.0 ), + width, + height + ); + }, + + /** + * @function + * @param {Boolean} immediately + */ + goHome: function( immediately ) { + return this.fitBounds( this.getHomeBounds(), immediately ); }, /** @@ -9190,7 +9216,9 @@ $.Viewport.prototype = { */ getMinZoom: function() { var homeZoom = this.getHomeZoom(), - zoom = this.minZoomImageRatio * homeZoom; + zoom = this.minZoomLevel ? + this.minZoomLevel : + this.minZoomImageRatio * homeZoom; return Math.min( zoom, homeZoom ); }, @@ -9199,10 +9227,10 @@ $.Viewport.prototype = { * @function */ getMaxZoom: function() { - var zoom = - this.contentSize.x * - this.maxZoomPixelRatio / - this.containerSize.x; + var zoom = this.maxZoomLevel ? + this.maxZoomLevel : + ( this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x ); + return Math.max( zoom, this.getHomeZoom() ); }, @@ -9300,7 +9328,6 @@ $.Viewport.prototype = { } }, - /** * @function */ @@ -9317,8 +9344,10 @@ $.Viewport.prototype = { right, top, bottom, + center, dx = 0, - dy = 0; + dy = 0, + dx1 = 0, dx2 = 0, dy1 = 0, dy2 = 0; if ( actualZoom != constrainedZoom ) { this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); @@ -9336,23 +9365,39 @@ $.Viewport.prototype = { if ( this.wrapHorizontal ) { //do nothing - } else if ( left < horizontalThreshold ) { - dx = horizontalThreshold - left; - } else if ( right < horizontalThreshold ) { - dx = right - horizontalThreshold; + } else { + if ( left < horizontalThreshold ) { + dx = horizontalThreshold - left; + } + if ( right < horizontalThreshold ) { + dx = dx ? + ( dx + right - horizontalThreshold ) / 2 : + ( right - horizontalThreshold ); + } } if ( this.wrapVertical ) { //do nothing - } else if ( top < verticalThreshold ) { - dy = verticalThreshold - top; - } else if ( bottom < verticalThreshold ) { - dy = bottom - verticalThreshold; + } else { + if ( top < verticalThreshold ) { + dy = ( verticalThreshold - top ); + } + if ( bottom < verticalThreshold ) { + dy = dy ? + ( dy + bottom - verticalThreshold ) / 2 : + ( bottom - verticalThreshold ); + } } - if ( dx || dy ) { + if ( dx || dy || immediately ) { bounds.x += dx; bounds.y += dy; + if( bounds.width > 1 ){ + bounds.x = 0.5 - bounds.width/2; + } + if( bounds.height > this.contentAspectY ){ + bounds.y = this.contentAspectY/2 - bounds.height/2; + } this.fitBounds( bounds, immediately ); } return this; @@ -9363,8 +9408,7 @@ $.Viewport.prototype = { * @param {Boolean} immediately */ ensureVisible: function( immediately ) { - this.applyConstraints( immediately ); - return this; + return this.applyConstraints( immediately ); }, /** @@ -9401,8 +9445,7 @@ $.Viewport.prototype = { oldZoom = this.getZoom(); newZoom = 1.0 / newBounds.width; if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) { - this.panTo( center, immediately ); - return this; + return this.panTo( center, immediately ); } referencePoint = oldBounds.getTopLeft().times( @@ -9416,17 +9459,9 @@ $.Viewport.prototype = { this.containerSize.x / newBounds.width ); - this.zoomTo( newZoom, referencePoint, immediately ); - return this; + return this.zoomTo( newZoom, referencePoint, immediately ); }, - /** - * @function - * @param {Boolean} immediately - */ - goHome: function( immediately ) { - return this.fitBounds( this.homeBounds, immediately ); - }, /** * @function @@ -9449,8 +9484,7 @@ $.Viewport.prototype = { this.centerSpringY.update(); } - this.fitBounds( this.fitHeightBounds, immediately ); - return this; + return this.fitBounds( this.fitHeightBounds, immediately ); }, /** @@ -9474,8 +9508,7 @@ $.Viewport.prototype = { this.centerSpringY.update(); } - this.fitBounds( this.fitWidthBounds, immediately ); - return this; + return this.fitBounds( this.fitWidthBounds, immediately ); }, @@ -9489,8 +9522,7 @@ $.Viewport.prototype = { this.centerSpringX.target.value, this.centerSpringY.target.value ); - this.panTo( center.plus( delta ), immediately ); - return this; + return this.panTo( center.plus( delta ), immediately ); }, /** @@ -9514,8 +9546,7 @@ $.Viewport.prototype = { * @function */ zoomBy: function( factor, refPoint, immediately ) { - this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); - return this; + return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); }, /** @@ -9555,9 +9586,7 @@ $.Viewport.prototype = { newBounds.height = newBounds.width / this.getAspectRatio(); } - this.fitBounds( newBounds, true ); - - return this; + return this.fitBounds( newBounds, true ); }, /** diff --git a/src/openseadragon.js b/src/openseadragon.js index 79822277..bb938dd9 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -468,34 +468,42 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ xmlPath: null, tileSources: null, tileHost: null, - - //INTERFACE FEATURES - animationTime: 1.5, - blendTime: 0.5, - alwaysBlend: true, - autoHideControls: true, - immediateRender: false, - wrapHorizontal: false, - wrapVertical: false, + + //PAN AND ZOOM SETTINGS AND CONSTRAINTS panHorizontal: true, panVertical: true, - + wrapHorizontal: false, + wrapVertical: false, visibilityRatio: 0.5, + minPixelRatio: 0.5, + minZoomImageRatio: 0.8, + maxZoomPixelRatio: 2, + defaultZoomLevel: 0, + minZoomLevel: null, + maxZoomLevel: null, + + //UI RESPONSIVENESS AND FEEL springStiffness: 5.0, clickTimeThreshold: 300, clickDistThreshold: 5, zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, + animationTime: 1.5, + blendTime: 0.5, + alwaysBlend: false, + autoHideControls: true, + immediateRender: false, - showNavigationControl: true, - showSequenceControl: true, - controlsFadeDelay: 2000, - controlsFadeLength: 1500, - mouseNavEnabled: true, - preserveViewport: false, - defaultZoomLevel: 0, + //DEFAULT CONTROL SETTINGS + showSequenceControl: true, //SEQUENCE + preserveViewport: false, //SEQUENCE + showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE + controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE + controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE + mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY + //VIEWPORT NAVIGATOR SETTINGS showNavigator: true, //promoted to default in 0.9.64 navigatorElement: null, navigatorHeight: null, @@ -503,6 +511,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorPosition: null, navigatorSizeRatio: 0.2, + //REFERENCE STRIP SETTINGS showReferenceStrip: false, referenceStripScroll: 'horizontal', referenceStripElement: null, @@ -521,11 +530,8 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ onPageChange: null, //PERFORMANCE SETTINGS - minPixelRatio: 0.5, imageLoaderLimit: 0, maxImageCacheCount: 200, - minZoomImageRatio: 0.8, - maxZoomPixelRatio: 2, timeout: 5000, //INTERFACE RESOURCE SETTINGS diff --git a/src/viewer.js b/src/viewer.js index eaa92033..28d5a05f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -375,7 +375,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, animationTime: this.animationTime, showNavigator: false, minZoomImageRatio: 1, - maxZoomPixelRatio: 1 + maxZoomPixelRatio: 1//, + //TODO: figure out how to support these in a way that makes sense + //minZoomLevel: this.minZoomLevel, + //maxZoomLevel: this.maxZoomLevel }); }else{ if( source ){ @@ -390,7 +393,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, maxZoomPixelRatio: this.maxZoomPixelRatio, visibilityRatio: this.visibilityRatio, wrapHorizontal: this.wrapHorizontal, - wrapVertical: this.wrapVertical + wrapVertical: this.wrapVertical, + defaultZoomLevel: this.defaultZoomLevel, + minZoomLevel: this.minZoomLevel, + maxZoomLevel: this.maxZoomLevel }); } @@ -398,22 +404,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, this.viewport.resetContentSize( this.source.dimensions ); - } else if( this.defaultZoomLevel || this.collectionMode ){ - - if( this.collectionMode ){ - /*this.viewport.zoomTo( - ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, - this.viewport.getCenter(), - true - );*/ - }else{ - this.viewport.zoomTo( - this.defaultZoomLevel, - this.viewport.getCenter(), - true - ); - } - } + } this.drawer = new $.Drawer({ source: this.source, diff --git a/src/viewport.js b/src/viewport.js index de2bef45..8470637c 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -43,7 +43,10 @@ $.Viewport = function( options ) { maxZoomPixelRatio: $.DEFAULT_SETTINGS.maxZoomPixelRatio, visibilityRatio: $.DEFAULT_SETTINGS.visibilityRatio, wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, - wrapVertical: $.DEFAULT_SETTINGS.wrapVertical + wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, + defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel, + minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, + maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel }, options ); @@ -65,7 +68,6 @@ $.Viewport = function( options ) { this.resetContentSize( this.contentSize ); this.goHome( true ); - //this.fitHorizontally( true ); this.update(); }; @@ -86,13 +88,40 @@ $.Viewport.prototype = { * @function */ getHomeZoom: function() { - var aspectFactor = this.contentAspectX / this.getAspectRatio(); - return ( aspectFactor >= 1 ) ? - 1 : - aspectFactor; + if( this.defaultZoomLevel ){ + return this.defaultZoomLevel; + } else { + return ( aspectFactor >= 1 ) ? + 1 : + aspectFactor; + } + }, + + /** + * @function + */ + getHomeBounds: function() { + var center = this.homeBounds.getCenter( ), + width = 1.0 / this.getHomeZoom( ), + height = width / this.getAspectRatio(); + + return new $.Rect( + center.x - ( width / 2.0 ), + center.y - ( height / 2.0 ), + width, + height + ); + }, + + /** + * @function + * @param {Boolean} immediately + */ + goHome: function( immediately ) { + return this.fitBounds( this.getHomeBounds(), immediately ); }, /** @@ -100,7 +129,9 @@ $.Viewport.prototype = { */ getMinZoom: function() { var homeZoom = this.getHomeZoom(), - zoom = this.minZoomImageRatio * homeZoom; + zoom = this.minZoomLevel ? + this.minZoomLevel : + this.minZoomImageRatio * homeZoom; return Math.min( zoom, homeZoom ); }, @@ -109,10 +140,10 @@ $.Viewport.prototype = { * @function */ getMaxZoom: function() { - var zoom = - this.contentSize.x * - this.maxZoomPixelRatio / - this.containerSize.x; + var zoom = this.maxZoomLevel ? + this.maxZoomLevel : + ( this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x ); + return Math.max( zoom, this.getHomeZoom() ); }, @@ -210,7 +241,6 @@ $.Viewport.prototype = { } }, - /** * @function */ @@ -227,8 +257,10 @@ $.Viewport.prototype = { right, top, bottom, + center, dx = 0, - dy = 0; + dy = 0, + dx1 = 0, dx2 = 0, dy1 = 0, dy2 = 0; if ( actualZoom != constrainedZoom ) { this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); @@ -246,23 +278,39 @@ $.Viewport.prototype = { if ( this.wrapHorizontal ) { //do nothing - } else if ( left < horizontalThreshold ) { - dx = horizontalThreshold - left; - } else if ( right < horizontalThreshold ) { - dx = right - horizontalThreshold; + } else { + if ( left < horizontalThreshold ) { + dx = horizontalThreshold - left; + } + if ( right < horizontalThreshold ) { + dx = dx ? + ( dx + right - horizontalThreshold ) / 2 : + ( right - horizontalThreshold ); + } } if ( this.wrapVertical ) { //do nothing - } else if ( top < verticalThreshold ) { - dy = verticalThreshold - top; - } else if ( bottom < verticalThreshold ) { - dy = bottom - verticalThreshold; + } else { + if ( top < verticalThreshold ) { + dy = ( verticalThreshold - top ); + } + if ( bottom < verticalThreshold ) { + dy = dy ? + ( dy + bottom - verticalThreshold ) / 2 : + ( bottom - verticalThreshold ); + } } - if ( dx || dy ) { + if ( dx || dy || immediately ) { bounds.x += dx; bounds.y += dy; + if( bounds.width > 1 ){ + bounds.x = 0.5 - bounds.width/2; + } + if( bounds.height > this.contentAspectY ){ + bounds.y = this.contentAspectY/2 - bounds.height/2; + } this.fitBounds( bounds, immediately ); } return this; @@ -273,8 +321,7 @@ $.Viewport.prototype = { * @param {Boolean} immediately */ ensureVisible: function( immediately ) { - this.applyConstraints( immediately ); - return this; + return this.applyConstraints( immediately ); }, /** @@ -311,8 +358,7 @@ $.Viewport.prototype = { oldZoom = this.getZoom(); newZoom = 1.0 / newBounds.width; if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) { - this.panTo( center, immediately ); - return this; + return this.panTo( center, immediately ); } referencePoint = oldBounds.getTopLeft().times( @@ -326,17 +372,9 @@ $.Viewport.prototype = { this.containerSize.x / newBounds.width ); - this.zoomTo( newZoom, referencePoint, immediately ); - return this; + return this.zoomTo( newZoom, referencePoint, immediately ); }, - /** - * @function - * @param {Boolean} immediately - */ - goHome: function( immediately ) { - return this.fitBounds( this.homeBounds, immediately ); - }, /** * @function @@ -359,8 +397,7 @@ $.Viewport.prototype = { this.centerSpringY.update(); } - this.fitBounds( this.fitHeightBounds, immediately ); - return this; + return this.fitBounds( this.fitHeightBounds, immediately ); }, /** @@ -384,8 +421,7 @@ $.Viewport.prototype = { this.centerSpringY.update(); } - this.fitBounds( this.fitWidthBounds, immediately ); - return this; + return this.fitBounds( this.fitWidthBounds, immediately ); }, @@ -399,8 +435,7 @@ $.Viewport.prototype = { this.centerSpringX.target.value, this.centerSpringY.target.value ); - this.panTo( center.plus( delta ), immediately ); - return this; + return this.panTo( center.plus( delta ), immediately ); }, /** @@ -424,8 +459,7 @@ $.Viewport.prototype = { * @function */ zoomBy: function( factor, refPoint, immediately ) { - this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); - return this; + return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); }, /** @@ -465,9 +499,7 @@ $.Viewport.prototype = { newBounds.height = newBounds.width / this.getAspectRatio(); } - this.fitBounds( newBounds, true ); - - return this; + return this.fitBounds( newBounds, true ); }, /** diff --git a/www/base.html b/www/base.html index d74e4260..9c61d96b 100644 --- a/www/base.html +++ b/www/base.html @@ -88,6 +88,9 @@ controls to entirely custom interfaces.