Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TiledImage.fitInBounds method. #888

Merged
merged 4 commits into from Mar 24, 2016
Merged
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Update OpenSeadragon.Placement to be serializable.

  • Loading branch information...
avandecreme committed Mar 22, 2016
commit 9c461824b3b038e855efd4567fa3e6a7d1f29498
@@ -154,7 +154,7 @@
* created.
* * placement a string to define the relative position to the viewport.
* Only used if no width and height are specified. Default: 'TOP_LEFT'.
* See {@link OpenSeadragon.OverlayPlacement} for possible values.
* See {@link OpenSeadragon.Placement} for possible values.
*
* @property {String} [xmlPath=null]
* <strong>DEPRECATED</strong>. A relative path to load a DZI file from the server.
@@ -842,6 +842,21 @@ if (typeof define === 'function' && define.amd) {
return true;
};

/**
* Shim around Object.freeze. Does nothing if Object.freeze is not supported.
* @param {Object} obj The object to freeze.
* @return {Object} obj The frozen object.
*/
$.freezeObject = function(obj) {
if (Object.freeze) {
$.freezeObject = Object.freeze;
} else {
$.freezeObject = function(obj) {
return obj;
};
}
return $.freezeObject(obj);
};

/**
* True if the browser supports the HTML5 canvas element
@@ -37,6 +37,8 @@
/**
* An enumeration of positions that an overlay may be assigned relative to
* the viewport.
* It is identical to OpenSeadragon.Placement but is kept for backward
* compatibility.
* @member OverlayPlacement
* @memberof OpenSeadragon
* @static
@@ -51,17 +53,7 @@
* @property {Number} BOTTOM_LEFT
* @property {Number} LEFT
*/
$.OverlayPlacement = {
CENTER: 0,
TOP_LEFT: 1,
TOP: 2,
TOP_RIGHT: 3,
RIGHT: 4,
BOTTOM_RIGHT: 5,
BOTTOM: 6,
BOTTOM_LEFT: 7,
LEFT: 8
};
$.OverlayPlacement = $.Placement;

