Create getFlip function to retrieve tiledImage flipped state

This commit is contained in:
Nelson Campos 2018-10-17 12:45:10 +01:00
parent bfd170689d
commit 132c68c8bb
5 changed files with 30 additions and 17 deletions

View File

@ -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{

View File

@ -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;
}

View File

@ -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({});
}
}

View File

@ -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);

View File

@ -1531,7 +1531,7 @@ $.Viewport.prototype = {
},
/**
* Gets flip state stored on viewport.
* Get flip state stored on viewport.
* @function
* @return {Boolean} Flip state.
*/