diff --git a/test/layers.js b/test/layers.js index a20c92d0..5559f110 100644 --- a/test/layers.js +++ b/test/layers.js @@ -1,16 +1,16 @@ -/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */ +/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog, expect */ ( function() { var viewer; - module( 'Layers', { + module( 'Multi-Image', { setup: function() { - $( '
' ).appendTo( "#qunit-fixture" ); + $( '' ).appendTo( "#qunit-fixture" ); testLog.reset(); viewer = OpenSeadragon( { - id: 'layersexample', + id: 'itemsexample', prefixUrl: '/build/openseadragon/images/', springStiffness: 100 // Faster animation = faster tests }); @@ -21,16 +21,16 @@ } viewer = null; - $( "#layersexample" ).remove(); + $( "#itemsexample" ).remove(); } } ); // ---------- - asyncTest( 'Layers operations', function() { - expect( 23 ); + asyncTest( 'Multi-image operations', function() { + expect( 21 ); viewer.addHandler( "open", function( ) { - equal( 1, viewer.getLayersCount( ), - "One layer should be present after opening." ); + equal( 1, viewer.world.getItemCount( ), + "One item should be present after opening." ); var options = { tileSource: { type: 'legacy-image-pyramid', @@ -41,87 +41,76 @@ } ] } }; - viewer.addLayer( options ); - viewer.addHandler( "add-layer", function addFirstLayerHandler( event ) { - viewer.removeHandler( "add-layer", addFirstLayerHandler ); - var layer1 = event.drawer; - equal( viewer.getLayersCount( ), 2, - "2 layers should be present after adding a layer." ); - equal( options, event.options, - "The options should be transmitted via the event." ); - equal( viewer.getLevelOfLayer( layer1 ), 1, - "The first added layer should have a level of 1" ); - equal( viewer.getLayerAtLevel( 1 ), layer1, - "The layer at level 1 should be the first added layer." ); + viewer.addTiledImage( options ); + viewer.world.addHandler( "add-item", function addFirstItemHandler( event ) { + viewer.world.removeHandler( "add-item", addFirstItemHandler ); + var item1 = event.item; + equal( viewer.world.getItemCount( ), 2, + "2 items should be present after adding a item." ); + equal( viewer.world.getIndexOfItem( item1 ), 1, + "The first added item should have a index of 1" ); + equal( viewer.world.getItemAt( 1 ), item1, + "The item at index 1 should be the first added item." ); - viewer.addLayer( options ); - viewer.addHandler( "add-layer", function addSecondLayerHandler( event ) { - viewer.removeHandler( "add-layer", addSecondLayerHandler ); - var layer2 = event.drawer; - equal( viewer.getLayersCount( ), 3, - "3 layers should be present after adding a second layer." ); - equal( viewer.getLevelOfLayer( layer2 ), 2, - "If not specified, a layer should be added with the highest level." ); - equal( viewer.getLayerAtLevel( 2 ), layer2, - "The layer at level 2 should be the second added layer." ); + viewer.addTiledImage( options ); + viewer.world.addHandler( "add-item", function addSecondItemHandler( event ) { + viewer.world.removeHandler( "add-item", addSecondItemHandler ); + var item2 = event.item; + equal( viewer.world.getItemCount( ), 3, + "3 items should be present after adding a second item." ); + equal( viewer.world.getIndexOfItem( item2 ), 2, + "If not specified, a item should be added with the highest index." ); + equal( viewer.world.getItemAt( 2 ), item2, + "The item at index 2 should be the second added item." ); - viewer.addHandler( "layer-level-changed", - function layerLevelChangedHandler( event ) { - viewer.removeHandler( "layer-level-changed", - layerLevelChangedHandler ); - equal( event.drawer, layer2, - "The layer which changed level should be layer2" ); - equal( event.previousLevel, 2, "Previous level should be 2." ); - equal( event.newLevel, 1, "New level should be 1." ); + viewer.world.addHandler( "item-index-changed", + function itemIndexChangedHandler( event ) { + viewer.world.removeHandler( "item-index-changed", + itemIndexChangedHandler ); + equal( event.item, item2, + "The item which changed index should be item2" ); + equal( event.previousIndex, 2, "Previous index should be 2." ); + equal( event.newIndex, 1, "New index should be 1." ); }); - viewer.setLayerLevel( layer2, 1 ); - equal( viewer.getLevelOfLayer( layer2 ), 1, - "Layer2 level should be 1 after setLayerLevel." ); - equal( viewer.getLevelOfLayer( layer1 ), 2, - "Layer1 level should be 2 after setLayerLevel." ); - equal( viewer.getLayerAtLevel( 1 ), layer2, - "The layer at level 1 should be layer2." ); - equal( viewer.getLayerAtLevel( 2 ), layer1, - "The layer at level 2 should be layer1." ); + viewer.world.setItemIndex( item2, 1 ); + equal( viewer.world.getIndexOfItem( item2 ), 1, + "Item2 index should be 1 after setItemIndex." ); + equal( viewer.world.getIndexOfItem( item1 ), 2, + "Item1 index should be 2 after setItemIndex." ); + equal( viewer.world.getItemAt( 1 ), item2, + "The item at index 1 should be item2." ); + equal( viewer.world.getItemAt( 2 ), item1, + "The item at index 2 should be item1." ); - options.level = 2; + options.index = 2; options.tileSource.levels[0].url = "data/CCyan.png"; - options.opacity = 0.5; - viewer.addLayer( options ); - viewer.addHandler( "add-layer", function addThirdLayerHandler( event ) { - viewer.removeHandler( "add-layer", addThirdLayerHandler ); - var layer3 = event.drawer; - equal( viewer.getLayersCount( ), 4, - "4 layers should be present after adding a third layer." ); - equal( viewer.getLevelOfLayer( layer3 ), 2, - "Layer 3 should be added with level 2." ); - equal( viewer.getLevelOfLayer( layer2 ), 1, - "Layer 2 should stay at level 1." ); + viewer.addTiledImage( options ); + viewer.world.addHandler( "add-item", function addThirdItemHandler( event ) { + viewer.world.removeHandler( "add-item", addThirdItemHandler ); + var item3 = event.item; + equal( viewer.world.getItemCount( ), 4, + "4 items should be present after adding a third item." ); + equal( viewer.world.getIndexOfItem( item3 ), 2, + "Item 3 should be added with index 2." ); + equal( viewer.world.getIndexOfItem( item2 ), 1, + "Item 2 should stay at index 1." ); - viewer.addHandler( "remove-layer", function removeLayerHandler( event ) { - viewer.removeHandler( "remove-layer", removeLayerHandler ); + viewer.world.addHandler( "remove-item", function removeItemHandler( event ) { + viewer.world.removeHandler( "remove-item", removeItemHandler ); - equal( layer2, event.drawer, "Removed layer should be layer2." ); + equal( item2, event.item, "Removed item should be item2." ); - equal( viewer.getLevelOfLayer( layer1 ), 2, - "Layer 1 should be at level 2." ); - equal( viewer.getLevelOfLayer( layer2 ), -1, - "Layer 2 should be at level -1." ); - equal( viewer.getLevelOfLayer( layer3 ), 1, - "Layer 3 should be at level 1." ); - - }); - viewer.removeLayer( layer2 ); - - options.tileSource.levels[0].width = 500; - viewer.addHandler( "add-layer-failed", function addLayerFailed( event ) { - viewer.removeHandler( "add-layer-failed", addLayerFailed ); - - equal( viewer.getLayersCount(), 3 ); + equal( viewer.world.getIndexOfItem( item1 ), 2, + "Item 1 should be at index 2." ); + equal( viewer.world.getIndexOfItem( item2 ), -1, + "Item 2 should be at index -1." ); + equal( viewer.world.getIndexOfItem( item3 ), 1, + "Item 3 should be at index 1." ); start(); }); - viewer.addLayer( options ); + + viewer.world.removeItem( item2 ); }); }); }); @@ -129,7 +118,7 @@ viewer.open( '/test/data/testpattern.dzi' ); }); - asyncTest( 'Sequences as layers', function() { + asyncTest( 'Sequences as items', function() { var options = { tileSource: [{ @@ -152,127 +141,17 @@ viewer.addHandler( "open", function openHandler() { viewer.removeHandler( "open", openHandler ); - viewer.addHandler( "add-layer-failed", - function addLayerFailedHandler( event ) { - viewer.removeHandler( "add-layer-failed", addLayerFailedHandler ); - equal( event.message, "Sequences can not be added as layers." ); - equal( event.options, options, "Layer failed event should give the options." ); + viewer.addHandler( "add-item-failed", + function addItemFailedHandler( event ) { + viewer.removeHandler( "add-item-failed", addItemFailedHandler ); + equal( event.message, "[Viewer.addTiledImage] Sequences can not be added." ); + equal( event.options, options, "Item failed event should give the options." ); start(); } ); - viewer.addLayer( options ); + viewer.addTiledImage( options ); }); viewer.open( '/test/data/testpattern.dzi' ); }); - - asyncTest( 'Reassign base layer', function() { - - var options = { - tileSource: { - type: 'legacy-image-pyramid', - levels: [{ - url: "data/A.png", - width: 1000, - height: 1000 - }] - }, - level: 0 - }; - viewer.addHandler( "open", function openHandler( ) { - viewer.removeHandler( "open", openHandler ); - var testPatternDrawer = viewer.drawer; - equal( viewer.drawer, testPatternDrawer, "Viewer.drawer should be set to testPatternDrawer." ); - viewer.addHandler( "add-layer", function addLayerHandler( event ) { - viewer.removeHandler( "add-layer", addLayerHandler ); - var aDrawer = event.drawer; - equal( viewer.drawer, aDrawer, "Viewer.drawer should be set to aDrawer." ); - viewer.setLayerLevel( aDrawer, 1 ); - equal( viewer.drawer, testPatternDrawer, "Viewer.drawer should be set back to testPatternDrawer." ); - - viewer.removeLayer( viewer.drawer ); - equal( viewer.drawer, aDrawer, "Viewer.drawer must be reassigned when removing base layer." ); - - viewer.removeLayer( viewer.drawer ); - ok( !viewer.isOpen(), "Viewer should be closed when removing last layer." ); - - start(); - }); - viewer.addLayer( options ); - }); - viewer.open( '/test/data/testpattern.dzi' ); - }); - - asyncTest( 'Layers and sequences', function() { - expect( 1 ); - -// TODO: Remove workaround when issue #321 is fixed. -// https://github.com/openseadragon/openseadragon/issues/321 -// viewer.open( [{ -// type: 'legacy-image-pyramid', -// levels: [ { -// url: "data/A.png", -// width: 1000, -// height: 1000 -// }] -// }, -// { -// type: 'legacy-image-pyramid', -// levels: [ { -// url: "data/BBlue.png", -// width: 1000, -// height: 1000 -// }]}] ); - - viewer.close(); - viewer = OpenSeadragon({ - id: 'layersexample', - prefixUrl: '/build/openseadragon/images/', - springStiffness: 100, // Faster animation = faster tests - tileSources: [{ - type: 'legacy-image-pyramid', - levels: [{ - url: "data/A.png", - width: 1000, - height: 1000 - }] - }, - { - type: 'legacy-image-pyramid', - levels: [{ - url: "data/BBlue.png", - width: 1000, - height: 1000 - }] - }] - }); -// End workaround - - var options = { - tileSource: { - type: 'legacy-image-pyramid', - levels: [{ - url: "data/CCyan.png", - width: 1000, - height: 1000 - }] - } - }; - - viewer.addHandler( "open", function openHandler() { - viewer.addHandler( "add-layer", function addLayerHandler( event ) { - viewer.removeHandler( "add-layer", addLayerHandler ); - - var layer = event.drawer; - try { - viewer.setLayerLevel( layer, 0 ); - } catch (e) { - ok( true ); - } - start(); - } ); - viewer.addLayer( options ); - }); - - }); })();