Synchronize opacity and composite operation of TiledImages in navigator

This commit is contained in:
Sean Nichols 2017-05-25 12:10:54 -04:00
parent 7d3a32d372
commit 035f35a26a
3 changed files with 106 additions and 0 deletions

View File

@ -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);
}
});

View File

@ -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

View File

@ -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({