diff --git a/src/navigator.js b/src/navigator.js index 12273b79..4c9848cf 100644 --- a/src/navigator.js +++ b/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); } }); diff --git a/src/tiledimage.js b/src/tiledimage.js index 31a763c5..def57fae 100644 --- a/src/tiledimage.js +++ b/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 diff --git a/test/modules/navigator.js b/test/modules/navigator.js index c58560a6..3f75f9f4 100644 --- a/test/modules/navigator.js +++ b/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({