Skip to content

Commit

Permalink
Merge pull request #910 from avandecreme/home-clip
Browse files Browse the repository at this point in the history 
Fix home bounds with clipping. Fix #891
  • Loading branch information
@iangilman
iangilman committed Apr 22, 2016
2 parents 1b39167 + 65a95d4 commit 5785d10
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 46 deletions.
20 changes: 20 additions & 0 deletions src/tiledimage.js
View file
Expand Up @@ -287,6 +287,26 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return this.getBounds();
},

/**
* Get the bounds of the displayed part of the tiled image.
* @param {Boolean} [current=false] Pass true for the current location,
* false for the target location.
* @returns {$.Rect} The clipped bounds in viewport coordinates.
*/
getClippedBounds: function(current) {
var bounds = this.getBounds(current);
if (this._clip) {
var ratio = this._worldWidthCurrent / this.source.dimensions.x;
var clip = this._clip.times(ratio);
bounds = new $.Rect(
bounds.x + clip.x,
bounds.y + clip.y,
clip.width,
clip.height);
}
return bounds;
},

/**
* @returns {OpenSeadragon.Point} This TiledImage's content size, in original pixels.
*/
Expand Down
126 changes: 103 additions & 23 deletions src/viewport.js
View file
Expand Up @@ -341,7 +341,9 @@ $.Viewport.prototype = {
}, margins);

this._updateContainerInnerSize();
this.viewer.forceRedraw();
if (this.viewer) {
this.viewer.forceRedraw();
}
},

/**
Expand Down Expand Up @@ -1085,8 +1087,18 @@ $.Viewport.prototype = {
return this.viewportToImageCoordinates(viewerX.x, viewerX.y);
}

if (this.viewer && this.viewer.world.getItemCount() > 1) {
$.console.error('[Viewport.viewportToImageCoordinates] is not accurate with multi-image; use TiledImage.viewportToImageCoordinates instead.');
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.viewportToImageCoordinates] is not accurate ' +
'with multi-image; use TiledImage.viewportToImageCoordinates instead.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.viewportToImageCoordinates(viewerX, viewerY, true);
}
}

return this._viewportToImageDelta(
Expand Down Expand Up @@ -1119,8 +1131,18 @@ $.Viewport.prototype = {
return this.imageToViewportCoordinates(imageX.x, imageX.y);
}

if (this.viewer && this.viewer.world.getItemCount() > 1) {
$.console.error('[Viewport.imageToViewportCoordinates] is not accurate with multi-image; use TiledImage.imageToViewportCoordinates instead.');
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
'with multi-image; use TiledImage.imageToViewportCoordinates instead.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.imageToViewportCoordinates(imageX, imageY, true);
}
}

var point = this._imageToViewportDelta(imageX, imageY);
Expand Down Expand Up @@ -1150,6 +1172,21 @@ $.Viewport.prototype = {
rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
}

if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.imageToViewportRectangle] is not accurate ' +
'with multi-image; use TiledImage.imageToViewportRectangle instead.');
} else if (count === 1) {
// It is better to use TiledImage.imageToViewportRectangle
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.imageToViewportRectangle(
imageX, imageY, pixelWidth, pixelHeight, true);
}
}

var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
var coordB = this._imageToViewportDelta(rect.width, rect.height);
return new $.Rect(
Expand Down Expand Up @@ -1183,6 +1220,21 @@ $.Viewport.prototype = {
rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
}

if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.viewportToImageRectangle] is not accurate ' +
'with multi-image; use TiledImage.viewportToImageRectangle instead.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.viewportToImageRectangle(
viewerX, viewerY, pointWidth, pointHeight, true);
}
}

var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
var coordB = this._viewportToImageDelta(rect.width, rect.height);
return new $.Rect(
Expand Down Expand Up @@ -1224,10 +1276,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
windowToImageCoordinates: function( pixel ) {
windowToImageCoordinates: function(pixel) {
$.console.assert(this.viewer,
"[Viewport.windowToImageCoordinates] the viewport must have a viewer.");
var viewerCoordinates = pixel.minus(
OpenSeadragon.getElementPosition( this.viewer.element ));
return this.viewerElementToImageCoordinates( viewerCoordinates );
$.getElementPosition(this.viewer.element));
return this.viewerElementToImageCoordinates(viewerCoordinates);
},

/**
Expand All @@ -1236,10 +1290,12 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
imageToWindowCoordinates: function( pixel ) {
var viewerCoordinates = this.imageToViewerElementCoordinates( pixel );
imageToWindowCoordinates: function(pixel) {
$.console.assert(this.viewer,
"[Viewport.imageToWindowCoordinates] the viewport must have a viewer.");
var viewerCoordinates = this.imageToViewerElementCoordinates(pixel);
return viewerCoordinates.plus(
OpenSeadragon.getElementPosition( this.viewer.element ));
$.getElementPosition(this.viewer.element));
},

/**
Expand Down Expand Up @@ -1295,21 +1351,25 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} pixel
* @returns {OpenSeadragon.Point}
*/
windowToViewportCoordinates: function( pixel ) {
windowToViewportCoordinates: function(pixel) {
$.console.assert(this.viewer,
"[Viewport.windowToViewportCoordinates] the viewport must have a viewer.");
var viewerCoordinates = pixel.minus(
OpenSeadragon.getElementPosition( this.viewer.element ));
return this.viewerElementToViewportCoordinates( viewerCoordinates );
$.getElementPosition(this.viewer.element));
return this.viewerElementToViewportCoordinates(viewerCoordinates);
},

