diff --git a/changelog.txt b/changelog.txt index dd80da47..e9c895f1 100644 --- a/changelog.txt +++ b/changelog.txt @@ -13,6 +13,8 @@ OPENSEADRAGON CHANGELOG * Fixed MouseTracker cross-browser issues with tracking pointers over and out of the tracked element (pull request #448, fix for #152, #404, #420, and #427) * Fixed incorrect flick direction after image is rotated (#452) * Debug mode now works with rotate images (#453) +* Now supporting dzi xml with namespaces (#462) +* You can now rotate the navigator along with the main viewer (#455) 1.1.1: diff --git a/src/dzitilesource.js b/src/dzitilesource.js index 5ef2585e..f5b75d69 100644 --- a/src/dzitilesource.js +++ b/src/dzitilesource.js @@ -107,7 +107,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead var ns; if ( data.Image ) { ns = data.Image.xmlns; - } else if ( data.documentElement && "Image" == data.documentElement.tagName ) { + } else if ( data.documentElement && "Image" == data.documentElement.localName ) { ns = data.documentElement.namespaceURI; } @@ -221,7 +221,7 @@ function configureFromXML( tileSource, xmlDoc ){ } var root = xmlDoc.documentElement, - rootName = root.tagName, + rootName = root.localName, configuration = null, displayRects = [], dispRectNodes, diff --git a/src/navigator.js b/src/navigator.js index 24d35a3d..d07a2bba 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -50,6 +50,7 @@ $.Navigator = function( options ){ var viewer = options.viewer, + _this = this, viewerSize, navigatorSize, unneededElement; @@ -161,6 +162,11 @@ $.Navigator = function( options ){ style.cursor = 'default'; }( this.displayRegion.style, this.borderWidth )); + this.displayRegionContainer = $.makeNeutralElement("div"); + this.displayRegionContainer.id = this.element.id + '-displayregioncontainer'; + this.displayRegionContainer.className = "displayregioncontainer"; + this.displayRegionContainer.style.width = "100%"; + this.displayRegionContainer.style.height = "100%"; this.element.innerTracker = new $.MouseTracker({ element: this.element, @@ -203,12 +209,22 @@ $.Navigator = function( options ){ $.Viewer.apply( this, [ options ] ); - this.element.getElementsByTagName( 'div' )[0].appendChild( this.displayRegion ); + this.displayRegionContainer.appendChild(this.displayRegion); + this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer); unneededElement = this.element.getElementsByTagName('textarea')[0]; if (unneededElement) { unneededElement.parentNode.removeChild(unneededElement); } + if (options.navigatorRotate) + { + options.viewer.addHandler("rotate", function (args) { + _setTransformRotate(_this.displayRegionContainer, args.degrees); + _setTransformRotate(_this.displayRegion, -args.degrees); + _this.viewport.setRotation(args.degrees); + }); + + } }; $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{ @@ -225,7 +241,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* (this.container.clientHeight === 0 ? 1 : this.container.clientHeight) ); if ( !containerSize.equals( this.oldContainerSize ) ) { - var oldBounds = this.viewport.getBounds(); + var oldBounds = this.viewport.getBounds().rotate(this.viewport.degrees); var oldCenter = this.viewport.getCenter(); this.viewport.resize( containerSize, true ); var imageHeight = 1 / this.source.aspectRatio; @@ -318,7 +334,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* */ function onCanvasClick( event ) { if ( event.quick && this.viewer.viewport ) { - this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) ); + this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ).rotate( -this.viewer.viewport.degrees, this.viewer.viewport.getHomeBounds().getCenter() ) ); this.viewer.viewport.applyConstraints(); } } @@ -390,5 +406,18 @@ function onCanvasScroll( event ) { return false; } +/** + * @function + * @private + * @param {Object} element + * @param {Number} degrees + */ +function _setTransformRotate (element, degrees) { + element.style.webkitTransform = "rotate(" + degrees + "deg)"; + element.style.mozTransform = "rotate(" + degrees + "deg)"; + element.style.msTransform = "rotate(" + degrees + "deg)"; + element.style.oTransform = "rotate(" + degrees + "deg)"; + element.style.transform = "rotate(" + degrees + "deg)"; +} }( OpenSeadragon )); diff --git a/src/openseadragon.js b/src/openseadragon.js index 28e22eed..e4053374 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -375,6 +375,9 @@ * Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior. * Setting to false can also improve performance when the navigator is configured to a fixed size. * + * @property {Boolean} [navigatorRotate=true] + * If true, the navigator will be rotated together with the viewer. + * * @property {Number} [controlsFadeDelay=2000] * The number of milliseconds to wait once the user has stopped interacting * with the interface before begining to fade the controls. Assumes @@ -952,6 +955,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ navigatorHeight: null, navigatorWidth: null, navigatorAutoResize: true, + navigatorRotate: true, // INITIAL ROTATION degrees: 0, diff --git a/src/viewer.js b/src/viewer.js index 4b91185c..e872ee03 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1898,7 +1898,8 @@ function openTileSource( viewer, source, options ) { minZoomLevel: _this.minZoomLevel, maxZoomLevel: _this.maxZoomLevel, viewer: _this, - degrees: _this.degrees + degrees: _this.degrees, + navigatorRotate: _this.navigatorRotate }); } @@ -1988,7 +1989,8 @@ function openTileSource( viewer, source, options ) { tileSources: source, tileHost: _this.tileHost, prefixUrl: _this.prefixUrl, - viewer: _this + viewer: _this, + navigatorRotate: _this.navigatorRotate }); } } diff --git a/src/viewport.js b/src/viewport.js index 5e232157..48fa11a2 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -724,6 +724,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ this.degrees = degrees; this.viewer.forceRedraw(); + /** + * Raised when rotation has been changed. + * + * @event update-viewport + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {Number} degrees - The number of degrees the rotation was set to. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + if (this.viewer !== null) + { + this.viewer.raiseEvent('rotate', {"degrees": degrees}); + } return this; },