mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-26 07:06:10 +03:00
Code Issues Projects Releases Wiki Activity

Update OpenSeadragon.Placement to be serializable.

Browse Source
This commit is contained in:
Antoine Vandecreme 2016-03-22 15:50:48 -04:00
parent e4fca14c33
commit 9c461824b3
6 changed files with 137 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/openseadragon.js
View File

@ -154,7 +154,7 @@
* created. * created.
* * placement a string to define the relative position to the viewport. * * placement a string to define the relative position to the viewport.
* Only used if no width and height are specified. Default: 'TOP_LEFT'. * 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] * @property {String} [xmlPath=null]
* <strong>DEPRECATED</strong>. A relative path to load a DZI file from the server. * <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; 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 * True if the browser supports the HTML5 canvas element

63
src/overlay.js
View File

@ -37,6 +37,8 @@
/** /**
* An enumeration of positions that an overlay may be assigned relative to * An enumeration of positions that an overlay may be assigned relative to
* the viewport. * the viewport.
* It is identical to OpenSeadragon.Placement but is kept for backward
* compatibility.
* @member OverlayPlacement * @member OverlayPlacement
* @memberof OpenSeadragon * @memberof OpenSeadragon
* @static * @static
@ -51,17 +53,7 @@
* @property {Number} BOTTOM_LEFT * @property {Number} BOTTOM_LEFT
* @property {Number} LEFT * @property {Number} LEFT
*/ */
$.OverlayPlacement = { $.OverlayPlacement = $.Placement;
CENTER: 0,
TOP_LEFT: 1,
TOP: 2,
TOP_RIGHT: 3,
RIGHT: 4,
BOTTOM_RIGHT: 5,
BOTTOM: 6,
BOTTOM_LEFT: 7,
LEFT: 8
};
/** /**
* @class Overlay * @class Overlay
@ -75,7 +67,7 @@
* is specified, the overlay will keep a constant size independently of the * is specified, the overlay will keep a constant size independently of the
* zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will * zoom. If a {@link OpenSeadragon.Rect} is specified, the overlay size will
* be adjusted when the zoom changes. * 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. * Relative position to the viewport.
* Only used if location is a {@link OpenSeadragon.Point}. * Only used if location is a {@link OpenSeadragon.Point}.
* @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw] * @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
@ -126,8 +118,7 @@
this.style = options.element.style; this.style = options.element.style;
// rects are always top-left // rects are always top-left
this.placement = options.location instanceof $.Point ? this.placement = options.location instanceof $.Point ?
options.placement : options.placement : $.Placement.TOP_LEFT;
$.OverlayPlacement.TOP_LEFT;
this.onDraw = options.onDraw; this.onDraw = options.onDraw;
this.checkResize = options.checkResize === undefined ? this.checkResize = options.checkResize === undefined ?
true : options.checkResize; true : options.checkResize;
@ -138,42 +129,23 @@
/** /**
* @function * @function
* @param {OpenSeadragon.OverlayPlacement} position * @param {OpenSeadragon.Point} position
* @param {OpenSeadragon.Point} size * @param {OpenSeadragon.Point} size
*/ */
adjust: function(position, size) { adjust: function(position, size) {
switch ( this.placement ) { var properties = $.Placement.properties[this.placement];
case $.OverlayPlacement.TOP_LEFT: if (!properties) {
break; return;
case $.OverlayPlacement.TOP: }
if (properties.isHorizontallyCentered) {
position.x -= size.x / 2; position.x -= size.x / 2;
break; } else if (properties.isRight) {
case $.OverlayPlacement.TOP_RIGHT:
position.x -= size.x;
break;
case $.OverlayPlacement.RIGHT:
position.x -= size.x; position.x -= size.x;
}
if (properties.isVerticallyCentered) {
position.y -= size.y / 2; position.y -= size.y / 2;
break; } else if (properties.isBottom) {
case $.OverlayPlacement.BOTTOM_RIGHT:
position.x -= size.x;
position.y -= size.y; 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;
} }
}, },
@ -298,7 +270,7 @@
/** /**
* @function * @function
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @param {OpenSeadragon.OverlayPlacement} position * @param {OpenSeadragon.Placement} position
*/ */
update: function( location, placement ) { update: function( location, placement ) {
this.scales = location instanceof $.Rect; this.scales = location instanceof $.Rect;
@ -310,8 +282,7 @@
); );
// rects are always top-left // rects are always top-left
this.placement = location instanceof $.Point ? this.placement = location instanceof $.Point ?
placement : placement : $.Placement.TOP_LEFT;
$.OverlayPlacement.TOP_LEFT;
}, },
/** /**

33
src/placement.js
View File

@ -47,8 +47,18 @@
* @property {OpenSeadragon.Placement} BOTTOM_LEFT * @property {OpenSeadragon.Placement} BOTTOM_LEFT
* @property {OpenSeadragon.Placement} LEFT * @property {OpenSeadragon.Placement} LEFT
*/ */
$.Placement = { $.Placement = $.freezeObject({
CENTER: { 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, isLeft: false,
isHorizontallyCentered: true, isHorizontallyCentered: true,
isRight: false, isRight: false,
@ -56,7 +66,7 @@
isVerticallyCentered: true, isVerticallyCentered: true,
isBottom: false isBottom: false
}, },
TOP_LEFT: { 1: {
isLeft: true, isLeft: true,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: false, isRight: false,
@ -64,7 +74,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: false isBottom: false
}, },
TOP: { 2: {
isLeft: false, isLeft: false,
isHorizontallyCentered: true, isHorizontallyCentered: true,
isRight: false, isRight: false,
@ -72,7 +82,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: false isBottom: false
}, },
TOP_RIGHT: { 3: {
isLeft: false, isLeft: false,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: true, isRight: true,
@ -80,7 +90,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: false isBottom: false
}, },
RIGHT: { 4: {
isLeft: false, isLeft: false,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: true, isRight: true,
@ -88,7 +98,7 @@
isVerticallyCentered: true, isVerticallyCentered: true,
isBottom: false isBottom: false
}, },
BOTTOM_RIGHT: { 5: {
isLeft: false, isLeft: false,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: true, isRight: true,
@ -96,7 +106,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: true isBottom: true
}, },
BOTTOM: { 6: {
isLeft: false, isLeft: false,
isHorizontallyCentered: true, isHorizontallyCentered: true,
isRight: false, isRight: false,
@ -104,7 +114,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: true isBottom: true
}, },
BOTTOM_LEFT: { 7: {
isLeft: true, isLeft: true,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: false, isRight: false,
@ -112,7 +122,7 @@
isVerticallyCentered: false, isVerticallyCentered: false,
isBottom: true isBottom: true
}, },
LEFT: { 8: {
isLeft: true, isLeft: true,
isHorizontallyCentered: false, isHorizontallyCentered: false,
isRight: false, isRight: false,
@ -120,6 +130,7 @@
isVerticallyCentered: true, isVerticallyCentered: true,
isBottom: false isBottom: false
} }
}; }
});
}(OpenSeadragon)); }(OpenSeadragon));