/**
* Convert viewport coordinates to pixel coordinates relative to the window.
* @param {OpenSeadragon.Point} point
* @returns {OpenSeadragon.Point}
*/
viewportToWindowCoordinates: function( point ) {
var viewerCoordinates = this.viewportToViewerElementCoordinates( point );
viewportToWindowCoordinates: function(point) {
$.console.assert(this.viewer,
"[Viewport.viewportToWindowCoordinates] the viewport must have a viewer.");
var viewerCoordinates = this.viewportToViewerElementCoordinates(point);
return viewerCoordinates.plus(
OpenSeadragon.getElementPosition( this.viewer.element ));
$.getElementPosition(this.viewer.element));
},

/**
Expand All @@ -1324,9 +1384,19 @@ $.Viewport.prototype = {
* target zoom.
* @returns {Number} imageZoom The image zoom
*/
viewportToImageZoom: function( viewportZoom ) {
if (this.viewer && this.viewer.world.getItemCount() > 1) {
$.console.error('[Viewport.viewportToImageZoom] is not accurate with multi-image.');
viewportToImageZoom: function(viewportZoom) {
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.viewportToImageZoom] is not ' +
'accurate with multi-image.');
} else if (count === 1) {
// It is better to use TiledImage.viewportToImageZoom
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.viewportToImageZoom(viewportZoom);
}
}

