tile-drawing event now includes tiledImage

This commit is contained in:
Ian Gilman 2014-11-24 13:25:20 -08:00
parent 2de44c752d
commit bf9ccd5458
5 changed files with 47 additions and 43 deletions

View File

@ -116,27 +116,6 @@ $.Drawer = function( options ) {
// explicit left-align
this.container.style.textAlign = "left";
this.container.appendChild( this.canvas );
// We need a callback to give image manipulation a chance to happen
this._drawingHandler = function(args) {
if (_this.viewer) {
/**
* This event is fired just before the tile is drawn giving the application a chance to alter the image.
*
* NOTE: This event is only fired when the drawer is using a <canvas>.
*
* @event tile-drawing
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {OpenSeadragon.Tile} tile - The Tile being drawn.
* @property {OpenSeadragon.Tile} context - The HTML canvas context being drawn into.
* @property {OpenSeadragon.Tile} rendered - The HTML canvas context containing the tile imagery.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.viewer.raiseEvent('tile-drawing', args);
}
};
};
$.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
@ -249,17 +228,23 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
/**
* Draws the given tile.
* @param {OpenSeadragon.Tile} tile - The tile to draw.
* @param {Function} drawingHandler - Method for firing the drawing event if using canvas.
* drawingHandler({context, tile, rendered})
* where <code>rendered</code> is the context with the pre-drawn image.
*/
drawTile: function( tile ) {
drawTile: function( tile, drawingHandler ) {
$.console.assert(tile, '[Drawer.drawTile] tile is required');
$.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
if ( this.useCanvas ) {
// TODO do this in a more performant way
// specifically, don't save,rotate,restore every time we draw a tile
if( this.viewport.degrees !== 0 ) {
this._offsetForRotation( tile, this.viewport.degrees );
tile.drawCanvas( this.context, this._drawingHandler );
tile.drawCanvas( this.context, drawingHandler );
this._restoreRotationChanges( tile );
} else {
tile.drawCanvas( this.context, this._drawingHandler );
tile.drawCanvas( this.context, drawingHandler );
}
} else {
tile.drawHTML( this.canvas );

View File

@ -231,7 +231,8 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{
* Renders the tile in a canvas-based context.
* @function
* @param {Canvas} context
* @param {Function} method for firing the drawing event. drawingHandler({context, tile, rendered})
* @param {Function} drawingHandler - Method for firing the drawing event.
* drawingHandler({context, tile, rendered})
* where <code>rendered</code> is the context with the pre-drawn image.
*/
drawCanvas: function( context, drawingHandler ) {

View File

@ -63,6 +63,8 @@
* @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
*/
$.TiledImage = function( options ) {
var _this = this;
$.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" );
$.console.assert( options.drawer, "[TiledImage] options.drawer is required" );
$.console.assert( options.viewer, "[TiledImage] options.viewer is required" );
@ -127,6 +129,28 @@ $.TiledImage = function( options ) {
crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy
}, options );
// We need a callback to give image manipulation a chance to happen
this._drawingHandler = function(args) {
/**
* This event is fired just before the tile is drawn giving the application a chance to alter the image.
*
* NOTE: This event is only fired when the drawer is using a <canvas>.
*
* @event tile-drawing
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {OpenSeadragon.Tile} tile - The Tile being drawn.
* @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn.
* @property {OpenSeadragon.Tile} context - The HTML canvas context being drawn into.
* @property {OpenSeadragon.Tile} rendered - The HTML canvas context containing the tile imagery.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.viewer.raiseEvent('tile-drawing', $.extend({
tiledImage: _this
}, args));
};
};
$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{
@ -1002,7 +1026,7 @@ function drawTiles( tiledImage, lastDrawn ){
for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
tile = lastDrawn[ i ];
tiledImage._drawer.drawTile( tile );
tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler );
tile.beingDrawn = true;
if( tiledImage.debugMode ){

View File

@ -39,22 +39,6 @@
start();
});
// ----------
asyncTest('tile-drawing event', function() {
createViewer({
tileSources: '/test/data/testpattern.dzi'
});
viewer.addHandler('tile-drawing', function handler(event) {
viewer.removeHandler('tile-drawing', handler);
equal(event.eventSource, viewer, 'sender of tile-drawing event was viewer');
ok(event.tile, 'tile-drawing event includes a tile');
ok(event.context, 'tile-drawing event includes a context');
ok(event.rendered, 'tile-drawing event includes a rendered');
start();
});
});
// ----------
asyncTest('rotation', function() {
createViewer({

View File

@ -116,6 +116,16 @@
ok(event.tile, 'update-tile event includes tile');
});
viewer.addHandler('tile-drawing', function tileDrawingHandler(event) {
viewer.removeHandler('tile-drawing', tileDrawingHandler);
handlerCount++;
equal(event.eventSource, viewer, 'sender of tile-drawing event was viewer');
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
ok(event.tile, 'tile-drawing event includes a tile');
ok(event.context, 'tile-drawing event includes a context');
ok(event.rendered, 'tile-drawing event includes a rendered');
});
viewer.addHandler('tile-drawn', function tileDrawnHandler(event) {
viewer.removeHandler('tile-drawn', tileDrawnHandler);
handlerCount++;
@ -123,7 +133,7 @@
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
ok(event.tile, 'tile-drawn event includes tile');
equal(handlerCount, 3, 'correct number of handlers called');
equal(handlerCount, 4, 'correct number of handlers called');
start();
});