From fda24f343a2eae50aa5cd266ff57cd79fdd598b1 Mon Sep 17 00:00:00 2001 From: thatcher Date: Wed, 13 Feb 2013 19:44:23 -0500 Subject: [PATCH] added dozens of event hooks based on input from macreery's branch --- build.properties | 2 +- openseadragon.js | 226 ++++++++++++++++++++++++++++++++++++++-- src/drawer.js | 75 +++++++++++++ src/eventhandler.js | 4 +- src/highlightoverlay.js | 33 ------ src/viewer.js | 85 +++++++++++++-- src/viewport.js | 60 +++++++++++ 7 files changed, 436 insertions(+), 49 deletions(-) delete mode 100644 src/highlightoverlay.js diff --git a/build.properties b/build.properties index d3857deb..dd3defbf 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 118 +BUILD_ID: 120 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/openseadragon.js b/openseadragon.js index 0a843880..1fa5bdda 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,7 +1,7 @@ /*globals OpenSeadragon*/ /** - * @version OpenSeadragon 0.9.118 + * @version OpenSeadragon 0.9.120 * * @fileOverview *

@@ -1949,7 +1949,7 @@ $.EventHandler.prototype = { removeAllHandlers: function( eventName ){ this.events[ eventName ] = []; }, - + /** * Retrive the list of all handlers registered for a given event. @@ -1982,6 +1982,8 @@ $.EventHandler.prototype = { * @param {Function} handler - Function to call when event is triggered. */ raiseEvent: function( eventName, eventArgs ) { + //uncomment if you want to get a log og all events + //$.console.log( eventName ); var handler = this.getHandler( eventName ); if ( handler ) { @@ -3727,7 +3729,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, animationTime: this.animationTime, showNavigator: false, minZoomImageRatio: 1, - maxZoomPixelRatio: 1//, + maxZoomPixelRatio: 1, + viewer: this //, //TODO: figure out how to support these in a way that makes sense //minZoomLevel: this.minZoomLevel, //maxZoomLevel: this.maxZoomLevel @@ -3748,7 +3751,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, wrapVertical: this.wrapVertical, defaultZoomLevel: this.defaultZoomLevel, minZoomLevel: this.minZoomLevel, - maxZoomLevel: this.maxZoomLevel + maxZoomLevel: this.maxZoomLevel, + viewer: this }); } @@ -3849,12 +3853,13 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } } VIEWERS[ this.hash ] = this; - this.raiseEvent( "open" ); if( this.navigator ){ this.navigator.open( source ); } + this.raiseEvent( 'open', { source: source, viewer: this } ); + return this; }, @@ -3878,6 +3883,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, VIEWERS[ this.hash ] = null; delete VIEWERS[ this.hash ]; + + this.raiseEvent( 'close', { viewer: this } ); return this; }, @@ -3899,6 +3906,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, */ setMouseNavEnabled: function( enabled ){ this.innerTracker.setTracking( enabled ); + this.raiseEvent( 'mouse-enabled', { enabled: enabled, viewer: this } ); return this; }, @@ -3929,6 +3937,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } else { beginControlsAutoHide( this ); } + this.raiseEvent( 'controls-enabled', { enabled: enabled, viewer: this } ); + return this; }, @@ -4089,6 +4099,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, $.delegate( this, onContainerExit )(); } + this.raiseEvent( 'fullpage', { fullpage: fullPage, viewer: this } ); if ( this.viewport ) { oldBounds = this.viewport.getBounds(); @@ -4124,7 +4135,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } THIS[ this.hash ].forceRedraw = true; - this.raiseEvent( "resize", this ); updateOnce( this ); } @@ -4149,9 +4159,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, */ setVisible: function( visible ){ this.container.style.visibility = visible ? "" : "hidden"; + this.raiseEvent( 'visible', { visible: visible, viewer: this } ); return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.bindSequenceControls + * @return {OpenSeadragon.Viewer} Chainable. + */ bindSequenceControls: function(){ ////////////////////////////////////////////////////////////////////////// @@ -4228,8 +4245,15 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } } } + return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.bindStandardControls + * @return {OpenSeadragon.Viewer} Chainable. + */ bindStandardControls: function(){ ////////////////////////////////////////////////////////////////////////// // Navigation Controls @@ -4342,14 +4366,22 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, ); } } - } + return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.goToPage + * @return {OpenSeadragon.Viewer} Chainable. + */ goToPage: function( page ){ //page is a 1 based index so normalize now //page = page; + this.raiseEvent( 'page', { page: page, viewer: this } ); + if( this.tileSources.length > page ){ THIS[ this.hash ].sequence = page; @@ -4373,6 +4405,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, this.openTileSource( this.tileSources[ page ] ); } + if( $.isFunction( this.onPageChange ) ){ this.onPageChange({ page: page, @@ -4382,6 +4415,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, if( this.referenceStrip ){ this.referenceStrip.setFocus( page ); } + return this; } }); @@ -4499,6 +4533,12 @@ function onCanvasClick( tracker, position, quick, shift ) { ); this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-click', { + tracker: tracker, + position: position, + quick: quick, + shift: shift + }); } function onCanvasDrag( tracker, position, delta, shift ) { @@ -4518,12 +4558,24 @@ function onCanvasDrag( tracker, position, delta, shift ) { this.viewport.applyConstraints(); } } + this.raiseEvent( 'canvas-click', { + tracker: tracker, + position: position, + delta: delta, + shift: shift + }); } function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) { if ( insideElementPress && this.viewport ) { this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-release', { + tracker: tracker, + position: position, + insideElementPress: insideElementPress, + insideElementRelease: insideElementRelease + }); } function onCanvasScroll( tracker, position, scroll, shift ) { @@ -4536,6 +4588,12 @@ function onCanvasScroll( tracker, position, scroll, shift ) { ); this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-scroll', { + tracker: tracker, + position: position, + scroll: scroll, + shift: shift + }); //cancels event return false; } @@ -4547,6 +4605,12 @@ function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) beginControlsAutoHide( this ); } } + this.raiseEvent( 'container-exit', { + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny + }); } function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) { @@ -4556,11 +4620,23 @@ function onContainerRelease( tracker, position, insideElementPress, insideElemen beginControlsAutoHide( this ); } } + this.raiseEvent( 'container-release', { + tracker: tracker, + position: position, + insideElementPress: insideElementPress, + insideElementRelease: insideElementRelease + }); } function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) { THIS[ this.hash ].mouseInside = true; abortControlsAutoHide( this ); + this.raiseEvent( 'container-enter', { + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny + }); } @@ -4597,7 +4673,6 @@ function updateOnce( viewer ) { // maintain image position viewer.viewport.resize( containerSize, true ); THIS[ viewer.hash ].prevContainerSize = containerSize; - viewer.raiseEvent( "resize" ); } animated = viewer.viewport.update(); @@ -8671,6 +8746,15 @@ $.Drawer.prototype = { this.overlays.push( new $.Overlay( element, location, placement ) ); this.updateAgain = true; + if( this.viewer ){ + this.viewer.raiseEvent( 'add-overlay', { + viewer: this.viewer, + element: element, + location: location, + placement: placement + }); + } + return this; }, /** @@ -8682,6 +8766,7 @@ $.Drawer.prototype = { * @param {OpenSeadragon.OverlayPlacement} placement - The position of the * viewport which the location coordinates will be treated as relative * to. + * @return {OpenSeadragon.Drawer} Chainable. */ updateOverlay: function( element, location, placement ) { var i; @@ -8693,6 +8778,15 @@ $.Drawer.prototype = { this.overlays[ i ].update( location, placement ); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'update-overlay', { + viewer: this.viewer, + element: element, + location: location, + placement: placement + }); + } + return this; }, /** @@ -8701,6 +8795,7 @@ $.Drawer.prototype = { * @method * @param {Element|String} element - A reference to the element or an * element id which represent the ovelay content to be removed. + * @return {OpenSeadragon.Drawer} Chainable. */ removeOverlay: function( element ) { var i; @@ -8713,18 +8808,33 @@ $.Drawer.prototype = { this.overlays.splice( i, 1 ); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'remove-overlay', { + viewer: this.viewer, + element: element + }); + } + return this; }, /** * Removes all currently configured Overlays from this Drawer and schedules * and update. * @method + * @return {OpenSeadragon.Drawer} Chainable. */ clearOverlays: function() { while ( this.overlays.length > 0 ) { this.overlays.pop().destroy(); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'clear-overlay', { + viewer: this.viewer, + element: element + }); + } + return this; }, @@ -8753,16 +8863,19 @@ $.Drawer.prototype = { * Clears all tiles and triggers an update on the next call to * Drawer.prototype.update(). * @method + * @return {OpenSeadragon.Drawer} Chainable. */ reset: function() { clearTiles( this ); this.lastResetTime = +new Date(); this.updateAgain = true; + return this; }, /** * Forces the Drawer to update. * @method + * @return {OpenSeadragon.Drawer} Chainable. */ update: function() { //this.profiler.beginUpdate(); @@ -8770,6 +8883,7 @@ $.Drawer.prototype = { updateViewport( this ); this.midUpdate = false; //this.profiler.endUpdate(); + return this; }, /** @@ -8900,6 +9014,12 @@ function updateViewport( drawer ) { drawer.updateAgain = false; + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-viewport', { + viewer: drawer.viewer + }); + } + var tile, level, best = null, @@ -9040,6 +9160,7 @@ function updateViewport( drawer ) { // because we haven't finished drawing, so drawer.updateAgain = true; } + } @@ -9052,6 +9173,20 @@ function updateLevel( drawer, haveDrawn, level, levelOpacity, levelVisibility, v viewportCenter = drawer.viewport.pixelFromPoint( drawer.viewport.getCenter() ); + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-level', { + viewer: drawer.viewer, + havedrawn: haveDrawn, + level: level, + opacity: levelOpacity, + visibility: levelVisibility, + topleft: viewportTopLeft, + bottomright: viewportBottomRight, + currenttime: currentTime, + best: best + }); + } + //OK, a new drawing so do your calculations tileTL = drawer.source.getTileAtPoint( level, viewportTL ); tileBR = drawer.source.getTileAtPoint( level, viewportBR ); @@ -9085,6 +9220,7 @@ function updateLevel( drawer, haveDrawn, level, levelOpacity, levelVisibility, v } } + return best; } @@ -9102,6 +9238,13 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le drawTile = drawLevel, newbest; + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-tile', { + viewer: drawer.viewer, + tile: tile + }); + } + setCoverage( drawer.coverage, level, x, y, false ); if ( !tile.exists ) { @@ -9598,6 +9741,13 @@ function drawTiles( drawer, lastDrawn ){ $.console.error(e); } } + + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'tile-drawn', { + viewer: drawer.viewer, + tile: tile + }); + } } } @@ -9699,6 +9849,7 @@ $.Viewport = function( options ) { //internal state properties zoomPoint: null, + viewer: null, //configurable options springStiffness: $.DEFAULT_SETTINGS.springStiffness, @@ -9737,6 +9888,10 @@ $.Viewport = function( options ) { $.Viewport.prototype = { + /** + * @function + * @return {OpenSeadragon.Viewport} Chainable. + */ resetContentSize: function( contentSize ){ this.contentSize = contentSize; this.contentAspectX = this.contentSize.x / this.contentSize.y; @@ -9745,6 +9900,14 @@ $.Viewport.prototype = { this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY); this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); + + if( this.viewer ){ + this.viewer.raiseEvent( 'reset-size', { + contentSize: contentSize, + viewer: this.viewer + }); + } + return this; }, @@ -9785,6 +9948,12 @@ $.Viewport.prototype = { * @param {Boolean} immediately */ goHome: function( immediately ) { + if( this.viewer ){ + this.viewer.raiseEvent( 'home', { + immediately: immediately, + viewer: this.viewer + }); + } return this.fitBounds( this.getHomeBounds(), immediately ); }, @@ -9907,6 +10076,7 @@ $.Viewport.prototype = { /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ applyConstraints: function( immediately ) { var actualZoom = this.getZoom(), @@ -9977,6 +10147,14 @@ $.Viewport.prototype = { } this.fitBounds( bounds, immediately ); } + + if( this.viewer ){ + this.viewer.raiseEvent( 'constrain', { + immediately: immediately, + viewer: this.viewer + }); + } + return this; }, @@ -9992,6 +10170,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Rect} bounds * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitBounds: function( bounds, immediately ) { var aspect = this.getAspectRatio(), @@ -10043,6 +10222,7 @@ $.Viewport.prototype = { /** * @function * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitVertically: function( immediately ) { var center = this.getCenter(); @@ -10067,6 +10247,7 @@ $.Viewport.prototype = { /** * @function * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitHorizontally: function( immediately ) { var center = this.getCenter(); @@ -10093,6 +10274,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Point} delta * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ panBy: function( delta, immediately ) { var center = new $.Point( @@ -10106,6 +10288,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Point} center * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ panTo: function( center, immediately ) { if ( immediately ) { @@ -10116,11 +10299,20 @@ $.Viewport.prototype = { this.centerSpringY.springTo( center.y ); } + if( this.viewer ){ + this.viewer.raiseEvent( 'pan', { + center: center, + immediately: immediately, + viewer: this.viewer + }); + } + return this; }, /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ zoomBy: function( factor, refPoint, immediately ) { return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); @@ -10128,6 +10320,7 @@ $.Viewport.prototype = { /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ zoomTo: function( zoom, refPoint, immediately ) { @@ -10141,12 +10334,21 @@ $.Viewport.prototype = { this.zoomSpring.springTo( zoom ); } + if( this.viewer ){ + this.viewer.raiseEvent( 'zoom', { + zoom: zoom, + refPoint: refPoint, + immediately: immediately, + viewer: this.viewer + }); + } return this; }, /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ resize: function( newContainerSize, maintain ) { var oldBounds = this.getBounds(), @@ -10163,6 +10365,14 @@ $.Viewport.prototype = { newBounds.height = newBounds.width / this.getAspectRatio(); } + if( this.viewer ){ + this.viewer.raiseEvent( 'resize', { + newContainerSize: newContainerSize, + maintain: maintain, + viewer: this.viewer + }); + } + return this.fitBounds( newBounds, true ); }, diff --git a/src/drawer.js b/src/drawer.js index 25469463..6b7ab21f 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -146,6 +146,15 @@ $.Drawer.prototype = { this.overlays.push( new $.Overlay( element, location, placement ) ); this.updateAgain = true; + if( this.viewer ){ + this.viewer.raiseEvent( 'add-overlay', { + viewer: this.viewer, + element: element, + location: location, + placement: placement + }); + } + return this; }, /** @@ -157,6 +166,7 @@ $.Drawer.prototype = { * @param {OpenSeadragon.OverlayPlacement} placement - The position of the * viewport which the location coordinates will be treated as relative * to. + * @return {OpenSeadragon.Drawer} Chainable. */ updateOverlay: function( element, location, placement ) { var i; @@ -168,6 +178,15 @@ $.Drawer.prototype = { this.overlays[ i ].update( location, placement ); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'update-overlay', { + viewer: this.viewer, + element: element, + location: location, + placement: placement + }); + } + return this; }, /** @@ -176,6 +195,7 @@ $.Drawer.prototype = { * @method * @param {Element|String} element - A reference to the element or an * element id which represent the ovelay content to be removed. + * @return {OpenSeadragon.Drawer} Chainable. */ removeOverlay: function( element ) { var i; @@ -188,18 +208,33 @@ $.Drawer.prototype = { this.overlays.splice( i, 1 ); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'remove-overlay', { + viewer: this.viewer, + element: element + }); + } + return this; }, /** * Removes all currently configured Overlays from this Drawer and schedules * and update. * @method + * @return {OpenSeadragon.Drawer} Chainable. */ clearOverlays: function() { while ( this.overlays.length > 0 ) { this.overlays.pop().destroy(); this.updateAgain = true; } + if( this.viewer ){ + this.viewer.raiseEvent( 'clear-overlay', { + viewer: this.viewer, + element: element + }); + } + return this; }, @@ -228,16 +263,19 @@ $.Drawer.prototype = { * Clears all tiles and triggers an update on the next call to * Drawer.prototype.update(). * @method + * @return {OpenSeadragon.Drawer} Chainable. */ reset: function() { clearTiles( this ); this.lastResetTime = +new Date(); this.updateAgain = true; + return this; }, /** * Forces the Drawer to update. * @method + * @return {OpenSeadragon.Drawer} Chainable. */ update: function() { //this.profiler.beginUpdate(); @@ -245,6 +283,7 @@ $.Drawer.prototype = { updateViewport( this ); this.midUpdate = false; //this.profiler.endUpdate(); + return this; }, /** @@ -375,6 +414,12 @@ function updateViewport( drawer ) { drawer.updateAgain = false; + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-viewport', { + viewer: drawer.viewer + }); + } + var tile, level, best = null, @@ -515,6 +560,7 @@ function updateViewport( drawer ) { // because we haven't finished drawing, so drawer.updateAgain = true; } + } @@ -527,6 +573,20 @@ function updateLevel( drawer, haveDrawn, level, levelOpacity, levelVisibility, v viewportCenter = drawer.viewport.pixelFromPoint( drawer.viewport.getCenter() ); + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-level', { + viewer: drawer.viewer, + havedrawn: haveDrawn, + level: level, + opacity: levelOpacity, + visibility: levelVisibility, + topleft: viewportTopLeft, + bottomright: viewportBottomRight, + currenttime: currentTime, + best: best + }); + } + //OK, a new drawing so do your calculations tileTL = drawer.source.getTileAtPoint( level, viewportTL ); tileBR = drawer.source.getTileAtPoint( level, viewportBR ); @@ -560,6 +620,7 @@ function updateLevel( drawer, haveDrawn, level, levelOpacity, levelVisibility, v } } + return best; } @@ -577,6 +638,13 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le drawTile = drawLevel, newbest; + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'update-tile', { + viewer: drawer.viewer, + tile: tile + }); + } + setCoverage( drawer.coverage, level, x, y, false ); if ( !tile.exists ) { @@ -1073,6 +1141,13 @@ function drawTiles( drawer, lastDrawn ){ $.console.error(e); } } + + if( drawer.viewer ){ + drawer.viewer.raiseEvent( 'tile-drawn', { + viewer: drawer.viewer, + tile: tile + }); + } } } diff --git a/src/eventhandler.js b/src/eventhandler.js index 12b99330..7e57fae8 100644 --- a/src/eventhandler.js +++ b/src/eventhandler.js @@ -66,7 +66,7 @@ $.EventHandler.prototype = { removeAllHandlers: function( eventName ){ this.events[ eventName ] = []; }, - + /** * Retrive the list of all handlers registered for a given event. @@ -99,6 +99,8 @@ $.EventHandler.prototype = { * @param {Function} handler - Function to call when event is triggered. */ raiseEvent: function( eventName, eventArgs ) { + //uncomment if you want to get a log og all events + //$.console.log( eventName ); var handler = this.getHandler( eventName ); if ( handler ) { diff --git a/src/highlightoverlay.js b/src/highlightoverlay.js deleted file mode 100644 index 0a045e62..00000000 --- a/src/highlightoverlay.js +++ /dev/null @@ -1,33 +0,0 @@ -function addOverlay(viewer, x1, y1, x2, y2) -{ - var div = document.createElement("div"); - var rect = new Seadragon.Rect(x1, y1, x2, y2); - - div.className = "overlay"; - viewer.drawer.addOverlay(div, rect); -}; - -function addOverlays(viewer) -{ - var factor = viewer.source.height / viewer.source.width; - $.each("".split("+"), function(index, word) { - if (word!="") { - $.getJSON('/beta/lccn/sn83030213/1865-04-10/ed-1/seq-1/coordinates/;words='+word, function(all_coordinates) { - var boxes = []; - for (word in all_coordinates) { - var coordinates = all_coordinates[word]; - for (k in coordinates) { - var v = coordinates[k]; - addOverlay( - viewer, - v["hpos"], - v["vpos"]*factor, - v["width"], - v["height"]*factor - ); - } - } - }); - } - }); -}; diff --git a/src/viewer.js b/src/viewer.js index 85f507fd..8ba57718 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -379,7 +379,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, animationTime: this.animationTime, showNavigator: false, minZoomImageRatio: 1, - maxZoomPixelRatio: 1//, + maxZoomPixelRatio: 1, + viewer: this //, //TODO: figure out how to support these in a way that makes sense //minZoomLevel: this.minZoomLevel, //maxZoomLevel: this.maxZoomLevel @@ -400,7 +401,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, wrapVertical: this.wrapVertical, defaultZoomLevel: this.defaultZoomLevel, minZoomLevel: this.minZoomLevel, - maxZoomLevel: this.maxZoomLevel + maxZoomLevel: this.maxZoomLevel, + viewer: this }); } @@ -501,12 +503,13 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } } VIEWERS[ this.hash ] = this; - this.raiseEvent( "open" ); if( this.navigator ){ this.navigator.open( source ); } + this.raiseEvent( 'open', { source: source, viewer: this } ); + return this; }, @@ -530,6 +533,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, VIEWERS[ this.hash ] = null; delete VIEWERS[ this.hash ]; + + this.raiseEvent( 'close', { viewer: this } ); return this; }, @@ -551,6 +556,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, */ setMouseNavEnabled: function( enabled ){ this.innerTracker.setTracking( enabled ); + this.raiseEvent( 'mouse-enabled', { enabled: enabled, viewer: this } ); return this; }, @@ -581,6 +587,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } else { beginControlsAutoHide( this ); } + this.raiseEvent( 'controls-enabled', { enabled: enabled, viewer: this } ); + return this; }, @@ -741,6 +749,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, $.delegate( this, onContainerExit )(); } + this.raiseEvent( 'fullpage', { fullpage: fullPage, viewer: this } ); if ( this.viewport ) { oldBounds = this.viewport.getBounds(); @@ -776,7 +785,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } THIS[ this.hash ].forceRedraw = true; - this.raiseEvent( "resize", this ); updateOnce( this ); } @@ -801,9 +809,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, */ setVisible: function( visible ){ this.container.style.visibility = visible ? "" : "hidden"; + this.raiseEvent( 'visible', { visible: visible, viewer: this } ); return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.bindSequenceControls + * @return {OpenSeadragon.Viewer} Chainable. + */ bindSequenceControls: function(){ ////////////////////////////////////////////////////////////////////////// @@ -880,8 +895,15 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } } } + return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.bindStandardControls + * @return {OpenSeadragon.Viewer} Chainable. + */ bindStandardControls: function(){ ////////////////////////////////////////////////////////////////////////// // Navigation Controls @@ -994,14 +1016,22 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, ); } } - } + return this; }, + + /** + * @function + * @name OpenSeadragon.Viewer.prototype.goToPage + * @return {OpenSeadragon.Viewer} Chainable. + */ goToPage: function( page ){ //page is a 1 based index so normalize now //page = page; + this.raiseEvent( 'page', { page: page, viewer: this } ); + if( this.tileSources.length > page ){ THIS[ this.hash ].sequence = page; @@ -1025,6 +1055,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, this.openTileSource( this.tileSources[ page ] ); } + if( $.isFunction( this.onPageChange ) ){ this.onPageChange({ page: page, @@ -1034,6 +1065,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, if( this.referenceStrip ){ this.referenceStrip.setFocus( page ); } + return this; } }); @@ -1151,6 +1183,12 @@ function onCanvasClick( tracker, position, quick, shift ) { ); this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-click', { + tracker: tracker, + position: position, + quick: quick, + shift: shift + }); } function onCanvasDrag( tracker, position, delta, shift ) { @@ -1170,12 +1208,24 @@ function onCanvasDrag( tracker, position, delta, shift ) { this.viewport.applyConstraints(); } } + this.raiseEvent( 'canvas-click', { + tracker: tracker, + position: position, + delta: delta, + shift: shift + }); } function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) { if ( insideElementPress && this.viewport ) { this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-release', { + tracker: tracker, + position: position, + insideElementPress: insideElementPress, + insideElementRelease: insideElementRelease + }); } function onCanvasScroll( tracker, position, scroll, shift ) { @@ -1188,6 +1238,12 @@ function onCanvasScroll( tracker, position, scroll, shift ) { ); this.viewport.applyConstraints(); } + this.raiseEvent( 'canvas-scroll', { + tracker: tracker, + position: position, + scroll: scroll, + shift: shift + }); //cancels event return false; } @@ -1199,6 +1255,12 @@ function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) beginControlsAutoHide( this ); } } + this.raiseEvent( 'container-exit', { + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny + }); } function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) { @@ -1208,11 +1270,23 @@ function onContainerRelease( tracker, position, insideElementPress, insideElemen beginControlsAutoHide( this ); } } + this.raiseEvent( 'container-release', { + tracker: tracker, + position: position, + insideElementPress: insideElementPress, + insideElementRelease: insideElementRelease + }); } function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) { THIS[ this.hash ].mouseInside = true; abortControlsAutoHide( this ); + this.raiseEvent( 'container-enter', { + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny + }); } @@ -1249,7 +1323,6 @@ function updateOnce( viewer ) { // maintain image position viewer.viewport.resize( containerSize, true ); THIS[ viewer.hash ].prevContainerSize = containerSize; - viewer.raiseEvent( "resize" ); } animated = viewer.viewport.update(); diff --git a/src/viewport.js b/src/viewport.js index 5a055195..5ec1bfb6 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -35,6 +35,7 @@ $.Viewport = function( options ) { //internal state properties zoomPoint: null, + viewer: null, //configurable options springStiffness: $.DEFAULT_SETTINGS.springStiffness, @@ -73,6 +74,10 @@ $.Viewport = function( options ) { $.Viewport.prototype = { + /** + * @function + * @return {OpenSeadragon.Viewport} Chainable. + */ resetContentSize: function( contentSize ){ this.contentSize = contentSize; this.contentAspectX = this.contentSize.x / this.contentSize.y; @@ -81,6 +86,14 @@ $.Viewport.prototype = { this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY); this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); + + if( this.viewer ){ + this.viewer.raiseEvent( 'reset-size', { + contentSize: contentSize, + viewer: this.viewer + }); + } + return this; }, @@ -121,6 +134,12 @@ $.Viewport.prototype = { * @param {Boolean} immediately */ goHome: function( immediately ) { + if( this.viewer ){ + this.viewer.raiseEvent( 'home', { + immediately: immediately, + viewer: this.viewer + }); + } return this.fitBounds( this.getHomeBounds(), immediately ); }, @@ -243,6 +262,7 @@ $.Viewport.prototype = { /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ applyConstraints: function( immediately ) { var actualZoom = this.getZoom(), @@ -313,6 +333,14 @@ $.Viewport.prototype = { } this.fitBounds( bounds, immediately ); } + + if( this.viewer ){ + this.viewer.raiseEvent( 'constrain', { + immediately: immediately, + viewer: this.viewer + }); + } + return this; }, @@ -328,6 +356,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Rect} bounds * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitBounds: function( bounds, immediately ) { var aspect = this.getAspectRatio(), @@ -379,6 +408,7 @@ $.Viewport.prototype = { /** * @function * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitVertically: function( immediately ) { var center = this.getCenter(); @@ -403,6 +433,7 @@ $.Viewport.prototype = { /** * @function * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ fitHorizontally: function( immediately ) { var center = this.getCenter(); @@ -429,6 +460,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Point} delta * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ panBy: function( delta, immediately ) { var center = new $.Point( @@ -442,6 +474,7 @@ $.Viewport.prototype = { * @function * @param {OpenSeadragon.Point} center * @param {Boolean} immediately + * @return {OpenSeadragon.Viewport} Chainable. */ panTo: function( center, immediately ) { if ( immediately ) { @@ -452,11 +485,20 @@ $.Viewport.prototype = { this.centerSpringY.springTo( center.y ); } + if( this.viewer ){ + this.viewer.raiseEvent( 'pan', { + center: center, + immediately: immediately, + viewer: this.viewer + }); + } + return this; }, /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ zoomBy: function( factor, refPoint, immediately ) { return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); @@ -464,6 +506,7 @@ $.Viewport.prototype = { /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ zoomTo: function( zoom, refPoint, immediately ) { @@ -477,12 +520,21 @@ $.Viewport.prototype = { this.zoomSpring.springTo( zoom ); } + if( this.viewer ){ + this.viewer.raiseEvent( 'zoom', { + zoom: zoom, + refPoint: refPoint, + immediately: immediately, + viewer: this.viewer + }); + } return this; }, /** * @function + * @return {OpenSeadragon.Viewport} Chainable. */ resize: function( newContainerSize, maintain ) { var oldBounds = this.getBounds(), @@ -499,6 +551,14 @@ $.Viewport.prototype = { newBounds.height = newBounds.width / this.getAspectRatio(); } + if( this.viewer ){ + this.viewer.raiseEvent( 'resize', { + newContainerSize: newContainerSize, + maintain: maintain, + viewer: this.viewer + }); + } + return this.fitBounds( newBounds, true ); },