diff --git a/src/drawer.js b/src/drawer.js index 7c4852cb..a68e1bcb 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -500,10 +500,6 @@ $.Drawer.prototype = { if ( this.viewport.degrees !== 0 ) { this._offsetForRotation({degrees: this.viewport.degrees}); - } else{ - if(this.viewer.viewport.flipped) { - this._flip(); - } } if (tiledImage.getRotation(true) % 360 !== 0) { this._offsetForRotation({ @@ -512,6 +508,11 @@ $.Drawer.prototype = { tiledImage._getRotationPoint(true), true) }); } + 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) ) { + this._flip(); + } + } context.strokeRect( tile.position.x * $.pixelDensityRatio, @@ -645,7 +646,9 @@ $.Drawer.prototype = { context.save(); context.translate(point.x, point.y); - if(this.viewer.viewport.flipped){ + // 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)){ context.rotate(Math.PI / 180 * -options.degrees); context.scale(-1, 1); } else{ diff --git a/src/tiledimage.js b/src/tiledimage.js index d55656c9..eeb5a686 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -147,9 +147,6 @@ $.TiledImage = function( options ) { var degrees = options.degrees || 0; delete options.degrees; - // var flipped = options.flipped || false; - // delete options.flipped; - $.extend( true, this, { //internal state properties @@ -1887,34 +1884,31 @@ function drawTiles( tiledImage, lastDrawn ) { .getIntegerBoundingBox() .times($.pixelDensityRatio); - if(tiledImage._drawer.viewer.viewport.flipped || tiledImage.flipped ) { + // if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { // tiledImage._drawer._flip({}); // bounds.width = bounds.width - bounds.x; // bounds.width = tiledImage._drawer.viewer.viewport.getContainerSize().width - bounds.x; + // console.log("BOUNDS before: ", bounds); + + // bounds.width = bounds.width + bounds.x; // bounds.x = -bounds.x; - } + // console.log("Bounds Image: ", tiledImage._drawer.viewer.viewport.getContainerSize()); + // } } tiledImage._drawer._clear(true, bounds); } - console.log("BOUNDS: ", bounds); + console.log("BOUNDS after: ", bounds); // When scaling, we must rotate only when blending the sketch canvas to // avoid interpolation if (!sketchScale) { if (tiledImage.viewport.degrees !== 0) { - console.log("tiledImage.viewport.degrees !== 0"); tiledImage._drawer._offsetForRotation({ degrees: tiledImage.viewport.degrees, useSketch: useSketch }); - }/* else { - if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { - console.log("FLIP"); - tiledImage._drawer._flip({}); - } - }*/ + } if (tiledImage.getRotation(true) % 360 !== 0) { - console.log("tiledImage.getRotation(true) % 360 !== 0"); tiledImage._drawer._offsetForRotation({ degrees: tiledImage.getRotation(true), point: tiledImage.viewport.pixelFromPointNoRotate( @@ -1925,7 +1919,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) ) { - console.log("FLIP"); + console.log("FLIP1"); tiledImage._drawer._flip({}); } } @@ -2000,22 +1994,17 @@ function drawTiles( tiledImage, lastDrawn ) { if (!sketchScale) { if (tiledImage.getRotation(true) % 360 !== 0) { tiledImage._drawer._restoreRotationChanges(useSketch); - }/* else { - if((tiledImage._drawer.viewer.viewport.flipped && !tiledImage.flipped) || (!tiledImage._drawer.viewer.viewport.flipped && tiledImage.flipped) ) { - console.log("FLIP"); - tiledImage._drawer._flip({}); - } - }*/ + } if (tiledImage.viewport.degrees !== 0) { tiledImage._drawer._restoreRotationChanges(useSketch); } - 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) ) { - console.log("FLIP"); - tiledImage._drawer._flip({}); - } - } + // 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) ) { + // console.log("FLIP2"); + // tiledImage._drawer._flip({}); + // } + // } } if (useSketch) { @@ -2043,7 +2032,6 @@ function drawTiles( tiledImage, lastDrawn ) { bounds: bounds }); if (sketchScale) { - console.log("--------------------sketchScale--------------------"); if (tiledImage.getRotation(true) % 360 !== 0) { tiledImage._drawer._restoreRotationChanges(false); } @@ -2053,6 +2041,13 @@ 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) ) { + console.log("FLIP3"); + tiledImage._drawer._flip({}); + } + } + drawDebugInfo( tiledImage, lastDrawn ); } diff --git a/src/viewer.js b/src/viewer.js index 9be3e7fa..d023e985 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1435,6 +1435,7 @@ $.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,