diff --git a/changelog.txt b/changelog.txt index 16574a7a..1b701458 100644 --- a/changelog.txt +++ b/changelog.txt @@ -14,6 +14,9 @@ OPENSEADRAGON CHANGELOG * 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) +* Viewport.setRotation now allows all rotation angles (#466) +* Pinch rotate is now available (defaults to off) (#468) 1.1.1: diff --git a/src/drawer.js b/src/drawer.js index 0165d1f3..34cf3506 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -403,6 +403,16 @@ function updateViewport( drawer ) { viewportTL = rotatedBounds.getTopLeft(); viewportBR = rotatedBounds.getBottomRight(); } + else if (degrees !== 0) { + // This is just an approximation. + var orthBounds = viewportBounds.rotate(90); + viewportBounds.x -= orthBounds.width / 2; + viewportBounds.y -= orthBounds.height / 2; + viewportBounds.width += orthBounds.width; + viewportBounds.height += orthBounds.height; + viewportTL = viewportBounds.getTopLeft(); + viewportBR = viewportBounds.getBottomRight(); + } //Don't draw if completely outside of the viewport if ( !drawer.wrapHorizontal && diff --git a/src/dzitilesource.js b/src/dzitilesource.js index f5b75d69..eb283fab 100644 --- a/src/dzitilesource.js +++ b/src/dzitilesource.js @@ -222,6 +222,7 @@ function configureFromXML( tileSource, xmlDoc ){ var root = xmlDoc.documentElement, rootName = root.localName, + ns = xmlDoc.documentElement.namespaceURI, configuration = null, displayRects = [], dispRectNodes, @@ -233,7 +234,8 @@ function configureFromXML( tileSource, xmlDoc ){ if ( rootName == "Image" ) { try { - sizeNode = root.getElementsByTagName( "Size" )[ 0 ]; + sizeNode = root.getElementsByTagNameNS(ns, "Size" )[ 0 ]; + configuration = { Image: { xmlns: "http://schemas.microsoft.com/deepzoom/2008", @@ -255,10 +257,11 @@ function configureFromXML( tileSource, xmlDoc ){ ); } - dispRectNodes = root.getElementsByTagName( "DisplayRect" ); + dispRectNodes = root.getElementsByTagNameNS(ns, "DisplayRect" ); + for ( i = 0; i < dispRectNodes.length; i++ ) { dispRectNode = dispRectNodes[ i ]; - rectNode = dispRectNode.getElementsByTagName( "Rect" )[ 0 ]; + rectNode = dispRectNode.getElementsByTagNameNS(ns, "Rect" )[ 0 ]; displayRects.push({ Rect: { diff --git a/src/navigator.js b/src/navigator.js index d07a2bba..9e18d6ca 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -241,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().rotate(this.viewport.degrees); + var oldBounds = this.viewport.getBounds(); var oldCenter = this.viewport.getCenter(); this.viewport.resize( containerSize, true ); var imageHeight = 1 / this.source.aspectRatio; diff --git a/src/openseadragon.js b/src/openseadragon.js index e82d864d..9ce9adca 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -298,6 +298,7 @@ * @property {Boolean} [gestureSettingsMouse.flickEnabled=false] - Enable flick gesture * @property {Number} [gestureSettingsMouse.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsMouse.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture + * @property {Boolean} [gestureSettingsMouse.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsTouch] * Settings for gestures generated by a touch pointer device. (See {@link OpenSeadragon.GestureSettings}) @@ -309,6 +310,7 @@ * @property {Boolean} [gestureSettingsTouch.flickEnabled=true] - Enable flick gesture * @property {Number} [gestureSettingsTouch.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsTouch.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture + * @property {Boolean} [gestureSettingsTouch.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsPen] * Settings for gestures generated by a pen pointer device. (See {@link OpenSeadragon.GestureSettings}) @@ -320,6 +322,7 @@ * @property {Boolean} [gestureSettingsPen.flickEnabled=false] - Enable flick gesture * @property {Number} [gestureSettingsPen.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsPen.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture + * @property {Boolean} [gestureSettingsPen.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsUnknown] * Settings for gestures generated by unknown pointer devices. (See {@link OpenSeadragon.GestureSettings}) @@ -331,6 +334,7 @@ * @property {Boolean} [gestureSettingsUnknown.flickEnabled=true] - Enable flick gesture * @property {Number} [gestureSettingsUnknown.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsUnknown.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture + * @property {Boolean} [gestureSettingsUnknown.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {Number} [zoomPerClick=2.0] * The "zoom distance" per mouse click or touch tap. Note: Setting this to 1.0 effectively disables the click-to-zoom feature (also see gestureSettings[Mouse|Touch|Pen].clickToZoom/dblClickToZoom). @@ -917,10 +921,10 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ dblClickDistThreshold: 20, springStiffness: 6.5, animationTime: 1.2, - gestureSettingsMouse: { scrollToZoom: true, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25 }, - gestureSettingsTouch: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25 }, - gestureSettingsPen: { scrollToZoom: false, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25 }, - gestureSettingsUnknown: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25 }, + gestureSettingsMouse: { scrollToZoom: true, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, + gestureSettingsTouch: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, + gestureSettingsPen: { scrollToZoom: false, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, + gestureSettingsUnknown: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, zoomPerClick: 2, zoomPerScroll: 1.2, zoomPerSecond: 1.0, diff --git a/src/rectangle.js b/src/rectangle.js index 99172e7d..4e3746eb 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -194,7 +194,7 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{ newTopLeft; degrees = ( degrees + 360 ) % 360; - if( degrees % 90 !== 0 ) { + if (degrees % 90 !== 0) { throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); } diff --git a/src/viewer.js b/src/viewer.js index 6011dbe3..39ed6294 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2466,6 +2466,14 @@ function onCanvasPinch( event ) { this.viewport.panBy( panByPt, true ); this.viewport.applyConstraints(); } + if ( gestureSettings.pinchRotate ) { + // Pinch rotate + var angle1 = Math.atan2(event.gesturePoints[0].currentPos.y - event.gesturePoints[1].currentPos.y, + event.gesturePoints[0].currentPos.x - event.gesturePoints[1].currentPos.x); + var angle2 = Math.atan2(event.gesturePoints[0].lastPos.y - event.gesturePoints[1].lastPos.y, + event.gesturePoints[0].lastPos.x - event.gesturePoints[1].lastPos.x); + this.viewport.setRotation(this.viewport.getRotation() + ((angle1 - angle2) * (180 / Math.PI))); + } } /** * Raised when a pinch event occurs on the {@link OpenSeadragon.Viewer#canvas} element. diff --git a/src/viewport.js b/src/viewport.js index a224cbaa..fafaff6d 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -720,10 +720,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ }, /** - * Currently only 90 degree rotation is supported and it only works - * with the canvas. Additionally, the navigator does not rotate yet, - * debug mode doesn't rotate yet, and overlay rotation is only - * partially supported. + * Rotates this viewport to the angle specified. * @function * @return {OpenSeadragon.Viewport} Chainable. */ @@ -733,9 +730,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ } degrees = ( degrees + 360 ) % 360; - if( degrees % 90 !== 0 ) { - throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); - } this.degrees = degrees; this.viewer.forceRedraw();