mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 22:56:11 +03:00
470 lines
19 KiB
JavaScript
470 lines
19 KiB
JavaScript
/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog, propEqual */
|
|
|
|
(function() {
|
|
var viewer;
|
|
|
|
module('TiledImage', {
|
|
setup: function() {
|
|
var example = $('<div id="example"></div>').appendTo("#qunit-fixture");
|
|
|
|
testLog.reset();
|
|
|
|
viewer = OpenSeadragon({
|
|
id: 'example',
|
|
prefixUrl: '/build/openseadragon/images/',
|
|
springStiffness: 100 // Faster animation = faster tests
|
|
});
|
|
},
|
|
teardown: function() {
|
|
if (viewer && viewer.close) {
|
|
viewer.close();
|
|
}
|
|
|
|
viewer = null;
|
|
}
|
|
});
|
|
|
|
// ----------
|
|
var checkBounds = function(image, expected, message) {
|
|
var bounds = image.getBounds();
|
|
equal(bounds.x, expected.x, message + ' x');
|
|
equal(bounds.y, expected.y, message + ' y');
|
|
equal(bounds.width, expected.width, message + ' width');
|
|
equal(bounds.height, expected.height, message + ' height');
|
|
};
|
|
|
|
// ----------
|
|
asyncTest('metrics', function() {
|
|
var handlerCount = 0;
|
|
|
|
viewer.addHandler('open', function(event) {
|
|
var image = viewer.world.getItemAt(0);
|
|
var contentSize = image.getContentSize();
|
|
equal(contentSize.x, 500, 'contentSize.x');
|
|
equal(contentSize.y, 2000, 'contentSize.y');
|
|
|
|
checkBounds(image, new OpenSeadragon.Rect(5, 6, 10, 40), 'initial bounds');
|
|
|
|
var scale = image.getContentSize().x / image.getBounds().width;
|
|
var viewportPoint = new OpenSeadragon.Point(10, 11);
|
|
var imagePoint = viewportPoint.minus(image.getBounds().getTopLeft()).times(scale);
|
|
|
|
propEqual(image.viewportToImageCoordinates(viewportPoint), imagePoint, 'viewportToImageCoordinates');
|
|
propEqual(image.imageToViewportCoordinates(imagePoint), viewportPoint, 'imageToViewportCoordinates');
|
|
|
|
var viewportRect = new OpenSeadragon.Rect(viewportPoint.x, viewportPoint.y, 6, 7);
|
|
var imageRect = new OpenSeadragon.Rect(imagePoint.x, imagePoint.y,
|
|
viewportRect.width * scale, viewportRect.height * scale);
|
|
|
|
propEqual(image.viewportToImageRectangle(viewportRect), imageRect, 'viewportToImageRectangle');
|
|
propEqual(image.imageToViewportRectangle(imageRect), viewportRect, 'imageToViewportRectangle');
|
|
|
|
image.addHandler('bounds-change', function boundsChangeHandler(event) {
|
|
image.removeHandler('bounds-change', boundsChangeHandler);
|
|
handlerCount++;
|
|
});
|
|
|
|
image.setPosition(new OpenSeadragon.Point(7, 8));
|
|
checkBounds(image, new OpenSeadragon.Rect(7, 8, 10, 40), 'bounds after position');
|
|
|
|
image.setWidth(5);
|
|
checkBounds(image, new OpenSeadragon.Rect(7, 8, 5, 20), 'bounds after width');
|
|
|
|
image.setHeight(4);
|
|
checkBounds(image, new OpenSeadragon.Rect(7, 8, 1, 4), 'bounds after width');
|
|
|
|
equal(handlerCount, 1, 'correct number of handlers called');
|
|
start();
|
|
});
|
|
|
|
viewer.open({
|
|
tileSource: '/test/data/tall.dzi',
|
|
x: 5,
|
|
y: 6,
|
|
width: 10
|
|
});
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('animation', function() {
|
|
viewer.addHandler("open", function() {
|
|
var image = viewer.world.getItemAt(0);
|
|
propEqual(image.getBounds(), new OpenSeadragon.Rect(0, 0, 1, 1), 'target bounds on open');
|
|
propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds on open');
|
|
|
|
image.setPosition(new OpenSeadragon.Point(1, 2));
|
|
propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 1, 1), 'target bounds after position');
|
|
propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds after position');
|
|
|
|
image.setWidth(3);
|
|
propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 3, 3), 'target bounds after width');
|
|
propEqual(image.getBounds(true), new OpenSeadragon.Rect(0, 0, 1, 1), 'current bounds after width');
|
|
|
|
viewer.addHandler('animation-finish', function animationHandler() {
|
|
viewer.removeHandler('animation-finish', animationHandler);
|
|
propEqual(image.getBounds(), new OpenSeadragon.Rect(1, 2, 3, 3), 'target bounds after animation');
|
|
propEqual(image.getBounds(true), new OpenSeadragon.Rect(1, 2, 3, 3), 'current bounds after animation');
|
|
start();
|
|
});
|
|
});
|
|
|
|
viewer.open('/test/data/testpattern.dzi');
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('update', function() {
|
|
var handlerCount = 0;
|
|
|
|
viewer.addHandler('open', function(event) {
|
|
var image = viewer.world.getItemAt(0);
|
|
equal(image.needsDraw(), true, 'needs draw after open');
|
|
|
|
viewer.addHandler('update-level', function updateLevelHandler(event) {
|
|
viewer.removeHandler('update-level', updateLevelHandler);
|
|
handlerCount++;
|
|
equal(event.eventSource, viewer, 'sender of update-level event was viewer');
|
|
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
|
|
ok('havedrawn' in event, 'update-level event includes havedrawn');
|
|
ok('level' in event, 'update-level event includes level');
|
|
ok('opacity' in event, 'update-level event includes opacity');
|
|
ok('visibility' in event, 'update-level event includes visibility');
|
|
ok('topleft' in event, 'update-level event includes topleft');
|
|
ok('bottomright' in event, 'update-level event includes bottomright');
|
|
ok('currenttime' in event, 'update-level event includes currenttime');
|
|
ok('best' in event, 'update-level event includes best');
|
|
});
|
|
|
|
viewer.addHandler('update-tile', function updateTileHandler(event) {
|
|
viewer.removeHandler('update-tile', updateTileHandler);
|
|
handlerCount++;
|
|
equal(event.eventSource, viewer, 'sender of update-tile event was viewer');
|
|
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
|
|
ok(event.tile, 'update-tile event includes tile');
|
|
});
|
|
|
|
viewer.addHandler('tile-drawing', function tileDrawingHandler(event) {
|
|
viewer.removeHandler('tile-drawing', tileDrawingHandler);
|
|
handlerCount++;
|
|
equal(event.eventSource, viewer, 'sender of tile-drawing event was viewer');
|
|
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
|
|
ok(event.tile, 'tile-drawing event includes a tile');
|
|
ok(event.context, 'tile-drawing event includes a context');
|
|
ok(event.rendered, 'tile-drawing event includes a rendered');
|
|
});
|
|
|
|
viewer.addHandler('tile-drawn', function tileDrawnHandler(event) {
|
|
viewer.removeHandler('tile-drawn', tileDrawnHandler);
|
|
handlerCount++;
|
|
equal(event.eventSource, viewer, 'sender of tile-drawn event was viewer');
|
|
equal(event.tiledImage, image, 'tiledImage of update-level event is correct');
|
|
ok(event.tile, 'tile-drawn event includes tile');
|
|
|
|
equal(handlerCount, 4, 'correct number of handlers called');
|
|
start();
|
|
});
|
|
|
|
image.draw();
|
|
});
|
|
|
|
viewer.open('/test/data/testpattern.dzi');
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('reset', function() {
|
|
viewer.addHandler('tile-drawn', function updateHandler() {
|
|
viewer.removeHandler('tile-drawn', updateHandler);
|
|
ok(viewer.tileCache.numTilesLoaded() > 0, 'we have tiles after tile-drawn');
|
|
viewer.world.getItemAt(0).reset();
|
|
equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles after reset');
|
|
|
|
viewer.addHandler('tile-drawn', function updateHandler2() {
|
|
viewer.removeHandler('tile-drawn', updateHandler2);
|
|
ok(viewer.tileCache.numTilesLoaded() > 0, 'more tiles load');
|
|
viewer.world.getItemAt(0).destroy();
|
|
equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles after destroy');
|
|
start();
|
|
});
|
|
});
|
|
|
|
equal(viewer.tileCache.numTilesLoaded(), 0, 'no tiles at start');
|
|
|
|
viewer.open('/test/data/testpattern.dzi');
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('clip', function() {
|
|
var clip = new OpenSeadragon.Rect(100, 100, 800, 800);
|
|
|
|
viewer.addHandler('open', function() {
|
|
var image = viewer.world.getItemAt(0);
|
|
propEqual(image.getClip(), clip, 'image has correct clip');
|
|
|
|
image.setClip(null);
|
|
equal(image.getClip(), null, 'clip is cleared');
|
|
|
|
image.setClip(clip);
|
|
propEqual(image.getClip(), clip, 'clip is set correctly');
|
|
|
|
Util.spyOnce(viewer.drawer, 'setClip', function(rect) {
|
|
var homeBounds = viewer.viewport.getHomeBounds();
|
|
var canvasClip = viewer.viewport
|
|
.viewportToViewerElementRectangle(homeBounds);
|
|
var precision = 0.00000001;
|
|
Util.assertRectangleEquals(rect, canvasClip, precision,
|
|
'clipping should be ' + canvasClip);
|
|
start();
|
|
});
|
|
});
|
|
|
|
viewer.open({
|
|
tileSource: '/test/data/testpattern.dzi',
|
|
clip: clip
|
|
});
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('getClipBounds', function() {
|
|
var clip = new OpenSeadragon.Rect(100, 200, 800, 500);
|
|
|
|
viewer.addHandler('open', function() {
|
|
var image = viewer.world.getItemAt(0);
|
|
var bounds = image.getClippedBounds();
|
|
var expectedBounds = new OpenSeadragon.Rect(1.2, 1.4, 1.6, 1);
|
|
propEqual(bounds, expectedBounds,
|
|
'getClipBounds should take clipping into account.');
|
|
|
|
image = viewer.world.getItemAt(1);
|
|
bounds = image.getClippedBounds();
|
|
expectedBounds = new OpenSeadragon.Rect(1, 2, 2, 2);
|
|
propEqual(bounds, expectedBounds,
|
|
'getClipBounds should work when no clipping set.');
|
|
|
|
start();
|
|
});
|
|
|
|
viewer.open([{
|
|
tileSource: '/test/data/testpattern.dzi',
|
|
clip: clip,
|
|
x: 1,
|
|
y: 1,
|
|
width: 2
|
|
}, {
|
|
tileSource: '/test/data/testpattern.dzi',
|
|
x: 1,
|
|
y: 2,
|
|
width: 2
|
|
}]);
|
|
});
|
|
|
|
// ----------
|
|
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',
|
|
});
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('fitBounds', function() {
|
|
|
|
function assertRectEquals(actual, expected, message) {
|
|
ok(actual.equals(expected), message + ' should be ' +
|
|
expected.toString() + ', found ' + actual.toString());
|
|
}
|
|
|
|
viewer.addHandler('open', function openHandler() {
|
|
viewer.removeHandler('open', openHandler);
|
|
|
|
var squareImage = viewer.world.getItemAt(0);
|
|
squareImage.fitBounds(
|
|
new OpenSeadragon.Rect(0, 0, 1, 2),
|
|
OpenSeadragon.Placement.CENTER,
|
|
true);
|
|
var actualBounds = squareImage.getBounds(true);
|
|
var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
|
|
|
|
var tallImage = viewer.world.getItemAt(1);
|
|
tallImage.fitBounds(
|
|
new OpenSeadragon.Rect(0, 0, 1, 2),
|
|
OpenSeadragon.Placement.TOP_LEFT,
|
|
true);
|
|
actualBounds = tallImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
|
|
|
|
var wideImage = viewer.world.getItemAt(2);
|
|
wideImage.fitBounds(
|
|
new OpenSeadragon.Rect(0, 0, 1, 2),
|
|
OpenSeadragon.Placement.BOTTOM_RIGHT,
|
|
true);
|
|
actualBounds = wideImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
|
|
start();
|
|
});
|
|
|
|
viewer.open([
|
|
'/test/data/testpattern.dzi',
|
|
'/test/data/tall.dzi',
|
|
'/test/data/wide.dzi'
|
|
]);
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('fitBounds in constructor', function() {
|
|
|
|
function assertRectEquals(actual, expected, message) {
|
|
ok(actual.equals(expected), message + ' should be ' +
|
|
expected.toString() + ', found ' + actual.toString());
|
|
}
|
|
|
|
viewer.addHandler('open', function openHandler() {
|
|
viewer.removeHandler('open', openHandler);
|
|
|
|
var squareImage = viewer.world.getItemAt(0);
|
|
var actualBounds = squareImage.getBounds(true);
|
|
var expectedBounds = new OpenSeadragon.Rect(0, 0.5, 1, 1);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
|
|
|
|
var tallImage = viewer.world.getItemAt(1);
|
|
actualBounds = tallImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(0, 0, 0.5, 2);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
|
|
|
|
var wideImage = viewer.world.getItemAt(2);
|
|
actualBounds = wideImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(0, 1.75, 1, 0.25);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
|
|
start();
|
|
});
|
|
|
|
viewer.open([{
|
|
tileSource: '/test/data/testpattern.dzi',
|
|
x: 1, // should be ignored
|
|
y: 1, // should be ignored
|
|
width: 2, // should be ignored
|
|
fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2)
|
|
// No placement specified, should default to CENTER
|
|
}, {
|
|
tileSource: '/test/data/tall.dzi',
|
|
fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2),
|
|
fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT
|
|
}, {
|
|
tileSource: '/test/data/wide.dzi',
|
|
fitBounds: new OpenSeadragon.Rect(0, 0, 1, 2),
|
|
fitBoundsPlacement: OpenSeadragon.Placement.BOTTOM_RIGHT
|
|
}]);
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('fitBounds with clipping', function() {
|
|
|
|
function assertRectEquals(actual, expected, message) {
|
|
ok(actual.equals(expected), message + ' should be ' +
|
|
expected.toString() + ', found ' + actual.toString());
|
|
}
|
|
|
|
viewer.addHandler('open', function openHandler() {
|
|
viewer.removeHandler('open', openHandler);
|
|
|
|
var squareImage = viewer.world.getItemAt(0);
|
|
var actualBounds = squareImage.getBounds(true);
|
|
var expectedBounds = new OpenSeadragon.Rect(-1, -1, 2, 2);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Square image bounds');
|
|
|
|
var tallImage = viewer.world.getItemAt(1);
|
|
actualBounds = tallImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(1, 1, 2, 8);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Tall image bounds');
|
|
|
|
var wideImage = viewer.world.getItemAt(2);
|
|
actualBounds = wideImage.getBounds(true);
|
|
expectedBounds = new OpenSeadragon.Rect(1, 1, 16, 4);
|
|
assertRectEquals(actualBounds, expectedBounds, 'Wide image bounds');
|
|
start();
|
|
});
|
|
|
|
viewer.open([{
|
|
tileSource: '/test/data/testpattern.dzi',
|
|
clip: new OpenSeadragon.Rect(500, 500, 500, 500),
|
|
fitBounds: new OpenSeadragon.Rect(0, 0, 1, 1)
|
|
}, {
|
|
tileSource: '/test/data/tall.dzi',
|
|
clip: new OpenSeadragon.Rect(0, 0, 250, 100),
|
|
fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
|
|
fitBoundsPlacement: OpenSeadragon.Placement.TOP
|
|
}, {
|
|
tileSource: '/test/data/wide.dzi',
|
|
clip: new OpenSeadragon.Rect(0, 0, 100, 250),
|
|
fitBounds: new OpenSeadragon.Rect(1, 1, 1, 2),
|
|
fitBoundsPlacement: OpenSeadragon.Placement.TOP_LEFT
|
|
}]);
|
|
});
|
|
|
|
// ----------
|
|
asyncTest('fullyLoaded', function() {
|
|
viewer.addHandler('open', function openHandler() {
|
|
viewer.removeHandler('open', openHandler);
|
|
|
|
var image = viewer.world.getItemAt(0);
|
|
equal(image.getFullyLoaded(), false, 'not fully loaded at first');
|
|
|
|
var count = 0;
|
|
|
|
var fullyLoadedChangeHandler = function(event) {
|
|
if (count === 0) {
|
|
equal(event.fullyLoaded, true, 'event includes true fullyLoaded property');
|
|
equal(image.getFullyLoaded(), true, 'image is fully loaded after event');
|
|
viewer.viewport.zoomBy(5, null, true);
|
|
} else if (count === 1) {
|
|
equal(event.fullyLoaded, false, 'event includes false fullyLoaded property');
|
|
equal(image.getFullyLoaded(), false, 'image is not fully loaded after zoom');
|
|
} else {
|
|
image.removeHandler('fully-loaded-change', fullyLoadedChangeHandler);
|
|
equal(image.getFullyLoaded(), true, 'image is once again fully loaded');
|
|
start();
|
|
}
|
|
|
|
count++;
|
|
};
|
|
|
|
image.addHandler('fully-loaded-change', fullyLoadedChangeHandler);
|
|
});
|
|
|
|
viewer.open([{
|
|
tileSource: '/test/data/tall.dzi',
|
|
}]);
|
|
});
|
|
|
|
})();
|