From d5b62aabcd2172f71deb3f3517ff180a4eb29617 Mon Sep 17 00:00:00 2001
From: Jose <jmillanmedina@gmail.com>
Date: Sun, 19 Feb 2017 17:36:53 +0100
Subject: [PATCH] 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 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
+ <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+ <style type="text/css">
+
+ .openseadragon1 {
+ width: 800px;
+ height: 600px;
+ }
+
+ #highlights li {
+ cursor: pointer;
+ }
+
+ </style>
+</head>
+<body>
+ <div>
+ <p>Simple demo to see panning improvements using the following settings:</p>
+ <ul>
+ <li>homeFillsViewer: true</li>
+ <li>showZoomControl: false,</li>
+ <li>constrainDuringPan: true,</li>
+ <li>visibilityRatio: 1,</li>
+ </ul>
+ </div>
+
+ <div id="contentDiv" class="openseadragon1"></div>
+
+ <script type="text/javascript">
+
+ var _viewer;
+
+ var _viewer = OpenSeadragon({
+ element: document.getElementById("contentDiv"),
+ tileSources: "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
+ homeFillsViewer: true,
+ showZoomControl: false,
+ constrainDuringPan: true,
+ visibilityRatio: 1,
+ prefixUrl: "../../build/openseadragon/images/",
+ minZoomImageRatio: 1
+ });
+ </script>
+</body>
+</html>
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 @@
+
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CartoWall Climbing Topo</title>
+
+ <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+
+ <meta name="viewport" content="initial-scale=1.0">
+ <meta charset="utf-8">
+ <style>
+ html, body { height: 100%; margin: 0; padding: 0; background-color: white;}
+ </style>
+ </head>
+
+ <body>
+ <div id="contentDiv" allowfullscreen style="height: 100%"> </div>
+
+ <script type="text/javascript">
+
+ var _viewer = OpenSeadragon({
+ element: document.getElementById("contentDiv"),
+ tileSources: "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
+ homeFillsViewer: true,
+ showZoomControl: false,
+ constrainDuringPan: true,
+ visibilityRatio: 1,
+ prefixUrl: "../../build/openseadragon/images/",
+ minZoomImageRatio: 1
+ });
+ </script>
+ </body>
+</html>
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 @@
+
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CartoWall Climbing Topo</title>
+
+ <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+
+ <meta name="viewport" content="initial-scale=1.0">
+ <meta charset="utf-8">
+ <style>
+ html, body { height: 100%; margin: 0; padding: 0; background-color: white;}
+ </style>
+ </head>
+
+ <body>
+ <iframe src="embed.html" frameborder="0" width="560" height="315" allowfullscreen></iframe>
+ </body>
+</html>