mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 00:26:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1203 from seanich/navigator-sync

Browse Source 
Synchronize opacity and compositeOperation of TiledImages in navigator
This commit is contained in:
Ian Gilman 2017-05-31 09:52:46 -07:00 committed by GitHub
commit eb26eabb46
3 changed files with 138 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/navigator.js
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);
}
});

36
src/tiledimage.js
View File

@ -771,10 +771,28 @@ $.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) {
if (opacity === this.opacity) {
return;
}
this.opacity = opacity;
this._needsDraw = true;
/**
* Raised when the TiledImage's opacity is changed.
* @event opacity-change
* @memberOf OpenSeadragon.TiledImage
* @type {object}
* @property {Number} opacity - The new opacity value.
* @property {OpenSeadragon.TiledImage} eventSource - A reference to the
* TiledImage which raised the event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('opacity-change', {
opacity: this.opacity
});
},
/**
@ -828,10 +846,28 @@ $.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) {
if (compositeOperation === this.compositeOperation) {
return;
}
this.compositeOperation = compositeOperation;
this._needsDraw = true;
/**
* Raised when the TiledImage's opacity is changed.
* @event composite-operation-change
* @memberOf OpenSeadragon.TiledImage
* @type {object}
* @property {String} compositeOperation - The new compositeOperation value.
* @property {OpenSeadragon.TiledImage} eventSource - A reference to the
* TiledImage which raised the event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('composite-operation-change', {
compositeOperation: this.compositeOperation
});
},
// private

82
test/modules/navigator.js
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({