var imageWidth = this._contentSizeNoRotate.x;
Expand All @@ -1348,9 +1418,19 @@ $.Viewport.prototype = {
* target zoom.
* @returns {Number} viewportZoom The viewport zoom
*/
imageToViewportZoom: function( imageZoom ) {
if (this.viewer && this.viewer.world.getItemCount() > 1) {
$.console.error('[Viewport.imageToViewportZoom] is not accurate with multi-image.');
imageToViewportZoom: function(imageZoom) {
if (this.viewer) {
var count = this.viewer.world.getItemCount();
if (count > 1) {
$.console.error('[Viewport.imageToViewportZoom] is not accurate ' +
'with multi-image.');
} else if (count === 1) {
// It is better to use TiledImage.imageToViewportZoom
// because this._contentBoundsNoRotate can not be relied on
// with clipping.
var item = this.viewer.world.getItemAt(0);
return item.imageToViewportZoom(imageZoom);
}
}

var imageWidth = this._contentSizeNoRotate.x;
Expand Down
44 changes: 25 additions & 19 deletions src/world.js
View file
Expand Up @@ -375,34 +375,40 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
var oldContentSize = this._contentSize ? this._contentSize.clone() : null;
var oldContentFactor = this._contentFactor || 0;

if ( !this._items.length ) {
if (!this._items.length) {
this._homeBounds = new $.Rect(0, 0, 1, 1);
this._contentSize = new $.Point(1, 1);
this._contentFactor = 1;
} else {
var bounds = this._items[0].getBounds();
this._contentFactor = this._items[0].getContentSize().x / bounds.width;
var left = bounds.x;
var top = bounds.y;
var right = bounds.x + bounds.width;
var bottom = bounds.y + bounds.height;
var box;
for ( var i = 1; i < this._items.length; i++ ) {
box = this._items[i].getBounds();
this._contentFactor = Math.max(this._contentFactor, this._items[i].getContentSize().x / box.width);
left = Math.min( left, box.x );
top = Math.min( top, box.y );
right = Math.max( right, box.x + box.width );
bottom = Math.max( bottom, box.y + box.height );
var item = this._items[0];
var bounds = item.getBounds();
this._contentFactor = item.getContentSize().x / bounds.width;
var clippedBounds = item.getClippedBounds();
var left = clippedBounds.x;
var top = clippedBounds.y;
var right = clippedBounds.x + clippedBounds.width;
var bottom = clippedBounds.y + clippedBounds.height;
for (var i = 1; i < this._items.length; i++) {
item = this._items[i];
bounds = item.getBounds();
this._contentFactor = Math.max(this._contentFactor,
item.getContentSize().x / bounds.width);
clippedBounds = item.getClippedBounds();
left = Math.min(left, clippedBounds.x);
top = Math.min(top, clippedBounds.y);
right = Math.max(right, clippedBounds.x + clippedBounds.width);
bottom = Math.max(bottom, clippedBounds.y + clippedBounds.height);
}

this._homeBounds = new $.Rect( left, top, right - left, bottom - top );
this._contentSize = new $.Point(this._homeBounds.width * this._contentFactor,
this._homeBounds = new $.Rect(left, top, right - left, bottom - top);
this._contentSize = new $.Point(
this._homeBounds.width * this._contentFactor,
this._homeBounds.height * this._contentFactor);
}

if (this._contentFactor !== oldContentFactor || !this._homeBounds.equals(oldHomeBounds) ||
!this._contentSize.equals(oldContentSize)) {
if (this._contentFactor !== oldContentFactor ||
!this._homeBounds.equals(oldHomeBounds) ||
!this._contentSize.equals(oldContentSize)) {
/**
* Raised when the home bounds or content factor change.
* @event metrics-change
Expand Down
43 changes: 39 additions & 4 deletions test/modules/tiledimage.js
View file
Expand Up @@ -206,10 +206,12 @@
propEqual(image.getClip(), clip, 'clip is set correctly');

Util.spyOnce(viewer.drawer, 'setClip', function(rect) {
ok(true, 'drawer.setClip is called');
var pixelRatio = viewer.viewport.getContainerSize().x / image.getContentSize().x;
var canvasClip = clip.times(pixelRatio * OpenSeadragon.pixelDensityRatio);
propEqual(rect, canvasClip, 'clipping to correct rect');
var homeBounds = viewer.viewport.getHomeBounds();
var canvasClip = viewer.viewport
.viewportToViewerElementRectangle(homeBounds);
var precision = 0.00000001;
Util.assertRectangleEquals(rect, canvasClip, precision,
'clipping should be ' + canvasClip);
start();
});
});
Expand All @@ -220,6 +222,39 @@
});
});

asyncTest('getClipBounds', function() {
var clip = new OpenSeadragon.Rect(100, 200, 800, 500);

viewer.addHandler('open', function() {
var image = viewer.world.getItemAt(0);
var bounds = image.getClippedBounds();
var expectedBounds = new OpenSeadragon.Rect(1.2, 1.4, 1.6, 1);
propEqual(bounds, expectedBounds,
'getClipBounds should take clipping into account.');

image = viewer.world.getItemAt(1);
bounds = image.getClippedBounds();
expectedBounds = new OpenSeadragon.Rect(1, 2, 2, 2);
propEqual(bounds, expectedBounds,
'getClipBounds should work when no clipping set.');

start();
});

viewer.open([{
tileSource: '/test/data/testpattern.dzi',
clip: clip,
x: 1,
y: 1,
width: 2
}, {
tileSource: '/test/data/testpattern.dzi',
x: 1,
y: 2,
width: 2
}]);
});

// ----------
asyncTest('opacity', function() {

Expand Down

0 comments on commit 5785d10

Please sign in to comment.