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.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(); this._flip();
} }
} }
@ -648,7 +648,7 @@ $.Drawer.prototype = {
context.translate(point.x, point.y); context.translate(point.x, point.y);
// If viewport and tiledImage are flipped, it would draw the image without flipping // If viewport and tiledImage are flipped, it would draw the image without flipping
// This if sentence is intended to represent a logical XOR // 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.rotate(Math.PI / 180 * -options.degrees);
context.scale(-1, 1); context.scale(-1, 1);
} else{ } else{

View File

@ -284,7 +284,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
setFlip: function(state) { setFlip: function(state) {
this.viewport.setFlip(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; return this;
}, },
@ -350,6 +351,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
style.height = Math.round( Math.max( height, 0 ) ) + 'px'; style.height = Math.round( Math.max( height, 0 ) ) + 'px';
} }
}, },
// overrides Viewer.addTiledImage // overrides Viewer.addTiledImage
@ -453,9 +456,8 @@ function onCanvasClick( event ) {
*/ */
this.viewer.raiseEvent('navigator-click', canvasClickEventArgs); this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) { 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; event.position.x = this.viewport.getContainerSize().x - event.position.x;
} }
var target = this.viewport.pointFromPixel(event.position); var target = this.viewport.pointFromPixel(event.position);
@ -515,7 +517,7 @@ function onCanvasDrag( event ) {
event.delta.y = 0; 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; event.delta.x = -event.delta.x;
} }

View File

@ -860,6 +860,16 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._raiseBoundsChange(); 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 * Get the point around which this tiled image is rotated
* @private * @private
@ -1884,7 +1894,7 @@ function drawTiles( tiledImage, lastDrawn ) {
.getIntegerBoundingBox() .getIntegerBoundingBox()
.times($.pixelDensityRatio); .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){ if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){
bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width); 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.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({}); tiledImage._drawer._flip({});
} }
} }
@ -2028,7 +2038,7 @@ function drawTiles( tiledImage, lastDrawn ) {
if (!sketchScale) { if (!sketchScale) {
if (tiledImage.viewport.degrees == 0 && tiledImage.getRotation(true) % 360 == 0){ 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({}); tiledImage._drawer._flip({});
} }
} }

View File

@ -2642,7 +2642,7 @@ function onCanvasKeyPress( event ) {
} }
return false; return false;
case 114: //r - clockwise rotation 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)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
} else{ } else{
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
@ -2650,7 +2650,7 @@ function onCanvasKeyPress( event ) {
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; return false;
case 82: //R - counterclockwise rotation 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)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
} else{ } else{
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
@ -2678,7 +2678,8 @@ function onCanvasClick( event ) {
if ( !haveKeyboardFocus ) { if ( !haveKeyboardFocus ) {
this.canvas.focus(); 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; event.position.x = this.viewport.getContainerSize().x - event.position.x;
} }
@ -2800,7 +2801,7 @@ function onCanvasDrag( event ) {
if( !this.panVertical ){ if( !this.panVertical ){
event.delta.y = 0; 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; event.delta.x = -event.delta.x;
} }
@ -3128,7 +3129,7 @@ function onCanvasScroll( event ) {
if (deltaScrollTime > this.minScrollDeltaTime) { if (deltaScrollTime > this.minScrollDeltaTime) {
this._lastScrollTime = thisScrollTime; 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; event.position.x = this.viewport.getContainerSize().x - event.position.x;
} }
@ -3495,7 +3496,7 @@ function onRotateLeft() {
if ( this.viewport ) { if ( this.viewport ) {
var currRotation = this.viewport.getRotation(); 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); currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
} else { } else {
currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360); currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
@ -3508,7 +3509,7 @@ function onRotateRight() {
if ( this.viewport ) { if ( this.viewport ) {
var currRotation = this.viewport.getRotation(); 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); currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
} else { } else {
currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360); 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 * @function
* @return {Boolean} Flip state. * @return {Boolean} Flip state.
*/ */