From be79249c9cf81f9f08e81b9c7a8be8c0fc91f77f Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Thu, 27 Feb 2014 14:39:18 -0700 Subject: [PATCH 1/4] Added pre-draw event for tiles to allow applications to alter the image just prior to its rendering. This should enable invert, brightness, contrast, sharpen and other transformations to occur naturally through the 'tile-drawing' event listener. The listener is given the 'rendered' object which is the pre-drawn image on a canvas context object. By altering the 'rendered' object the listener can alter the display results. Since this event gets fired multiple times for the tile, it is wise for the handler to track what their desired modifications are and to tag the 'tile' element to keep track of the modifications already applied. --- src/drawer.js | 21 +++++++++++++++++++-- src/tile.js | 7 ++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index a53d0d3b..3055feda 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1228,6 +1228,23 @@ function drawTiles( drawer, lastDrawn ){ tileSource, collectionTileSource; + // We need a callback to give image manipulation a chance to happen + var drawingHandler = function(args) { + if (drawer.viewer) { + /** + * This event is fired just before the tile is drawn giving the application a chance to alter the image. + * + * @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 + * @property {?Object} userData - 'context', 'tile' and 'rendered'. + */ + drawer.viewer.raiseEvent('tile-drawing', args); + } + }; + for ( i = lastDrawn.length - 1; i >= 0; i-- ) { tile = lastDrawn[ i ]; @@ -1299,10 +1316,10 @@ function drawTiles( drawer, lastDrawn ){ // specifically, don't save,rotate,restore every time we draw a tile if( drawer.viewport.degrees !== 0 ) { offsetForRotation( tile, drawer.canvas, drawer.context, drawer.viewport.degrees ); - tile.drawCanvas( drawer.context ); + tile.drawCanvas( drawer.context, drawingHandler ); restoreRotationChanges( tile, drawer.canvas, drawer.context ); } else { - tile.drawCanvas( drawer.context ); + tile.drawCanvas( drawer.context, drawingHandler ); } } else { tile.drawHTML( drawer.canvas ); diff --git a/src/tile.js b/src/tile.js index d818c010..9aa4bde4 100644 --- a/src/tile.js +++ b/src/tile.js @@ -231,8 +231,10 @@ $.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}) + * where rendered is the context with the pre-drawn image. */ - drawCanvas: function( context ) { + drawCanvas: function( context, drawingHandler ) { var position = this.position, size = this.size, @@ -280,6 +282,9 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ rendered = TILE_CACHE[ this.url ]; + // This gives the application a chance to make image manipulation changes as we are rendering the image + drawingHandler({context: context, tile: this, rendered: rendered}); + //rendered.save(); context.drawImage( rendered.canvas, From 27424348f34fc57636aea04bf98416f0344bcceb Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Mon, 3 Mar 2014 16:19:40 -0700 Subject: [PATCH 2/4] Added test case for tile-drawing event. --- test/events.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/test/events.js b/test/events.js index 6fb7f23c..c5480837 100644 --- a/test/events.js +++ b/test/events.js @@ -280,4 +280,23 @@ viewer.open( '/test/data/testpattern.dzi' ); } ); + // ---------- + asyncTest( 'tile-drawing event', function () { + var tileDrawing = function ( event ) { + viewer.removeHandler( 'tile-drawing', tileDrawing ); + ok( event, 'Event handler received event data' ); + if ( event ) { + // Make sure we have the expected elements set + ok(event.context, "Context is not set"); + ok(event.tile, "Tile is not set"); + ok(event.rendered, "Rendered is not set"); + } + viewer.close(); + start(); + }; + + viewer.addHandler( 'tile-drawing', tileDrawing ); + viewer.open( '/test/data/testpattern.dzi' ); + } ); + } )(); From 95f059121037a440485925955b1417c2d3159e58 Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Tue, 4 Mar 2014 10:38:10 -0700 Subject: [PATCH 3/4] Added message to clarify that the event only fires when is being used. --- src/drawer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/drawer.js b/src/drawer.js index 3055feda..2e100384 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1234,6 +1234,8 @@ function drawTiles( drawer, lastDrawn ){ /** * 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} From 9f09951840fb7ba8b8e6ce93ab36e356c443373c Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Thu, 6 Mar 2014 08:58:56 -0700 Subject: [PATCH 4/4] Reworded the test messages to 'should be' form as per standard practice. --- test/events.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/events.js b/test/events.js index c5480837..86f007c1 100644 --- a/test/events.js +++ b/test/events.js @@ -284,12 +284,12 @@ asyncTest( 'tile-drawing event', function () { var tileDrawing = function ( event ) { viewer.removeHandler( 'tile-drawing', tileDrawing ); - ok( event, 'Event handler received event data' ); + ok( event, 'Event handler should be invoked' ); if ( event ) { // Make sure we have the expected elements set - ok(event.context, "Context is not set"); - ok(event.tile, "Tile is not set"); - ok(event.rendered, "Rendered is not set"); + ok(event.context, "Context should be set"); + ok(event.tile, "Tile should be set"); + ok(event.rendered, "Rendered should be set"); } viewer.close(); start();