Merge pull request #644 from avandecreme/opacity

Add opacity support.

src/drawer.js

@@ -42,11 +42,9 @@
  * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this Drawer.
  * @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
  * @param {Element} options.element - Parent element.
- * @param {Number} [options.opacity=1] - See opacity in {@link OpenSeadragon.Options} for details.
  * @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details.
  */
 $.Drawer = function( options ) {
-    var _this = this;
 
     $.console.assert( options.viewer, "[Drawer] options.viewer is required" );
 
@@ -72,7 +70,9 @@ $.Drawer = function( options ) {
     this.viewer = options.viewer;
     this.viewport = options.viewport;
     this.debugGridColor = options.debugGridColor || $.DEFAULT_SETTINGS.debugGridColor;
-    this.opacity = options.opacity === undefined ? $.DEFAULT_SETTINGS.opacity : options.opacity;
+    if (options.opacity) {
+        $.console.error( "[Drawer] options.opacity is no longer accepted; set the opacity on the TiledImage instead" );
+    }
 
     this.useCanvas  = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true );
     /**
@@ -96,6 +96,13 @@ $.Drawer = function( options ) {
      */
     this.context    = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
 
+    /**
+     * Sketch canvas used to temporarily draw tiles which cannot be drawn directly
+     * to the main canvas due to opacity. Lazily initialized.
+     */
+    this.sketchCanvas = null;
+    this.sketchContext = null;
+
     /**
      * @member {Element} element
      * @memberof OpenSeadragon.Drawer#
@@ -160,8 +167,11 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
      * @return {OpenSeadragon.Drawer} Chainable.
      */
     setOpacity: function( opacity ) {
-        this.opacity = opacity;
+        $.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead.");
-        $.setElementOpacity( this.canvas, this.opacity, true );
+        var world = this.viewer.world;
+        for (var i = 0; i < world.getItemCount(); i++) {
+            world.getItemAt( i ).setOpacity( opacity );
+        }
         return this;
     },
 
@@ -170,7 +180,16 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
      * @returns {Number}
      */
     getOpacity: function() {
-        return this.opacity;
+        $.console.error("drawer.getOpacity is deprecated. Use tiledImage.getOpacity instead.");
+        var world = this.viewer.world;
+        var maxOpacity = 0;
+        for (var i = 0; i < world.getItemCount(); i++) {
+            var opacity = world.getItemAt( i ).getOpacity();
+            if ( opacity > maxOpacity ) {
+                maxOpacity = opacity;
+            }
+        }
+        return maxOpacity;
     },
 
     // deprecated
@@ -214,6 +233,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         //force unloading of current canvas (1x1 will be gc later, trick not necessarily needed)
         this.canvas.width  = 1;
         this.canvas.height = 1;
+        this.sketchCanvas = null;
+        this.sketchContext = null;
     },
 
     /**
@@ -227,9 +248,22 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
                 this.canvas.height != viewportSize.y ) {
                 this.canvas.width = viewportSize.x;
                 this.canvas.height = viewportSize.y;
+                if ( this.sketchCanvas !== null ) {
+                    this.sketchCanvas.width = this.canvas.width;
+                    this.sketchCanvas.height = this.canvas.height;
                 }
-            this.context.clearRect( 0, 0, viewportSize.x, viewportSize.y );
             }
+            this._clear();
+        }
+    },
+
+    _clear: function ( useSketch ) {
+        if ( !this.useCanvas ) {
+            return;
+        }
+        var context = this._getContext( useSketch );
+        var canvas = context.canvas;
+        context.clearRect( 0, 0, canvas.width, canvas.height );
     },
 
     /**
@@ -254,65 +288,99 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
      * @param {OpenSeadragon.Tile} tile - The tile to draw.
      * @param {Function} drawingHandler - Method for firing the drawing event if using canvas.
      * drawingHandler({context, tile, rendered})
+     * @param {Boolean} useSketch - Whether to use the sketch canvas or not.
      * where <code>rendered</code> is the context with the pre-drawn image.
      */
