From 3353bd5f6941f2b06c008ac2c3c4eab193bad453 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Wed, 13 Aug 2014 15:52:20 +0100 Subject: [PATCH 01/10] Support other rotation angles. --- src/drawer.js | 9 ++++++++- src/rectangle.js | 3 --- src/viewport.js | 3 --- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 0165d1f3..a8db0265 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -398,11 +398,18 @@ function updateViewport( drawer ) { } //Change bounds for rotation - if (degrees === 90 || degrees === 270) { + if (degrees !== 0) { var rotatedBounds = viewportBounds.rotate( degrees ); viewportTL = rotatedBounds.getTopLeft(); viewportBR = rotatedBounds.getBottomRight(); } + else if (degrees !== 0) { + var factor = 0.5 / drawer.viewer.viewport.getZoom(); + viewportTL.x -= factor; + viewportTL.y -= factor; + viewportBR.x += factor; + viewportBR.y += factor; + } //Don't draw if completely outside of the viewport if ( !drawer.wrapHorizontal && diff --git a/src/rectangle.js b/src/rectangle.js index 99172e7d..b518190e 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -194,9 +194,6 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{ newTopLeft; degrees = ( degrees + 360 ) % 360; - if( degrees % 90 !== 0 ) { - throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); - } if( degrees === 0 ){ return new $.Rect( diff --git a/src/viewport.js b/src/viewport.js index ccc50a8a..fb64c1df 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -726,9 +726,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(); From 50f9a82089c134ed9f81295a294311563f8737ca Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Fri, 15 Aug 2014 15:47:50 +0100 Subject: [PATCH 02/10] Small rotation fixes. --- src/drawer.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index a8db0265..5e4b59b7 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -398,13 +398,20 @@ function updateViewport( drawer ) { } //Change bounds for rotation - if (degrees !== 0) { + if (degrees === 90 || degrees === 270) { var rotatedBounds = viewportBounds.rotate( degrees ); viewportTL = rotatedBounds.getTopLeft(); viewportBR = rotatedBounds.getBottomRight(); } else if (degrees !== 0) { - var factor = 0.5 / drawer.viewer.viewport.getZoom(); + /* + var factor1 = drawer.viewer.viewport.imageToViewportRectangle(0, 0, 256, 256); + viewportBounds.width += factor1.width; + viewportBounds.height += factor1.width; + viewportTL = viewportBounds.getTopLeft(); + viewportBR = viewportBounds.getBottomRight(); + */ + var factor = 0.3 / drawer.viewer.viewport.getZoom(); viewportTL.x -= factor; viewportTL.y -= factor; viewportBR.x += factor; From e00e4c53ef5d38cfabf7bbad841fb665648f559c Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Tue, 19 Aug 2014 09:51:27 +0100 Subject: [PATCH 03/10] Proper viewport bounds changes for rotation. --- src/drawer.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 5e4b59b7..64d2b671 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -404,18 +404,15 @@ function updateViewport( drawer ) { viewportBR = rotatedBounds.getBottomRight(); } else if (degrees !== 0) { - /* - var factor1 = drawer.viewer.viewport.imageToViewportRectangle(0, 0, 256, 256); - viewportBounds.width += factor1.width; - viewportBounds.height += factor1.width; + var orthBounds = viewportBounds.rotate(90); + var halfWidth = orthBounds.width / 2; + var halfHeight = orthBounds.height / 2; + viewportBounds.x -= halfWidth / 2; + viewportBounds.y -= halfHeight / 2; + viewportBounds.width += halfWidth; + viewportBounds.height += halfHeight; viewportTL = viewportBounds.getTopLeft(); viewportBR = viewportBounds.getBottomRight(); - */ - var factor = 0.3 / drawer.viewer.viewport.getZoom(); - viewportTL.x -= factor; - viewportTL.y -= factor; - viewportBR.x += factor; - viewportBR.y += factor; } //Don't draw if completely outside of the viewport From 1c63c96f0415ed2a1c65f6b438b24e3be8903904 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Tue, 19 Aug 2014 15:56:23 +0100 Subject: [PATCH 04/10] Increase viewport bounds slightly for rotation. --- src/drawer.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 64d2b671..248266ba 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -405,12 +405,10 @@ function updateViewport( drawer ) { } else if (degrees !== 0) { var orthBounds = viewportBounds.rotate(90); - var halfWidth = orthBounds.width / 2; - var halfHeight = orthBounds.height / 2; - viewportBounds.x -= halfWidth / 2; - viewportBounds.y -= halfHeight / 2; - viewportBounds.width += halfWidth; - viewportBounds.height += halfHeight; + viewportBounds.x -= orthBounds.width / 2; + viewportBounds.y -= orthBounds.height / 2; + viewportBounds.width += orthBounds.width; + viewportBounds.height += orthBounds.height; viewportTL = viewportBounds.getTopLeft(); viewportBR = viewportBounds.getBottomRight(); } From ea80c05a05f2693f8df2ca88debca269ef40bc9a Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Wed, 20 Aug 2014 09:21:02 +0100 Subject: [PATCH 05/10] Replace error for non right-angle rotations in Rect.rotate. --- src/drawer.js | 1 + src/navigator.js | 2 +- src/rectangle.js | 5 +++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/drawer.js b/src/drawer.js index 248266ba..34cf3506 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -404,6 +404,7 @@ function updateViewport( drawer ) { 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; 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/rectangle.js b/src/rectangle.js index b518190e..1bac049f 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -195,6 +195,11 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{ degrees = ( degrees + 360 ) % 360; + if (degrees % 90 !== 0) + { + throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.'); + } + if( degrees === 0 ){ return new $.Rect( this.x, From 097714cf39eac703a30ffd704a816d50d4426d79 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Wed, 20 Aug 2014 09:58:40 +0100 Subject: [PATCH 06/10] Implements pinch rotate. --- src/viewer.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/viewer.js b/src/viewer.js index 5435b3a0..0df3e77a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2465,6 +2465,12 @@ function onCanvasPinch( event ) { this.viewport.applyConstraints(); } } + // 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. * From c3b292cfb16f041502dca3f0447cc4c2837142e9 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Fri, 22 Aug 2014 14:57:20 +0100 Subject: [PATCH 07/10] Fix code style issue. --- src/rectangle.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/rectangle.js b/src/rectangle.js index 1bac049f..4e3746eb 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -194,9 +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.'); } From 0ff6eb443df152a997c7a2e154936484b0e6b40d Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Fri, 22 Aug 2014 15:22:00 +0100 Subject: [PATCH 08/10] Added pinchRotate option. --- src/openseadragon.js | 12 ++++++++---- src/viewer.js | 14 ++++++++------ 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index a74bbfcc..fb915644 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). @@ -916,10 +920,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/viewer.js b/src/viewer.js index 0df3e77a..9fab1181 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2464,13 +2464,15 @@ 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))); + } } - // 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. * From e9382ffbf70be2369368994edc40748e4a8bd676 Mon Sep 17 00:00:00 2001 From: Dominik Picheta Date: Tue, 26 Aug 2014 14:56:24 +0100 Subject: [PATCH 09/10] Fixes doc comment. --- src/viewport.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/viewport.js b/src/viewport.js index 02b262f8..4de54f96 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -713,10 +713,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. */ From bcb16de02bb3a6cbf1797bfd3f7d56022203b854 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Tue, 26 Aug 2014 10:49:10 -0700 Subject: [PATCH 10/10] Changelog for #466 and #468 --- changelog.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/changelog.txt b/changelog.txt index e9c895f1..1b701458 100644 --- a/changelog.txt +++ b/changelog.txt @@ -15,6 +15,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: