From 2d8652046a8411cf749fb0092f9ac4d59fce94b1 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 16 Oct 2014 14:00:07 -0700 Subject: [PATCH 1/4] First stab at margins --- src/drawer.js | 2 +- src/tiledimage.js | 2 +- src/viewer.js | 3 +- src/viewport.js | 51 ++++++++++++++++++++++++---- test/demo/collections/main.js | 62 +++++++++++++++++++++++++++++++++-- 5 files changed, 108 insertions(+), 12 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index fbb8db0f..4dd999ef 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -298,7 +298,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ clear: function() { this.canvas.innerHTML = ""; if ( this.useCanvas ) { - var viewportSize = this.viewport.getContainerSize(); + var viewportSize = this.viewport.getContainerSizeWithMargins(); if( this.canvas.width != viewportSize.x || this.canvas.height != viewportSize.y ) { this.canvas.width = viewportSize.x; diff --git a/src/tiledimage.js b/src/tiledimage.js index 0134897a..8f4c5d6a 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -179,7 +179,7 @@ function updateViewport( tiledImage ) { haveDrawn = false, currentTime = $.now(), viewportSize = tiledImage.viewport.getContainerSize(), - viewportBounds = tiledImage.viewport.getBounds( true ), + viewportBounds = tiledImage.viewport.getBoundsWithMargins( true ), viewportTL = viewportBounds.getTopLeft(), viewportBR = viewportBounds.getBottomRight(), zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints( diff --git a/src/viewer.js b/src/viewer.js index 388d6b1e..1dadfacb 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1871,7 +1871,8 @@ function openTileSource( viewer, source, options ) { viewer: _this, degrees: _this.degrees, navigatorRotate: _this.navigatorRotate, - homeFillsViewer: _this.homeFillsViewer + homeFillsViewer: _this.homeFillsViewer, + margins: _this.viewportMargins }); } diff --git a/src/viewport.js b/src/viewport.js index 0c3744b0..445afa37 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -89,6 +89,16 @@ $.Viewport = function( options ) { }, options ); + this.margins = $.extend({ + left: 0, + top: 0, + right: 0, + bottom: 0 + }, this.margins || {}); + + this.containerSize.x -= this.margins.left + this.margins.right; + this.containerSize.y -= this.margins.top + this.margins.bottom; + this.centerSpringX = new $.Spring({ initial: 0, springStiffness: this.springStiffness, @@ -281,6 +291,16 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ); }, + /** + * @function + */ + getContainerSizeWithMargins: function() { + return new $.Point( + this.containerSize.x + this.margins.left + this.margins.right, + this.containerSize.y + this.margins.top + this.margins.bottom + ); + }, + /** * @function * @param {Boolean} current - Pass true for the current location; defaults to false (target location). @@ -298,18 +318,37 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ); }, + /** + * @function + * @param {Boolean} current - Pass true for the current location; defaults to false (target location). + */ + getBoundsWithMargins: function( current ) { + var bounds = this.getBounds(current); + var factor = this.containerSize.x * this.getZoom(current); + // var fullSize = this.getContainerSizeWithMargins(); + 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; + // $.console.log(this.margins.top / (this.containerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerSize.y))); + // bounds.width *= fullSize.x / this.containerSize.x; + // bounds.height *= fullSize.y / this.containerSize.y; + return bounds; + }, + /** * @function * @param {Boolean} current - Pass true for the current location; defaults to false (target location). */ getCenter: function( current ) { + var factor = this.containerSize.x * this.getZoom(current) * 2; var centerCurrent = new $.Point( - this.centerSpringX.current.value, - this.centerSpringY.current.value + this.centerSpringX.current.value - (this.margins.left / factor), + this.centerSpringY.current.value - (this.margins.top / factor) ), centerTarget = new $.Point( - this.centerSpringX.target.value, - this.centerSpringY.target.value + this.centerSpringX.target.value - (this.margins.left / factor), + this.centerSpringY.target.value - (this.margins.top / factor) ), oldZoomPixel, zoom, @@ -801,8 +840,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ widthDeltaFactor; this.containerSize = new $.Point( - newContainerSize.x, - newContainerSize.y + newContainerSize.x - (this.margins.left + this.margins.right), + newContainerSize.y - (this.margins.top + this.margins.bottom) ); if ( maintain ) { diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 9eeb757c..7691d650 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -6,15 +6,28 @@ init: function() { var self = this; - this.viewer = OpenSeadragon( { + var config = { debugMode: true, zoomPerScroll: 1.02, // showNavigator: true, id: "contentDiv", prefixUrl: "../../../build/openseadragon/images/" - } ); + }; - this.gridTest(); + config.viewportMargins = { + // top: 250, + // left: 250, + right: 250, + bottom: 250 + }; + this.viewer = OpenSeadragon(config); + + this.basicTest(); + }, + + // ---------- + basicTest: function() { + this.viewer.open("../../data/testpattern.dzi"); }, // ---------- @@ -87,6 +100,49 @@ y: 0, width: 1 }); + }, + + // ---------- + bigTest: function() { + this.viewer.open("../../data/testpattern.dzi", { + x: -2, + y: -2, + width: 6 + }); + }, + + // ---------- + cjTest: function() { + var imageKey = "e-pluribus-unum"; + var imageXML = ''; + var $xml = $($.parseXML(imageXML)); + var $image = $xml.find('Image'); + var $size = $xml.find('Size'); + + var dzi = { + Image: { + xmlns: $image.attr('xmlns'), + Url: "http://chrisjordan.com/dzi/" + imageKey + '_files/', + Format: $image.attr('Format'), + Overlap: $image.attr('Overlap'), + TileSize: $image.attr('TileSize'), + Size: { + Height: $size.attr('Height'), + Width: $size.attr('Width') + } + } + }; + + this.viewer.open(dzi, { + width: 100 + }); + }, + + // ---------- + stanfordTest: function() { + var info = {"@context":"http://library.stanford.edu/iiif/image-api/1.1/context.json","@id":"http://ids.lib.harvard.edu/ids/iiif/48530377","width":6251,"height":109517,"scale_factors":[1,2,4,8,16,32],"tile_width":256,"tile_height":256,"formats":["jpg"],"qualities":["native"],"profile":"http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level1"}; + + this.viewer.open(info); } }; From 2a7f48ef60801a5859df72e35b10e20bf68cf370 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 16 Oct 2014 15:19:05 -0700 Subject: [PATCH 2/4] Cleanup and docs for margins --- src/drawer.js | 2 +- src/openseadragon.js | 4 +++ src/tiledimage.js | 1 - src/viewport.js | 65 +++++++++++++++++++++----------------------- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 4dd999ef..fbb8db0f 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -298,7 +298,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ clear: function() { this.canvas.innerHTML = ""; if ( this.useCanvas ) { - var viewportSize = this.viewport.getContainerSizeWithMargins(); + var viewportSize = this.viewport.getContainerSize(); if( this.canvas.width != viewportSize.x || this.canvas.height != viewportSize.y ) { this.canvas.width = viewportSize.x; diff --git a/src/openseadragon.js b/src/openseadragon.js index 63f0a659..81abf94e 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -262,6 +262,10 @@ * achieved. Setting this to 0 and wrapHorizontal ( or wrapVertical ) to * true will provide the effect of an infinitely scrolling viewport. * + * @property {Object} [viewportMargins={}] + * Pushes the "home" region in from the sides by the specified amounts. + * Possible subproperties (Numbers, in screen coordinates): left, top, right, bottom. + * * @property {Number} [imageLoaderLimit=0] * The maximum number of image requests to make concurrently. By default * it is set to 0 allowing the browser to make the maximum number of diff --git a/src/tiledimage.js b/src/tiledimage.js index 8f4c5d6a..e2afbed5 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -178,7 +178,6 @@ function updateViewport( tiledImage ) { best = null, haveDrawn = false, currentTime = $.now(), - viewportSize = tiledImage.viewport.getContainerSize(), viewportBounds = tiledImage.viewport.getBoundsWithMargins( true ), viewportTL = viewportBounds.getTopLeft(), viewportBR = viewportBounds.getBottomRight(), diff --git a/src/viewport.js b/src/viewport.js index 445afa37..e629d2ee 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -96,8 +96,10 @@ $.Viewport = function( options ) { bottom: 0 }, this.margins || {}); - this.containerSize.x -= this.margins.left + this.margins.right; - 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({ initial: 0, @@ -267,7 +269,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ getMaxZoom: function() { var zoom = this.maxZoomLevel; if (!zoom) { - zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x; + zoom = this.contentSize.x * this.maxZoomPixelRatio / this.containerInnerSize.x; zoom /= this.homeBounds.width; } @@ -278,11 +280,12 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ * @function */ getAspectRatio: function() { - return this.containerSize.x / this.containerSize.y; + return this.containerInnerSize.x / this.containerInnerSize.y; }, /** * @function + * @returns {OpenSeadragon.Point} The size of the container, in screen coordinates. */ getContainerSize: function() { return new $.Point( @@ -291,19 +294,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ); }, - /** - * @function - */ - getContainerSizeWithMargins: function() { - return new $.Point( - this.containerSize.x + this.margins.left + this.margins.right, - this.containerSize.y + this.margins.top + this.margins.bottom - ); - }, - /** * @function * @param {Boolean} current - Pass true for the current location; defaults to false (target location). + * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in world coordinates. */ getBounds: function( current ) { var center = this.getCenter( current ), @@ -321,18 +315,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ /** * @function * @param {Boolean} current - Pass true for the current location; defaults to false (target location). + * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, + * including the space taken by margins, in world coordinates. */ getBoundsWithMargins: function( current ) { var bounds = this.getBounds(current); - var factor = this.containerSize.x * this.getZoom(current); + var factor = this.containerInnerSize.x * this.getZoom(current); // var fullSize = this.getContainerSizeWithMargins(); 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; - // $.console.log(this.margins.top / (this.containerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerSize.y))); - // bounds.width *= fullSize.x / this.containerSize.x; - // bounds.height *= fullSize.y / this.containerSize.y; + // $.console.log(this.margins.top / (this.containerInnerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerInnerSize.y))); + // bounds.width *= fullSize.x / this.containerInnerSize.x; + // bounds.height *= fullSize.y / this.containerInnerSize.y; return bounds; }, @@ -341,7 +337,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ * @param {Boolean} current - Pass true for the current location; defaults to false (target location). */ getCenter: function( current ) { - var factor = this.containerSize.x * this.getZoom(current) * 2; + var factor = this.containerInnerSize.x * this.getZoom(current) * 2; var centerCurrent = new $.Point( this.centerSpringX.current.value - (this.margins.left / factor), this.centerSpringY.current.value - (this.margins.top / factor) @@ -380,10 +376,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newZoomPixel = this.zoomPoint.minus( bounds.getTopLeft() ).times( - this.containerSize.x / bounds.width + this.containerInnerSize.x / bounds.width ); deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ); - deltaZoomPoints = deltaZoomPixels.divide( this.containerSize.x * zoom ); + deltaZoomPoints = deltaZoomPixels.divide( this.containerInnerSize.x * zoom ); return centerTarget.plus( deltaZoomPoints ); }, @@ -589,14 +585,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ } referencePoint = oldBounds.getTopLeft().times( - this.containerSize.x / oldBounds.width + this.containerInnerSize.x / oldBounds.width ).minus( newBounds.getTopLeft().times( - this.containerSize.x / newBounds.width + this.containerInnerSize.x / newBounds.width ) ).divide( - this.containerSize.x / oldBounds.width - - this.containerSize.x / newBounds.width + this.containerInnerSize.x / oldBounds.width - + this.containerInnerSize.x / newBounds.width ); return this.zoomTo( newZoom, referencePoint, immediately ); @@ -839,12 +835,13 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newBounds = oldBounds, widthDeltaFactor; - this.containerSize = new $.Point( - newContainerSize.x - (this.margins.left + this.margins.right), - 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 ) { + // TODO: widthDeltaFactor will always be 1; probably not what's intended widthDeltaFactor = newContainerSize.x / this.containerSize.x; newBounds.width = oldBounds.width * widthDeltaFactor; newBounds.height = newBounds.width / this.getAspectRatio(); @@ -916,7 +913,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ deltaPixelsFromPoints: function( deltaPoints, current ) { return deltaPoints.times( - this.containerSize.x * this.getZoom( current ) + this.containerInnerSize.x * this.getZoom( current ) ); }, @@ -927,7 +924,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ deltaPointsFromPixels: function( deltaPixels, current ) { return deltaPixels.divide( - this.containerSize.x * this.getZoom( current ) + this.containerInnerSize.x * this.getZoom( current ) ); }, @@ -941,7 +938,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return point.minus( bounds.getTopLeft() ).times( - this.containerSize.x / bounds.width + this.containerInnerSize.x / bounds.width ); }, @@ -953,7 +950,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ pointFromPixel: function( pixel, current ) { var bounds = this.getBounds( current ); return pixel.divide( - this.containerSize.x / bounds.width + this.containerInnerSize.x / bounds.width ).plus( bounds.getTopLeft() ); @@ -1168,7 +1165,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ viewportToImageZoom: function( viewportZoom ) { var imageWidth = this.viewer.source.dimensions.x; - var containerWidth = this.getContainerSize().x; + var containerWidth = this.containerInnerSize.x; var viewportToImageZoomRatio = containerWidth / imageWidth; return viewportZoom * viewportToImageZoomRatio; }, @@ -1186,7 +1183,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ imageToViewportZoom: function( imageZoom ) { var imageWidth = this.viewer.source.dimensions.x; - var containerWidth = this.getContainerSize().x; + var containerWidth = this.containerInnerSize.x; var viewportToImageZoomRatio = imageWidth / containerWidth; return imageZoom * viewportToImageZoomRatio; } From a14bea39aa57e3acbb281d6dd336a7c35df467c0 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Fri, 17 Oct 2014 14:27:24 -0700 Subject: [PATCH 3/4] More margins work --- src/viewport.js | 22 ++++++++++++---------- test/demo/collections/main.js | 13 +++++++------ 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/viewport.js b/src/viewport.js index e629d2ee..7abb9a01 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -321,14 +321,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ getBoundsWithMargins: function( current ) { var bounds = this.getBounds(current); var factor = this.containerInnerSize.x * this.getZoom(current); - // var fullSize = this.getContainerSizeWithMargins(); 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; - // $.console.log(this.margins.top / (this.containerInnerSize.x * this.getZoom(current)), bounds.height - (bounds.height * (fullSize.y / this.containerInnerSize.y))); - // bounds.width *= fullSize.x / this.containerInnerSize.x; - // bounds.height *= fullSize.y / this.containerInnerSize.y; return bounds; }, @@ -337,14 +333,13 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ * @param {Boolean} current - Pass true for the current location; defaults to false (target location). */ getCenter: function( current ) { - var factor = this.containerInnerSize.x * this.getZoom(current) * 2; var centerCurrent = new $.Point( - this.centerSpringX.current.value - (this.margins.left / factor), - this.centerSpringY.current.value - (this.margins.top / factor) + this.centerSpringX.current.value, + this.centerSpringY.current.value ), centerTarget = new $.Point( - this.centerSpringX.target.value - (this.margins.left / factor), - this.centerSpringY.target.value - (this.margins.top / factor) + this.centerSpringX.target.value, + this.centerSpringY.target.value ), oldZoomPixel, zoom, @@ -835,6 +830,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newBounds = oldBounds, widthDeltaFactor; + 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)) @@ -939,6 +937,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ bounds.getTopLeft() ).times( this.containerInnerSize.x / bounds.width + ).plus( + new $.Point(this.margins.left, this.margins.top) ); }, @@ -949,7 +949,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ */ pointFromPixel: function( pixel, current ) { var bounds = this.getBounds( current ); - return pixel.divide( + return pixel.minus( + new $.Point(this.margins.left, this.margins.top) + ).divide( this.containerInnerSize.x / bounds.width ).plus( bounds.getTopLeft() diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 7691d650..88c8d226 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -14,12 +14,13 @@ prefixUrl: "../../../build/openseadragon/images/" }; - config.viewportMargins = { - // top: 250, - // left: 250, - right: 250, - bottom: 250 - }; + // config.viewportMargins = { + // top: 250, + // left: 250, + // right: 250, + // bottom: 250 + // }; + this.viewer = OpenSeadragon(config); this.basicTest(); From 46cd2ab800b5478ab229295d80edafaaef6c4728 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Tue, 21 Oct 2014 17:11:09 -0700 Subject: [PATCH 4/4] 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"); },