From 132c68c8bb55f8a0233905e36992cec83a13a356 Mon Sep 17 00:00:00 2001 From: Nelson Campos Date: Wed, 17 Oct 2018 12:45:10 +0100 Subject: [PATCH] Create getFlip function to retrieve tiledImage flipped state --- src/drawer.js | 4 ++-- src/navigator.js | 10 ++++++---- src/tiledimage.js | 16 +++++++++++++--- src/viewer.js | 15 ++++++++------- src/viewport.js | 2 +- 5 files changed, 30 insertions(+), 17 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index a68e1bcb..a099a5b7 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -509,7 +509,7 @@ $.Drawer.prototype = { }); } if((this.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 !== 0) || (this.viewport.degrees !== 0 && tiledImage.getRotation(true) % 360 == 0)){ - if((this.viewport.flipped && !tiledImage.flipped) || (!this.viewport.flipped && tiledImage.flipped) ) { + if((this.viewport.getFlip() && !tiledImage.flipped) || (!this.viewport.getFlip() && tiledImage.flipped) ) { this._flip(); } } @@ -648,7 +648,7 @@ $.Drawer.prototype = { context.translate(point.x, point.y); // If viewport and tiledImage are flipped, it would draw the image without flipping // This if sentence is intended to represent a logical XOR - if((!this.viewer.viewport.flipped && this.viewer.world._items[0].flipped) || (this.viewer.viewport.flipped && !this.viewer.world._items[0].flipped)){ + if((!this.viewer.viewport.getFlip() && this.viewer.world._items[0].flipped) || (this.viewer.viewport.getFlip() && !this.viewer.world._items[0].flipped)){ context.rotate(Math.PI / 180 * -options.degrees); context.scale(-1, 1); } else{ diff --git a/src/navigator.js b/src/navigator.js index 64b8c3a8..41d6e8d0 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -284,7 +284,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* setFlip: function(state) { this.viewport.setFlip(state); - this.setDisplayTransform(this.viewer.viewport.getFlip() ? "scale(-1,1)" : "scale(1,1)"); + var flip = ((this.viewport.getFlip() && !this.viewer.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.viewer.world._items[0].getFlip())); + this.setDisplayTransform(flip ? "scale(-1,1)" : "scale(1,1)"); return this; }, @@ -350,6 +351,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* style.height = Math.round( Math.max( height, 0 ) ) + 'px'; } + + }, // overrides Viewer.addTiledImage @@ -453,9 +456,8 @@ function onCanvasClick( event ) { */ this.viewer.raiseEvent('navigator-click', canvasClickEventArgs); - if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) { - if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) { + if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) { event.position.x = this.viewport.getContainerSize().x - event.position.x; } var target = this.viewport.pointFromPixel(event.position); @@ -515,7 +517,7 @@ function onCanvasDrag( event ) { event.delta.y = 0; } - if((this.viewer.viewport.flipped && !this.world._items[0].flipped) || (!this.viewer.viewport.flipped && this.world._items[0].flipped)) { + if((this.viewer.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewer.viewport.getFlip() && this.world._items[0].getFlip())) { event.delta.x = -event.delta.x; } diff --git a/src/tiledimage.js b/src/tiledimage.js index d09b8857..0da96e7d 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -860,6 +860,16 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag this._raiseBoundsChange(); }, + /** + * Get flip state stored on tiledImage. + * @function + * @return {Boolean} Flip state. + */ + getFlip: function() { + return this.flipped; + }, + + /** * Get the point around which this tiled image is rotated * @private @@ -1884,7 +1894,7 @@ function drawTiles( tiledImage, lastDrawn ) { .getIntegerBoundingBox() .times($.pixelDensityRatio); - if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { + if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) { if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){ bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width); } @@ -1911,7 +1921,7 @@ function drawTiles( tiledImage, lastDrawn ) { } if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){ - if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { + if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) { tiledImage._drawer._flip({}); } } @@ -2028,7 +2038,7 @@ function drawTiles( tiledImage, lastDrawn ) { if (!sketchScale) { if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){ - if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { + if((tiledImage._drawer.viewer.viewport.getFlip() && !tiledImage.getFlip()) || (!tiledImage._drawer.viewer.viewport.getFlip() && tiledImage.getFlip()) ) { tiledImage._drawer._flip({}); } } diff --git a/src/viewer.js b/src/viewer.js index 5ea11eb4..e1d50bc5 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2642,7 +2642,7 @@ function onCanvasKeyPress( event ) { } return false; case 114: //r - clockwise rotation - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); } else{ this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); @@ -2650,7 +2650,7 @@ function onCanvasKeyPress( event ) { this.viewport.applyConstraints(); return false; case 82: //R - counterclockwise rotation - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); } else{ this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); @@ -2678,7 +2678,8 @@ function onCanvasClick( event ) { if ( !haveKeyboardFocus ) { this.canvas.focus(); } - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ + console.log("FLipped Click"); event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -2800,7 +2801,7 @@ function onCanvasDrag( event ) { if( !this.panVertical ){ event.delta.y = 0; } - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ event.delta.x = -event.delta.x; } @@ -3128,7 +3129,7 @@ function onCanvasScroll( event ) { if (deltaScrollTime > this.minScrollDeltaTime) { this._lastScrollTime = thisScrollTime; - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ event.position.x = this.viewport.getContainerSize().x - event.position.x; } @@ -3495,7 +3496,7 @@ function onRotateLeft() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360); } else { currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360); @@ -3508,7 +3509,7 @@ function onRotateRight() { if ( this.viewport ) { var currRotation = this.viewport.getRotation(); - if((this.viewport.flipped && !this.world._items[0].flipped) || (!this.viewport.flipped && this.world._items[0].flipped)){ + if((this.viewport.getFlip() && !this.world._items[0].getFlip()) || (!this.viewport.getFlip() && this.world._items[0].getFlip())){ currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360); } else { currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360); diff --git a/src/viewport.js b/src/viewport.js index 3413dbc1..07c941c6 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -1531,7 +1531,7 @@ $.Viewport.prototype = { }, /** - * Gets flip state stored on viewport. + * Get flip state stored on viewport. * @function * @return {Boolean} Flip state. */