From 46cd2ab800b5478ab229295d80edafaaef6c4728 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Tue, 21 Oct 2014 17:11:09 -0700
Subject: [PATCH] Fixed issue with top/left margins; cleaned up naming
---
src/drawer.js | 30 +++++++++++++
src/viewport.js | 82 ++++++++++++++++++-----------------
test/demo/collections/main.js | 35 ++++++++++++---
3 files changed, 102 insertions(+), 45 deletions(-)
diff --git a/src/drawer.js b/src/drawer.js
index fbb8db0f..fd1cd730 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -324,6 +324,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
}
},
+ /**
+ * @private
+ */
drawDebugInfo: function( tile, count, i ){
if ( this.useCanvas ) {
this.context.save();
@@ -396,6 +399,30 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
}
},
+ /**
+ * @private
+ */
+ debugRect: function(rect) {
+ if ( this.useCanvas ) {
+ this.context.save();
+ this.context.lineWidth = 2;
+ this.context.strokeStyle = this.debugGridColor;
+ this.context.fillStyle = this.debugGridColor;
+
+ this.context.strokeRect(
+ rect.x,
+ rect.y,
+ rect.width,
+ rect.height
+ );
+
+ this.context.restore();
+ }
+ },
+
+ /**
+ * @private
+ */
_offsetForRotation: function( tile, degrees ){
var cx = this.canvas.width / 2,
cy = this.canvas.height / 2,
@@ -410,6 +437,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
tile.position.y = py;
},
+ /**
+ * @private
+ */
_restoreRotationChanges: function( tile ){
var cx = this.canvas.width / 2,
cy = this.canvas.height / 2,
diff --git a/src/viewport.js b/src/viewport.js
index 7abb9a01..fab50455 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -63,6 +63,15 @@ $.Viewport = function( options ) {
delete options.config;
}
+ this._margins = $.extend({
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0
+ }, options.margins || {});
+
+ delete options.margins;
+
$.extend( true, this, {
//required settings
@@ -89,16 +98,9 @@ $.Viewport = function( options ) {
}, options );
- this.margins = $.extend({
- left: 0,
- top: 0,
- right: 0,
- bottom: 0
- }, this.margins || {});
-
- this.containerInnerSize = new $.Point(
- Math.max(1, this.containerSize.x - (this.margins.left + this.margins.right)),
- Math.max(1, this.containerSize.y - (this.margins.top + this.margins.bottom))
+ this._containerInnerSize = new $.Point(
+ Math.max(1, this.containerSize.x - (this._margins.left + this._margins.right)),
+ Math.max(1, this.containerSize.y - (this._margins.top + this._margins.bottom))
);
this.centerSpringX = new $.Spring({
@@ -269,7 +271,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
getMaxZoom: function() {
var zoom = this.maxZoomLevel;
if (!zoom) {
- zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerInnerSize.x;
+ zoom = this.contentSize.x * this.maxZoomPixelRatio / this._containerInnerSize.x;
zoom /= this.homeBounds.width;
}
@@ -280,7 +282,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
* @function
*/
getAspectRatio: function() {
- return this.containerInnerSize.x / this.containerInnerSize.y;
+ return this._containerInnerSize.x / this._containerInnerSize.y;
},
/**
@@ -320,11 +322,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
*/
getBoundsWithMargins: function( current ) {
var bounds = this.getBounds(current);
- var factor = this.containerInnerSize.x * this.getZoom(current);
- bounds.x -= this.margins.left / factor;
- bounds.y -= this.margins.top / factor;
- bounds.width += (this.margins.left + this.margins.right) / factor;
- bounds.height += (this.margins.top + this.margins.bottom) / factor;
+ var factor = this._containerInnerSize.x * this.getZoom(current);
+ bounds.x -= this._margins.left / factor;
+ bounds.y -= this._margins.top / factor;
+ bounds.width += (this._margins.left + this._margins.right) / factor;
+ bounds.height += (this._margins.top + this._margins.bottom) / factor;
return bounds;
},
@@ -368,13 +370,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
height
);
- newZoomPixel = this.zoomPoint.minus(
- bounds.getTopLeft()
- ).times(
- this.containerInnerSize.x / bounds.width
- );
+ newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
- deltaZoomPoints = deltaZoomPixels.divide( this.containerInnerSize.x * zoom );
+ deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
return centerTarget.plus( deltaZoomPoints );
},
@@ -580,14 +578,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
}
referencePoint = oldBounds.getTopLeft().times(
- this.containerInnerSize.x / oldBounds.width
+ this._containerInnerSize.x / oldBounds.width
).minus(
newBounds.getTopLeft().times(
- this.containerInnerSize.x / newBounds.width
+ this._containerInnerSize.x / newBounds.width
)
).divide(
- this.containerInnerSize.x / oldBounds.width -
- this.containerInnerSize.x / newBounds.width
+ this._containerInnerSize.x / oldBounds.width -
+ this._containerInnerSize.x / newBounds.width
);
return this.zoomTo( newZoom, referencePoint, immediately );
@@ -833,9 +831,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
this.containerSize.x = newContainerSize.x;
this.containerSize.y = newContainerSize.y;
- this.containerInnerSize = new $.Point(
- Math.max(1, newContainerSize.x - (this.margins.left + this.margins.right)),
- Math.max(1, newContainerSize.y - (this.margins.top + this.margins.bottom))
+ this._containerInnerSize = new $.Point(
+ Math.max(1, newContainerSize.x - (this._margins.left + this._margins.right)),
+ Math.max(1, newContainerSize.y - (this._margins.top + this._margins.bottom))
);
if ( maintain ) {
@@ -911,7 +909,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
*/
deltaPixelsFromPoints: function( deltaPoints, current ) {
return deltaPoints.times(
- this.containerInnerSize.x * this.getZoom( current )
+ this._containerInnerSize.x * this.getZoom( current )
);
},
@@ -922,7 +920,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
*/
deltaPointsFromPixels: function( deltaPixels, current ) {
return deltaPixels.divide(
- this.containerInnerSize.x * this.getZoom( current )
+ this._containerInnerSize.x * this.getZoom( current )
);
},
@@ -932,13 +930,19 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
* @param {Boolean} current - Pass true for the current location; defaults to false (target location).
*/
pixelFromPoint: function( point, current ) {
- var bounds = this.getBounds( current );
+ return this._pixelFromPoint(point, this.getBounds( current ));
+ },
+
+ /**
+ * @private
+ */
+ _pixelFromPoint: function( point, bounds ) {
return point.minus(
bounds.getTopLeft()
).times(
- this.containerInnerSize.x / bounds.width
+ this._containerInnerSize.x / bounds.width
).plus(
- new $.Point(this.margins.left, this.margins.top)
+ new $.Point(this._margins.left, this._margins.top)
);
},
@@ -950,9 +954,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
pointFromPixel: function( pixel, current ) {
var bounds = this.getBounds( current );
return pixel.minus(
- new $.Point(this.margins.left, this.margins.top)
+ new $.Point(this._margins.left, this._margins.top)
).divide(
- this.containerInnerSize.x / bounds.width
+ this._containerInnerSize.x / bounds.width
).plus(
bounds.getTopLeft()
);
@@ -1167,7 +1171,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
*/
viewportToImageZoom: function( viewportZoom ) {
var imageWidth = this.viewer.source.dimensions.x;
- var containerWidth = this.containerInnerSize.x;
+ var containerWidth = this._containerInnerSize.x;
var viewportToImageZoomRatio = containerWidth / imageWidth;
return viewportZoom * viewportToImageZoomRatio;
},
@@ -1185,7 +1189,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
*/
imageToViewportZoom: function( imageZoom ) {
var imageWidth = this.viewer.source.dimensions.x;
- var containerWidth = this.containerInnerSize.x;
+ var containerWidth = this._containerInnerSize.x;
var viewportToImageZoomRatio = imageWidth / containerWidth;
return imageZoom * viewportToImageZoomRatio;
}
diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js
index 88c8d226..7ae66204 100644
--- a/test/demo/collections/main.js
+++ b/test/demo/collections/main.js
@@ -14,20 +14,43 @@
prefixUrl: "../../../build/openseadragon/images/"
};
- // config.viewportMargins = {
- // top: 250,
- // left: 250,
- // right: 250,
- // bottom: 250
- // };
+ var testMargins = false;
+
+ var margins;
+
+ if (testMargins) {
+ margins = {
+ top: 250,
+ left: 250,
+ right: 250,
+ bottom: 250
+ };
+
+ config.viewportMargins = margins;
+ }
this.viewer = OpenSeadragon(config);
+ if (testMargins) {
+ this.viewer.addHandler('animation', function() {
+ var box = new OpenSeadragon.Rect(margins.left, margins.top,
+ $('#contentDiv').width() - (margins.left + margins.right),
+ $('#contentDiv').height() - (margins.top + margins.bottom));
+
+ self.viewer.drawer.debugRect(box);
+ });
+ }
+
this.basicTest();
},
// ----------
basicTest: function() {
+ var self = this;
+
+ this.viewer.addHandler('open', function() {
+ });
+
this.viewer.open("../../data/testpattern.dzi");
},