9
src/tiledimage.js
View File

@ -556,13 +556,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/ */
fitInBounds: function(bounds, anchor, immediately) { fitInBounds: function(bounds, anchor, immediately) {
anchor = anchor || $.Placement.CENTER; anchor = anchor || $.Placement.CENTER;
var anchorProperties = $.Placement.properties[anchor];
if (bounds.getAspectRatio() > this.contentAspectX) { if (bounds.getAspectRatio() > this.contentAspectX) {
// We will have margins on the X axis // We will have margins on the X axis
var targetWidth = bounds.height * this.contentAspectX; var targetWidth = bounds.height * this.contentAspectX;
var marginLeft = 0; var marginLeft = 0;
if (anchor.isHorizontallyCentered) { if (anchorProperties.isHorizontallyCentered) {
marginLeft = (bounds.width - targetWidth) / 2; marginLeft = (bounds.width - targetWidth) / 2;
} else if (anchor.isRight) { } else if (anchorProperties.isRight) {
marginLeft = bounds.width - targetWidth; marginLeft = bounds.width - targetWidth;
} }
this.setPosition( this.setPosition(
@ -573,9 +574,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// We will have margins on the Y axis // We will have margins on the Y axis
var targetHeight = bounds.width / this.contentAspectX; var targetHeight = bounds.width / this.contentAspectX;
var marginTop = 0; var marginTop = 0;
if (anchor.isVerticallyCentered) { if (anchorProperties.isVerticallyCentered) {
marginTop = (bounds.height - targetHeight) / 2; marginTop = (bounds.height - targetHeight) / 2;
} else if (anchor.isBottom) { } else if (anchorProperties.isBottom) {
marginTop = bounds.height - targetHeight; marginTop = bounds.height - targetHeight;
} }
this.setPosition( this.setPosition(

12
src/viewer.js
View File

@ -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 * the element which will be overlayed. Or an Object specifying the configuration for the overlay
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location. * 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 * viewport which the location coordinates will be treated as relative
* to. * to.
* @param {function} onDraw - If supplied the callback is called when the overlay * @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 {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {Element} element - The overlay element. * @property {Element} element - The overlay element.
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location * @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @property {OpenSeadragon.OverlayPlacement} placement * @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent( 'add-overlay', { this.raiseEvent( 'add-overlay', {
@ -1846,7 +1846,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* the element which is overlayed. * the element which is overlayed.
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
* rectangle which will be overlayed. This is a viewport relative location. * 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 * viewport which the location coordinates will be treated as relative
* to. * to.
* @return {OpenSeadragon.Viewer} Chainable. * @return {OpenSeadragon.Viewer} Chainable.
@ -1872,7 +1872,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Viewer which raised the event. * Viewer which raised the event.
* @property {Element} element * @property {Element} element
* @property {OpenSeadragon.Point|OpenSeadragon.Rect} location * @property {OpenSeadragon.Point|OpenSeadragon.Rect} location
* @property {OpenSeadragon.OverlayPlacement} placement * @property {OpenSeadragon.Placement} placement
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent( 'update-overlay', { this.raiseEvent( 'update-overlay', {
@ -2222,8 +2222,8 @@ function getOverlayObject( viewer, overlay ) {
} }
var placement = overlay.placement; var placement = overlay.placement;
if ( placement && ( $.type( placement ) === "string" ) ) { if (placement && $.type(placement) === "string") {
placement = $.OverlayPlacement[ overlay.placement.toUpperCase() ]; placement = $.Placement[overlay.placement.toUpperCase()];
} }
return new $.Overlay({ return new $.Overlay({

6
test/modules/overlays.js
View File

@ -397,6 +397,7 @@
checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ), checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ),
"with TOP_LEFT placement." ); "with TOP_LEFT placement." );
// Check that legacy OpenSeadragon.OverlayPlacement is still working
viewer.updateOverlay( "overlay", scalableOverlayLocation, viewer.updateOverlay( "overlay", scalableOverlayLocation,
OpenSeadragon.OverlayPlacement.CENTER ); OpenSeadragon.OverlayPlacement.CENTER );
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation, viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
@ -407,10 +408,11 @@
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ), checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
"with CENTER placement." ); "with CENTER placement." );
// Check that new OpenSeadragon.Placement is working
viewer.updateOverlay( "overlay", scalableOverlayLocation, viewer.updateOverlay( "overlay", scalableOverlayLocation,
OpenSeadragon.OverlayPlacement.BOTTOM_RIGHT ); OpenSeadragon.Placement.BOTTOM_RIGHT );
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation, viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
OpenSeadragon.OverlayPlacement.BOTTOM_RIGHT ); OpenSeadragon.Placement.BOTTOM_RIGHT );
setTimeout( function() { setTimeout( function() {
checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." ); checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." );
checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ), checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ),