Synchronize opacity and composite operation of TiledImages in navigator

src/navigator.js

@@ -347,8 +347,18 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
                     _this._matchBounds(myItem, original);
                 }
 
+                function matchOpacity() {
+                    _this._matchOpacity(myItem, original);
+                }
+
+                function matchCompositeOperation() {
+                    _this._matchCompositeOperation(myItem, original);
+                }
+
                 original.addHandler('bounds-change', matchBounds);
                 original.addHandler('clip-change', matchBounds);
+                original.addHandler('opacity-change', matchOpacity);
+                original.addHandler('composite-operation-change', matchCompositeOperation);
             }
         });
 
@@ -376,6 +386,16 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
         myItem.setWidth(bounds.width, immediately);
         myItem.setRotation(theirItem.getRotation(), immediately);
         myItem.setClip(theirItem.getClip());
+    },
+
+    // private
+    _matchOpacity: function(myItem, theirItem) {
+        myItem.setOpacity(theirItem.opacity);
+    },
+
+    // private
+    _matchCompositeOperation: function(myItem, theirItem) {
+        myItem.setCompositeOperation(theirItem.compositeOperation);
     }
 });
 

src/tiledimage.js

@@ -771,10 +771,12 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
 
     /**
      * @param {Number} opacity Opacity the tiled image should be drawn at.
+     * @fires OpenSeadragon.TiledImage.event:opacity-change
      */
     setOpacity: function(opacity) {
         this.opacity = opacity;
         this._needsDraw = true;
+        this.raiseEvent('opacity-change');
     },
 
     /**
@@ -828,10 +830,12 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
 
     /**
      * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation.
+     * @fires OpenSeadragon.TiledImage.event:composite-operation-change
      */
     setCompositeOperation: function(compositeOperation) {
         this.compositeOperation = compositeOperation;
         this._needsDraw = true;
+        this.raiseEvent('composite-operation-change');
     },
 
     // private

test/modules/navigator.js

@@ -844,6 +844,88 @@
         viewer.addHandler('open', openHandler);
     });
 
+    asyncTest('Item opacity is synchronized', function() {
+
+        viewer = OpenSeadragon({
+            id:            'example',
+            prefixUrl:     '/build/openseadragon/images/',
+            tileSources:   ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
+            springStiffness: 100, // Faster animation = faster tests
+            showNavigator:  true
+        });
+
+        var navOpenHandler = function(event) {
+            if (viewer.navigator.world.getItemCount() === 2) {
+                viewer.navigator.world.removeHandler('add-item', navOpenHandler);
+
+                setTimeout(function() {
+                    // Test initial formation
+                    for (var i = 0; i < 2; i++) {
+                        equal(viewer.navigator.world.getItemAt(i).getOpacity(),
+                            viewer.world.getItemAt(i).getOpacity(), 'opacity is the same');
+                    }
+
+                    // Try changing the opacity of one
+                    viewer.world.getItemAt(1).setOpacity(0.5);
+                    equal(viewer.navigator.world.getItemAt(1).getOpacity(),
+                        viewer.world.getItemAt(1).getOpacity(), 'opacity is the same after change');
+
+                    start();
+                }, 1);
+            }
+        };
+
+        var openHandler = function() {
+            viewer.removeHandler('open', openHandler);
+            viewer.navigator.world.addHandler('add-item', navOpenHandler);
+            // The navigator may already have added the items.
+            navOpenHandler();
+        };
+
+        viewer.addHandler('open', openHandler);
+    });
+
+    asyncTest('Item composite operation is synchronized', function() {
+
+        viewer = OpenSeadragon({
+            id:            'example',
+            prefixUrl:     '/build/openseadragon/images/',
+            tileSources:   ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
+            springStiffness: 100, // Faster animation = faster tests
+            showNavigator:  true
+        });
+
+        var navOpenHandler = function(event) {
+            if (viewer.navigator.world.getItemCount() === 2) {
+                viewer.navigator.world.removeHandler('add-item', navOpenHandler);
+
+                setTimeout(function() {
+                    // Test initial formation
+                    for (var i = 0; i < 2; i++) {
+                        equal(viewer.navigator.world.getItemAt(i).getCompositeOperation(),
+                            viewer.world.getItemAt(i).getCompositeOperation(), 'composite operation is the same');
+                    }
+
+                    // Try changing the composite operation of one
+                    viewer.world.getItemAt(1).setCompositeOperation('multiply');
+                    equal(viewer.navigator.world.getItemAt(1).getCompositeOperation(),
+                        viewer.world.getItemAt(1).getCompositeOperation(), 'composite operation is the same after change');
+
+                    start();
+                }, 1);
+            }
+        };
+
+        var openHandler = function() {
+            viewer.removeHandler('open', openHandler);
+            viewer.navigator.world.addHandler('add-item', navOpenHandler);
+            // The navigator may already have added the items.
+            navOpenHandler();
+        };
+
+        viewer.addHandler('open', openHandler);
+    });
+
     asyncTest('Viewer options transmitted to navigator', function() {
 
         viewer = OpenSeadragon({