diff --git a/build.properties b/build.properties index 73fc8d45..33f337fa 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 107 +BUILD_ID: 111 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/build.xml b/build.xml index ab826346..fc321c13 100644 --- a/build.xml +++ b/build.xml @@ -62,7 +62,6 @@ | Compiling OpenSeadragon Web Site - @@ -70,6 +69,7 @@ + @@ -78,6 +78,7 @@ + diff --git a/openseadragon.js b/openseadragon.js index 4164956d..ecfaf58c 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,7 +1,7 @@ /*globals OpenSeadragon */ /** - * @version OpenSeadragon 0.9.107 + * @version OpenSeadragon 0.9.111 * * @fileOverview *

@@ -3721,16 +3721,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } if( this.preserveVewport ){ - this.viewport.resetContentSize( this.source.dimensions ); - } + this.source.overlays = this.source.overlays || []; + this.drawer = new $.Drawer({ source: this.source, viewport: this.viewport, element: this.canvas, - overlays: this.overlays, + overlays: [].concat( this.overlays ).concat( this.source.overlays ), maxImageCacheCount: this.maxImageCacheCount, imageLoaderLimit: this.imageLoaderLimit, minZoomImageRatio: this.minZoomImageRatio, @@ -3832,8 +3832,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @return {OpenSeadragon.Viewer} Chainable. */ close: function ( ) { + + if( this.drawer ){ + this.drawer.clearOverlays(); + } + this.source = null; this.drawer = null; + this.viewport = this.preserveViewport ? this.viewport : null; //this.profiler = null; this.canvas.innerHTML = ""; @@ -8400,6 +8406,16 @@ $.Tile.prototype = { if ( element.parentNode ) { element.parentNode.removeChild( element ); + //this should allow us to preserve overlays when required between + //pages + if( element.prevElementParent ){ + style.display = 'none'; + //element.prevElementParent.insertBefore( + // element, + // element.prevNextSibling + //); + document.body.appendChild( element ); + } } style.top = ""; @@ -8424,6 +8440,9 @@ $.Tile.prototype = { size; if ( element.parentNode != container ) { + //save the source parent for later if we need it + element.prevElementParent = element.parentNode; + element.prevNextSibling = element.nextSibling; container.appendChild( element ); } @@ -8442,6 +8461,7 @@ $.Tile.prototype = { style.left = position.x + "px"; style.top = position.y + "px"; style.position = "absolute"; + style.display = 'block'; if ( scales ) { style.width = size.x + "px"; @@ -8586,22 +8606,46 @@ $.Drawer = function( options ) { (function( _this, overlay ){ - var link = document.createElement("a"), - rect = new $.Rect( - overlay.x, - overlay.y, + var element = null, + rect = ( overlay.height && overlay.width ) ? new $.Rect( + overlay.x || overlay.px, + overlay.y || overlay.py, overlay.width, overlay.height + ) : new $.Point( + overlay.x || overlay.px, + overlay.y || overlay.py ), - id = Math.floor(Math.random()*10000000); - - link.href = "#/overlay/"+id; - link.id = id; - link.className = overlay.className ? + id = overlay.id ? + overlay.id : + "openseadragon-overlay-"+Math.floor(Math.random()*10000000); + + element = $.getElement(overlay.id); + if( !element ){ + element = document.createElement("a"); + element.href = "#/overlay/"+id; + } + element.id = id; + element.className = element.className + " " + ( overlay.className ? overlay.className : - "openseadragon-overlay"; + "openseadragon-overlay" + ); - _this.overlays[ i ] = new $.Overlay( link, rect ); + + if(overlay.px !== undefined){ + //if they specified 'px' so its in pixel coordinates so + //we need to translate to viewport coordinates + rect = _this.viewport.imageToViewportRectangle( rect ); + } + if( overlay.placement ){ + _this.overlays[ i ] = new $.Overlay( + element, + _this.viewport.pointFromPixel(rect), + $.OverlayPlacement[overlay.placement.toUpperCase()] + ); + }else{ + _this.overlays[ i ] = new $.Overlay( element, rect ); + } }( this, this.overlays[ i ] )); @@ -10164,6 +10208,50 @@ $.Viewport.prototype = { ).plus( bounds.getTopLeft() ); + }, + + /** + * Translates from Seajax viewer coordinate + * system to image coordinate system + */ + viewportToImageCoordinates: function(viewerX, viewerY) { + return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX); + }, + + /** + * Translates from image coordinate system to + * Seajax viewer coordinate system + */ + imageToViewportCoordinates: function( imageX, imageY ) { + return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX); + }, + + /** + * Translates from a rectanlge which describes a portion of + * the image in pixel coordinates to OpenSeadragon viewport + * rectangle coordinates. + */ + imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) { + var coordA, + coordB, + rect; + if( arguments.length == 1 ){ + //they passed a rectangle instead of individual components + rect = imageX; + return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height); + } + coordA = this.imageToViewportCoordinates( + imageX, imageY + ); + coordB = this.imageToViewportCoordinates( + pixelWidth, pixelHeight + ); + return new $.Rect( + coordA.x, + coordA.y, + coordA.x + coordB.x, + coordA.y + coordB.y + ); } }; diff --git a/src/drawer.js b/src/drawer.js index 3ebc9083..5f39bd0a 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -113,22 +113,46 @@ $.Drawer = function( options ) { (function( _this, overlay ){ - var link = document.createElement("a"), - rect = new $.Rect( - overlay.x, - overlay.y, + var element = null, + rect = ( overlay.height && overlay.width ) ? new $.Rect( + overlay.x || overlay.px, + overlay.y || overlay.py, overlay.width, overlay.height + ) : new $.Point( + overlay.x || overlay.px, + overlay.y || overlay.py ), - id = Math.floor(Math.random()*10000000); - - link.href = "#/overlay/"+id; - link.id = id; - link.className = overlay.className ? + id = overlay.id ? + overlay.id : + "openseadragon-overlay-"+Math.floor(Math.random()*10000000); + + element = $.getElement(overlay.id); + if( !element ){ + element = document.createElement("a"); + element.href = "#/overlay/"+id; + } + element.id = id; + element.className = element.className + " " + ( overlay.className ? overlay.className : - "openseadragon-overlay"; + "openseadragon-overlay" + ); - _this.overlays[ i ] = new $.Overlay( link, rect ); + + if(overlay.px !== undefined){ + //if they specified 'px' so its in pixel coordinates so + //we need to translate to viewport coordinates + rect = _this.viewport.imageToViewportRectangle( rect ); + } + if( overlay.placement ){ + _this.overlays[ i ] = new $.Overlay( + element, + _this.viewport.pointFromPixel(rect), + $.OverlayPlacement[overlay.placement.toUpperCase()] + ); + }else{ + _this.overlays[ i ] = new $.Overlay( element, rect ); + } }( this, this.overlays[ i ] )); diff --git a/src/overlay.js b/src/overlay.js index c30d0fe4..7f0035c8 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -100,6 +100,16 @@ if ( element.parentNode ) { element.parentNode.removeChild( element ); + //this should allow us to preserve overlays when required between + //pages + if( element.prevElementParent ){ + style.display = 'none'; + //element.prevElementParent.insertBefore( + // element, + // element.prevNextSibling + //); + document.body.appendChild( element ); + } } style.top = ""; @@ -124,6 +134,9 @@ size; if ( element.parentNode != container ) { + //save the source parent for later if we need it + element.prevElementParent = element.parentNode; + element.prevNextSibling = element.nextSibling; container.appendChild( element ); } @@ -142,6 +155,7 @@ style.left = position.x + "px"; style.top = position.y + "px"; style.position = "absolute"; + style.display = 'block'; if ( scales ) { style.width = size.x + "px"; diff --git a/src/viewer.js b/src/viewer.js index 93933008..e5e4c575 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -402,16 +402,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, } if( this.preserveVewport ){ - this.viewport.resetContentSize( this.source.dimensions ); - } + this.source.overlays = this.source.overlays || []; + this.drawer = new $.Drawer({ source: this.source, viewport: this.viewport, element: this.canvas, - overlays: this.overlays, + overlays: [].concat( this.overlays ).concat( this.source.overlays ), maxImageCacheCount: this.maxImageCacheCount, imageLoaderLimit: this.imageLoaderLimit, minZoomImageRatio: this.minZoomImageRatio, @@ -513,8 +513,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @return {OpenSeadragon.Viewer} Chainable. */ close: function ( ) { + + if( this.drawer ){ + this.drawer.clearOverlays(); + } + this.source = null; this.drawer = null; + this.viewport = this.preserveViewport ? this.viewport : null; //this.profiler = null; this.canvas.innerHTML = ""; diff --git a/src/viewport.js b/src/viewport.js index 8470637c..5a055195 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -580,6 +580,50 @@ $.Viewport.prototype = { ).plus( bounds.getTopLeft() ); + }, + + /** + * Translates from Seajax viewer coordinate + * system to image coordinate system + */ + viewportToImageCoordinates: function(viewerX, viewerY) { + return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX); + }, + + /** + * Translates from image coordinate system to + * Seajax viewer coordinate system + */ + imageToViewportCoordinates: function( imageX, imageY ) { + return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX); + }, + + /** + * Translates from a rectanlge which describes a portion of + * the image in pixel coordinates to OpenSeadragon viewport + * rectangle coordinates. + */ + imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) { + var coordA, + coordB, + rect; + if( arguments.length == 1 ){ + //they passed a rectangle instead of individual components + rect = imageX; + return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height); + } + coordA = this.imageToViewportCoordinates( + imageX, imageY + ); + coordB = this.imageToViewportCoordinates( + pixelWidth, pixelHeight + ); + return new $.Rect( + coordA.x, + coordA.y, + coordA.x + coordB.x, + coordA.y + coordB.y + ); } }; diff --git a/www/base.html b/www/base.html index 1cb052fc..02ef5bd8 100644 --- a/www/base.html +++ b/www/base.html @@ -85,6 +85,9 @@
  • Custom Tile Sources
    • +
  • + Pulling from Zoom.it +
    • @@ -100,6 +103,9 @@
  • Zoom and Pan
    • +
  • + Overlays +
  • Viewport Navigator
    • diff --git a/www/overlay-highlights.html b/www/overlay-highlights.html deleted file mode 100644 index 9a0856e5..00000000 --- a/www/overlay-highlights.html +++ /dev/null @@ -1,64 +0,0 @@ -

    example: highlights

    - -
    -

    -  Highlighted overlays are very useful for directing users attention to - specific areas of interest, though the style is often decided based - on the specific content being presented. -

    -

    -  OpenSeadragon makes it easy to declare highlighted areas and control - the presentation through simple css mechanisms. -

    -

    - Try it on the iPad! (new since 0.9) -

    -
    - -
    -
    - Highlights -
    - -
    -
    - - \ No newline at end of file diff --git a/www/tilesource-dzi.html b/www/tilesource-dzi.html index 18499426..150f5f7d 100644 --- a/www/tilesource-dzi.html +++ b/www/tilesource-dzi.html @@ -33,8 +33,9 @@ OpenSeadragon({ id: "example-xmlhttprequest-for-dzi", prefixUrl: "/openseadragon/images/", - tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi", - showNavigator: true + tileSources: [ + "/openseadragon/examples/images/highsmith/highsmith.dzi" + ] });