-    drawTile: function( tile, drawingHandler ) {
+    drawTile: function( tile, drawingHandler, useSketch ) {
         $.console.assert(tile, '[Drawer.drawTile] tile is required');
         $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
 
         if ( this.useCanvas ) {
+            var context = this._getContext( useSketch );
             // TODO do this in a more performant way
             // specifically, don't save,rotate,restore every time we draw a tile
             if( this.viewport.degrees !== 0 ) {
-                this._offsetForRotation( tile, this.viewport.degrees );
+                this._offsetForRotation( tile, this.viewport.degrees, useSketch );
-                tile.drawCanvas( this.context, drawingHandler );
+                tile.drawCanvas( context, drawingHandler );
-                this._restoreRotationChanges( tile );
+                this._restoreRotationChanges( tile, useSketch );
             } else {
-                tile.drawCanvas( this.context, drawingHandler );
+                tile.drawCanvas( context, drawingHandler );
             }
         } else {
             tile.drawHTML( this.canvas );
         }
     },
 
+    _getContext: function( useSketch ) {
+        var context = this.context;
+        if ( useSketch ) {
+            if (this.sketchCanvas === null) {
+                this.sketchCanvas = document.createElement( "canvas" );
+                this.sketchCanvas.width = this.canvas.width;
+                this.sketchCanvas.height = this.canvas.height;
+                this.sketchContext = this.sketchCanvas.getContext( "2d" );
+            }
+            context = this.sketchContext;
+        }
+        return context;
+    },
+
     // private
-    saveContext: function() {
+    saveContext: function( useSketch ) {
         if (!this.useCanvas) {
             return;
         }
 
+        this._getContext( useSketch ).save();
+    },
+
+    // private
+    restoreContext: function( useSketch ) {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        this._getContext( useSketch ).restore();
+    },
+
+    // private
+    setClip: function(rect, useSketch) {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        var context = this._getContext( useSketch );
+        context.beginPath();
+        context.rect(rect.x, rect.y, rect.width, rect.height);
+        context.clip();
+    },
+
+    // private
+    drawRectangle: function(rect, fillStyle, useSketch) {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        var context = this._getContext( useSketch );
+        context.save();
+        context.fillStyle = fillStyle;
+        context.fillRect(rect.x, rect.y, rect.width, rect.height);
+        context.restore();
+    },
+
+    /**
+     * Blends the sketch canvas in the main canvas.
+     * @param {Float} opacity The opacity of the blending.
+     * @returns {undefined}
+     */
+    blendSketch: function(opacity) {
+        if (!this.useCanvas || !this.sketchCanvas) {
+            return;
+        }
+
         this.context.save();
-    },
+        this.context.globalAlpha = opacity;
-
+        this.context.drawImage(this.sketchCanvas, 0, 0);
-    // private
-    restoreContext: function() {
-        if (!this.useCanvas) {
-            return;
-        }
-
-        this.context.restore();
-    },
-
-    // private
-    setClip: function(rect) {
-        if (!this.useCanvas) {
-            return;
-        }
-
-        this.context.beginPath();
-        this.context.rect(rect.x, rect.y, rect.width, rect.height);
-        this.context.clip();
-    },
-
-    // private
-    drawRectangle: function(rect, fillStyle) {
-        if (!this.useCanvas) {
-            return;
-        }
-
-        this.context.save();
-        this.context.fillStyle = fillStyle;
-        this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
         this.context.restore();
     },
 
@@ -322,17 +390,18 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
             return;
         }
 
-        this.context.save();
+        var context = this.context;
-        this.context.lineWidth = 2 * $.pixelDensityRatio;
+        context.save();
-        this.context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
+        context.lineWidth = 2 * $.pixelDensityRatio;
-        this.context.strokeStyle = this.debugGridColor;
+        context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
-        this.context.fillStyle = this.debugGridColor;
+        context.strokeStyle = this.debugGridColor;
+        context.fillStyle = this.debugGridColor;
 
         if ( this.viewport.degrees !== 0 ) {
-            this._offsetForRotation( tile, this.canvas, this.context, this.viewport.degrees );
+            this._offsetForRotation( tile, this.viewport.degrees );
         }
 
-        this.context.strokeRect(
+        context.strokeRect(
             tile.position.x * $.pixelDensityRatio,
             tile.position.y * $.pixelDensityRatio,
             tile.size.x * $.pixelDensityRatio,
@@ -343,95 +412,97 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;
 
         // Rotate the text the right way around.
-        this.context.translate( tileCenterX, tileCenterY );
+        context.translate( tileCenterX, tileCenterY );
-        this.context.rotate( Math.PI / 180 * -this.viewport.degrees );
+        context.rotate( Math.PI / 180 * -this.viewport.degrees );
-        this.context.translate( -tileCenterX, -tileCenterY );
+        context.translate( -tileCenterX, -tileCenterY );
 
         if( tile.x === 0 && tile.y === 0 ){
-            this.context.fillText(
+            context.fillText(
                 "Zoom: " + this.viewport.getZoom(),
                 tile.position.x * $.pixelDensityRatio,
                 (tile.position.y - 30) * $.pixelDensityRatio
             );
-            this.context.fillText(
+            context.fillText(
                 "Pan: " + this.viewport.getBounds().toString(),
                 tile.position.x * $.pixelDensityRatio,
                 (tile.position.y - 20) * $.pixelDensityRatio
             );
         }
-        this.context.fillText(
+        context.fillText(
             "Level: " + tile.level,
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 20) * $.pixelDensityRatio
         );
-        this.context.fillText(
+        context.fillText(
             "Column: " + tile.x,
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 30) * $.pixelDensityRatio
         );
-        this.context.fillText(
+        context.fillText(
             "Row: " + tile.y,
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 40) * $.pixelDensityRatio
         );
-        this.context.fillText(
+        context.fillText(
             "Order: " + i + " of " + count,
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 50) * $.pixelDensityRatio
         );
-        this.context.fillText(
+        context.fillText(
             "Size: " + tile.size.toString(),
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 60) * $.pixelDensityRatio
         );
-        this.context.fillText(
+        context.fillText(
             "Position: " + tile.position.toString(),
             (tile.position.x + 10) * $.pixelDensityRatio,
             (tile.position.y + 70) * $.pixelDensityRatio
         );
 
         if ( this.viewport.degrees !== 0 ) {
-            this._restoreRotationChanges( tile, this.canvas, this.context );
+            this._restoreRotationChanges( tile );
         }
-        this.context.restore();
+        context.restore();
     },
 
     // private
     debugRect: function(rect) {
         if ( this.useCanvas ) {
-            this.context.save();
+            var context = this.context;
-            this.context.lineWidth = 2 * $.pixelDensityRatio;
+            context.save();
-            this.context.strokeStyle = this.debugGridColor;
+            context.lineWidth = 2 * $.pixelDensityRatio;
-            this.context.fillStyle = this.debugGridColor;
+            context.strokeStyle = this.debugGridColor;
+            context.fillStyle = this.debugGridColor;
 
-            this.context.strokeRect(
+            context.strokeRect(
                 rect.x * $.pixelDensityRatio,
                 rect.y * $.pixelDensityRatio,
                 rect.width * $.pixelDensityRatio,
                 rect.height * $.pixelDensityRatio
             );
 
-            this.context.restore();
+            context.restore();
         }
     },
 
     // private
-    _offsetForRotation: function( tile, degrees ){
+    _offsetForRotation: function( tile, degrees, useSketch ){
         var cx = this.canvas.width / 2,
             cy = this.canvas.height / 2,
             px = tile.position.x - cx,
             py = tile.position.y - cy;
 
-        this.context.save();
+        var context = this._getContext( useSketch );
+        context.save();
 
-        this.context.translate(cx, cy);
+        context.translate(cx, cy);
-        this.context.rotate( Math.PI / 180 * degrees);
+        context.rotate( Math.PI / 180 * degrees);
         tile.position.x = px;
         tile.position.y = py;
     },
 
     // private
-    _restoreRotationChanges: function( tile ){
+    _restoreRotationChanges: function( tile, useSketch ){
         var cx = this.canvas.width / 2,
             cy = this.canvas.height / 2,
             px = tile.position.x + cx,
@@ -440,7 +511,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         tile.position.x = px;
         tile.position.y = py;
 
-        this.context.restore();
+        var context = this._getContext( useSketch );
+        context.restore();
     },
 
     // private

src/openseadragon.js

@@ -204,7 +204,7 @@
   *     If 0, adjusts to fit viewer.
   *
   * @property {Number} [opacity=1]
-  *     Opacity of the drawer (1=opaque, 0=transparent)
+  *     Default opacity of the tiled images (1=opaque, 0=transparent)
   *
   * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null]
   *     Draws a colored rectangle behind the tile if it is not loaded yet.

src/tile.js

@@ -67,7 +67,7 @@ $.Tile = function(level, x, y, bounds, exists, url) {
     this.y       = y;
     /**
      * Where this tile fits, in normalized coordinates
-     * @member {OpenSeadragon.Point} bounds
+     * @member {OpenSeadragon.Rect} bounds
      * @memberof OpenSeadragon.Tile#
      */
     this.bounds  = bounds;

src/tiledimage.js

@@ -64,6 +64,7 @@
  * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}.
  * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}.
  * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}.
+ * @param {Number} [options.opacity=1] - Opacity the tiled image should be drawn at.
  * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}.
  * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}.
  * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
@@ -142,7 +143,8 @@ $.TiledImage = function( options ) {
         minPixelRatio:        $.DEFAULT_SETTINGS.minPixelRatio,
         debugMode:            $.DEFAULT_SETTINGS.debugMode,
         crossOriginPolicy:    $.DEFAULT_SETTINGS.crossOriginPolicy,
-        placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle
+        placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle,
+        opacity:              $.DEFAULT_SETTINGS.opacity
 
     }, options );
 
@@ -486,6 +488,21 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         this._needsDraw = true;
     },
 
+    /**
+     * @returns {Number} The TiledImage's current opacity.
+     */
+    getOpacity: function() {
+        return this.opacity;
+    },
+
+    /**
+     * @param {Number} opacity Opacity the tiled image should be drawn at.
+     */
+    setOpacity: function(opacity) {
+        this.opacity = opacity;
+        this._needsDraw = true;
+    },
+
     // private
     _setScale: function(scale, immediately) {
         var sameTarget = (this._scaleSpring.target.value === scale);
@@ -1152,20 +1169,24 @@ function compareTiles( previousBest, tile ) {
 
 function drawTiles( tiledImage, lastDrawn ) {
     var i,
-        tile,
+        tile;
-        tileKey,
+
-        viewer,
+    if ( tiledImage.opacity <= 0 ) {
-        viewport,
+        drawDebugInfo( tiledImage, lastDrawn );
-        position,
+        return;
-        tileSource;
+    }
+    var useSketch = tiledImage.opacity < 1;
+    if ( useSketch ) {
+        tiledImage._drawer._clear( true );
+    }
 
     var usedClip = false;
     if ( tiledImage._clip ) {
-        tiledImage._drawer.saveContext();
+        tiledImage._drawer.saveContext(useSketch);
 
         var box = tiledImage.imageToViewportRectangle(tiledImage._clip, true);
         var clipRect = tiledImage._drawer.viewportToDrawerRectangle(box);
-        tiledImage._drawer.setClip(clipRect);
+        tiledImage._drawer.setClip(clipRect, useSketch);
 
         usedClip = true;
     }
@@ -1181,22 +1202,14 @@ function drawTiles( tiledImage, lastDrawn ) {
             fillStyle = tiledImage.placeholderFillStyle;
         }
 
-        tiledImage._drawer.drawRectangle(placeholderRect, fillStyle);
+        tiledImage._drawer.drawRectangle(placeholderRect, fillStyle, useSketch);
     }
 
     for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
         tile = lastDrawn[ i ];
-        tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler );
+        tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch );
         tile.beingDrawn = true;
 
-        if( tiledImage.debugMode ) {
-            try {
-                tiledImage._drawer.drawDebugInfo( tile, lastDrawn.length, i );
-            } catch(e) {
-                $.console.error(e);
-            }
-        }
-
         if( tiledImage.viewer ){
             /**
              * <em>- Needs documentation -</em>
@@ -1217,7 +1230,25 @@ function drawTiles( tiledImage, lastDrawn ) {
     }
 
     if ( usedClip ) {
-        tiledImage._drawer.restoreContext();
+        tiledImage._drawer.restoreContext( useSketch );
+    }
+
+    if ( useSketch ) {
+        tiledImage._drawer.blendSketch( tiledImage.opacity );
+    }
+    drawDebugInfo( tiledImage, lastDrawn );
+}
+
+function drawDebugInfo( tiledImage, lastDrawn ) {
+    if( tiledImage.debugMode ) {
+        for ( var i = lastDrawn.length - 1; i >= 0; i-- ) {
+            var tile = lastDrawn[ i ];
+            try {
+                tiledImage._drawer.drawDebugInfo( tile, lastDrawn.length, i );
+            } catch(e) {
+                $.console.error(e);
+            }
+        }
     }
 }
 

src/viewer.js

@@ -374,7 +374,6 @@ $.Viewer = function( options ) {
         viewer:             this,
         viewport:           this.viewport,
         element:            this.canvas,
-        opacity:            this.opacity,
         debugGridColor:     this.debugGridColor
     });
 
@@ -1198,6 +1197,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to
      * (portions of the image outside of this area will not be visible). Only works on
      * browsers that support the HTML5 canvas.
+     * @param {Number} [options.opacity] Opacity the tiled image should be drawn at by default.
      * @param {Function} [options.success] A function that gets called when the image is
      * successfully added. It's passed the event object which contains a single property:
      * "item", the resulting TiledImage.
@@ -1221,6 +1221,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         if (options.placeholderFillStyle === undefined) {
             options.placeholderFillStyle = this.placeholderFillStyle;
         }
+        if (options.opacity === undefined) {
+            options.opacity = this.opacity;
+        }
 
         var myQueueItem = {
             options: options
@@ -1290,6 +1293,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     height: queueItem.options.height,
                     clip: queueItem.options.clip,
                     placeholderFillStyle: queueItem.options.placeholderFillStyle,
+                    opacity: queueItem.options.opacity,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
                     minZoomImageRatio: _this.minZoomImageRatio,

test/modules/drawer.js

@@ -33,9 +33,6 @@
         createViewer();
         ok(viewer.drawer, 'Drawer exists');
         equal(viewer.drawer.canRotate(), OpenSeadragon.supportsCanvas, 'we can rotate if we have canvas');
-        equal(viewer.drawer.getOpacity(), 1, 'starts with full opacity');
-        viewer.drawer.setOpacity(0.4);
-        equal(viewer.drawer.getOpacity(), 0.4, 'setting opacity works');
         start();
     });
 
@@ -67,9 +64,52 @@
         });
     });
 
+    // ----------
+    asyncTest('sketchCanvas', function() {
+        createViewer({
+            tileSources: '/test/data/testpattern.dzi'
+        });
+        var drawer = viewer.drawer;
+
+        viewer.addHandler('tile-drawn', function noOpacityHandler() {
+            viewer.removeHandler('tile-drawn', noOpacityHandler);
+            equal(drawer.sketchCanvas, null,
+                'The sketch canvas should be null if no decimal opacity is used.');
+            equal(drawer.sketchContext, null,
+                'The sketch context should be null if no decimal opacity is used.');
+            testOpacityDecimal();
+        });
+
+        function testOpacityDecimal() {
+            var tiledImage;
+            viewer.addTiledImage({
+                tileSource: '/test/data/testpattern.dzi',
+                opacity: 0.5,
+                success: function(event) {
+                    tiledImage = event.item;
+                }
+            });
+
+            viewer.addHandler('tile-drawn', function opacityDecimalHandler(event) {
+                if (tiledImage !== event.tiledImage) {
+                    return;
+                }
+                viewer.removeHandler('tile-drawn', opacityDecimalHandler);
+                notEqual(drawer.sketchCanvas, null,
+                    'The sketch canvas should not be null once a decimal opacity has been used.');
+                notEqual(drawer.sketchContext, null,
+                    'The sketch context should not be null once a decimal opacity has been used.');
+                start();
+            });
+        }
+    });
+
     // ----------
     asyncTest('deprecations', function() {
-        createViewer();
+        createViewer({
+            tileSources: '/test/data/testpattern.dzi'
+        });
+        viewer.world.addHandler('add-item', function() {
             Util.testDeprecation(viewer.drawer, 'addOverlay', viewer, 'addOverlay');
             Util.testDeprecation(viewer.drawer, 'updateOverlay', viewer, 'updateOverlay');
             Util.testDeprecation(viewer.drawer, 'removeOverlay', viewer, 'removeOverlay');
@@ -78,7 +118,10 @@
             Util.testDeprecation(viewer.drawer, 'numTilesLoaded', viewer.tileCache, 'numTilesLoaded');
             Util.testDeprecation(viewer.drawer, 'reset', viewer.world, 'resetItems');
             Util.testDeprecation(viewer.drawer, 'update', viewer.world, 'draw');
+            Util.testDeprecation(viewer.drawer, 'setOpacity', viewer.world.getItemAt(0), 'setOpacity');
+            Util.testDeprecation(viewer.drawer, 'getOpacity', viewer.world.getItemAt(0), 'getOpacity');
             start();
         });
+    });
 
 })();

test/modules/tiledimage.js

@@ -220,4 +220,41 @@
         });
     });
 
+    // ----------
+    asyncTest('opacity', function() {
+
+        function testDefaultOpacity() {
+            viewer.removeHandler('open', testDefaultOpacity);
+            var image = viewer.world.getItemAt(0);
+            strictEqual(image.getOpacity(), 0.5, 'image has default opacity');
+
+            image.setOpacity(1);
+            strictEqual(image.getOpacity(), 1, 'opacity is set correctly');
+
+            viewer.addHandler('open', testTileSourceOpacity);
+            viewer.open({
+                tileSource: '/test/data/testpattern.dzi',
+                opacity: 0.25
+            });
+        }
+
+        function testTileSourceOpacity() {
+            viewer.removeHandler('open', testTileSourceOpacity);
+            var image = viewer.world.getItemAt(0);
+            strictEqual(image.getOpacity(), 0.25, 'image has correct opacity');
+
+            image.setOpacity(0);
+            strictEqual(image.getOpacity(), 0, 'opacity is set correctly');
+
+            start();
+        }
+
+        viewer.addHandler('open', testDefaultOpacity);
+
+        viewer.opacity = 0.5;
+        viewer.open({
+            tileSource: '/test/data/testpattern.dzi',
+        });
+    });
+
 })();