diff --git a/changelog.txt b/changelog.txt index 49f5f44e..d2429333 100644 --- a/changelog.txt +++ b/changelog.txt @@ -45,6 +45,8 @@ OPENSEADRAGON CHANGELOG * 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/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 e4053374..e68560b3 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -295,6 +295,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}) @@ -306,6 +307,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}) @@ -317,6 +319,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}) @@ -328,6 +331,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). @@ -913,10 +917,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 3a3ba547..a546a2e4 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -201,7 +201,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/tiledimage.js b/src/tiledimage.js index 4a19278c..0134897a 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -224,6 +224,15 @@ function updateViewport( tiledImage ) { var rotatedBounds = viewportBounds.rotate( degrees ); 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 diff --git a/src/viewer.js b/src/viewer.js index 93c8394b..4027c73e 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2409,6 +2409,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 9ad8dab3..d599b4e8 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -746,10 +746,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. */ @@ -759,9 +756,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();