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

finsihed removing psuedo private methods from Drawer and added many jsdoc strings, labeled 0.8.26

Browse Source
This commit is contained in:
thatcher 2012-01-31 15:59:09 -05:00
parent 012255d622
commit 2410b01943
13 changed files with 2766 additions and 1808 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.properties
View File

@ -6,7 +6,7 @@
PROJECT: openseadragon
BUILD_MAJOR: 0
BUILD_MINOR: 8
BUILD_ID: 24
BUILD_ID: 26
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}

2287
openseadragon.js
View File

File diff suppressed because it is too large Load Diff

37
src/button.js
View File

@ -18,12 +18,34 @@ $.ButtonState = {
* as fading the bottons out when the user has not interacted with them
* for a specified period.
* @class
* @extends OpenSeadragon.EventHandler
* @param {Object} options
* @param {String} options.tooltip
* @param {String} options.tooltip Provides context help for the button we the
* user hovers over it.
* @param {String} options.srcRest URL of image to use in 'rest' state
* @param {String} options.srcGroup URL of image to use in 'up' state
* @param {String} options.srcHover URL of image to use in 'hover' state
* @param {String} options.srcDown URL of image to use in 'domn' state
* @param {Element} [options.element] Element to use as a container for the
* button.
* @property {String} tooltip Provides context help for the button we the
* user hovers over it.
* @property {String} srcRest URL of image to use in 'rest' state
* @property {String} srcGroup URL of image to use in 'up' state
* @property {String} srcHover URL of image to use in 'hover' state
* @property {String} srcDown URL of image to use in 'domn' state
* @property {Object} config Configurable settings for this button.
* @property {Element} [element] Element to use as a container for the
* button.
* @property {Number} fadeDelay How long to wait before fading
* @property {Number} fadeLength How long should it take to fade the button.
* @property {Number} fadeBeginTime When the button last began to fade.
* @property {Boolean} shouldFade Whether this button should fade after user
* stops interacting with the viewport.
this.fadeDelay = 0; // begin fading immediately
this.fadeLength = 2000; // fade over a period of 2 seconds
this.fadeBeginTime = null;
this.shouldFade = false;
*/
$.Button = function( options ) {
@ -36,6 +58,7 @@ $.Button = function( options ) {
this.srcGroup = options.srcGroup;
this.srcHover = options.srcHover;
this.srcDown = options.srcDown;
//TODO: make button elements accessible by making them a-tags
// maybe even consider basing them on the element and adding
// methods jquery-style.
@ -159,10 +182,22 @@ $.Button = function( options ) {
$.extend( $.Button.prototype, $.EventHandler.prototype, {
/**
* TODO: Determine what this function is intended to do and if it's actually
* useful as an API point.
* @function
* @name OpenSeadragon.Button.prototype.notifyGroupEnter
*/
notifyGroupEnter: function() {
inTo( this, $.ButtonState.GROUP );
},
/**
* TODO: Determine what this function is intended to do and if it's actually
* useful as an API point.
* @function
* @name OpenSeadragon.Button.prototype.notifyGroupExit
*/
notifyGroupExit: function() {
outTo( this, $.ButtonState.REST );
}

41
src/buttongroup.js
View File

@ -1,18 +1,25 @@
(function( $ ){
/**
* @class
*
* Manages events on groups of buttons.
*
* options: {
* buttons: Array of buttons * required,
* group: Element to use as the container,
* config: Object with Viewer settings ( TODO: is this actually used anywhere? )
* enter: Function callback for when the mouse enters group
* exit: Function callback for when mouse leaves the group
* release: Function callback for when mouse is released
* }
* @class
* @param {Object} options - a dictionary of settings applied against the entire
* group of buttons
* @param {Array} options.buttons Array of buttons
* @param {Element} [options.group] Element to use as the container,
* @param {Object} options.config Object with Viewer settings ( TODO: is
* this actually used anywhere? )
* @param {Function} [options.enter] Function callback for when the mouse
* enters group
* @param {Function} [options.exit] Function callback for when mouse leaves
* the group
* @param {Function} [options.release] Function callback for when mouse is
* released
* @property {Array} buttons - An array containing the buttons themselves.
* @property {Element} element - The shared container for the buttons.
* @property {Object} config - Configurable settings for the group of buttons.
* @property {OpenSeadragon.MouseTracker} tracker - Tracks mouse events accross
* the group of buttons.
**/
$.ButtonGroup = function( options ) {
@ -68,10 +75,22 @@ $.ButtonGroup = function( options ) {
$.ButtonGroup.prototype = {
/**
* TODO: Figure out why this is used on the public API and if a more useful
* api can be created.
* @function
* @name OpenSeadragon.ButtonGroup.prototype.emulateEnter
*/
emulateEnter: function() {
this.tracker.enter();
},
/**
* TODO: Figure out why this is used on the public API and if a more useful
* api can be created.
* @function
* @name OpenSeadragon.ButtonGroup.prototype.emulateExit
*/
emulateExit: function() {
this.tracker.exit();
}

12
src/displayrectangle.js
View File

@ -2,7 +2,19 @@
(function( $ ){
/**
* A display rectanlge is very similar to the OpenSeadragon.Rect but adds two
* fields, 'minLevel' and 'maxLevel' which denote the supported zoom levels
* for this rectangle.
* @class
* @extends OpenSeadragon.Rect
* @param {Number} x The vector component 'x'.
* @param {Number} y The vector component 'y'.
* @param {Number} width The vector component 'height'.
* @param {Number} height The vector component 'width'.
* @param {Number} minLevel The lowest zoom level supported.
* @param {Number} maxLevel The highest zoom level supported.
* @property {Number} minLevel The lowest zoom level supported.
* @property {Number} maxLevel The highest zoom level supported.
*/
$.DisplayRect = function( x, y, width, height, minLevel, maxLevel ) {
$.Rect.apply( this, [ x, y, width, height ] );

1258
src/drawer.js
View File

File diff suppressed because it is too large Load Diff

208
src/dzitilesource.js
View File

@ -3,7 +3,18 @@
/**
* @class
*/
* @extends OpenSeadragon.TileSource
* @param {Number} width
* @param {Number} height
* @param {Number} tileSize
* @param {Number} tileOverlap
* @param {String} tilesUrl
* @param {String} fileFormat
* @param {OpenSeadragon.DisplayRect[]} displayRects
* @property {String} tilesUrl
* @property {String} fileFormat
* @property {OpenSeadragon.DisplayRect[]} displayRects
*/
$.DziTileSource = function( width, height, tileSize, tileOverlap, tilesUrl, fileFormat, displayRects ) {
var i,
rect,
@ -31,11 +42,25 @@ $.DziTileSource = function( width, height, tileSize, tileOverlap, tilesUrl, file
};
$.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
/**
* @function
* @name OpenSeadragon.DziTileSource.prototype.getTileUrl
* @param {Number} level
* @param {Number} x
* @param {Number} y
*/
getTileUrl: function( level, x, y ) {
return [ this.tilesUrl, level, '/', x, '_', y, '.', this.fileFormat ].join( '' );
},
/**
* @function
* @name OpenSeadragon.DziTileSource.prototype.tileExists
* @param {Number} level
* @param {Number} x
* @param {Number} y
*/
tileExists: function( level, x, y ) {
var rects = this._levelRects[ level ],
rect,
@ -77,185 +102,6 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
}
});
/**
* @static
*/
$.DziTileSourceHelper = {
createFromXml: function( xmlUrl, xmlString, callback ) {
var async = typeof (callback) == "function",
error = null,
urlParts,
filename,
lastDot,
tilesUrl,
handler;
if ( !xmlUrl ) {
this.error = $.getString( "Errors.Empty" );
if ( async ) {
window.setTimeout( function() {
callback( null, error );
}, 1 );
return null;
}
throw new Error( error );
}
urlParts = xmlUrl.split( '/' );
filename = urlParts[ urlParts.length - 1 ];
lastDot = filename.lastIndexOf( '.' );
if ( lastDot > -1 ) {
urlParts[ urlParts.length - 1 ] = filename.slice( 0, lastDot );
}
tilesUrl = urlParts.join( '/' ) + "_files/";
function finish( func, obj ) {
try {
return func( obj, tilesUrl );
} catch ( e ) {
if ( async ) {
return null;
} else {
throw e;
}
}
}
if ( async ) {
if ( xmlString ) {
handler = $.delegate( this, this.processXml );
window.setTimeout( function() {
var source = finish( handler, $.parseXml( xmlString ) );
// call after finish sets error
callback( source, error );
}, 1);
} else {
handler = $.delegate( this, this.processResponse );
$.makeAjaxRequest( xmlUrl, function( xhr ) {
var source = finish( handler, xhr );
// call after finish sets error
callback( source, error );
});
}
return null;
}
if ( xmlString ) {
return finish(
$.delegate( this, this.processXml ),
$.parseXml( xmlString )
);
} else {
return finish(
$.delegate( this, this.processResponse ),
$.makeAjaxRequest( xmlUrl )
);
}
},
processResponse: function( xhr, tilesUrl ) {
var status,
statusText,
doc = null;
if ( !xhr ) {
throw new Error( $.getString( "Errors.Security" ) );
} else if ( xhr.status !== 200 && xhr.status !== 0 ) {
status = xhr.status;
statusText = ( status == 404 ) ?
"Not Found" :
xhr.statusText;
throw new Error( $.getString( "Errors.Status", status, statusText ) );
}
if ( xhr.responseXML && xhr.responseXML.documentElement ) {
doc = xhr.responseXML;
} else if ( xhr.responseText ) {
doc = $.parseXml( xhr.responseText );
}
return this.processXml( doc, tilesUrl );
},
processXml: function( xmlDoc, tilesUrl ) {
if ( !xmlDoc || !xmlDoc.documentElement ) {
throw new Error( $.getString( "Errors.Xml" ) );
}
var root = xmlDoc.documentElement,
rootName = root.tagName;
if ( rootName == "Image" ) {
try {
return this.processDzi( root, tilesUrl );
} catch ( e ) {
throw (e instanceof Error) ?
e :
new Error( $.getString("Errors.Dzi") );
}
} else if ( rootName == "Collection" ) {
throw new Error( $.getString( "Errors.Dzc" ) );
} else if ( rootName == "Error" ) {
return this.processError( root );
}
throw new Error( $.getString( "Errors.Dzi" ) );
},
processDzi: function( imageNode, tilesUrl ) {
var fileFormat = imageNode.getAttribute( "Format" ),
sizeNode = imageNode.getElementsByTagName( "Size" )[ 0 ],
dispRectNodes = imageNode.getElementsByTagName( "DisplayRect" ),
width = parseInt( sizeNode.getAttribute( "Width" ) ),
height = parseInt( sizeNode.getAttribute( "Height" ) ),
tileSize = parseInt( imageNode.getAttribute( "TileSize" ) ),
tileOverlap = parseInt( imageNode.getAttribute( "Overlap" ) ),
dispRects = [],
dispRectNode,
rectNode,
i;
if ( !$.imageFormatSupported( fileFormat ) ) {
throw new Error(
$.getString( "Errors.ImageFormat", fileFormat.toUpperCase() )
);
}
for ( i = 0; i < dispRectNodes.length; i++ ) {
dispRectNode = dispRectNodes[ i ];
rectNode = dispRectNode.getElementsByTagName( "Rect" )[ 0 ];
dispRects.push( new $.DisplayRect(
parseInt( rectNode.getAttribute( "X" ) ),
parseInt( rectNode.getAttribute( "Y" ) ),
parseInt( rectNode.getAttribute( "Width" ) ),
parseInt( rectNode.getAttribute( "Height" ) ),
0, // ignore MinLevel attribute, bug in Deep Zoom Composer
parseInt( dispRectNode.getAttribute( "MaxLevel" ) )
));
}
return new $.DziTileSource(
width,
height,
tileSize,
tileOverlap,
tilesUrl,
fileFormat,
dispRects
);
},
processError: function( errorNode ) {
var messageNode = errorNode.getElementsByTagName( "Message" )[ 0 ],
message = messageNode.firstChild.nodeValue;
throw new Error(message);
}
};
}( OpenSeadragon ));

352
src/openseadragon.js
View File

@ -389,27 +389,13 @@ OpenSeadragon = window.OpenSeadragon || (function(){
}
return element;
},
/**
* @function
* @name OpenSeadragon.getOffsetParent
* @param {Element} element
* @param {Boolean} [isFixed]
* @returns {Element}
*/
getOffsetParent: function( element, isFixed ) {
if ( isFixed && element != document.body ) {
return document.body;
} else {
return element.offsetParent;
}
},
/**
* Determines the position of the upper-left corner of the element.
* @function
* @name OpenSeadragon.getElementPosition
* @param {Element|String} element
* @returns {Point}
* @param {Element|String} element - the elemenet we want the position for.
* @returns {Point} - the position of the upper left corner of the element.
*/
getElementPosition: function( element ) {
var result = new $.Point(),
@ -418,7 +404,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
element = $.getElement( element );
isFixed = $.getElementStyle( element ).position == "fixed";
offsetParent = $.getOffsetParent( element, isFixed );
offsetParent = getOffsetParent( element, isFixed );
while ( offsetParent ) {
@ -431,13 +417,14 @@ OpenSeadragon = window.OpenSeadragon || (function(){
element = offsetParent;
isFixed = $.getElementStyle( element ).position == "fixed";
offsetParent = $.getOffsetParent( element, isFixed );
offsetParent = getOffsetParent( element, isFixed );
}
return result;
},
/**
* Determines the height and width of the given element.
* @function
* @name OpenSeadragon.getElementSize
* @param {Element|String} element
@ -453,6 +440,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Returns the CSSStyle object for the given element.
* @function
* @name OpenSeadragon.getElementStyle
* @param {Element|String} element
@ -471,6 +459,9 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Gets the latest event, really only useful internally since its
* specific to IE behavior. TODO: Deprecate this from the api and
* use it internally.
* @function
* @name OpenSeadragon.getEvent
* @param {Event} [event]
@ -481,6 +472,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Gets the position of the mouse on the screen for a given event.
* @function
* @name OpenSeadragon.getMousePosition
* @param {Event} [event]
@ -513,6 +505,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Determines the pages current scroll position.
* @function
* @name OpenSeadragon.getPageScroll
* @returns {Point}
@ -537,6 +530,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Determines the size of the browsers window.
* @function
* @name OpenSeadragon.getWindowSize
* @returns {Point}
@ -562,18 +556,10 @@ OpenSeadragon = window.OpenSeadragon || (function(){
return result;
},
/**
* @function
* @name OpenSeadragon.imageFormatSupported
* @param {String} [extension]
* @returns {Boolean}
*/
imageFormatSupported: function( extension ) {
extension = extension ? extension : "";
return !!FILEFORMATS[ extension.toLowerCase() ];
},
/**
* Wraps the given element in a nest of divs so that the element can
* be easily centered.
* @function
* @name OpenSeadragon.makeCenteredNode
* @param {Element|String} element
@ -617,6 +603,8 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Creates an easily positionable element of the given type that therefor
* serves as an excellent container element.
* @function
* @name OpenSeadragon.makeNeutralElement
* @param {String} tagName
@ -636,6 +624,9 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Ensures an image is loaded correctly to support alpha transparency.
* Generally only IE has issues doing this correctly for formats like
* png.
* @function
* @name OpenSeadragon.makeTransparentImage
* @param {String} src
@ -676,6 +667,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Sets the opacity of the specified element.
* @function
* @name OpenSeadragon.setElementOpacity
* @param {Element|String} element
@ -723,6 +715,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Adds an event listener for the given element, eventName and handler.
* @function
* @name OpenSeadragon.addEvent
* @param {Element|String} element
@ -751,6 +744,8 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Remove a given event listener for the given element, event type and
* handler.
* @function
* @name OpenSeadragon.removeEvent
* @param {Element|String} element
@ -779,6 +774,8 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Cancels the default browser behavior had the event propagated all
* the way up the DOM to the window object.
* @function
* @name OpenSeadragon.cancelEvent
* @param {Event} [event]
@ -797,6 +794,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Stops the propagation of the event up the DOM.
* @function
* @name OpenSeadragon.stopEvent
* @param {Event} [event]
@ -812,11 +810,18 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Similar to OpenSeadragon.delegate, but it does not immediately call
* the method on the object, returning a function which can be called
* repeatedly to delegate the method. It also allows additonal arguments
* to be passed during construction which will be added during each
* invocation, and each invocation can add additional arguments as well.
*
* @function
* @name OpenSeadragon.createCallback
* @param {Object} object
* @param {Function} method
* @param [args] any additional arguments are passed as arguments to the created callback
* @param [args] any additional arguments are passed as arguments to the
* created callback
* @returns {Function}
*/
createCallback: function( object, method ) {
@ -841,6 +846,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Retreives the value of a url parameter from the window.location string.
* @function
* @name OpenSeadragon.getUrlParameter
* @param {String} key
@ -852,10 +858,12 @@ OpenSeadragon = window.OpenSeadragon || (function(){
},
/**
* Makes an AJAX request.
* @function
* @name OpenSeadragon.makeAjaxRequest
* @param {String} url
* @param {Function} [callback]
* @param {String} url - the url to request
* @param {Function} [callback] - a function to call when complete
* @throws {Error}
*/
makeAjaxRequest: function( url, callback ) {
var async = typeof( callback ) == "function",
@ -909,7 +917,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
request.open( "GET", url, async );
request.send( null );
} catch (e) {
$.Debug.log(
$.console.log(
"%s while making AJAX request: %s",
e.name,
e.message
@ -926,38 +934,274 @@ OpenSeadragon = window.OpenSeadragon || (function(){
return async ? null : request;
},
/**
* Parses an XML string into a DOM Document.
* Loads a Deep Zoom Image description from a url or XML string and
* provides a callback hook for the resulting Document
* @function
* @name OpenSeadragon.parseXml
* @param {String} string
* @returns {Document}
* @name OpenSeadragon.createFromDZI
* @param {String} xmlUrl
* @param {String} xmlString
* @param {Function} callback
*/
parseXml: function( string ) {
//TODO: yet another example where we can determine the correct
// implementation once at start-up instead of everytime we use
// the function.
var xmlDoc = null,
parser;
createFromDZI: function( dzi, callback ) {
var async = typeof ( callback ) == "function",
xmlUrl = dzi.substring(0,1) != '<' ? dzi : null,
xmlString = xmlUrl ? null : dzi,
error = null,
urlParts,
filename,
lastDot,
tilesUrl;
if ( window.ActiveXObject ) {
xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
xmlDoc.async = false;
xmlDoc.loadXML( string );
if( xmlUrl ){
urlParts = xmlUrl.split( '/' );
filename = urlParts[ urlParts.length - 1 ];
lastDot = filename.lastIndexOf( '.' );
} else if ( window.DOMParser ) {
if ( lastDot > -1 ) {
urlParts[ urlParts.length - 1 ] = filename.slice( 0, lastDot );
}
parser = new DOMParser();
xmlDoc = parser.parseFromString( string, "text/xml" );
} else {
throw new Error( "Browser doesn't support XML DOM." );
tilesUrl = urlParts.join( '/' ) + "_files/";
}
return xmlDoc;
function finish( func, obj ) {
try {
return func( obj, tilesUrl );
} catch ( e ) {
if ( async ) {
return null;
} else {
throw e;
}
}
}
if ( async ) {
if ( xmlString ) {
window.setTimeout( function() {
var source = finish( processDZIXml, parseXml( xmlString ) );
// call after finish sets error
callback( source, error );
}, 1);
} else {
$.makeAjaxRequest( xmlUrl, function( xhr ) {
var source = finish( processDZIResponse, xhr );
// call after finish sets error
callback( source, error );
});
}
return null;
}
if ( xmlString ) {
return finish(
processDZIXml,
parseXml( xmlString )
);
} else {
return finish(
processDZIResponse,
$.makeAjaxRequest( xmlUrl )
);
}
}
});
/**
* @private
* @inner
* @function
* @param {Element} element
* @param {Boolean} [isFixed]
* @returns {Element}
*/
function getOffsetParent( element, isFixed ) {
if ( isFixed && element != document.body ) {
return document.body;
} else {
return element.offsetParent;
}
};
/**
* @private
* @inner
* @function
* @param {XMLHttpRequest} xhr
* @param {String} tilesUrl
*/
function processDZIResponse( xhr, tilesUrl ) {
var status,
statusText,
doc = null;
if ( !xhr ) {
throw new Error( $.getString( "Errors.Security" ) );
} else if ( xhr.status !== 200 && xhr.status !== 0 ) {
status = xhr.status;
statusText = ( status == 404 ) ?
"Not Found" :
xhr.statusText;
throw new Error( $.getString( "Errors.Status", status, statusText ) );
}
if ( xhr.responseXML && xhr.responseXML.documentElement ) {
doc = xhr.responseXML;
} else if ( xhr.responseText ) {
doc = parseXml( xhr.responseText );
}
return processDZIXml( doc, tilesUrl );
};
/**
* @private
* @inner
* @function
* @param {Document} xmlDoc
* @param {String} tilesUrl
*/
function processDZIXml( xmlDoc, tilesUrl ) {
if ( !xmlDoc || !xmlDoc.documentElement ) {
throw new Error( $.getString( "Errors.Xml" ) );
}
var root = xmlDoc.documentElement,
rootName = root.tagName;
if ( rootName == "Image" ) {
try {
return processDZI( root, tilesUrl );
} catch ( e ) {
throw (e instanceof Error) ?
e :
new Error( $.getString("Errors.Dzi") );
}
} else if ( rootName == "Collection" ) {
throw new Error( $.getString( "Errors.Dzc" ) );
} else if ( rootName == "Error" ) {
return processDZIError( root );
}
throw new Error( $.getString( "Errors.Dzi" ) );
};
/**
* @private
* @inner
* @function
* @param {Element} imageNode
* @param {String} tilesUrl
*/
function processDZI( imageNode, tilesUrl ) {
var fileFormat = imageNode.getAttribute( "Format" ),
sizeNode = imageNode.getElementsByTagName( "Size" )[ 0 ],
dispRectNodes = imageNode.getElementsByTagName( "DisplayRect" ),
width = parseInt( sizeNode.getAttribute( "Width" ) ),
height = parseInt( sizeNode.getAttribute( "Height" ) ),
tileSize = parseInt( imageNode.getAttribute( "TileSize" ) ),
tileOverlap = parseInt( imageNode.getAttribute( "Overlap" ) ),
dispRects = [],
dispRectNode,
rectNode,
i;
if ( !imageFormatSupported( fileFormat ) ) {
throw new Error(
$.getString( "Errors.ImageFormat", fileFormat.toUpperCase() )
);
}
for ( i = 0; i < dispRectNodes.length; i++ ) {
dispRectNode = dispRectNodes[ i ];
rectNode = dispRectNode.getElementsByTagName( "Rect" )[ 0 ];
dispRects.push( new $.DisplayRect(
parseInt( rectNode.getAttribute( "X" ) ),
parseInt( rectNode.getAttribute( "Y" ) ),
parseInt( rectNode.getAttribute( "Width" ) ),
parseInt( rectNode.getAttribute( "Height" ) ),
0, // ignore MinLevel attribute, bug in Deep Zoom Composer
parseInt( dispRectNode.getAttribute( "MaxLevel" ) )
));
}
return new $.DziTileSource(
width,
height,
tileSize,
tileOverlap,
tilesUrl,
fileFormat,
dispRects
);
};
/**
* @private
* @inner
* @function
* @param {Document} errorNode
* @throws {Error}
*/
function processDZIError( errorNode ) {
var messageNode = errorNode.getElementsByTagName( "Message" )[ 0 ],
message = messageNode.firstChild.nodeValue;
throw new Error(message);
};
/**
* Reports whether the image format is supported for tiling in this
* version.
* @private
* @inner
* @function
* @param {String} [extension]
* @returns {Boolean}
*/
function imageFormatSupported( extension ) {
extension = extension ? extension : "";
return !!FILEFORMATS[ extension.toLowerCase() ];
};
/**
* Parses an XML string into a DOM Document.
* @private
* @inner
* @function
* @name OpenSeadragon.parseXml
* @param {String} string
* @returns {Document}
*/
function parseXml( string ) {
//TODO: yet another example where we can determine the correct
// implementation once at start-up instead of everytime we use
// the function.
var xmlDoc = null,
parser;
if ( window.ActiveXObject ) {
xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
xmlDoc.async = false;
xmlDoc.loadXML( string );
} else if ( window.DOMParser ) {
parser = new DOMParser();
xmlDoc = parser.parseFromString( string, "text/xml" );
} else {
throw new Error( "Browser doesn't support XML DOM." );
}
return xmlDoc;
};
}( OpenSeadragon ));

70
src/point.js
View File

@ -2,7 +2,14 @@
(function( $ ){
/**
* A Point is really used as a 2-dimensional vector, equally useful for
* representing a point on a plane, or the height and width of a plane
* not requiring any other frame of reference.
* @class
* @param {Number} [x] The vector component 'x'. Defaults to the origin at 0.
* @param {Number} [y] The vector component 'y'. Defaults to the origin at 0.
* @property {Number} [x] The vector component 'x'.
* @property {Number} [y] The vector component 'y'.
*/
$.Point = function( x, y ) {
this.x = typeof ( x ) == "number" ? x : 0;
@ -11,6 +18,13 @@ $.Point = function( x, y ) {
$.Point.prototype = {
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
plus: function( point ) {
return new $.Point(
this.x + point.x,
@ -18,6 +32,13 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
minus: function( point ) {
return new $.Point(
this.x - point.x,
@ -25,6 +46,13 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
times: function( factor ) {
return new $.Point(
this.x * factor,
@ -32,6 +60,13 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
divide: function( factor ) {
return new $.Point(
this.x / factor,
@ -39,10 +74,24 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
negate: function() {
return new $.Point( -this.x, -this.y );
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
distanceTo: function( point ) {
return Math.sqrt(
Math.pow( this.x - point.x, 2 ) +
@ -50,10 +99,24 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
apply: function( func ) {
return new $.Point( func( this.x ), func( this.y ) );
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
equals: function( point ) {
return (
point instanceof $.Point
@ -64,6 +127,13 @@ $.Point.prototype = {
);
},
/**
* Add another Point to this point and return a new Point.
* @function
* @param {OpenSeadragon.Point} point The point to add vector components.
* @returns {OpenSeadragon.Point} A new point representing the sum of the
* vector components
*/
toString: function() {
return "(" + this.x + "," + this.y + ")";
}

61
src/rectangle.js
View File

@ -2,7 +2,20 @@
(function( $ ){
/**
* A Rectangle really represents a 2x2 matrix where each row represents a
* 2 dimensional vector component, the first is (x,y) and the second is
* (width, height). The latter component implies the equation of a simple
* plane.
*
* @class
* @param {Number} x The vector component 'x'.
* @param {Number} y The vector component 'y'.
* @param {Number} width The vector component 'height'.
* @param {Number} height The vector component 'width'.
* @property {Number} x The vector component 'x'.
* @property {Number} y The vector component 'y'.
* @property {Number} width The vector component 'width'.
* @property {Number} height The vector component 'height'.
*/
$.Rect = function( x, y, width, height ) {
this.x = typeof ( x ) == "number" ? x : 0;
@ -12,14 +25,34 @@ $.Rect = function( x, y, width, height ) {
};
$.Rect.prototype = {
/**
* The aspect ratio is simply the ratio of width to height.
* @function
* @returns {Number} The ratio of width to height.
*/
getAspectRatio: function() {
return this.width / this.height;
},
/**
* Provides the coordinates of the upper-left corner of the rectanglea s a
* point.
* @function
* @returns {OpenSeadragon.Point} The coordinate of the upper-left corner of
* the rectangle.
*/
getTopLeft: function() {
return new $.Point( this.x, this.y );
},
/**
* Provides the coordinates of the bottom-right corner of the rectangle as a
* point.
* @function
* @returns {OpenSeadragon.Point} The coordinate of the bottom-right corner of
* the rectangle.
*/
getBottomRight: function() {
return new $.Point(
this.x + this.width,
@ -27,6 +60,12 @@ $.Rect.prototype = {
);
},
/**
* Computes the center of the rectangle.
* @function
* @returns {OpenSeadragon.Point} The center of the rectangle as represnted
* as represented by a 2-dimensional vector (x,y)
*/
getCenter: function() {
return new $.Point(
this.x + this.width / 2.0,
@ -34,19 +73,36 @@ $.Rect.prototype = {
);
},
/**
* Returns the width and height component as a vector OpenSeadragon.Point
* @function
* @returns {OpenSeadragon.Point} The 2 dimensional vector represnting the
* the width and height of the rectangle.
*/
getSize: function() {
return new $.Point( this.width, this.height );
},
/**
* Determines if two Rectanlges have equivalent components.
* @function
* @param {OpenSeadragon.Rect} rectangle The Rectangle to compare to.
* @return {Boolean} 'true' if all components are equal, otherwise 'false'.
*/
equals: function( other ) {
return
( other instanceof $.Rect ) &&
return ( other instanceof $.Rect ) &&
( this.x === other.x ) &&
( this.y === other.y ) &&
( this.width === other.width ) &&
( this.height === other.height );
},
/**
* Provides a string representation of the retangle which is useful for
* debugging.
* @function
* @returns {String} A string representation of the rectangle.
*/
toString: function() {
return "[" +
this.x + "," +
@ -57,4 +113,5 @@ $.Rect.prototype = {
}
};
}( OpenSeadragon ));

88
src/tile.js
View File

@ -3,38 +3,79 @@
/**
* @class
* @param {Number} level The zoom level this tile belongs to.
* @param {Number} x The vector component 'x'.
* @param {Number} y The vector component 'y'.
* @param {OpenSeadragon.Point} bounds Where this tile fits, in normalized
* coordinates
* @param {Boolean} exists Is this tile a part of a sparse image? ( Also has
* this tile failed to load?
* @param {String} url The URL of this tile's image.
*
* @property {Number} level The zoom level this tile belongs to.
* @property {Number} x The vector component 'x'.
* @property {Number} y The vector component 'y'.
* @property {OpenSeadragon.Point} bounds Where this tile fits, in normalized
* coordinates
* @property {Boolean} exists Is this tile a part of a sparse image? ( Also has
* this tile failed to load?
* @property {String} url The URL of this tile's image.
* @property {Boolean} loaded Is this tile loaded?
* @property {Boolean} loading Is this tile loading
* @property {Element} elmt The HTML element for this tile
* @property {Image} image The Image object for this tile
* @property {String} style The alias of this.elmt.style.
* @property {String} position This tile's position on screen, in pixels.
* @property {String} size This tile's size on screen, in pixels
* @property {String} blendStart The start time of this tile's blending
* @property {String} opacity The current opacity this tile should be.
* @property {String} distance The distance of this tile to the viewport center
* @property {String} visibility The visibility score of this tile.
* @property {Boolean} beingDrawn Whether this tile is currently being drawn
* @property {Number} lastTouchTime Timestamp the tile was last touched.
*/
$.Tile = function(level, x, y, bounds, exists, url) {
this.level = level;
this.x = x;
this.y = y;
this.bounds = bounds; // where this tile fits, in normalized coordinates
this.exists = exists; // part of sparse image? tile hasn't failed to load?
this.loaded = false; // is this tile loaded?
this.loading = false; // or is this tile loading?
this.bounds = bounds;
this.exists = exists;
this.url = url;
this.loaded = false;
this.loading = false;
this.elmt = null; // the HTML element for this tile
this.image = null; // the Image object for this tile
this.url = url; // the URL of this tile's image
this.elmt = null;
this.image = null;
this.style = null; // alias of this.elmt.style
this.position = null; // this tile's position on screen, in pixels
this.size = null; // this tile's size on screen, in pixels
this.blendStart = null; // the start time of this tile's blending
this.opacity = null; // the current opacity this tile should be
this.distance = null; // the distance of this tile to the viewport center
this.visibility = null; // the visibility score of this tile
this.style = null;
this.position = null;
this.size = null;
this.blendStart = null;
this.opacity = null;
this.distance = null;
this.visibility = null;
this.beingDrawn = false; // whether this tile is currently being drawn
this.lastTouchTime = 0; // the time that tile was last touched
this.beingDrawn = false;
this.lastTouchTime = 0;
};
$.Tile.prototype = {
/**
* Provides a string representation of this tiles level and (x,y)
* components.
* @function
* @returns {String}
*/
toString: function() {
return this.level + "/" + this.x + "_" + this.y;
},
/**
* Renders the tile in an html container.
* @function
* @param {Element} container
*/
drawHTML: function( container ) {
var position = this.position.apply( Math.floor ),
@ -71,12 +112,17 @@ $.Tile.prototype = {
},
drawCanvas: function(context) {
/**
* Renders the tile in a canvas-based context.
* @function
* @param {Canvas} context
*/
drawCanvas: function( context ) {
var position = this.position,
size = this.size;
if (!this.loaded) {
if ( !this.loaded ) {
$.console.warn(
"Attempting to draw tile %s when it's not yet loaded.",
this.toString()
@ -85,9 +131,13 @@ $.Tile.prototype = {
}
context.globalAlpha = this.opacity;
context.drawImage(this.image, position.x, position.y, size.x, size.y);
context.drawImage( this.image, position.x, position.y, size.x, size.y );
},
/**
* Removes tile from it's contianer.
* @function
*/
unload: function() {
if ( this.elmt && this.elmt.parentNode ) {
this.elmt.parentNode.removeChild( this.elmt );

52
src/tilesource.js
View File

@ -4,6 +4,18 @@
/**
* @class
* @param {Number} width
* @param {Number} height
* @param {Number} tileSize
* @param {Number} tileOverlap
* @param {Number} minLevel
* @param {Number} maxLevel
* @property {Number} aspectRatio
* @property {Number} dimensions
* @property {Number} tileSize
* @property {Number} tileOverlap
* @property {Number} minLevel
* @property {Number} maxLevel
*/
$.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLevel ) {
this.aspectRatio = width / height;
@ -20,10 +32,18 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
$.TileSource.prototype = {
/**
* @function
* @param {Number} level
*/
getLevelScale: function( level ) {
return 1 / ( 1 << ( this.maxLevel - level ) );
},
/**
* @function
* @param {Number} level
*/
getNumTiles: function( level ) {
var scale = this.getLevelScale( level ),
x = Math.ceil( scale * this.dimensions.x / this.tileSize ),
@ -32,6 +52,10 @@ $.TileSource.prototype = {
return new $.Point( x, y );
},
/**
* @function
* @param {Number} level
*/
getPixelRatio: function( level ) {
var imageSizeScaled = this.dimensions.times( this.getLevelScale( level ) ),
rx = 1.0 / imageSizeScaled.x,
@ -40,6 +64,11 @@ $.TileSource.prototype = {
return new $.Point(rx, ry);
},
/**
* @function
* @param {Number} level
* @param {OpenSeadragon.Point} point
*/
getTileAtPoint: function( level, point ) {
var pixel = point.times( this.dimensions.x ).times( this.getLevelScale(level ) ),
tx = Math.floor( pixel.x / this.tileSize ),
@ -48,6 +77,12 @@ $.TileSource.prototype = {
return new $.Point( tx, ty );
},
/**
* @function
* @param {Number} level
* @param {Number} x
* @param {Number} y
*/
getTileBounds: function( level, x, y ) {
var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
px = ( x === 0 ) ? 0 : this.tileSize * x - this.tileOverlap,
@ -62,10 +97,27 @@ $.TileSource.prototype = {
return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
},
/**
* This method is not implemented by this class other than to throw an Error
* announcing you have to implement it. Because of the variety of tile
* server technologies, and various specifications for building image
* pyramids, this method is here to allow easy integration.
* @function
* @param {Number} level
* @param {Number} x
* @param {Number} y
* @throws {Error}
*/
getTileUrl: function( level, x, y ) {
throw new Error( "Method not implemented." );
},
/**
* @function
* @param {Number} level
* @param {Number} x
* @param {Number} y
*/
tileExists: function( level, x, y ) {
var numTiles = this.getNumTiles( level );
return level >= this.minLevel &&

106
src/viewer.js
View File

@ -1,25 +1,26 @@
(function( $ ){
/**
* @class
*
* The main point of entry into creating a zoomable image on the page.
* The main point of entry into creating a zoomable image on the page.
*
* We have provided an idiomatic javascript constructor which takes
* a single object, but still support the legacy positional arguments.
* We have provided an idiomatic javascript constructor which takes
* a single object, but still support the legacy positional arguments.
*
* The options below are given in order that they appeared in the constructor
* as arguments and we translate a positional call into an idiomatic call.
*
* options:{
* element: String id of Element to attach to,
* xmlPath: String xpath ( TODO: not sure! ),
* prefixUrl: String url used to prepend to paths, eg button images,
* controls: Array of Seadragon.Controls,
* overlays: Array of Seadragon.Overlays,
* overlayControls: An Array of ( TODO: not sure! )
* }
* The options below are given in order that they appeared in the constructor
* as arguments and we translate a positional call into an idiomatic call.
*
* @class
* @extends OpenSeadragon.EventHandler
* @param {Object} options
* @param {String} options.element Id of Element to attach to,
* @param {String} options.xmlPath Xpath ( TODO: not sure! ),
* @param {String} options.prefixUrl Url used to prepend to paths, eg button
* images, etc.
* @param {Seadragon.Controls[]} options.controls Array of Seadragon.Controls,
* @param {Seadragon.Overlays[]} options.overlays Array of Seadragon.Overlays,
* @param {Seadragon.Controls[]} options.overlayControls An Array of ( TODO:
* not sure! )
*
**/
$.Viewer = function( options ) {
@ -306,6 +307,10 @@ $.Viewer = function( options ) {
$.extend( $.Viewer.prototype, $.EventHandler.prototype, {
/**
* @function
* @name OpenSeadragon.Viewer.prototype.addControl
*/
addControl: function ( elmt, anchor ) {
var elmt = $.getElement( elmt ),
div = null;
@ -344,21 +349,36 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
elmt.style.display = "inline-block";
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.isOpen
*/
isOpen: function () {
return !!this.source;
},
openDzi: function ( xmlUrl, xmlString ) {
/**
* If the string is xml is simply parsed and opened, otherwise the string
* is treated as an URL and an xml document is requested via ajax, parsed
* and then opened in the viewer.
* @function
* @name OpenSeadragon.Viewer.prototype.openDzi
* @param {String} dzi and xml string or the url to a DZI xml document.
*/
openDzi: function ( dzi ) {
var _this = this;
$.DziTileSourceHelper.createFromXml(
xmlUrl,
xmlString,
$.createFromDZI(
dzi,
function( source ){
_this.open( source );
}
);
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.openTileSource
*/
openTileSource: function ( tileSource ) {
var _this = this;
window.setTimeout( function () {
@ -366,6 +386,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
}, 1 );
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.open
*/
open: function( source ) {
var _this = this,
overlay,
@ -448,6 +472,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
this.raiseEvent( "open" );
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.close
*/
close: function () {
this.source = null;
this.viewport = null;
@ -456,6 +484,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
this.canvas.innerHTML = "";
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.removeControl
*/
removeControl: function ( elmt ) {
var elmt = $.getElement( elmt ),
@ -467,12 +499,20 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
}
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.clearControls
*/
clearControls: function () {
while ( this.controls.length > 0 ) {
this.controls.pop().destroy();
}
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.isDashboardEnabled
*/
isDashboardEnabled: function () {
var i;
@ -485,18 +525,34 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
return false;
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.isFullPage
*/
isFullPage: function () {
return this.container.parentNode == document.body;
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.isMouseNavEnabled
*/
isMouseNavEnabled: function () {
return this.innerTracker.isTracking();
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.isVisible
*/
isVisible: function () {
return this.container.style.visibility != "hidden";
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.setDashboardEnabled
*/
setDashboardEnabled: function( enabled ) {
var i;
for ( i = this.controls.length - 1; i >= 0; i-- ) {
@ -504,6 +560,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
}
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.setFullPage
*/
setFullPage: function( fullPage ) {
var body = document.body,
@ -592,10 +652,18 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, {
}
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.setMouseNavEnabled
*/
setMouseNavEnabled: function( enabled ){
this.innerTracker.setTracking( enabled );
},
/**
* @function
* @name OpenSeadragon.Viewer.prototype.setVisible
*/
setVisible: function( visible ){
this.container.style.visibility = visible ? "" : "hidden";
}