Allow base layer reassignment if not in sequence mode.

src/viewer.js

@@ -994,7 +994,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
     /**
      * Add a layer.
      * options.tileSource can be anything that {@link OpenSeadragon.Viewer#open}
-     *  supports.
+     *  supports except arrays of images as layers cannot be sequences.
      * @function
      * @param {Object} options
      * @param {String|Object|Function} [options.tileSource] The TileSource of the layer.
@@ -1008,6 +1008,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         var _this = this,
             tileSource = options.tileSource;
 
+        if ( !this.isOpen() ) {
+            throw new Error( "An image must be loaded before adding layers." );
+        }
         if ( !tileSource ) {
             throw new Error( "No tile source provided as new layer." );
         }
@@ -1034,7 +1037,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
             if ( tileSource instanceof Array ) {
                 raiseAddLayerFailed({
-                    message: "Collections can not be added as layers.",
+                    message: "Sequences can not be added as layers.",
                     source: tileSource,
                     options: options
                 });
@@ -1062,7 +1065,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                 debugGridColor: _this.debugGridColor
             });
             _this.drawers.push( drawer );
-            if ( options.level ) {
+            if ( options.level !== undefined ) {
                 _this.setLayerLevel( drawer, options.level );
             }
             THIS[ _this.hash ].forceRedraw = true;
@@ -1114,8 +1117,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * Get the number of layers used.
      * @returns {Number} The number of layers used.
      */
-    getNumberOfLayers: function() {
+    getLayersCount: function() {
-        return this.drawers.length - 1;
+        return this.drawers.length;
     },
 
     /**
@@ -1128,22 +1131,33 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      */
     setLayerLevel: function( drawer, level ) {
         var oldLevel = this.getLevelOfLayer( drawer );
-        if ( level === 0 || oldLevel === 0 ) {
+
-            throw new Error( "Cannot reassign base level." );
-        }
         if ( level >= this.drawers.length ) {
             throw new Error( "Level bigger than number of layers." );
         }
         if ( level === oldLevel || oldLevel === -1 ) {
             return this;
         }
+        if ( level === 0 || oldLevel === 0 ) {
+            if ( THIS[ this.hash ].sequenced ) {
+                throw new Error( "Cannot reassign base level when in sequence mode." );
+            }
+            // We need to re-assign the base drawer
+            this.drawer = level === 0 ? drawer : this.getLayerAtLevel( level );
+        }
         this.drawers.splice( oldLevel, 1 );
         this.drawers.splice( level, 0, drawer );
         this.canvas.removeChild( drawer.canvas );
+        if ( level === 0 ) {
+            var nextLevelCanvas = this.drawers[ 1 ].canvas;
+            nextLevelCanvas.parentNode.insertBefore( drawer.canvas,
+                nextLevelCanvas );
+        } else {
             // Insert right after layer at level - 1
             var prevLevelCanvas = this.drawers[level - 1].canvas;
             prevLevelCanvas.parentNode.insertBefore( drawer.canvas,
                 prevLevelCanvas.nextSibling );
+        }
 
         /**
          * Raised when the order of the layers has been changed.

test/demo/layers.html

@@ -28,7 +28,7 @@
 
         <div>
             <div id="availables">
-                Availables layers<br>
+                Available layers<br>
                 <select name="layers-availables" size="4" multiple="multiple">
                     <option>CCyan</option>
                     <option>DDandelion</option>

test/layers.js

@@ -28,11 +28,9 @@
     // ----------
     asyncTest( 'Layers operations', function() {
         expect( 22 );
-
         viewer.addHandler( "open", function( ) {
-            equal( 0, viewer.getNumberOfLayers(),
+            equal( 1, viewer.getLayersCount( ),
-                "No layer should be present after opening." );
+                "One layer should be present after opening." );
-
             var options = {
                 tileSource: {
                     type: 'legacy-image-pyramid',
@@ -47,9 +45,8 @@
             viewer.addHandler( "add-layer", function addFirstLayerHandler( event ) {
                 viewer.removeHandler( "add-layer", addFirstLayerHandler );
                 var layer1 = event.drawer;
-
+                equal( viewer.getLayersCount( ), 2,
-                equal( viewer.getNumberOfLayers(), 1,
+                    "2 layers should be present after adding a layer." );
-                    "1 layer should be present after adding a layer." );
                 equal( options, event.options,
                     "The options should be transmitted via the event." );
                 equal( viewer.getLevelOfLayer( layer1 ), 1,
@@ -61,9 +58,8 @@
                 viewer.addHandler( "add-layer", function addSecondLayerHandler( event ) {
                     viewer.removeHandler( "add-layer", addSecondLayerHandler );
                     var layer2 = event.drawer;
-
+                    equal( viewer.getLayersCount( ), 3,
-                    equal( viewer.getNumberOfLayers(), 2,
+                        "3 layers should be present after adding a second layer." );
-                        "2 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,
@@ -95,9 +91,8 @@
                     viewer.addHandler( "add-layer", function addThirdLayerHandler( event ) {
                         viewer.removeHandler( "add-layer", addThirdLayerHandler );
                         var layer3 = event.drawer;
-
+                        equal( viewer.getLayersCount( ), 4,
-                        equal( viewer.getNumberOfLayers(), 3,
+                            "4 layers should be present after adding a third layer." );
-                            "3 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,
@@ -125,7 +120,7 @@
         viewer.open( '/test/data/testpattern.dzi' );
     });
 
-    asyncTest( 'Collections as layers', function() {
+    asyncTest( 'Sequences as layers', function() {
 
         var options = {
             tileSource: [{
@@ -151,8 +146,7 @@
             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.message, "Collections can not be added as layers." );
                     equal( event.options, options, "Layer failed event should give the options." );
                     start();
                 } );
@@ -161,4 +155,108 @@
         });
         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." );
+                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 );
+        });
+
+    });
 })();