Merge remote-tracking branch 'upstream/master'

changelog.txt

@@ -4,6 +4,7 @@ OPENSEADRAGON CHANGELOG
 2.2.2: (in progress)
 
 * BREAKING CHANGE: Tile.distance has been removed (#1027)
+* You can now set the rotation of individual tiled images (#1006)
 * Fixed CORS bug in IE 10 (#967)
 * Added support for commonjs (#984)
 * Added an option to addTiledImage to change the crossOriginPolicy (#981)
@@ -16,6 +17,9 @@ OPENSEADRAGON CHANGELOG
 * Fixed problem with "sparse image" DZI files (#995)
 * Optimization: Use the squared distance when comparing tiles (#1027)
 * Fix IndexSizeError on IE and Edge that occurred under certain circumstances (e.g. multi-image with transparency) (#1035)
+* ImageTileSource now works in IE8 (#1041)
+* LegacyTileSource now allows any image URLs regardless of type (#1056)
+* Fixed error in IE8 when zooming in (due to edge smoothing) (#1064)
 
 2.2.1:
 

src/drawer.js

@@ -323,7 +323,6 @@ $.Drawer.prototype = {
                 this.sketchCanvas.height = sketchCanvasSize.y;
                 this.sketchContext = this.sketchCanvas.getContext( "2d" );
 
-                // FIXME: should check if any tiled image get rotated as well.
                 // If the viewport is not currently rotated, the sketchCanvas
                 // will have the same size as the main canvas. However, if
                 // the viewport get rotated later on, we will need to resize it.
@@ -495,13 +494,14 @@ $.Drawer.prototype = {
         context.fillStyle = this.debugGridColor;
 
         if ( this.viewport.degrees !== 0 ) {
-            this._offsetForRotation(this.viewport.degrees);
+            this._offsetForRotation({degrees: this.viewport.degrees});
         }
         if (tiledImage.getRotation() !== 0) {
-            this._offsetForRotation(
+            this._offsetForRotation({
-                tiledImage.getRotation(),
+                degrees: tiledImage.getRotation(),
-                tiledImage.viewport.pixelFromPointNoRotate(
+                point: tiledImage.viewport.pixelFromPointNoRotate(
-                    tiledImage._getRotationPoint(true), true));
+                    tiledImage._getRotationPoint(true), true)
+            });
         }
 
         context.strokeRect(
@@ -606,13 +606,16 @@ $.Drawer.prototype = {
     },
 
     // private
-    _offsetForRotation: function(degrees, point, useSketch) {
+    _offsetForRotation: function(options) {
-        point = point || this.getCanvasCenter();
+        var point = options.point ?
-        var context = this._getContext(useSketch);
+            options.point.times($.pixelDensityRatio) :
+            this.getCanvasCenter();
+
+        var context = this._getContext(options.useSketch);
         context.save();
 
         context.translate(point.x, point.y);
-        context.rotate(Math.PI / 180 * degrees);
+        context.rotate(Math.PI / 180 * options.degrees);
         context.translate(-point.x, -point.y);
     },
 
@@ -635,8 +638,7 @@ $.Drawer.prototype = {
     // private
     _calculateSketchCanvasSize: function() {
         var canvasSize = this._calculateCanvasSize();
-        if (this.viewport.getRotation() === 0 &&
+        if (this.viewport.getRotation() === 0) {
-            !this.viewer.world._hasRotatedItem()) {
             return canvasSize;
         }
         // If the viewport is rotated, we need a larger sketch canvas in order

src/imagetilesource.js

@@ -114,8 +114,9 @@
             }
 
             $.addEvent(image, 'load', function () {
-                _this.width = image.naturalWidth;
+                /* IE8 fix since it has no naturalWidth and naturalHeight */
-                _this.height = image.naturalHeight;
+                _this.width = Object.prototype.hasOwnProperty.call(image, 'naturalWidth') ? image.naturalWidth : image.width;
+                _this.height = Object.prototype.hasOwnProperty.call(image, 'naturalHeight') ? image.naturalHeight : image.height;
                 _this.aspectRatio = _this.width / _this.height;
                 _this.dimensions = new $.Point(_this.width, _this.height);
                 _this._tileWidth = _this.width;
@@ -202,8 +203,9 @@
         _buildLevels: function () {
             var levels = [{
                     url: this._image.src,
-                    width: this._image.naturalWidth,
+                    /* IE8 fix since it has no naturalWidth and naturalHeight */
-                    height: this._image.naturalHeight
+                    width: Object.prototype.hasOwnProperty.call(this._image, 'naturalWidth') ? this._image.naturalWidth : this._image.width,
+                    height:  Object.prototype.hasOwnProperty.call(this._image, 'naturalHeight') ? this._image.naturalHeight : this._image.height
                 }];
 
             if (!this.buildPyramid || !$.supportsCanvas || !this.useCanvas) {
@@ -212,8 +214,10 @@
                 return levels;
             }
 
-            var currentWidth = this._image.naturalWidth;
+            /* IE8 fix since it has no naturalWidth and naturalHeight */
-            var currentHeight = this._image.naturalHeight;
+            var currentWidth = Object.prototype.hasOwnProperty.call(this._image, 'naturalWidth') ? this._image.naturalWidth : this._image.width;
+            var currentHeight = Object.prototype.hasOwnProperty.call(this._image, 'naturalHeight') ? this._image.naturalHeight : this._image.height;
+
 
             var bigCanvas = document.createElement("canvas");
             var bigContext = bigCanvas.getContext("2d");

src/legacytilesource.js

@@ -204,12 +204,7 @@ function filterFiles( files ){
         file = files[ i ];
         if( file.height &&
             file.width &&
-            file.url && (
+            file.url ){
-                file.url.toLowerCase().match(/^.*\.(png|jpg|jpeg|gif)(?:\?.*)?$/) || (
-                    file.mimetype &&
-                    file.mimetype.toLowerCase().match(/^.*\/(png|jpg|jpeg|gif)$/)
-                )
-            ) ){
             //This is sufficient to serve as a level
             filtered.push({
                 url: file.url,

src/tiledimage.js

@@ -550,20 +550,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
     },
 
     // private
-    // Convert rectangle in tiled image coordinates to viewport coordinates.
+    // Convert rectangle in viewport coordinates to this tiled image point
-    _tiledImageToViewportRectangle: function(rect) {
+    // coordinates (x in [0, 1] and y in [0, aspectRatio])
-        var scale = this._scaleSpring.current.value;
-        return new $.Rect(
-            rect.x * scale + this._xSpring.current.value,
-            rect.y * scale + this._ySpring.current.value,
-            rect.width * scale,
-            rect.height * scale,
-            rect.degrees)
-            .rotate(this.getRotation(), this._getRotationPoint(true));
-    },
-
-    // private
-    // Convert rectangle in viewport coordinates to tiled image coordinates.
     _viewportToTiledImageRectangle: function(rect) {
         var scale = this._scaleSpring.current.value;
         rect = rect.rotate(-this.getRotation(), this._getRotationPoint(true));
@@ -959,7 +947,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             var targetRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate(
                 this.source.getPixelRatio(level),
                 false
-            ).x * this._scaleSpring.current.value; //TODO: shouldn't that be target.value?
+            ).x * this._scaleSpring.current.value;
 
             var targetZeroRatio = viewport.deltaPixelsFromPointsNoRotate(
                 this.source.getPixelRatio(
@@ -969,7 +957,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                     )
                 ),
                 false
-            ).x * this._scaleSpring.current.value; //TODO: shouldn't that be target.value?
+            ).x * this._scaleSpring.current.value;
 
             var optimalRatio = this.immediateRender ? 1 : targetZeroRatio;
             var levelOpacity = Math.min(1, (currentRenderPixelRatio - 0.5) / 0.5);
@@ -1058,16 +1046,12 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity,
 
     resetCoverage(tiledImage.coverage, level);
 
-    if (tiledImage.wrapHorizontal) {
+    if (!tiledImage.wrapHorizontal) {
-        topLeftTile.x -= 1; // left invisible column (othervise we will have empty space after scroll at left)
-    } else {
         // Adjust for floating point error
         topLeftTile.x = Math.max(topLeftTile.x, 0);
         bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1);
     }
-    if (tiledImage.wrapVertical) {
+    if (!tiledImage.wrapVertical) {
-        topLeftTile.y -= 1; // top invisible row (othervise we will have empty space after scroll at top)
-    } else {
         // Adjust for floating point error
         topLeftTile.y = Math.max(topLeftTile.y, 0);
         bottomRightTile.y = Math.min(bottomRightTile.y, numberOfTiles.y - 1);
@@ -1078,12 +1062,15 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity,
     for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) {
         for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) {
 
+            // Optimisation disabled with wrapping because getTileBounds does not
+            // work correctly with x and y outside of the number of tiles
+            if (!tiledImage.wrapHorizontal && !tiledImage.wrapVertical) {
                 var tileBounds = tiledImage.source.getTileBounds(level, x, y);
-
                 if (drawArea.intersection(tileBounds) === null) {
                     // This tile is outside of the viewport, no need to draw it
                     continue;
                 }
+            }
 
             best = updateTile(
                 tiledImage,
@@ -1544,7 +1531,9 @@ function drawTiles( tiledImage, lastDrawn ) {
 
     var zoom = tiledImage.viewport.getZoom(true);
     var imageZoom = tiledImage.viewportToImageZoom(zoom);
-    if (imageZoom > tiledImage.smoothTileEdgesMinZoom && !tiledImage.iOSDevice) {
+    // TODO: support tile edge smoothing with tiled image rotation.
+    if (imageZoom > tiledImage.smoothTileEdgesMinZoom && !tiledImage.iOSDevice &&
+        tiledImage.getRotation() === 0 && $.supportsCanvas) {
         // When zoomed in a lot (>100%) the tile edges are visible.
         // So we have to composite them at ~100% and scale them up together.
         // Note: Disabled on iOS devices per default as it causes a native crash
@@ -1572,15 +1561,18 @@ function drawTiles( tiledImage, lastDrawn ) {
     // avoid interpolation
     if (!sketchScale) {
         if (tiledImage.viewport.degrees !== 0) {
-            tiledImage._drawer._offsetForRotation(
+            tiledImage._drawer._offsetForRotation({
-                tiledImage.viewport.degrees, useSketch);
+                degrees: tiledImage.viewport.degrees,
+                useSketch: useSketch
+            });
         }
         if (tiledImage._degrees !== 0) {
-            tiledImage._drawer._offsetForRotation(
+            tiledImage._drawer._offsetForRotation({
-                tiledImage._degrees,
+                degrees: tiledImage._degrees,
-                tiledImage.viewport.pixelFromPointNoRotate(
+                point: tiledImage.viewport.pixelFromPointNoRotate(
                     tiledImage._getRotationPoint(true), true),
-                useSketch);
+                useSketch: useSketch
+            });
         }
     }
 
@@ -1662,15 +1654,18 @@ function drawTiles( tiledImage, lastDrawn ) {
     if (useSketch) {
         if (sketchScale) {
             if (tiledImage.viewport.degrees !== 0) {
-                tiledImage._drawer._offsetForRotation(
+                tiledImage._drawer._offsetForRotation({
-                    tiledImage.viewport.degrees, false);
+                    degrees: tiledImage.viewport.degrees,
+                    useSketch: false
+                });
             }
             if (tiledImage._degrees !== 0) {
-                tiledImage._drawer._offsetForRotation(
+                tiledImage._drawer._offsetForRotation({
-                    tiledImage._degrees,
+                    degrees: tiledImage._degrees,
-                    tiledImage.viewport.pixelFromPointNoRotate(
+                    point: tiledImage.viewport.pixelFromPointNoRotate(
                         tiledImage._getRotationPoint(true), true),
-                    false);
+                    useSketch: false
+                });
             }
         }
         tiledImage._drawer.blendSketch({

src/tilesource.js

@@ -346,10 +346,17 @@ $.TileSource.prototype = {
      */
     getTileAtPoint: function(level, point) {
         var widthScaled = this.dimensions.x * this.getLevelScale(level);
-        var pixelX = point.x * widthScaled;
+        var pixelX = $.positiveModulo(point.x, 1) * widthScaled;
-        var pixelY = point.y * widthScaled;
+        var pixelY = $.positiveModulo(point.y, 1 / this.aspectRatio) * widthScaled;
+
         var x = Math.floor(pixelX / this.getTileWidth());
         var y = Math.floor(pixelY / this.getTileHeight());
+
+        // Fix for wrapping
+        var numTiles = this.getNumTiles(level);
+        x += numTiles.x * Math.floor(point.x);
+        y += numTiles.y * Math.floor(point.y * this.aspectRatio);
+
         return new $.Point(x, y);
     },
 

src/world.js

@@ -436,16 +436,6 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
          * @property {?Object} userData - Arbitrary subscriber-defined object.
          */
         this.raiseEvent( 'remove-item', { item: item } );
-    },
-
-    // private
-    _hasRotatedItem: function() {
-        for (var i = 0; i < this._items.length; i++) {
-            if (this._items[i].getRotation() !== 0) {
-                return true;
-            }
-        }
-        return false;
     }
 });