From bf9ccd5458953ff12df2cc0a583356cb43a5c9dc Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 24 Nov 2014 13:25:20 -0800 Subject: [PATCH] tile-drawing event now includes tiledImage --- src/drawer.js | 33 +++++++++------------------------ src/tile.js | 3 ++- src/tiledimage.js | 26 +++++++++++++++++++++++++- test/modules/drawer.js | 16 ---------------- test/modules/tiledimage.js | 12 +++++++++++- 5 files changed, 47 insertions(+), 43 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 804f0693..3a02dad4 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -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 . - * - * @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 rendered 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 ); diff --git a/src/tile.js b/src/tile.js index b54e9b32..30082315 100644 --- a/src/tile.js +++ b/src/tile.js @@ -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 rendered is the context with the pre-drawn image. */ drawCanvas: function( context, drawingHandler ) { diff --git a/src/tiledimage.js b/src/tiledimage.js index a5cf2981..bb74abb4 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -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 . + * + * @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 ){ diff --git a/test/modules/drawer.js b/test/modules/drawer.js index e024c72e..80f9fa7f 100644 --- a/test/modules/drawer.js +++ b/test/modules/drawer.js @@ -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({ diff --git a/test/modules/tiledimage.js b/test/modules/tiledimage.js index 4901de01..703cc72a 100644 --- a/test/modules/tiledimage.js +++ b/test/modules/tiledimage.js @@ -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(); });