mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Patch to fix issue #697, also contains improvements when panning under certain constrains

Browse Source
This commit is contained in:
Jose 2017-02-19 17:36:53 +01:00
parent 06f9804497
commit d5b62aabcd
7 changed files with 171 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@ -8,10 +8,10 @@
"off", "off",
4 4
], ],
"linebreak-style": [ //"linebreak-style": [
"error", // "error",
"unix" // "unix"
], //],
"quotes": [ "quotes": [
"off", "off",
"double" "double"

15
src/mousetracker.js
View File

@ -862,6 +862,21 @@
blurHandler: function () { } 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. * Provides continuous computation of velocity (speed and direction) of active pointers.

27
src/viewer.js
View File

@ -2530,6 +2530,7 @@ function onCanvasDblClick( event ) {
}); });
} }
// Modified to improve constrained panning
function onCanvasDrag( event ) { function onCanvasDrag( event ) {
var gestureSettings; var gestureSettings;
@ -2541,11 +2542,31 @@ function onCanvasDrag( event ) {
if( !this.panVertical ){ if( !this.panVertical ){
event.delta.y = 0; event.delta.y = 0;
} }
this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled );
if( this.constrainDuringPan ){ 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. * 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 ) { 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. * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
* *

27
src/viewport.js
View File

@ -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 * @function
* @param {OpenSeadragon.Point} delta * @param {OpenSeadragon.Point} delta

48
test/demo/constrainedpan.html Normal file
View File

@ -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>

33
test/demo/embed.html Normal file
View File

@ -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>

19
test/demo/iframe.html Normal file
View File

@ -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>