diff --git a/images/flip_grouphover.png b/images/flip_grouphover.png index 014ead6a..24c110c8 100644 Binary files a/images/flip_grouphover.png and b/images/flip_grouphover.png differ diff --git a/images/flip_hover.png b/images/flip_hover.png index 526dc991..af97e717 100644 Binary files a/images/flip_hover.png and b/images/flip_hover.png differ diff --git a/images/flip_pressed.png b/images/flip_pressed.png index 28b074c2..026d55ec 100644 Binary files a/images/flip_pressed.png and b/images/flip_pressed.png differ diff --git a/images/flip_rest.png b/images/flip_rest.png index 6f15e5da..97145821 100644 Binary files a/images/flip_rest.png and b/images/flip_rest.png differ diff --git a/src/drawer.js b/src/drawer.js index 894b59a9..83159404 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -501,7 +501,7 @@ $.Drawer.prototype = { if ( this.viewport.degrees !== 0 ) { this._offsetForRotation({degrees: this.viewport.degrees}); } else{ - if(this.viewer.doFlip) { + if(this.viewer.flipped) { this._flip(); } } @@ -624,7 +624,7 @@ $.Drawer.prototype = { context.save(); context.translate(point.x, point.y); - if(this.viewer.doFlip){ + if(this.viewer.flipped){ context.rotate(Math.PI / 180 * -options.degrees); context.scale(-1, 1); } else{ @@ -640,7 +640,6 @@ $.Drawer.prototype = { options.point.times($.pixelDensityRatio) : this.getCanvasCenter(); var context = this._getContext(options.useSketch); - // context.save(); context.translate(point.x, 0); context.scale(-1, 1); diff --git a/src/navigator.js b/src/navigator.js index 5556c5e0..435127f4 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -276,26 +276,16 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* /** /* Flip navigator element */ - toogleFlip: function() { - this.doFlip = !this.doFlip; + toggleFlip: function() { + this.flipped = !this.flipped; - this.setDisplayTransform(this.viewer.doFlip ? "scale(-1,1)" : "scale(1,1)"); + this.setDisplayTransform(this.viewer.flipped ? "scale(-1,1)" : "scale(1,1)"); this.viewport.viewer.forceRedraw(); }, setDisplayTransform: function(rule) { - this.displayRegion.style.webkitTransform = rule; - this.displayRegion.style.mozTransform = rule; - this.displayRegion.style.msTransform = rule; - this.displayRegion.style.oTransform = rule; - this.displayRegion.style.transform = rule; - - this.canvas.style.webkitTransform = rule; - this.canvas.style.mozTransform = rule; - this.canvas.style.msTransform = rule; - this.canvas.style.oTransform = rule; - this.canvas.style.transform = rule; - + setElementTransform(this.displayRegion, rule); + setElementTransform(this.canvas, rule); setElementTransform(this.element, rule); }, @@ -434,7 +424,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* */ function onCanvasClick( event ) { if ( event.quick && this.viewer.viewport ) { - if(this.viewer.doFlip){ + if(this.viewer.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position)); @@ -456,7 +446,7 @@ function onCanvasDrag( event ) { event.delta.y = 0; } - if(this.viewer.doFlip){ + if(this.viewer.flipped){ event.delta.x = -event.delta.x; } @@ -536,4 +526,9 @@ function setElementTransform( element, rule ) { } + + + + + }( OpenSeadragon )); diff --git a/src/openseadragon.js b/src/openseadragon.js index a180e522..85efbb1a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -1153,7 +1153,7 @@ function OpenSeadragon( options ){ degrees: 0, // INITIAL FLIP STATE - doFlip: false, + flipped: false, // APPEARANCE opacity: 1, diff --git a/src/tiledimage.js b/src/tiledimage.js index 5c35de31..f14a7d2c 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) { useSketch: useSketch }); } else { - if(tiledImage._drawer.viewer.doFlip) { + if(tiledImage._drawer.viewer.flipped) { tiledImage._drawer._flip({}); } } @@ -1974,7 +1974,7 @@ function drawTiles( tiledImage, lastDrawn ) { if (tiledImage.viewport.degrees !== 0) { tiledImage._drawer._restoreRotationChanges(useSketch); } else{ - if(tiledImage._drawer.viewer.doFlip) { + if(tiledImage._drawer.viewer.flipped) { tiledImage._drawer._flip({}); } } diff --git a/src/viewer.js b/src/viewer.js index e597041c..4aa909e3 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1252,7 +1252,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Boolean} [options.preload=false] Default switch for loading hidden images (true loads, false blocks) * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. - * @param {Boolean} [options.doFlip=false] Initial flip/mirror state + * @param {Boolean} [options.flipped=false] Initial flip/mirror state * @param {String} [options.compositeOperation] How the image is composited onto other images. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. @@ -1415,7 +1415,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, opacity: queueItem.options.opacity, preload: queueItem.options.preload, degrees: queueItem.options.degrees, - doFlip: queueItem.options.doFlip, + flipped: queueItem.options.flipped, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime, @@ -1676,7 +1676,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, onFullScreenHandler = $.delegate( this, onFullScreen ), onRotateLeftHandler = $.delegate( this, onRotateLeft ), onRotateRightHandler = $.delegate( this, onRotateRight ), - onFlipHandler = $.delegate( this, onFlip), + onFlipHandler = $.delegate( this, onButtonFlip), onFocusHandler = $.delegate( this, onFocus ), onBlurHandler = $.delegate( this, onBlur ), navImages = this.navImages, @@ -2622,15 +2622,15 @@ function onCanvasKeyPress( event ) { } return false; case 114: //r - 90 degrees clockwise rotation - if(this.doFlip){ + if(this.flipped){ this.viewport.setRotation(this.viewport.degrees - 90); } else{ this.viewport.setRotation(this.viewport.degrees + 90); } this.viewport.applyConstraints(); return false; - case 82: //R - 90 degrees counter clockwise rotation - if(this.doFlip){ + case 82: //R - 90 degrees counterclockwise rotation + if(this.flipped){ this.viewport.setRotation(this.viewport.degrees + 90); } else{ this.viewport.setRotation(this.viewport.degrees - 90); @@ -2638,12 +2638,7 @@ function onCanvasKeyPress( event ) { this.viewport.applyConstraints(); return false; case 102: //f - this.doFlip = !this.doFlip; - if(this.navigator){ - this.navigator.toogleFlip(); - } - this._forceRedraw = !this._forceRedraw; - this.forceRedraw(); + onKeyboardFlip(); return false; default: // console.log( 'navigator keycode %s', event.keyCode ); @@ -2663,7 +2658,7 @@ function onCanvasClick( event ) { if ( !haveKeyboardFocus ) { this.canvas.focus(); } - if(this.doFlip){ + if(this.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -2785,7 +2780,7 @@ function onCanvasDrag( event ) { if( !this.panVertical ){ event.delta.y = 0; } - if(this.doFlip){ + if(this.flipped){ event.delta.x = -event.delta.x; } @@ -3113,7 +3108,7 @@ function onCanvasScroll( event ) { if (deltaScrollTime > this.minScrollDeltaTime) { this._lastScrollTime = thisScrollTime; - if(this.doFlip){ + if(this.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -3482,7 +3477,7 @@ function onFullScreen() { function onRotateLeft() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.doFlip ){ + if ( this.flipped ){ if (currRotation === 270) { currRotation = 0; } @@ -3507,7 +3502,7 @@ function onRotateLeft() { function onRotateRight() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.doFlip ){ + if ( this.flipped ){ if (currRotation === 0) { currRotation = 270; } @@ -3527,17 +3522,26 @@ function onRotateRight() { } /** - * Note: The current rotation feature is limited to 90 degree turns. + * Note: When pressed f on keyboard or flip control button */ -function onFlip() { - this.doFlip = !this.doFlip; +function onButtonFlip() { + this.flipped = !this.flipped; if(this.navigator){ - this.navigator.toogleFlip(); + this.navigator.toggleFlip(); } this._forceRedraw = !this._forceRedraw; this.forceRedraw(); } +function onKeyboardFlip() { + this.viewer.flipped = !this.viewer.flipped; + if(this.viewer.navigator){ + this.viewer.navigator.toggleFlip(); + } + this.viewer._forceRedraw = !this.viewer._forceRedraw; + this.viewer.forceRedraw(); +} + function onPrevious(){