From d5b62aabcd2172f71deb3f3517ff180a4eb29617 Mon Sep 17 00:00:00 2001 From: Jose Date: Sun, 19 Feb 2017 17:36:53 +0100 Subject: [PATCH 1/4] Patch to fix issue #697, also contains improvements when panning under certain constrains --- .eslintrc.json | 8 +++--- src/mousetracker.js | 15 +++++++++++ src/viewer.js | 27 ++++++++++++++++++-- src/viewport.js | 27 ++++++++++++++++++++ test/demo/constrainedpan.html | 48 +++++++++++++++++++++++++++++++++++ test/demo/embed.html | 33 ++++++++++++++++++++++++ test/demo/iframe.html | 19 ++++++++++++++ 7 files changed, 171 insertions(+), 6 deletions(-) create mode 100644 test/demo/constrainedpan.html create mode 100644 test/demo/embed.html create mode 100644 test/demo/iframe.html diff --git a/.eslintrc.json b/.eslintrc.json index 7e027656..fe8e34e6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,10 +8,10 @@ "off", 4 ], - "linebreak-style": [ - "error", - "unix" - ], + //"linebreak-style": [ + // "error", + // "unix" + //], "quotes": [ "off", "double" diff --git a/src/mousetracker.js b/src/mousetracker.js index 3dbcf595..e9d5f0e9 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -862,6 +862,21 @@ blurHandler: function () { } }; + /** + * Resets all active mousetrakers. (Added to patch issue #697 "Mouse up outside map will cause "canvas-drag" event to stick") + * + * @private + * @member resetAllMouseTrackers + * @memberof OpenSeadragon.MouseTracker + */ + $.MouseTracker.resetAllMouseTrackers = function(){ + MOUSETRACKERS.forEach(function(mt){ + if (mt.isTracking()){ + mt.setTracking(false); + mt.setTracking(true); + } + }); + }; /** * Provides continuous computation of velocity (speed and direction) of active pointers. diff --git a/src/viewer.js b/src/viewer.js index cea725a3..b3a51d03 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2530,6 +2530,7 @@ function onCanvasDblClick( event ) { }); } +// Modified to improve constrained panning function onCanvasDrag( event ) { var gestureSettings; @@ -2541,11 +2542,31 @@ function onCanvasDrag( event ) { if( !this.panVertical ){ event.delta.y = 0; } - this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled ); + if( this.constrainDuringPan ){ - this.viewport.applyConstraints(); + var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() ); + + this["viewport"].centerSpringX.target.value += delta.x; + this["viewport"].centerSpringY.target.value += delta.y; + + var bounds = this.viewport.getBounds(); + var constrainedBounds = this.viewport.getConstrainedBounds(); + + this["viewport"].centerSpringX.target.value -= delta.x; + this["viewport"].centerSpringY.target.value -= delta.y; + + if (bounds.x != constrainedBounds.x) { + event.delta.x = 0; + } + + if (bounds.y != constrainedBounds.y) { + event.delta.y = 0; + } } + + this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled ); } + /** * Raised when a mouse or touch drag operation occurs on the {@link OpenSeadragon.Viewer#canvas} element. * @@ -2652,6 +2673,8 @@ function onCanvasEnter( event ) { } function onCanvasExit( event ) { + + $.MouseTracker.resetAllMouseTrackers(); // <== Necessary to patch issue #697 "Mouse up outside map will cause "canvas-drag" event to stick" /** * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element. * diff --git a/src/viewport.js b/src/viewport.js index 7d5418bd..bc06530e 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -733,6 +733,33 @@ $.Viewport.prototype = { }, + /** + * Returns bounds taking constrains into account + * Added to improve constrained panning + * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. + */ + // Added to improve constrained panning + getConstrainedBounds: function( immediately ) { + var actualZoom = this.getZoom(), + constrainedZoom = Math.max( + Math.min( actualZoom, this.getMaxZoom() ), + this.getMinZoom() + ), + bounds, + constrainedBounds; + + if ( actualZoom != constrainedZoom ) { + this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); + } + + bounds = this.getBounds(); + + constrainedBounds = this._applyBoundaryConstraints( bounds, immediately ); + + return constrainedBounds; + }, + /** * @function * @param {OpenSeadragon.Point} delta diff --git a/test/demo/constrainedpan.html b/test/demo/constrainedpan.html new file mode 100644 index 00000000..0b64eef1 --- /dev/null +++ b/test/demo/constrainedpan.html @@ -0,0 +1,48 @@ + + + + OpenSeadragon fitBoundsWithConstraints() Demo + + + + +
+

Simple demo to see panning improvements using the following settings:

+ +
+ +
+ + + + diff --git a/test/demo/embed.html b/test/demo/embed.html new file mode 100644 index 00000000..07dfb66c --- /dev/null +++ b/test/demo/embed.html @@ -0,0 +1,33 @@ + + + + + CartoWall Climbing Topo + + + + + + + + + +
+ + + + diff --git a/test/demo/iframe.html b/test/demo/iframe.html new file mode 100644 index 00000000..375cbdee --- /dev/null +++ b/test/demo/iframe.html @@ -0,0 +1,19 @@ + + + + + CartoWall Climbing Topo + + + + + + + + + + + + From 70bdc8839e713486d90e322365e1f68fb0a54779 Mon Sep 17 00:00:00 2001 From: Jose Date: Mon, 20 Feb 2017 20:23:25 +0100 Subject: [PATCH 2/4] Some issues solved --- .eslintrc.json | 4 ---- src/mousetracker.js | 10 +++++----- src/viewer.js | 9 ++++----- src/viewport.js | 2 +- test/demo/constrainedpan.html | 2 +- test/demo/{embed.html => iframe-embed.html} | 5 ++--- test/demo/{iframe.html => iframe-host.html} | 7 +++---- 7 files changed, 16 insertions(+), 23 deletions(-) rename test/demo/{embed.html => iframe-embed.html} (94%) rename test/demo/{iframe.html => iframe-host.html} (70%) diff --git a/.eslintrc.json b/.eslintrc.json index fe8e34e6..35c702a5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,10 +8,6 @@ "off", 4 ], - //"linebreak-style": [ - // "error", - // "unix" - //], "quotes": [ "off", "double" diff --git a/src/mousetracker.js b/src/mousetracker.js index e9d5f0e9..0480300a 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -870,12 +870,12 @@ * @memberof OpenSeadragon.MouseTracker */ $.MouseTracker.resetAllMouseTrackers = function(){ - MOUSETRACKERS.forEach(function(mt){ - if (mt.isTracking()){ - mt.setTracking(false); - mt.setTracking(true); + for(var i = 0; i < MOUSETRACKERS.length; i++){ + if (MOUSETRACKERS[i].isTracking()){ + MOUSETRACKERS[i].setTracking(false); + MOUSETRACKERS[i].setTracking(true); } - }); + } }; /** diff --git a/src/viewer.js b/src/viewer.js index b3a51d03..68c3d9a0 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2530,7 +2530,6 @@ function onCanvasDblClick( event ) { }); } -// Modified to improve constrained panning function onCanvasDrag( event ) { var gestureSettings; @@ -2546,14 +2545,14 @@ function onCanvasDrag( event ) { if( this.constrainDuringPan ){ var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() ); - this["viewport"].centerSpringX.target.value += delta.x; - this["viewport"].centerSpringY.target.value += delta.y; + this.viewport.centerSpringX.target.value += delta.x; + this.viewport.centerSpringY.target.value += delta.y; var bounds = this.viewport.getBounds(); var constrainedBounds = this.viewport.getConstrainedBounds(); - this["viewport"].centerSpringX.target.value -= delta.x; - this["viewport"].centerSpringY.target.value -= delta.y; + this.viewport.centerSpringX.target.value -= delta.x; + this.viewport.centerSpringY.target.value -= delta.y; if (bounds.x != constrainedBounds.x) { event.delta.x = 0; diff --git a/src/viewport.js b/src/viewport.js index bc06530e..cb534b68 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -734,7 +734,7 @@ $.Viewport.prototype = { /** - * Returns bounds taking constrains into account + * Returns bounds taking constraints into account * Added to improve constrained panning * @param {Boolean} immediately * @return {OpenSeadragon.Viewport} Chainable. diff --git a/test/demo/constrainedpan.html b/test/demo/constrainedpan.html index 0b64eef1..1cd7578a 100644 --- a/test/demo/constrainedpan.html +++ b/test/demo/constrainedpan.html @@ -45,4 +45,4 @@ }); - + \ No newline at end of file diff --git a/test/demo/embed.html b/test/demo/iframe-embed.html similarity index 94% rename from test/demo/embed.html rename to test/demo/iframe-embed.html index 07dfb66c..33a34b45 100644 --- a/test/demo/embed.html +++ b/test/demo/iframe-embed.html @@ -1,8 +1,7 @@ - - CartoWall Climbing Topo + Iframe example embed @@ -30,4 +29,4 @@ }); - + \ No newline at end of file diff --git a/test/demo/iframe.html b/test/demo/iframe-host.html similarity index 70% rename from test/demo/iframe.html rename to test/demo/iframe-host.html index 375cbdee..ea602473 100644 --- a/test/demo/iframe.html +++ b/test/demo/iframe-host.html @@ -1,8 +1,7 @@ - - CartoWall Climbing Topo + Iframe example @@ -14,6 +13,6 @@ - + - + \ No newline at end of file From fba70355cdf376b3572e236205636c97f0e22157 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 23 Feb 2017 19:15:29 +0100 Subject: [PATCH 3/4] In-iframe check added before resetting all active mousetrackers --- src/viewer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/viewer.js b/src/viewer.js index 68c3d9a0..75061146 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2673,7 +2673,10 @@ function onCanvasEnter( event ) { function onCanvasExit( event ) { - $.MouseTracker.resetAllMouseTrackers(); // <== Necessary to patch issue #697 "Mouse up outside map will cause "canvas-drag" event to stick" + if (window.location != window.parent.location){ + $.MouseTracker.resetAllMouseTrackers(); + } + /** * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element. * From 0fe5dad7697be9e2bbfd0ef5d0b67339ae9514e0 Mon Sep 17 00:00:00 2001 From: Jose Date: Sat, 1 Jul 2017 00:12:41 +0200 Subject: [PATCH 4/4] zoom methods calls removed --- src/viewport.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/viewport.js b/src/viewport.js index cb534b68..e218e3d8 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -741,18 +741,9 @@ $.Viewport.prototype = { */ // Added to improve constrained panning getConstrainedBounds: function( immediately ) { - var actualZoom = this.getZoom(), - constrainedZoom = Math.max( - Math.min( actualZoom, this.getMaxZoom() ), - this.getMinZoom() - ), - bounds, + var bounds, constrainedBounds; - if ( actualZoom != constrainedZoom ) { - this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); - } - bounds = this.getBounds(); constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );