From bd4921c2856c14049aae57c2d67bd809af51c62d Mon Sep 17 00:00:00 2001 From: Shaun Whitely Date: Tue, 25 Aug 2015 22:06:53 +1000 Subject: [PATCH 1/6] Added option to avoid image from snapping to home bounds on resize. --- src/openseadragon.js | 6 ++++++ src/viewer.js | 24 ++++++++++++++++++------ test/demo/basic.html | 24 +++++++++++++++++------- 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 6eb8d09a..d2235381 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -255,6 +255,11 @@ * @property {Boolean} [preserveImageSizeOnResize=false] * Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default). * + * @property {Boolean} [allowZoomToConstraintsOnResize=false] + * Set to true to allow the image to remain zoomed out past the home zoom level during resize. + * If false the image will be zoomed in if necessary such that it touches the edge of the viewer. + * This requires autoResize=true (default). + * * @property {Number} [pixelsPerWheelLine=40] * For pixel-resolution scrolling devices, the number of pixels equal to one scroll line. * @@ -995,6 +1000,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true + allowZoomToConstraintsOnResize: false, // requires autoResize=true //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE diff --git a/src/viewer.js b/src/viewer.js index b0ee7757..0ed8b9ed 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2947,11 +2947,18 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter viewport.resize( containerSize, true ); - // We try to remove blanks as much as possible - var worldBounds = viewer.world.getHomeBounds(); - var newWidth = oldBounds.width <= worldBounds.width ? oldBounds.width : worldBounds.width; - var newHeight = oldBounds.height <= worldBounds.height ? - oldBounds.height : worldBounds.height; + var newWidth = oldBounds.width; + var newHeight = oldBounds.height; + + if (!viewer.allowZoomToConstraintsOnResize) { + var worldBounds = viewer.world.getHomeBounds(); + if (oldBounds.width > worldBounds.width) { + newWidth = worldBounds.width; + } + if (oldBounds.height > worldBounds.height) { + newHeight = worldBounds.height; + } + } var newBounds = new $.Rect( oldCenter.x - ( newWidth / 2.0 ), @@ -2959,7 +2966,12 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter newWidth, newHeight ); - viewport.fitBounds( newBounds, true ); + + if (viewer.allowZoomToConstraintsOnResize) { + viewport.fitBoundsWithConstraints( newBounds, true ); + } else { + viewport.fitBounds( newBounds, true ); + } } function drawWorld( viewer ) { diff --git a/test/demo/basic.html b/test/demo/basic.html index 19572b86..9222a237 100644 --- a/test/demo/basic.html +++ b/test/demo/basic.html @@ -5,11 +5,20 @@ @@ -21,11 +30,12 @@ From 4d6e730ab18263c3fea40dbd90a168b7198a240f Mon Sep 17 00:00:00 2001 From: Shaun Whitely Date: Wed, 26 Aug 2015 10:05:06 +1000 Subject: [PATCH 2/6] Revert experimental changes in basic.html --- test/demo/basic.html | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/test/demo/basic.html b/test/demo/basic.html index 9222a237..19572b86 100644 --- a/test/demo/basic.html +++ b/test/demo/basic.html @@ -5,20 +5,11 @@ @@ -30,12 +21,11 @@ From 6d3b582e5898623c4eeb0993967b77150eb20187 Mon Sep 17 00:00:00 2001 From: Shaun Whitely Date: Sat, 29 Aug 2015 16:46:56 +1000 Subject: [PATCH 3/6] Removed allowZoomToConstraintsOnResize and made the new resize behaviour the default --- src/openseadragon.js | 6 ------ src/viewer.js | 30 +++++++----------------------- 2 files changed, 7 insertions(+), 29 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index d2235381..6eb8d09a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -255,11 +255,6 @@ * @property {Boolean} [preserveImageSizeOnResize=false] * Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default). * - * @property {Boolean} [allowZoomToConstraintsOnResize=false] - * Set to true to allow the image to remain zoomed out past the home zoom level during resize. - * If false the image will be zoomed in if necessary such that it touches the edge of the viewer. - * This requires autoResize=true (default). - * * @property {Number} [pixelsPerWheelLine=40] * For pixel-resolution scrolling devices, the number of pixels equal to one scroll line. * @@ -1000,7 +995,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true - allowZoomToConstraintsOnResize: false, // requires autoResize=true //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE diff --git a/src/viewer.js b/src/viewer.js index 0ed8b9ed..1e2a2a9d 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2947,31 +2947,15 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter viewport.resize( containerSize, true ); - var newWidth = oldBounds.width; - var newHeight = oldBounds.height; - - if (!viewer.allowZoomToConstraintsOnResize) { - var worldBounds = viewer.world.getHomeBounds(); - if (oldBounds.width > worldBounds.width) { - newWidth = worldBounds.width; - } - if (oldBounds.height > worldBounds.height) { - newHeight = worldBounds.height; - } - } - var newBounds = new $.Rect( - oldCenter.x - ( newWidth / 2.0 ), - oldCenter.y - ( newHeight / 2.0 ), - newWidth, - newHeight - ); + oldCenter.x - ( oldBounds.width / 2.0 ), + oldCenter.y - ( oldBounds.height / 2.0 ), + oldBounds.width, + oldBounds.height + ); - if (viewer.allowZoomToConstraintsOnResize) { - viewport.fitBoundsWithConstraints( newBounds, true ); - } else { - viewport.fitBounds( newBounds, true ); - } + // let the viewport decide if the bounds are too big or too small + viewport.fitBoundsWithConstraints( newBounds, true ); } function drawWorld( viewer ) { From c8254383394c5e824ebaadabffa849fb5ad3feae Mon Sep 17 00:00:00 2001 From: Shaun Whitely Date: Wed, 2 Sep 2015 15:58:47 +1000 Subject: [PATCH 4/6] Fixed navigator resize - Added navigatorMinZoomImageRatio with default of 1 --- src/openseadragon.js | 11 +++++++++-- src/viewer.js | 3 ++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 6eb8d09a..bef3502e 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -241,7 +241,7 @@ * @property {Number} [minZoomImageRatio=0.9] * The minimum percentage ( expressed as a number between 0 and 1 ) of * the viewport height or width at which the zoom out will be constrained. - * Setting it to 0, for example will allow you to zoom out infinitly. + * Setting it to 0, for example will allow you to zoom out infinitely. * * @property {Number} [maxZoomPixelRatio=1.1] * The maximum ratio to allow a zoom-in to affect the highest level pixel @@ -356,7 +356,7 @@ * @property {Boolean} [showNavigator=false] * Set to true to make the navigator minimap appear. * - * @property {Boolean} [navigatorId=navigator-GENERATED DATE] + * @property {String} [navigatorId=navigator-GENERATED DATE] * The ID of a div to hold the navigator minimap. * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored. * If an ID is not specified, a div element will be generated and placed on top of the main image. @@ -393,6 +393,12 @@ * @property {Boolean} [navigatorRotate=true] * If true, the navigator will be rotated together with the viewer. * + * @property {Number} [navigatorMinZoomImageRatio=1.0] + * The minimum percentage ( expressed as a number between 0 and 1 ) of + * the navigator's image height or width at which the zoom out will be + * constrained during resize. Setting it to 0, for example will allow you + * to zoom out infinitely. Only applies when navigatorId is specified. + * * @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 @@ -1024,6 +1030,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorWidth: null, navigatorAutoResize: true, navigatorRotate: true, + navigatorMinZoomImageRatio: 1.0, // INITIAL ROTATION degrees: 0, diff --git a/src/viewer.js b/src/viewer.js index 1e2a2a9d..95ae1afb 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -411,7 +411,8 @@ $.Viewer = function( options ) { prefixUrl: this.prefixUrl, viewer: this, navigatorRotate: this.navigatorRotate, - crossOriginPolicy: this.crossOriginPolicy + crossOriginPolicy: this.crossOriginPolicy, + minZoomImageRatio: this.navigatorMinZoomImageRatio }); } From 59a6a4337950e5d8897426a1cba417186f723a9d Mon Sep 17 00:00:00 2001 From: Shaun Whitely Date: Thu, 3 Sep 2015 09:13:10 +1000 Subject: [PATCH 5/6] Revert "Fixed navigator resize" - This reverts commit c8254383394c5e824ebaadabffa849fb5ad3feae. - Made navigator always use a minZoomImageRatio of 1 --- src/navigator.js | 4 +++- src/openseadragon.js | 11 ++--------- src/viewer.js | 3 +-- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/navigator.js b/src/navigator.js index 9f3923df..7addc5ea 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -108,7 +108,9 @@ $.Navigator = function( options ){ immediateRender: true, blendTime: 0, animationTime: 0, - autoResize: options.autoResize + autoResize: options.autoResize, + // prevent resizing the navigator from adding unwanted space around the image + minZoomImageRatio: 1.0 }); options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio; diff --git a/src/openseadragon.js b/src/openseadragon.js index bef3502e..6eb8d09a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -241,7 +241,7 @@ * @property {Number} [minZoomImageRatio=0.9] * The minimum percentage ( expressed as a number between 0 and 1 ) of * the viewport height or width at which the zoom out will be constrained. - * Setting it to 0, for example will allow you to zoom out infinitely. + * Setting it to 0, for example will allow you to zoom out infinitly. * * @property {Number} [maxZoomPixelRatio=1.1] * The maximum ratio to allow a zoom-in to affect the highest level pixel @@ -356,7 +356,7 @@ * @property {Boolean} [showNavigator=false] * Set to true to make the navigator minimap appear. * - * @property {String} [navigatorId=navigator-GENERATED DATE] + * @property {Boolean} [navigatorId=navigator-GENERATED DATE] * The ID of a div to hold the navigator minimap. * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored. * If an ID is not specified, a div element will be generated and placed on top of the main image. @@ -393,12 +393,6 @@ * @property {Boolean} [navigatorRotate=true] * If true, the navigator will be rotated together with the viewer. * - * @property {Number} [navigatorMinZoomImageRatio=1.0] - * The minimum percentage ( expressed as a number between 0 and 1 ) of - * the navigator's image height or width at which the zoom out will be - * constrained during resize. Setting it to 0, for example will allow you - * to zoom out infinitely. Only applies when navigatorId is specified. - * * @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 @@ -1030,7 +1024,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorWidth: null, navigatorAutoResize: true, navigatorRotate: true, - navigatorMinZoomImageRatio: 1.0, // INITIAL ROTATION degrees: 0, diff --git a/src/viewer.js b/src/viewer.js index 95ae1afb..1e2a2a9d 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -411,8 +411,7 @@ $.Viewer = function( options ) { prefixUrl: this.prefixUrl, viewer: this, navigatorRotate: this.navigatorRotate, - crossOriginPolicy: this.crossOriginPolicy, - minZoomImageRatio: this.navigatorMinZoomImageRatio + crossOriginPolicy: this.crossOriginPolicy }); } From 9f2a2f361d65f6cf0d14f1ab3ec44f557b22ba90 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 3 Sep 2015 09:24:15 -0700 Subject: [PATCH 6/6] Changelog for #711 --- changelog.txt | 1 + src/openseadragon.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/changelog.txt b/changelog.txt index b0ba97d6..a76881cb 100644 --- a/changelog.txt +++ b/changelog.txt @@ -20,6 +20,7 @@ OPENSEADRAGON CHANGELOG * Now avoiding using eval when JSON.parse is available (#696) * Rotation now works properly on retina display (#708) * Added option in addTiledImage to replace tiledImage at index (#706) +* Changed resize behaviour to prevent "snapping" to world bounds when constraints allow more space (#711) 2.0.0: diff --git a/src/openseadragon.js b/src/openseadragon.js index 6eb8d09a..e457a5c1 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -241,7 +241,7 @@ * @property {Number} [minZoomImageRatio=0.9] * The minimum percentage ( expressed as a number between 0 and 1 ) of * the viewport height or width at which the zoom out will be constrained. - * Setting it to 0, for example will allow you to zoom out infinitly. + * Setting it to 0, for example will allow you to zoom out infinity. * * @property {Number} [maxZoomPixelRatio=1.1] * The maximum ratio to allow a zoom-in to affect the highest level pixel @@ -356,7 +356,7 @@ * @property {Boolean} [showNavigator=false] * Set to true to make the navigator minimap appear. * - * @property {Boolean} [navigatorId=navigator-GENERATED DATE] + * @property {String} [navigatorId=navigator-GENERATED DATE] * The ID of a div to hold the navigator minimap. * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored. * If an ID is not specified, a div element will be generated and placed on top of the main image.