tiledImage bounds animation now works

changelog.txt

@@ -15,10 +15,10 @@ OPENSEADRAGON CHANGELOG
     * DEPRECATION: use World.getItemCount instead of Viewer.getLayersCount
     * DEPRECATION: use World.setItemIndex instead of Viewer.setLayerLevel
     * DEPRECATION: use World.removeItem instead of Viewer.removeLayer
-    * DEPRECATION: use World.needsUpdate instead of Drawer.needsUpdate
+    * DEPRECATION: use World.needsDraw instead of Drawer.needsUpdate
     * DEPRECATION: use TileCache.numTilesLoaded instead of Drawer.numTilesLoaded
     * DEPRECATION: use World.resetItems instead of Drawer.reset
-    * DEPRECATION: use Drawer.clear and World.update instead of Drawer.update
+    * DEPRECATION: use Drawer.clear and World.draw instead of Drawer.update
     * DEPRECATION: the layersAspectRatioEpsilon option is no longer necessary
     * DEPRECATION: Viewer's add-layer event is now World's add-item event
     * DEPRECATION: Viewer's layer-level-changed event is now World's item-index-change event

src/drawer.js

@@ -168,8 +168,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
 
     // deprecated
     needsUpdate: function() {
-        $.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsUpdate instead." );
+        $.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsDraw instead." );
-        return this.viewer.world.needsUpdate();
+        return this.viewer.world.needsDraw();
     },
 
     // deprecated
@@ -187,9 +187,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
 
     // deprecated
     update: function() {
-        $.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.update instead." );
+        $.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.draw instead." );
         this.clear();
-        this.viewer.world.update();
+        this.viewer.world.draw();
         return this;
     },
 

src/navigator.js

@@ -290,7 +290,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
                     );
                 this.viewport.fitBounds( newBounds, true );
                 this.oldContainerSize = containerSize;
-                this.drawer.update();
+                this.drawer.clear();
+                this.world.draw();
             }
         }
     },

src/tiledimage.js

@@ -52,6 +52,8 @@
  * @param {Number} [options.y=0] - Top position, in viewport coordinates.
  * @param {Number} [options.width=1] - Width, in viewport coordinates.
  * @param {Number} [options.height] - Height, in viewport coordinates.
+ * @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}.
+ * @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}.
  * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}.
  * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}.
  * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}.
