openseadragon/test/modules/multi-image.js

/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog, expect */

( function() {
    var viewer;

    module( 'Multi-Image', {
        setup: function() {
            $( '<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;
            $("#example").remove();
        }
    } );

    // ----------
    asyncTest( 'Multi-image operations', function() {
        expect( 24 );
        viewer.addHandler( "open", function( ) {
            equal( 1, viewer.world.getItemCount( ),
                "One item should be present after opening." );
            var options = {
                tileSource: {
                    type: 'legacy-image-pyramid',
                    levels: [ {
                            url: "data/A.png",
                            width: 1000,
                            height: 1000
                        } ]
                }
            };
            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.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.world.addHandler( "item-index-change",
                        function itemIndexChangedHandler( event ) {
                            viewer.world.removeHandler( "item-index-change",
                                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.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.index = 2;
                    options.tileSource.levels[0].url = "data/CCyan.png";
                    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." );

                        options.index = 2;
                        options.replace = true;
                        viewer.addTiledImage( options );
                        viewer.world.addHandler( "add-item", function replaceAddItemHandler( event ) {
                            viewer.world.removeHandler( "add-item", replaceAddItemHandler );
                            var item4 = event.item;
                            equal( viewer.world.getItemCount( ), 4,
                                "4 items should still be present after replacing the second item." );
                            equal( viewer.world.getIndexOfItem( item4 ), 2,
                                "Item 4 should be added with index 2." );
                            equal( viewer.world.getIndexOfItem( item3 ), -1,
                                "Item 3 should be at index -1." );

                            viewer.world.addHandler( "remove-item", function removeItemHandler( event ) {
                                viewer.world.removeHandler( "remove-item", removeItemHandler );

                                equal( item2, event.item, "Removed item should be item2." );

                                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( item4 ), 1,
                                    "Item 4 should be at index 1." );

                                start();
                            });

                            viewer.world.removeItem( item2 );
                        });
                    });
                });
            });
        });
        viewer.open( '/test/data/testpattern.dzi' );
    });

    // ----------
    asyncTest( 'Sequences as items', function() {
        var options = {
            tileSource: [{
                    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.addHandler( "open", function openHandler() {
            viewer.removeHandler( "open", openHandler );

            viewer.addHandler( "add-item-failed",
                function addItemFailedHandler( event ) {
                    viewer.removeHandler( "add-item-failed", addItemFailedHandler );
                    equal( event.message, "[Viewer.addTiledImage] Sequences can not be added; add them one at a time instead." );
                    equal( event.options, options, "Item failed event should give the options." );
                    start();
                } );
            viewer.addTiledImage( options );

        });
        viewer.open( '/test/data/testpattern.dzi' );
    });

    // ----------
    asyncTest('items are added in order', function() {
        viewer.addHandler('open', function(event) {
            equal(viewer.world.getItemAt(0).getContentSize().y, 2000, 'first image is tall');
            equal(viewer.world.getItemAt(0).getBounds().width, 4, 'first image has 4 width');
            equal(viewer.world.getItemAt(1).getContentSize().x, 2000, 'second image is wide');
            equal(viewer.world.getItemAt(1).getBounds().width, 2, 'second image has 2 width');
            start();
        });

        viewer.open([
            {
                tileSource: '/test/data/tall.dzi',
                width: 4
            }, {
                tileSource: '/test/data/wide.dzi',
                width: 2
            }
        ]);
    });

    asyncTest('Viewer.addSimpleImage', function() {
        viewer.addHandler("open", function openHandler() {
            viewer.removeHandler("open", openHandler);

            viewer.world.addHandler('add-item', function itemAdded(event) {
                viewer.world.removeHandler('add-item', itemAdded);
                equal(event.item.opacity, 0.5,
                    'Opacity option should be set when using addSimpleImage');
                start();
            });

            viewer.addSimpleImage({
                url: '/test/data/A.png',
                opacity: 0.5
            });
        });
        viewer.open('/test/data/testpattern.dzi');
    });

    asyncTest('Transparent image on top of others', function() {
        viewer.open('/test/data/testpattern.dzi');

        // TODO: replace with fully-loaded event listener when available.
        setTimeout(function() {
            var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
            var expectedVal = getPixelValue(imageData, 333, 250);

            viewer.addSimpleImage({
                url: '/test/data/A.png'
            });

            // TODO: replace with fully-loaded event listener when available.
            setTimeout(function() {
                var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500);
                var actualVal = getPixelValue(imageData, 333, 250);

                equal(actualVal.r, expectedVal.r,
                    'Red channel should not change when stacking a transparent image');
                equal(actualVal.g, expectedVal.g,
                    'Green channel should not change when stacking a transparent image');
                equal(actualVal.b, expectedVal.b,
                    'Blue channel should not change when stacking a transparent image');
                equal(actualVal.a, expectedVal.a,
                    'Alpha channel should not change when stacking a transparent image');

                start();
            }, 1000);
        }, 1000);

        function getPixelValue(imageData, x, y) {
            var offset = x * imageData.width + y;
            return {
                r: imageData.data[offset],
                g: imageData.data[offset + 1],
                b: imageData.data[offset + 2],
                a: imageData.data[offset + 3]
            };
        }
    });

})();