mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-28 16:16:08 +03:00
Merge pull request #2249 from pearcetm/rotated-constraints-fix
fixed viewport constraint behavior when viewer is rotated
This commit is contained in:
Ian Gilman
GitHub
commit
3342b7880d
@ -3049,17 +3049,16 @@ function onCanvasDrag( event ) {
|
||||
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) {
|
||||
if (constrainedBounds.xConstrained) {
|
||||
event.delta.x = 0;
|
||||
}
|
||||
|
||||
if (bounds.y !== constrainedBounds.y) {
|
||||
if (constrainedBounds.yConstrained) {
|
||||
event.delta.y = 0;
|
||||
}
|
||||
}
|
||||
|
||||
129
src/viewport.js
129
src/viewport.js
@ -483,7 +483,7 @@ $.Viewport.prototype = {
|
||||
);
|
||||
|
||||
newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
|
||||
deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
|
||||
deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ).rotate(-this.getRotation(true));
|
||||
deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
|
||||
|
||||
return centerTarget.plus( deltaZoomPoints );
|
||||
@ -514,34 +514,37 @@ $.Viewport.prototype = {
|
||||
* @param {OpenSeadragon.Rect} bounds
|
||||
* @returns {OpenSeadragon.Rect} constrained bounds.
|
||||
*/
|
||||
_applyBoundaryConstraints: function(bounds) {
|
||||
var newBounds = new $.Rect(
|
||||
bounds.x,
|
||||
bounds.y,
|
||||
bounds.width,
|
||||
bounds.height);
|
||||
_applyBoundaryConstraints: function(bounds) {
|
||||
var newBounds = this.viewportToViewerElementRectangle(bounds).getBoundingBox();
|
||||
var cb = this.viewportToViewerElementRectangle(this._contentBoundsNoRotate).getBoundingBox();
|
||||
|
||||
var xConstrained = false;
|
||||
var yConstrained = false;
|
||||
|
||||
if (this.wrapHorizontal) {
|
||||
//do nothing
|
||||
} else {
|
||||
var boundsRight = newBounds.x + newBounds.width;
|
||||
var contentRight = this._contentBoundsNoRotate.x + this._contentBoundsNoRotate.width;
|
||||
var contentRight = cb.x + cb.width;
|
||||
|
||||
var horizontalThreshold, leftDx, rightDx;
|
||||
if (newBounds.width > this._contentBoundsNoRotate.width) {
|
||||
horizontalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.width;
|
||||
if (newBounds.width > cb.width) {
|
||||
horizontalThreshold = this.visibilityRatio * cb.width;
|
||||
} else {
|
||||
horizontalThreshold = this.visibilityRatio * newBounds.width;
|
||||
}
|
||||
|
||||
leftDx = this._contentBoundsNoRotate.x - boundsRight + horizontalThreshold;
|
||||
leftDx = cb.x - boundsRight + horizontalThreshold;
|
||||
rightDx = contentRight - newBounds.x - horizontalThreshold;
|
||||
if (horizontalThreshold > this._contentBoundsNoRotate.width) {
|
||||
if (horizontalThreshold > cb.width) {
|
||||
newBounds.x += (leftDx + rightDx) / 2;
|
||||
xConstrained = true;
|
||||
} else if (rightDx < 0) {
|
||||
newBounds.x += rightDx;
|
||||
xConstrained = true;
|
||||
} else if (leftDx > 0) {
|
||||
newBounds.x += leftDx;
|
||||
xConstrained = true;
|
||||
}
|
||||
|
||||
}
|
||||
@ -550,28 +553,37 @@ $.Viewport.prototype = {
|
||||
//do nothing
|
||||
} else {
|
||||
var boundsBottom = newBounds.y + newBounds.height;
|
||||
var contentBottom = this._contentBoundsNoRotate.y + this._contentBoundsNoRotate.height;
|
||||
var contentBottom = cb.y + cb.height;
|
||||
|
||||
var verticalThreshold, topDy, bottomDy;
|
||||
if (newBounds.height > this._contentBoundsNoRotate.height) {
|
||||
verticalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.height;
|
||||
if (newBounds.height > cb.height) {
|
||||
verticalThreshold = this.visibilityRatio * cb.height;
|
||||
} else{
|
||||
verticalThreshold = this.visibilityRatio * newBounds.height;
|
||||
}
|
||||
|
||||
topDy = this._contentBoundsNoRotate.y - boundsBottom + verticalThreshold;
|
||||
topDy = cb.y - boundsBottom + verticalThreshold;
|
||||
bottomDy = contentBottom - newBounds.y - verticalThreshold;
|
||||
if (verticalThreshold > this._contentBoundsNoRotate.height) {
|
||||
if (verticalThreshold > cb.height) {
|
||||
newBounds.y += (topDy + bottomDy) / 2;
|
||||
yConstrained = true;
|
||||
} else if (bottomDy < 0) {
|
||||
newBounds.y += bottomDy;
|
||||
yConstrained = true;
|
||||
} else if (topDy > 0) {
|
||||
newBounds.y += topDy;
|
||||
yConstrained = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return newBounds;
|
||||
var constraintApplied = xConstrained || yConstrained;
|
||||
var newViewportBounds = constraintApplied ? this.viewerElementToViewportRectangle(newBounds) : bounds.clone();
|
||||
newViewportBounds.xConstrained = xConstrained;
|
||||
newViewportBounds.yConstrained = yConstrained;
|
||||
newViewportBounds.constraintApplied = constraintApplied;
|
||||
|
||||
return newViewportBounds;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -605,7 +617,7 @@ $.Viewport.prototype = {
|
||||
* @function
|
||||
* @param {Boolean} [immediately=false]
|
||||
* @returns {OpenSeadragon.Viewport} Chainable.
|
||||
* @fires OpenSeadragon.Viewer.event:constrain
|
||||
* @fires OpenSeadragon.Viewer.event:constrain if constraints were applied
|
||||
*/
|
||||
applyConstraints: function(immediately) {
|
||||
var actualZoom = this.getZoom();
|
||||
@ -615,17 +627,13 @@ $.Viewport.prototype = {
|
||||
this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
|
||||
}
|
||||
|
||||
var bounds = this.getBoundsNoRotate();
|
||||
var constrainedBounds = this._applyBoundaryConstraints(bounds);
|
||||
this._raiseConstraintsEvent(immediately);
|
||||
var constrainedBounds = this.getConstrainedBounds(false);
|
||||
|
||||
if (bounds.x !== constrainedBounds.x ||
|
||||
bounds.y !== constrainedBounds.y ||
|
||||
immediately) {
|
||||
this.fitBounds(
|
||||
constrainedBounds.rotate(-this.getRotation(true)),
|
||||
immediately);
|
||||
if(constrainedBounds.constraintApplied){
|
||||
this.fitBounds(constrainedBounds, immediately);
|
||||
this._raiseConstraintsEvent(immediately);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -675,45 +683,51 @@ $.Viewport.prototype = {
|
||||
newBounds.y = center.y - newBounds.height / 2;
|
||||
var newZoom = 1.0 / newBounds.width;
|
||||
|
||||
if (constraints) {
|
||||
var newBoundsAspectRatio = newBounds.getAspectRatio();
|
||||
var newConstrainedZoom = this._applyZoomConstraints(newZoom);
|
||||
|
||||
if (newZoom !== newConstrainedZoom) {
|
||||
newZoom = newConstrainedZoom;
|
||||
newBounds.width = 1.0 / newZoom;
|
||||
newBounds.x = center.x - newBounds.width / 2;
|
||||
newBounds.height = newBounds.width / newBoundsAspectRatio;
|
||||
newBounds.y = center.y - newBounds.height / 2;
|
||||
}
|
||||
|
||||
newBounds = this._applyBoundaryConstraints(newBounds);
|
||||
center = newBounds.getCenter();
|
||||
this._raiseConstraintsEvent(immediately);
|
||||
}
|
||||
|
||||
if (immediately) {
|
||||
this.panTo(center, true);
|
||||
return this.zoomTo(newZoom, null, true);
|
||||
this.zoomTo(newZoom, null, true);
|
||||
if(constraints){
|
||||
this.applyConstraints(true);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
this.panTo(this.getCenter(true), true);
|
||||
this.zoomTo(this.getZoom(true), null, true);
|
||||
var currentCenter = this.getCenter(true);
|
||||
var currentZoom = this.getZoom(true);
|
||||
this.panTo(currentCenter, true);
|
||||
this.zoomTo(currentZoom, null, true);
|
||||
|
||||
var oldBounds = this.getBounds();
|
||||
var oldZoom = this.getZoom();
|
||||
|
||||
if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) {
|
||||
this.zoomTo(newZoom, true);
|
||||
return this.panTo(center, immediately);
|
||||
this.zoomTo(newZoom, null, true);
|
||||
this.panTo(center, immediately);
|
||||
if(constraints){
|
||||
this.applyConstraints(false);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
newBounds = newBounds.rotate(-this.getRotation());
|
||||
var referencePoint = newBounds.getTopLeft().times(newZoom)
|
||||
.minus(oldBounds.getTopLeft().times(oldZoom))
|
||||
.divide(newZoom - oldZoom);
|
||||
if(constraints){
|
||||
this.panTo(center, false);
|
||||
this.zoomTo(newZoom, null, false);
|
||||
|
||||
return this.zoomTo(newZoom, referencePoint, immediately);
|
||||
var constrainedBounds = this.getConstrainedBounds();
|
||||
|
||||
this.panTo(currentCenter, true);
|
||||
this.zoomTo(currentZoom, null, true);
|
||||
|
||||
this.fitBounds(constrainedBounds);
|
||||
} else {
|
||||
var rotatedNewBounds = newBounds.rotate(-this.getRotation());
|
||||
var referencePoint = rotatedNewBounds.getTopLeft().times(newZoom)
|
||||
.minus(oldBounds.getTopLeft().times(oldZoom))
|
||||
.divide(newZoom - oldZoom);
|
||||
|
||||
this.zoomTo(newZoom, referencePoint, immediately);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -787,7 +801,10 @@ $.Viewport.prototype = {
|
||||
* Returns bounds taking constraints into account
|
||||
* Added to improve constrained panning
|
||||
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
|
||||
* @returns {OpenSeadragon.Viewport} Chainable.
|
||||
* @returns {OpenSeadragon.Rect} The bounds in viewport coordinates after applying constraints. The returned $.Rect
|
||||
* contains additional properties constraintsApplied, xConstrained and yConstrained.
|
||||
* These flags indicate whether the viewport bounds were modified by the constraints
|
||||
* of the viewer rectangle, and in which dimension(s).
|
||||
*/
|
||||
getConstrainedBounds: function(current) {
|
||||
var bounds,
|
||||
|
||||
@ -3,111 +3,163 @@
|
||||
<head>
|
||||
<title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
|
||||
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||
<style type="text/css">
|
||||
|
||||
.openseadragon1 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
height: 500px;
|
||||
border:thin black solid;
|
||||
margin-right:20px;
|
||||
}
|
||||
|
||||
#highlights li {
|
||||
cursor: pointer;
|
||||
#buttons button{
|
||||
width:10em;
|
||||
text-align:center;
|
||||
margin:5px;
|
||||
}
|
||||
.layout{
|
||||
display:grid;
|
||||
grid-template-columns:auto 1fr;
|
||||
padding:10px;
|
||||
}
|
||||
.method{
|
||||
border:medium gray solid;
|
||||
margin:2px;
|
||||
background-color:rgb(240, 240, 240)
|
||||
}
|
||||
.method.selected{
|
||||
border:medium red solid;
|
||||
background-color: lightgoldenrodyellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
|
||||
<div class="layout">
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<div id="controls">
|
||||
<div>
|
||||
Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
|
||||
is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
|
||||
constraints.
|
||||
</div>
|
||||
|
||||
<h3>Pick a method to use:</h3>
|
||||
<div>
|
||||
<div class="method selected" data-value="0">
|
||||
<pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
|
||||
</div>
|
||||
<div class="method" data-value="1">
|
||||
<pre>viewport.fitBoundsWithConstraints(bounds);</pre>
|
||||
</div>
|
||||
<div class="method" data-value="4">
|
||||
<pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
|
||||
</div>
|
||||
<div class="method" data-value="2">
|
||||
<pre>//Initially ignore constraints
|
||||
viewport.fitBounds(bounds);
|
||||
|
||||
//Apply constraints after 1 second delay
|
||||
setTimeout(() => viewport.applyConstraints(), 1000);</pre>
|
||||
</div>
|
||||
</div>
|
||||
<button id="rotate">Rotate the viewer</button>
|
||||
<h3>Click to fit overlay bounds:</h3>
|
||||
<div id="buttons"></div>
|
||||
<h4>overlay.getBounds(viewer.viewport):</h4>
|
||||
<pre class="bounds">Pick an overlay above to show the bounds</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<div id="highlights"></div>
|
||||
|
||||
<select onchange="changeMethod(this.value);">
|
||||
<option value=0>viewport.fitBoundsWithConstraints(bounds);</option>
|
||||
<option value=1>viewport.fitBounds(bounds);</option>
|
||||
<option value=2>viewport.fitBounds(bounds).applyConstraints();</option>
|
||||
</select>
|
||||
<input type="button" value="Go home" onclick="goHome()"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var _viewer;
|
||||
var viewer;
|
||||
var _fittingMethod = 0;
|
||||
|
||||
var _highlights = [
|
||||
{"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"},
|
||||
{"queryPoint":[0.5923298766583593,0.6461653354541856], "radius":0.013175241014912752,"text":"Fuel here"},
|
||||
{"queryPoint":[0.43920338711232304,0.7483181389302148], "radius":0.09222668710438928, "text":"Wheel"},
|
||||
{"queryPoint":[0.07341677959486298,0.9028719921872319], "radius":0.08996845561083797, "text":"Nothing special"}
|
||||
];
|
||||
|
||||
var generateUniqueHash = (function() {
|
||||
var counter = 0;
|
||||
return function() {
|
||||
return "openseadragon_" + (counter++);
|
||||
};
|
||||
})();
|
||||
|
||||
var _viewer = OpenSeadragon({
|
||||
element: document.getElementById("contentDiv"),
|
||||
showNavigationControl: false,
|
||||
viewer = window.viewer = OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
|
||||
tileSources: {
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
Url: 'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
|
||||
Format: "jpg",
|
||||
Overlap: 1,
|
||||
TileSize: 510,
|
||||
Size: {
|
||||
Width: 4592,
|
||||
Height: 3448
|
||||
tileSources: "../data/testpattern.dzi",
|
||||
minZoomImageRatio: 0,
|
||||
maxZoomPixelRatio: 10,
|
||||
visibilityRatio:1,
|
||||
constrainDuringPan:true,
|
||||
});
|
||||
|
||||
viewer.addHandler("open", function(event) {
|
||||
var elt = document.createElement("div");
|
||||
elt.className = "runtime-overlay";
|
||||
elt.style.background = "green";
|
||||
elt.style.outline = "3px solid red";
|
||||
elt.style.opacity = "0.7";
|
||||
elt.textContent = "Within the image";
|
||||
viewer.addOverlay({
|
||||
element: elt,
|
||||
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
|
||||
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
||||
});
|
||||
|
||||
elt = document.createElement("div");
|
||||
elt.className = "runtime-overlay";
|
||||
elt.style.background = "white";
|
||||
elt.style.opacity = "0.5";
|
||||
elt.style.outline = "5px solid pink";
|
||||
elt.textContent = "Left edge rectangle";
|
||||
viewer.addOverlay({
|
||||
element: elt,
|
||||
location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
|
||||
});
|
||||
|
||||
var elt = document.createElement("div");
|
||||
elt.className = "runtime-overlay";
|
||||
elt.style.background = "lightblue";
|
||||
elt.style.outline = "3px solid purple";
|
||||
elt.style.opacity = "0.7";
|
||||
elt.textContent = "Top right square";
|
||||
viewer.addOverlay({
|
||||
element: elt,
|
||||
location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
|
||||
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
||||
});
|
||||
|
||||
viewer.currentOverlays.forEach(overlay=>{
|
||||
var text = $(overlay.element).text();
|
||||
var div=$('<div>').appendTo('#buttons');
|
||||
var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{
|
||||
|
||||
var bounds = overlay.getBounds(viewer.viewport);
|
||||
$('.bounds').text(JSON.stringify(bounds,null,2));
|
||||
|
||||
var _fittingMethod = parseInt($('.method.selected').data('value'));
|
||||
|
||||
if (_fittingMethod === 0) {
|
||||
viewer.viewport.fitBounds(bounds, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (_fittingMethod === 1) {
|
||||
viewer.viewport.fitBoundsWithConstraints(bounds, false);
|
||||
}
|
||||
else if (_fittingMethod === 4) {
|
||||
viewer.viewport.fitBoundsWithConstraints(bounds, true);
|
||||
}
|
||||
else if (_fittingMethod === 2) {
|
||||
viewer.viewport.fitBounds(bounds, false);
|
||||
setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
viewer.viewport.zoomTo(0.5, null, true);
|
||||
|
||||
|
||||
});
|
||||
_viewer.addHandler("open", function() {
|
||||
var str = "<ul>";
|
||||
for (var i=0; i<_highlights.length; ++i) {
|
||||
var highlight = _highlights[i];
|
||||
str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
|
||||
}
|
||||
str += "</ul>";
|
||||
document.getElementById("highlights").innerHTML = str;
|
||||
$('.method').on('click',function(){
|
||||
$('.method').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
})
|
||||
$("#rotate").click(function() {
|
||||
viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
|
||||
$("#degrees").text(viewer.viewport.getRotation() + "deg");
|
||||
});
|
||||
|
||||
function gotoHighlight(index) {
|
||||
var highlight = _highlights[index];
|
||||
|
||||
var viewport = _viewer.viewport;
|
||||
var contentSize = viewport.contentSize;
|
||||
var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom());
|
||||
var radius = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/
|
||||
var center = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]);
|
||||
var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2));
|
||||
|
||||
if (_fittingMethod === 0) {
|
||||
viewport.fitBoundsWithConstraints(bounds, false);
|
||||
}
|
||||
else if (_fittingMethod === 1) {
|
||||
viewport.fitBounds(bounds, false);
|
||||
}
|
||||
else if (_fittingMethod === 2) {
|
||||
viewport.fitBounds(bounds, false).applyConstraints();
|
||||
}
|
||||
}
|
||||
|
||||
function changeMethod(value) {
|
||||
_fittingMethod = parseInt(value, 10);
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
_viewer.viewport.goHome();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -539,7 +539,7 @@
|
||||
var bounds = viewport.getBounds();
|
||||
Util.assertRectangleEquals(
|
||||
assert,
|
||||
new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
bounds,
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints with rotation should move viewport.");
|
||||
@ -564,7 +564,7 @@
|
||||
var bounds = viewport.getBounds();
|
||||
Util.assertRectangleEquals(
|
||||
assert,
|
||||
new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
bounds,
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints flipped and with rotation should move viewport.");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user