@@ -113,8 +115,8 @@ $.TiledImage = function( options ) {
         coverage:       {},    // A '3d' dictionary [level][x][y] --> Boolean.
         lastDrawn:      [],    // An unordered list of Tiles drawn last frame.
         lastResetTime:  0,     // Last time for which the tiledImage was reset.
-        midUpdate:      false, // Is the tiledImage currently updating the viewport?
+        _midDraw:      false, // Is the tiledImage currently updating the viewport?
-        updateAgain:    true,  // Does the tiledImage need to update the viewport again?
+        _needsDraw:    true,  // Does the tiledImage need to update the viewport again?
 
         //configurable settings
         springStiffness:    $.DEFAULT_SETTINGS.springStiffness,
@@ -176,11 +178,10 @@ $.TiledImage = function( options ) {
 
 $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{
     /**
-     * @returns {Boolean} Whether the TiledImage is scheduled for an update at the
+     * @returns {Boolean} Whether the TiledImage needs to be drawn.
-     * soonest possible opportunity.
      */
-    needsUpdate: function() {
+    needsDraw: function() {
-        return this.updateAgain;
+        return this._needsDraw;
     },
 
     /**
@@ -190,16 +191,38 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
     reset: function() {
         this._tileCache.clearTilesFor(this);
         this.lastResetTime = $.now();
-        this.updateAgain = true;
+        this._needsDraw = true;
     },
 
     /**
-     * Forces the TiledImage to update.
+     * Updates the TiledImage's bounds, animating if needed.
+     * @returns {Boolean} Whether the TiledImage animated.
      */
     update: function() {
-        this.midUpdate = true;
+        var oldX = this._xSpring.current.value;
+        var oldY = this._ySpring.current.value;
+        var oldScale = this._scaleSpring.current.value;
+
+        this._xSpring.update();
+        this._ySpring.update();
+        this._scaleSpring.update();
+
+        if (this._xSpring.current.value !== oldX || this._ySpring.current.value !== oldY ||
+                this._scaleSpring.current.value !== oldScale) {
+            this._needsDraw = true;
+            return true;
+        }
+
+        return false;
+    },
+
+    /**
+     * Draws the TiledImage to its Drawer.
+     */
+    draw: function() {
+        this._midDraw = true;
         updateViewport( this );
-        this.midUpdate = false;
+        this._midDraw = false;
     },
 
     /**
@@ -374,9 +397,12 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @fires OpenSeadragon.TiledImage.event:bounds-change
      */
     setPosition: function(position, immediately) {
+        var sameTarget = (this._xSpring.target.value === position.x &&
+            this._ySpring.target.value === position.y);
+
         if (immediately) {
-            if (this._xSpring.target.value === position.x && this._ySpring.target.value === position.y &&
+            if (sameTarget && this._xSpring.current.value === position.x &&
-                    this._xSpring.current.value === position.x && this._ySpring.current.value === position.y) {
+                    this._ySpring.current.value === position.y) {
                 return;
             }
 
@@ -384,9 +410,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             this._ySpring.resetTo(position.y);
             this._xSpring.update();
             this._ySpring.update();
-            this.updateAgain = true;
         } else {
-            if (this._xSpring.target.value === position.x && this._ySpring.target.value === position.y) {
+            if (sameTarget) {
                 return;
             }
 
@@ -394,7 +419,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             this._ySpring.springTo(position.y);
         }
 
-        this._raiseBoundsChange();
+        if (!sameTarget) {
+            this._raiseBoundsChange();
+        }
     },
 
     /**
@@ -404,25 +431,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @fires OpenSeadragon.TiledImage.event:bounds-change
      */
     setWidth: function(width, immediately) {
-        if (immediately) {
+        this._setScale(width, immediately);
-            if (this._worldWidthTarget === width && this._worldWidthCurrent === width) {
-                return;
-            }
-
-            this._scaleSpring.resetTo(width);
-            this._scaleSpring.update();
-            this._updateForScale();
-            this.updateAgain = true;
-        } else {
-            if (this._worldWidthTarget === width) {
-                return;
-            }
-
-            this._scaleSpring.springTo(width);
-            this._updateForScale();
-        }
-
-        this._raiseBoundsChange();
     },
 
     /**
@@ -432,18 +441,22 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @fires OpenSeadragon.TiledImage.event:bounds-change
      */
     setHeight: function(height, immediately) {
-        var scale = height / this.normHeight;
+        this._setScale(height / this.normHeight, immediately);
+    },
+
+    // private
+    _setScale: function(scale, immediately) {
+        var sameTarget = (this._scaleSpring.target.value === scale);
         if (immediately) {
-            if (this._worldHeightTarget === height && this._worldHeightCurrent === height) {
+            if (sameTarget && this._scaleSpring.current.value === scale) {
                 return;
             }
 
             this._scaleSpring.resetTo(scale);
             this._scaleSpring.update();
             this._updateForScale();
-            this.updateAgain = true;
         } else {
-            if (this._worldHeightTarget === height) {
+            if (sameTarget) {
                 return;
             }
 
@@ -451,28 +464,25 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             this._updateForScale();
         }
 
-        this._raiseBoundsChange();
+        if (!sameTarget) {
-    },
+            this._raiseBoundsChange();
-
+        }
-    // private
-    _setScale: function(scale) {
-        this._scale = scale;
-        this._worldWidth = this._scale;
-        this._worldHeight = this.normHeight * this._scale;
     },
 
     // private
     _updateForScale: function() {
-        this._worldWidthTarget = this._scale.target.value;
+        this._worldWidthTarget = this._scaleSpring.target.value;
-        this._worldHeightTarget = this.normHeight * this._scale.target.value;
+        this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value;
-        this._worldWidthCurrent = this._scale.current.value;
+        this._worldWidthCurrent = this._scaleSpring.current.value;
-        this._worldHeightCurrent = this.normHeight * this._scale.current.value;
+        this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value;
     },
 
     // private
     _raiseBoundsChange: function() {
         /**
          * Raised when the TiledImage's bounds are changed.
+         * Note that this event is triggered only when the animation target is changed;
+         * not for every frame of animation.
          * @event bounds-change
          * @memberOf OpenSeadragon.TiledImage
          * @type {object}
@@ -492,7 +502,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
  */
 function updateViewport( tiledImage ) {
 
-    tiledImage.updateAgain = false;
+    tiledImage._needsDraw = false;
 
     var tile,
         level,
@@ -503,7 +513,7 @@ function updateViewport( tiledImage ) {
         zeroRatioC      = tiledImage.viewport.deltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( 0 ),
             true
-        ).x * tiledImage._scale,
+        ).x * tiledImage._scaleSpring.current.value,
         lowestLevel     = Math.max(
             tiledImage.source.minLevel,
             Math.floor(
@@ -551,23 +561,23 @@ function updateViewport( tiledImage ) {
     var viewportBR = viewportBounds.getBottomRight();
 
     //Don't draw if completely outside of the viewport
-    if  ( !tiledImage.wrapHorizontal && (viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidth ) ) {
+    if  ( !tiledImage.wrapHorizontal && (viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidthCurrent ) ) {
         return;
     }
 
-    if ( !tiledImage.wrapVertical && ( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeight ) ) {
+    if ( !tiledImage.wrapVertical && ( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeightCurrent ) ) {
         return;
     }
 
     // Calculate viewport rect / bounds
     if ( !tiledImage.wrapHorizontal ) {
         viewportTL.x = Math.max( viewportTL.x, 0 );
-        viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidth );
+        viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidthCurrent );
     }
 
     if ( !tiledImage.wrapVertical ) {
         viewportTL.y = Math.max( viewportTL.y, 0 );
-        viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeight );
+        viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeightCurrent );
     }
 
     // Calculations for the interval of levels to draw
@@ -584,7 +594,7 @@ function updateViewport( tiledImage ) {
         renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( level ),
             true
-        ).x * tiledImage._scale;
+        ).x * tiledImage._scaleSpring.current.value;
 
         if ( ( !haveDrawn && renderPixelRatioC >= tiledImage.minPixelRatio ) ||
              ( level == lowestLevel ) ) {
@@ -598,7 +608,7 @@ function updateViewport( tiledImage ) {
         renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( level ),
             false
-        ).x * tiledImage._scale;
+        ).x * tiledImage._scaleSpring.current.value;
 
         zeroRatioT      = tiledImage.viewport.deltaPixelsFromPoints(
             tiledImage.source.getPixelRatio(
@@ -608,7 +618,7 @@ function updateViewport( tiledImage ) {
                 )
             ),
             false
-        ).x * tiledImage._scale;
+        ).x * tiledImage._scaleSpring.current.value;
 
         optimalRatio    = tiledImage.immediateRender ?
             1 :
@@ -648,7 +658,7 @@ function updateViewport( tiledImage ) {
     if ( best ) {
         loadTile( tiledImage, best, currentTime );
         // because we haven't finished drawing, so
-        tiledImage.updateAgain = true;
+        tiledImage._needsDraw = true;
     }
 
 }
@@ -696,8 +706,8 @@ function updateLevel( tiledImage, haveDrawn, drawLevel, level, levelOpacity, lev
     }
 
     //OK, a new drawing so do your calculations
-    tileTL    = tiledImage.source.getTileAtPoint( level, viewportTL.divide( tiledImage._scale ));
+    tileTL    = tiledImage.source.getTileAtPoint( level, viewportTL.divide( tiledImage._scaleSpring.current.value ));
-    tileBR    = tiledImage.source.getTileAtPoint( level, viewportBR.divide( tiledImage._scale ));
+    tileBR    = tiledImage.source.getTileAtPoint( level, viewportBR.divide( tiledImage._scaleSpring.current.value ));
     numberOfTiles  = tiledImage.source.getNumTiles( level );
 
     resetCoverage( tiledImage.coverage, level );
@@ -741,8 +751,8 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
             tiledImage.tilesMatrix,
             currentTime,
             numberOfTiles,
-            tiledImage._worldWidth,
+            tiledImage._worldWidthCurrent,
-            tiledImage._worldHeight
+            tiledImage._worldHeightCurrent
         ),
         drawTile = drawLevel;
 
@@ -805,7 +815,7 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
     }
 
     if ( tile.loaded ) {
-        var needsUpdate = blendTile(
+        var needsDraw = blendTile(
             tiledImage,
             tile,
             x, y,
@@ -814,8 +824,8 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
             currentTime
         );
 
-        if ( needsUpdate ) {
+        if ( needsDraw ) {
-            tiledImage.updateAgain = true;
+            tiledImage._needsDraw = true;
         }
     } else if ( tile.loading ) {
         // the tile is already in the download queue
@@ -908,29 +918,29 @@ function onTileLoad( tiledImage, tile, time, image ) {
 
     // Check if we're mid-update; this can happen on IE8 because image load events for
     // cached images happen immediately there
-    if ( !tiledImage.midUpdate ) {
+    if ( !tiledImage._midDraw ) {
         finish();
     } else {
         // Wait until after the update, in case caching unloads any tiles
         window.setTimeout( finish, 1);
     }
 
-    tiledImage.updateAgain = true;
+    tiledImage._needsDraw = true;
 }
 
 
 function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tiledImage ){
     var boundsTL     = tile.bounds.getTopLeft();
 
-    boundsTL.x *= tiledImage._scale;
+    boundsTL.x *= tiledImage._scaleSpring.current.value;
-    boundsTL.y *= tiledImage._scale;
+    boundsTL.y *= tiledImage._scaleSpring.current.value;
     boundsTL.x += tiledImage._xSpring.current.value;
     boundsTL.y += tiledImage._ySpring.current.value;
 
     var boundsSize   = tile.bounds.getSize();
 
-    boundsSize.x *= tiledImage._scale;
+    boundsSize.x *= tiledImage._scaleSpring.current.value;
-    boundsSize.y *= tiledImage._scale;
+    boundsSize.y *= tiledImage._scaleSpring.current.value;
 
     var positionC    = viewport.pixelFromPoint( boundsTL, true ),
         positionT    = viewport.pixelFromPoint( boundsTL, false ),

src/viewer.js

@@ -1337,7 +1337,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     y: queueItem.options.y,
                     width: queueItem.options.width,
                     height: queueItem.options.height,
-                    imageLoaderLimit: _this.imageLoaderLimit,
+                    springStiffness: _this.springStiffness,
+                    animationTime: _this.animationTime,
                     minZoomImageRatio: _this.minZoomImageRatio,
                     wrapHorizontal: _this.wrapHorizontal,
                     wrapVertical: _this.wrapVertical,
@@ -1345,8 +1346,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     blendTime: _this.blendTime,
                     alwaysBlend: _this.alwaysBlend,
                     minPixelRatio: _this.minPixelRatio,
-                    debugMode: _this.debugMode,
+                    debugMode: _this.debugMode
-                    debugGridColor: _this.debugGridColor
                 });
 
                 _this.world.addItem( tiledImage, {
@@ -2659,6 +2659,7 @@ function updateOnce( viewer ) {
     }
 
     animated = viewer.viewport.update();
+    animated = viewer.world.update() || animated;
 
     if( viewer.referenceStrip ){
         animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
@@ -2678,8 +2679,8 @@ function updateOnce( viewer ) {
         abortControlsAutoHide( viewer );
     }
 
-    if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsUpdate() ) {
+    if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) {
-        updateWorld( viewer );
+        drawWorld( viewer );
         viewer._drawOverlays();
         if( viewer.navigator ){
             viewer.navigator.update( viewer.viewport );
@@ -2750,9 +2751,9 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter
     viewport.fitBounds( newBounds, true );
 }
 
-function updateWorld( viewer ) {
+function drawWorld( viewer ) {
     viewer.drawer.clear();
-    viewer.world.update();
+    viewer.world.draw();
 
     /**
      * <em>- Needs documentation -</em>

src/world.js

@@ -51,7 +51,7 @@ $.World = function( options ) {
 
     this.viewer = options.viewer;
     this._items = [];
-    this._needsUpdate = false;
+    this._needsDraw = false;
     this._delegatedFigureSizes = function(event) {
         _this._figureSizes();
     };
@@ -80,7 +80,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
         }
 
         this._figureSizes();
-        this._needsUpdate = true;
+        this._needsDraw = true;
 
         item.addHandler('bounds-change', this._delegatedFigureSizes);
 
@@ -147,7 +147,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
 
         this._items.splice( oldIndex, 1 );
         this._items.splice( index, 0, item );
-        this._needsUpdate = true;
+        this._needsDraw = true;
 
         /**
          * Raised when the order of the indexes has been changed.
@@ -185,7 +185,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
         item.removeHandler('bounds-change', this._delegatedFigureSizes);
         this._items.splice( index, 1 );
         this._figureSizes();
-        this._needsUpdate = true;
+        this._needsDraw = true;
         this._raiseRemoveItem(item);
     },
 
@@ -204,7 +204,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
         var removedItems = this._items;
         this._items = [];
         this._figureSizes();
-        this._needsUpdate = true;
+        this._needsDraw = true;
 
         for (i = 0; i < removedItems.length; i++) {
             item = removedItems[i];
@@ -222,26 +222,38 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
     },
 
     /**
-     * Updates (i.e. draws) all items.
+     * Updates (i.e. animates bounds of) all items.
      */
     update: function() {
+        var animated = false;
         for ( var i = 0; i < this._items.length; i++ ) {
-            this._items[i].update();
+            animated = this._items[i].update() || animated;
         }
 
-        this._needsUpdate = false;
+        return animated;
+    },
+
+    /**
+     * Draws all items.
+     */
+    draw: function() {
+        for ( var i = 0; i < this._items.length; i++ ) {
+            this._items[i].draw();
+        }
+
+        this._needsDraw = false;
     },
 
     /**
      * @returns {Boolean} true if any items need updating.
      */
-    needsUpdate: function() {
+    needsDraw: function() {
         for ( var i = 0; i < this._items.length; i++ ) {
-            if ( this._items[i].needsUpdate() ) {
+            if ( this._items[i].needsDraw() ) {
                 return true;
             }
         }
-        return this._needsUpdate;
+        return this._needsDraw;
     },
 
     /**
@@ -264,6 +276,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
     /**
      * Arranges all of the TiledImages with the specified settings.
      * @param {Object} options - Specifies how to arrange.
+     * @param {Boolean} [options.immediately=false] - Whether to animate to the new arrangement.
      * @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}.
      * @param {Number} [options.rows] - See collectionRows in {@link OpenSeadragon.Options}.
      * @param {Number} [options.tileSize] - See collectionTileSize in {@link OpenSeadragon.Options}.
@@ -272,6 +285,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
      */
     arrange: function(options) {
         options = options || {};
+        var immediately = options.immediately || false;
         var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout;
         var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows;
         var tileSize = options.tileSize || $.DEFAULT_SETTINGS.collectionTileSize;
@@ -304,8 +318,8 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
             position = new $.Point(x + ((tileSize - width) / 2),
                 y + ((tileSize - height) / 2));
 
-            item.setPosition(position);
+            item.setPosition(position, immediately);
-            item.setWidth(width);
+            item.setWidth(width, immediately);
 
             if (layout === 'horizontal') {
                 x += increment;

test/demo/collections/main.js

@@ -6,10 +6,10 @@
         init: function() {
             var self = this;
 
-            var testInitialOpen = true;
+            var testInitialOpen = false;
             var testOverlays = false;
             var testMargins = false;
-            var testNavigator = false;
+            var testNavigator = true;
             var margins;
 
             var config = {
@@ -112,10 +112,26 @@
             }
 
             if (!testInitialOpen) {
-                this.collectionTest();
+                this.gridTest();
             }
         },
 
+        // ----------
+        shrink: function(index) {
+            index = index || 0;
+            var image = this.viewer.world.getItemAt(index);
+            image.setWidth(image.getBounds().width * 0.3);
+        },
+
+        // ----------
+        move: function(index) {
+            index = index || 0;
+            var image = this.viewer.world.getItemAt(index);
+            var point = image.getBounds().getTopLeft();
+            point.x += image.getBounds().width * 0.3;
+            image.setPosition(point);
+        },
+
         // ----------
         basicTest: function() {
             var self = this;
@@ -124,7 +140,8 @@
             });
 
             this.viewer.open({
-                tileSource: "../../data/testpattern.dzi"
+                tileSource: "../../data/testpattern.dzi",
+                width: 1
             });
         },
 

test/modules/drawer.js

@@ -74,10 +74,10 @@
         Util.testDeprecation(viewer.drawer, 'updateOverlay', viewer, 'updateOverlay');
         Util.testDeprecation(viewer.drawer, 'removeOverlay', viewer, 'removeOverlay');
         Util.testDeprecation(viewer.drawer, 'clearOverlays', viewer, 'clearOverlays');
-        Util.testDeprecation(viewer.drawer, 'needsUpdate', viewer.world, 'needsUpdate');
+        Util.testDeprecation(viewer.drawer, 'needsUpdate', viewer.world, 'needsDraw');
         Util.testDeprecation(viewer.drawer, 'numTilesLoaded', viewer.tileCache, 'numTilesLoaded');
         Util.testDeprecation(viewer.drawer, 'reset', viewer.world, 'resetItems');
-        Util.testDeprecation(viewer.drawer, 'update', viewer.world, 'update');
+        Util.testDeprecation(viewer.drawer, 'update', viewer.world, 'draw');
         start();
     });
 

test/modules/navigator.js

@@ -140,7 +140,7 @@
                 currentDisplayRegionLeft = displayRegion.position().left;
                 currentDisplayWidth = displayRegion.width();
                 viewerAndNavigatorDisplayReady = viewer.drawer !== null &&
-                    !viewer.drawer.needsUpdate() &&
+                    !viewer.world.needsDraw() &&
                     currentDisplayWidth > 0 &&
                     Util.equalsWithVariance(lastDisplayRegionLeft, currentDisplayRegionLeft, 0.0001) &&
                     Util.equalsWithVariance(lastDisplayWidth, currentDisplayWidth, 0.0001) &&
@@ -160,7 +160,7 @@
             else {
                 if (count === 40) {
                     console.log("waitForViewer:" +
-                        viewer.drawer + ":" + viewer.drawer.needsUpdate() + ":" +
+                        viewer.drawer + ":" + viewer.world.needsDraw() + ":" +
                         viewerAndNavigatorDisplayReady + ":" +
                         lastDisplayRegionLeft + ":" + currentDisplayRegionLeft + ":" +
                         lastDisplayWidth + ":" + currentDisplayWidth + ":" +

test/modules/overlays.js

@@ -29,7 +29,7 @@
         }
         var ready = viewer.isOpen() &&
             viewer.drawer !== null &&
-            !viewer.drawer.needsUpdate() &&
+            !viewer.world.needsDraw() &&
             Util.equalsWithVariance( viewer.viewport.getBounds( true ).x,
                 viewer.viewport.getBounds().x, 0.000 ) &&
             Util.equalsWithVariance( viewer.viewport.getBounds( true ).y,
@@ -46,7 +46,7 @@
             }, 100 );
         } else {
             console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
-                ":" + viewer.drawer.needsUpdate() );
+                ":" + viewer.world.needsDraw() );
             handler();
         }
     }

test/modules/tiledimage.js

@@ -91,7 +91,7 @@
 
         viewer.addHandler('open', function(event) {
             var image = viewer.world.getItemAt(0);
-            equal(image.needsUpdate(), true, 'needs update after open');
+            equal(image.needsDraw(), true, 'needs draw after open');
 
             viewer.addHandler('update-level', function updateLevelHandler(event) {
                 viewer.removeHandler('update-level', updateLevelHandler);
@@ -137,7 +137,7 @@
                 start();
             });
 
-            image.update();
+            image.draw();
         });
 
         viewer.open('/test/data/testpattern.dzi');

test/modules/world.js

@@ -144,24 +144,24 @@
     });
 
     // ----------
-    asyncTest('update', function() {
+    asyncTest('draw', function() {
         var handlerCount = 0;
 
         viewer.addHandler('open', function(event) {
-            equal(viewer.world.needsUpdate(), true, 'needs update after open');
+            equal(viewer.world.needsDraw(), true, 'needs draw after open');
 
             viewer.addHandler('update-level', function updateHandler() {
                 viewer.removeHandler('update-level', updateHandler);
                 handlerCount++;
             });
 
-            viewer.world.update();
+            viewer.world.draw();
 
             equal(handlerCount, 1, 'correct number of handlers called');
             start();
         });
 
-        equal(viewer.world.needsUpdate(), false, 'needs no update at first');
+        equal(viewer.world.needsDraw(), false, 'needs no draw at first');
 
         viewer.open('/test/data/testpattern.dzi');
     });