Merge pull request #1133 from josmilmed/master

Patch to fix issue #697
This commit is contained in:
Ian Gilman 2017-07-11 13:08:35 -07:00 committed by GitHub
commit 41b9cc647b
7 changed files with 160 additions and 9 deletions

View File

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

View File

@ -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(){
for(var i = 0; i < MOUSETRACKERS.length; i++){
if (MOUSETRACKERS[i].isTracking()){
MOUSETRACKERS[i].setTracking(false);
MOUSETRACKERS[i].setTracking(true);
}
}
};
/**
* Provides continuous computation of velocity (speed and direction) of active pointers.

View File

@ -2639,6 +2639,7 @@ function onCanvasDblClick( event ) {
function onCanvasDrag( event ) {
var gestureSettings;
var canvasDragEventArgs = {
tracker: event.eventSource,
position: event.position,
@ -2667,7 +2668,8 @@ function onCanvasDrag( event ) {
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'canvas-drag', canvasDragEventArgs);
if ( !canvasDragEventArgs.preventDefaultAction && this.viewport ) {
if ( !event.preventDefaultAction && this.viewport ) {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if( !this.panHorizontal ){
event.delta.x = 0;
@ -2675,12 +2677,29 @@ function onCanvasDrag( event ) {
if( !this.panVertical ){
event.delta.y = 0;
}
if( event.delta.x !== 0 || 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 );
}
}
@ -2763,6 +2782,11 @@ function onCanvasEnter( event ) {
}
function onCanvasExit( event ) {
if (window.location != window.parent.location){
$.MouseTracker.resetAllMouseTrackers();
}
/**
* Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
*

View File

@ -733,6 +733,24 @@ $.Viewport.prototype = {
},
/**
* Returns bounds taking constraints into account
* Added to improve constrained panning
* @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable.
*/
// Added to improve constrained panning
getConstrainedBounds: function( immediately ) {
var bounds,
constrainedBounds;
bounds = this.getBounds();
constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
return constrainedBounds;
},
/**
* @function
* @param {OpenSeadragon.Point} delta

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>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Iframe example embed</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>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Iframe example</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="iframe-embed.html" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</body>
</html>