/**
* @class Overlay
@@ -75,7 +67,7 @@
* is specified, the overlay will keep a constant size independently of the
* zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will
* be adjusted when the zoom changes.
* @param {OpenSeadragon.OverlayPlacement} [options.placement=OpenSeadragon.OverlayPlacement.TOP_LEFT]
* @param {OpenSeadragon.Placement} [options.placement=OpenSeadragon.Placement.TOP_LEFT]
* Relative position to the viewport.
* Only used if location is a {@link OpenSeadragon.Point}.
* @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
@@ -126,8 +118,7 @@
this.style = options.element.style;
// rects are always top-left
this.placement = options.location instanceof $.Point ?
options.placement :
$.OverlayPlacement.TOP_LEFT;
options.placement : $.Placement.TOP_LEFT;
this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ?
true : options.checkResize;
@@ -138,42 +129,23 @@

/**
* @function
* @param {OpenSeadragon.OverlayPlacement} position
* @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size
*/
adjust: function( position, size ) {
switch ( this.placement ) {
case $.OverlayPlacement.TOP_LEFT:
break;
case $.OverlayPlacement.TOP:
position.x -= size.x / 2;
break;
case $.OverlayPlacement.TOP_RIGHT:
position.x -= size.x;
break;
case $.OverlayPlacement.RIGHT:
position.x -= size.x;
position.y -= size.y / 2;
break;
case $.OverlayPlacement.BOTTOM_RIGHT:
position.x -= size.x;
position.y -= size.y;
break;
case $.OverlayPlacement.BOTTOM:
position.x -= size.x / 2;
position.y -= size.y;
break;
case $.OverlayPlacement.BOTTOM_LEFT:
position.y -= size.y;
break;
case $.OverlayPlacement.LEFT:
position.y -= size.y / 2;
break;
default:
case $.OverlayPlacement.CENTER:
position.x -= size.x / 2;
position.y -= size.y / 2;
break;
adjust: function(position, size) {
var properties = $.Placement.properties[this.placement];
if (!properties) {
return;
}
if (properties.isHorizontallyCentered) {
position.x -= size.x / 2;
} else if (properties.isRight) {
position.x -= size.x;
}
if (properties.isVerticallyCentered) {
position.y -= size.y / 2;
} else if (properties.isBottom) {
position.y -= size.y;
}
},

@@ -298,7 +270,7 @@
/**
* @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @param {OpenSeadragon.OverlayPlacement} position
* @param {OpenSeadragon.Placement} position
*/
update: function( location, placement ) {
this.scales = location instanceof $.Rect;
@@ -310,8 +282,7 @@
);
// rects are always top-left
this.placement = location instanceof $.Point ?
placement :
$.OverlayPlacement.TOP_LEFT;
placement : $.Placement.TOP_LEFT;
},

/**
@@ -47,79 +47,90 @@
* @property {OpenSeadragon.Placement} BOTTOM_LEFT
* @property {OpenSeadragon.Placement} LEFT
*/
$.Placement = {
CENTER: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: false,
isVerticallyCentered: true,
isBottom: false
},
TOP_LEFT: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
TOP: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
TOP_RIGHT: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
RIGHT: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: false,
isVerticallyCentered: true,
isBottom: false
},
BOTTOM_RIGHT: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
BOTTOM: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
BOTTOM_LEFT: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
LEFT: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: false,
isVerticallyCentered: true,
isBottom: false
$.Placement = $.freezeObject({
CENTER: 0,
TOP_LEFT: 1,
TOP: 2,
TOP_RIGHT: 3,
RIGHT: 4,
BOTTOM_RIGHT: 5,
BOTTOM: 6,
BOTTOM_LEFT: 7,
LEFT: 8,
properties: {
0: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: false,
isVerticallyCentered: true,
isBottom: false
},
1: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
2: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
3: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: true,
isVerticallyCentered: false,
isBottom: false
},
4: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: false,
isVerticallyCentered: true,
isBottom: false
},
5: {
isLeft: false,
isHorizontallyCentered: false,
isRight: true,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
6: {
isLeft: false,
isHorizontallyCentered: true,
isRight: false,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
7: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: false,
isVerticallyCentered: false,
isBottom: true
},
8: {
isLeft: true,
isHorizontallyCentered: false,
isRight: false,
isTop: false,
isVerticallyCentered: true,
isBottom: false
}
}
};
});

}(OpenSeadragon));
@@ -556,13 +556,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/
fitInBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER;
var anchorProperties = $.Placement.properties[anchor];
if (bounds.getAspectRatio() > this.contentAspectX) {
// We will have margins on the X axis
var targetWidth = bounds.height * this.contentAspectX;
var marginLeft = 0;
if (anchor.isHorizontallyCentered) {
if (anchorProperties.isHorizontallyCentered) {
marginLeft = (bounds.width - targetWidth) / 2;
} else if (anchor.isRight) {
} else if (anchorProperties.isRight) {
marginLeft = bounds.width - targetWidth;
}
this.setPosition(
@@ -573,9 +574,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// We will have margins on the Y axis
var targetHeight = bounds.width / this.contentAspectX;
var marginTop = 0;
if (anchor.isVerticallyCentered) {
if (anchorProperties.isVerticallyCentered) {
marginTop = (bounds.height - targetHeight) / 2;
} else if (anchor.isBottom) {
} else if (anchorProperties.isBottom) {
marginTop = bounds.height - targetHeight;
}
this.setPosition(
@@ -1785,7 +1785,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* the element which will be overlayed. Or an Object specifying the configuration for the overlay
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.OverlayPlacement} placement - The position of the
* @param {OpenSeadragon.Placement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
* @param {function} onDraw - If supplied the callback is called when the overlay
@@ -1827,7 +1827,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {Element} element - The overlay element.
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @property {OpenSeadragon.OverlayPlacement} placement
* @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'add-overlay', {
@@ -1846,7 +1846,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* the element which is overlayed.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location.
* @param {OpenSeadragon.OverlayPlacement} placement - The position of the
* @param {OpenSeadragon.Placement} placement - The position of the
* viewport which the location coordinates will be treated as relative
* to.
* @return {OpenSeadragon.Viewer} Chainable.
@@ -1872,7 +1872,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Viewer which raised the event.
* @property {Element} element
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @property {OpenSeadragon.OverlayPlacement} placement
* @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'update-overlay', {
@@ -2222,8 +2222,8 @@ function getOverlayObject( viewer, overlay ) {
}

var placement = overlay.placement;
if ( placement && ( $.type( placement ) === "string" ) ) {
placement = $.OverlayPlacement[ overlay.placement.toUpperCase() ];
if (placement && $.type(placement) === "string") {
placement = $.Placement[overlay.placement.toUpperCase()];
}

return new $.Overlay({
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.