First stab at margins

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;

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(

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
         });
     }
 

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.centerSpringX.current.value - (this.margins.left / factor),
-                this.centerSpringY.current.value
+                this.centerSpringY.current.value - (this.margins.top / factor)
             ),
             centerTarget = new $.Point(
-                this.centerSpringX.target.value,
+                this.centerSpringX.target.value - (this.margins.left / factor),
-                this.centerSpringY.target.value
+                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.x - (this.margins.left + this.margins.right),
-            newContainerSize.y
+            newContainerSize.y - (this.margins.top + this.margins.bottom)
         );
 
         if ( maintain ) {

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 = '<?xml version="1.0" encoding="UTF-8"?><Image TileSize="254" Overlap="1" Format="png" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Size Width="88560" Height="88560"/></Image>';
+            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);
         }
     };