From 7e5c9e189733704a56dd56fae07afcab10c5f15b Mon Sep 17 00:00:00 2001 From: Nelson Campos Date: Tue, 10 Apr 2018 11:51:06 +0100 Subject: [PATCH] Changes flip store object from viewer to viewport. More than changing the store object of flip state, the code was simplified and the onFlip function from openseadragon was changed to receive a viewer argument. TiledImage had a flipped variable wrongly stored. From now on, flipped state must be read from the viewport object. --- src/drawer.js | 4 ++-- src/navigator.js | 8 ++++---- src/tiledimage.js | 4 ++-- src/viewer.js | 42 ++++++++++++++++++------------------------ src/viewport.js | 1 + 5 files changed, 27 insertions(+), 32 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 83159404..fbf66a76 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.flipped) { + if(this.viewer.viewport.flipped) { this._flip(); } } @@ -624,7 +624,7 @@ $.Drawer.prototype = { context.save(); context.translate(point.x, point.y); - if(this.viewer.flipped){ + if(this.viewer.viewport.flipped){ context.rotate(Math.PI / 180 * -options.degrees); context.scale(-1, 1); } else{ diff --git a/src/navigator.js b/src/navigator.js index 435127f4..790c8c2b 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -277,9 +277,9 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* /* Flip navigator element */ toggleFlip: function() { - this.flipped = !this.flipped; + this.viewport.flipped = !this.viewport.flipped; - this.setDisplayTransform(this.viewer.flipped ? "scale(-1,1)" : "scale(1,1)"); + this.setDisplayTransform(this.viewer.viewport.flipped ? "scale(-1,1)" : "scale(1,1)"); this.viewport.viewer.forceRedraw(); }, @@ -424,7 +424,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* */ function onCanvasClick( event ) { if ( event.quick && this.viewer.viewport ) { - if(this.viewer.flipped){ + if(this.viewer.viewport.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position)); @@ -446,7 +446,7 @@ function onCanvasDrag( event ) { event.delta.y = 0; } - if(this.viewer.flipped){ + if(this.viewer.viewport.flipped){ event.delta.x = -event.delta.x; } diff --git a/src/tiledimage.js b/src/tiledimage.js index f14a7d2c..cc2c32d3 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1887,7 +1887,7 @@ function drawTiles( tiledImage, lastDrawn ) { useSketch: useSketch }); } else { - if(tiledImage._drawer.viewer.flipped) { + if(tiledImage._drawer.viewer.viewport.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.flipped) { + if(tiledImage._drawer.viewer.viewport.flipped) { tiledImage._drawer._flip({}); } } diff --git a/src/viewer.js b/src/viewer.js index 4aa909e3..8cdd6fd7 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1252,7 +1252,6 @@ $.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.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 +1414,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, opacity: queueItem.options.opacity, preload: queueItem.options.preload, degrees: queueItem.options.degrees, - flipped: queueItem.options.flipped, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime, @@ -2622,7 +2620,7 @@ function onCanvasKeyPress( event ) { } return false; case 114: //r - 90 degrees clockwise rotation - if(this.flipped){ + if(this.viewport.flipped){ this.viewport.setRotation(this.viewport.degrees - 90); } else{ this.viewport.setRotation(this.viewport.degrees + 90); @@ -2630,7 +2628,7 @@ function onCanvasKeyPress( event ) { this.viewport.applyConstraints(); return false; case 82: //R - 90 degrees counterclockwise rotation - if(this.flipped){ + if(this.viewport.flipped){ this.viewport.setRotation(this.viewport.degrees + 90); } else{ this.viewport.setRotation(this.viewport.degrees - 90); @@ -2638,7 +2636,7 @@ function onCanvasKeyPress( event ) { this.viewport.applyConstraints(); return false; case 102: //f - onKeyboardFlip(); + onFlip(this); return false; default: // console.log( 'navigator keycode %s', event.keyCode ); @@ -2658,7 +2656,7 @@ function onCanvasClick( event ) { if ( !haveKeyboardFocus ) { this.canvas.focus(); } - if(this.flipped){ + if(this.viewport.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -2780,7 +2778,7 @@ function onCanvasDrag( event ) { if( !this.panVertical ){ event.delta.y = 0; } - if(this.flipped){ + if(this.viewport.flipped){ event.delta.x = -event.delta.x; } @@ -3108,7 +3106,7 @@ function onCanvasScroll( event ) { if (deltaScrollTime > this.minScrollDeltaTime) { this._lastScrollTime = thisScrollTime; - if(this.flipped){ + if(this.viewport.flipped){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -3477,7 +3475,7 @@ function onFullScreen() { function onRotateLeft() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.flipped ){ + if ( this.viewport.flipped ){ if (currRotation === 270) { currRotation = 0; } @@ -3502,7 +3500,7 @@ function onRotateLeft() { function onRotateRight() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if ( this.flipped ){ + if ( this.viewport.flipped ){ if (currRotation === 0) { currRotation = 270; } @@ -3524,22 +3522,18 @@ function onRotateRight() { /** * Note: When pressed f on keyboard or flip control button */ -function onButtonFlip() { - this.flipped = !this.flipped; - if(this.navigator){ - this.navigator.toggleFlip(); - } - this._forceRedraw = !this._forceRedraw; - this.forceRedraw(); +function onFlip( viewer ){ + viewer.viewport.flipped = !viewer.viewport.flipped; + + if(viewer.navigator){ + viewer.navigator.toggleFlip(); + } + viewer._forceRedraw = !viewer._forceRedraw; + viewer.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 onButtonFlip() { + onFlip(this); } diff --git a/src/viewport.js b/src/viewport.js index 9d357910..95632271 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -107,6 +107,7 @@ $.Viewport = function( options ) { minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel, degrees: $.DEFAULT_SETTINGS.degrees, + flipped: $.DEFAULT_SETTINGS.flipped, homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer }, options );