Merge pull request #110 from twpayne/interaction-hints

Interaction hints

src/ol/animation.js

@@ -24,12 +24,14 @@ ol.animation.createBounce =
   return function(map, frameState) {
     if (frameState.time < start) {
       frameState.animate = true;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else if (frameState.time < start + duration) {
       var delta = easingFunction((frameState.time - start) / duration);
       var deltaResolution = resolution - frameState.view2DState.resolution;
       frameState.animate = true;
       frameState.view2DState.resolution += delta * deltaResolution;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else {
       return false;
@@ -56,6 +58,7 @@ ol.animation.createPanFrom =
   return function(map, frameState) {
     if (frameState.time < start) {
       frameState.animate = true;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else if (frameState.time < start + duration) {
       var delta = 1 - easingFunction((frameState.time - start) / duration);
@@ -64,6 +67,7 @@ ol.animation.createPanFrom =
       frameState.animate = true;
       frameState.view2DState.center.x += delta * deltaX;
       frameState.view2DState.center.y += delta * deltaY;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else {
       return false;
@@ -90,11 +94,13 @@ ol.animation.createSpin =
   return function(map, frameState) {
     if (frameState.time < start) {
       frameState.animate = true;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else if (frameState.time < start + duration) {
       var delta = easingFunction((frameState.time - start) / duration);
       frameState.animate = true;
       frameState.view2DState.rotation += delta * deltaTheta;
+      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
       return true;
     } else {
       return false;

src/ol/framestate.js

@@ -23,7 +23,8 @@ goog.require('ol.layer.LayerState');
  *            size: ol.Size,
  *            tileQueue: ol.TileQueue,
  *            time: number,
- *            view2DState: ol.View2DState}}
+ *            view2DState: ol.View2DState,
+ *            viewHints: Array.<number>}}
  */
 ol.FrameState;
 

src/ol/interaction/dragpaninteraction.js

@@ -6,6 +6,7 @@ goog.require('goog.asserts');
 goog.require('ol.Coordinate');
 goog.require('ol.MapBrowserEvent');
 goog.require('ol.View2D');
+goog.require('ol.ViewHint');
 goog.require('ol.interaction.ConditionType');
 goog.require('ol.interaction.Drag');
 
@@ -52,13 +53,25 @@ ol.interaction.DragPan.prototype.handleDrag = function(mapBrowserEvent) {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.interaction.DragPan.prototype.handleDragEnd = function(mapBrowserEvent) {
+  var map = mapBrowserEvent.map;
+  map.requestRenderFrame();
+  map.getView().setHint(ol.ViewHint.PANNING, -1);
+};
+
+
 /**
  * @inheritDoc
  */
 ol.interaction.DragPan.prototype.handleDragStart = function(mapBrowserEvent) {
   var browserEvent = mapBrowserEvent.browserEvent;
   if (this.condition_(browserEvent)) {
-    mapBrowserEvent.map.requestRenderFrame();
+    var map = mapBrowserEvent.map;
+    map.requestRenderFrame();
+    map.getView().setHint(ol.ViewHint.PANNING, 1);
     return true;
   } else {
     return false;

src/ol/map.js

@@ -585,6 +585,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
   if (goog.isDef(layersArray) && goog.isDef(size) && goog.isDef(view2D) &&
       view2D.isDef()) {
     var backgroundColor = this.getBackgroundColor();
+    var viewHints = view.getHints();
     var layerStates = {};
     goog.array.forEach(layersArray, function(layer) {
       layerStates[goog.getUid(layer)] = layer.getLayerState();
@@ -601,6 +602,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
       size: size,
       tileQueue: this.tileQueue_,
       view2DState: view2DState,
+      viewHints: viewHints,
       time: time
     };
   }

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -14,6 +14,7 @@ goog.require('ol.Size');
 goog.require('ol.TileCoord');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
+goog.require('ol.ViewHint');
 goog.require('ol.dom');
 goog.require('ol.renderer.dom.Layer');
 goog.require('ol.tilegrid.TileGrid');
@@ -210,7 +211,10 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
         goog.dom.insertChildAt(this.target, tileLayerZ.target, 0);
       }
     } else {
-      tileLayerZ.removeTilesOutsideExtent(frameState.extent);
+      if (!frameState.viewHints[ol.ViewHint.ANIMATING] &&
+          !frameState.viewHints[ol.ViewHint.PANNING]) {
+        tileLayerZ.removeTilesOutsideExtent(frameState.extent);
+      }
     }
   }
 

src/ol/view.js

@@ -1,10 +1,21 @@
 goog.provide('ol.View');
+goog.provide('ol.ViewHint');
 
+goog.require('goog.array');
 goog.require('ol.IView');
 goog.require('ol.IView2D');
 goog.require('ol.IView3D');
 
 
+/**
+ * @enum {number}
+ */
+ol.ViewHint = {
+  ANIMATING: 0,
+  PANNING: 1
+};
+
+
 
 /**
  * @constructor
@@ -12,10 +23,25 @@ goog.require('ol.IView3D');
  * @extends {ol.Object}
  */
 ol.View = function() {
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.hints_ = [0, 0];
+
 };
 goog.inherits(ol.View, ol.Object);
 
 
+/**
+ * @return {Array.<number>} Hint.
+ */
+ol.View.prototype.getHints = function() {
+  return goog.array.clone(this.hints_);
+};
+
+
 /**
  * @inheritDoc
  */
@@ -27,3 +53,13 @@ ol.View.prototype.getView2D = goog.abstractMethod;
  */
 ol.View.prototype.getView3D = goog.abstractMethod;
 
+
+/**
+ * @param {ol.ViewHint} hint Hint.
+ * @param {number} delta Delta.
+ */
+ol.View.prototype.setHint = function(hint, delta) {
+  goog.asserts.assert(0 <= hint && hint < this.hints_.length);
+  this.hints_[hint] += delta;
+  goog.asserts.assert(this.hints_[hint] >= 0);
+};