Merge pull request #134 from twpayne/keyboard-interactions

Keyboard Pan interaction should animate

src/objectliterals.exports

@@ -74,13 +74,18 @@
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.doubleClickZoom boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.dragPan boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.keyboard boolean|undefined
-@exportObjectLiteralProperty ol.interaction.DefaultOptions.keyboardPanOffset number|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.mouseWheelZoom boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.shiftDragZoom boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.touchPan boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.touchRotate boolean|undefined
 @exportObjectLiteralProperty ol.interaction.DefaultOptions.touchZoom boolean|undefined
 
+@exportObjectLiteral ol.interaction.KeyboardPanOptions
+@exportObjectLiteralProperty ol.interaction.KeyboardPanOptions.pixelDelta number|undefined
+
+@exportObjectLiteral ol.interaction.KeyboardZoomOptions
+@exportObjectLiteralProperty ol.interaction.KeyboardZoomOptions.delta number|undefined
+
 @exportObjectLiteral ol.layer.LayerOptions
 @exportObjectLiteralProperty ol.layer.LayerOptions.brightness number|undefined
 @exportObjectLiteralProperty ol.layer.LayerOptions.contrast number|undefined

src/ol/interaction/defaults.js

@@ -72,10 +72,8 @@ ol.interaction.defaults = function(opt_options, opt_interactions) {
 
   var keyboard = goog.isDef(options.keyboard) ?
       options.keyboard : true;
-  var keyboardPanOffset = goog.isDef(options.keyboardPanOffset) ?
-      options.keyboardPanOffset : 80;
   if (keyboard) {
-    interactions.push(new ol.interaction.KeyboardPan(keyboardPanOffset));
+    interactions.push(new ol.interaction.KeyboardPan());
     interactions.push(new ol.interaction.KeyboardZoom());
   }
 

src/ol/interaction/keyboardpaninteraction.js

@@ -9,21 +9,29 @@ goog.require('ol.View2D');
 goog.require('ol.interaction.Interaction');
 
 
+/**
+ * @define {number} Pan duration.
+ */
+ol.interaction.KEYBOARD_PAN_DURATION = 100;
+
+
 
 /**
  * @constructor
  * @extends {ol.interaction.Interaction}
- * @param {number} pixelDelta Pixel delta.
+ * @param {ol.interaction.KeyboardPanOptions=} opt_options Options.
  */
-ol.interaction.KeyboardPan = function(pixelDelta) {
+ol.interaction.KeyboardPan = function(opt_options) {
 
   goog.base(this);
 
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
   /**
    * @private
    * @type {number}
    */
-  this.pixelDelta_ = pixelDelta;
+  this.delta_ = goog.isDef(options.delta) ? options.delta : 128;
 
 };
 goog.inherits(ol.interaction.KeyboardPan, ol.interaction.Interaction);
@@ -47,22 +55,21 @@ ol.interaction.KeyboardPan.prototype.handleMapBrowserEvent =
       var view = map.getView();
       goog.asserts.assert(view instanceof ol.View2D);
       var resolution = view.getResolution();
-      var delta;
+      var rotation = view.getRotation();
-      var mapUnitsDelta = resolution * this.pixelDelta_;
+      var mapUnitsDelta = resolution * this.delta_;
+      var deltaX = 0, deltaY = 0;
       if (keyCode == goog.events.KeyCodes.DOWN) {
-        delta = new ol.Coordinate(0, -mapUnitsDelta);
+        deltaY = -mapUnitsDelta;
       } else if (keyCode == goog.events.KeyCodes.LEFT) {
-        delta = new ol.Coordinate(-mapUnitsDelta, 0);
+        deltaX = -mapUnitsDelta;
       } else if (keyCode == goog.events.KeyCodes.RIGHT) {
-        delta = new ol.Coordinate(mapUnitsDelta, 0);
+        deltaX = mapUnitsDelta;
       } else {
-        goog.asserts.assert(keyCode == goog.events.KeyCodes.UP);
+        deltaY = mapUnitsDelta;
-        delta = new ol.Coordinate(0, mapUnitsDelta);
       }
-      var oldCenter = view.getCenter();
+      var delta = new ol.Coordinate(deltaX, deltaY);
-      var newCenter = new ol.Coordinate(
+      delta.rotate(rotation);
-          oldCenter.x + delta.x, oldCenter.y + delta.y);
+      view.pan(map, delta, ol.interaction.KEYBOARD_PAN_DURATION);
-      view.setCenter(newCenter);
       keyEvent.preventDefault();
       mapBrowserEvent.preventDefault();
     }

src/ol/interaction/keyboardzoominteraction.js

@@ -16,10 +16,21 @@ ol.interaction.KEYBOARD_ZOOM_DURATION = 100;
 
 /**
  * @constructor
+ * @param {ol.interaction.KeyboardZoomOptions=} opt_options Options.
  * @extends {ol.interaction.Interaction}
  */
-ol.interaction.KeyboardZoom = function() {
+ol.interaction.KeyboardZoom = function(opt_options) {
+
   goog.base(this);
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.delta_ = goog.isDef(options.delta) ? options.delta : 1;
+
 };
 goog.inherits(ol.interaction.KeyboardZoom, ol.interaction.Interaction);
 
@@ -35,7 +46,7 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
     var charCode = keyEvent.charCode;
     if (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0)) {
       var map = mapBrowserEvent.map;
-      var delta = (charCode == '+'.charCodeAt(0)) ? 4 : -4;
+      var delta = (charCode == '+'.charCodeAt(0)) ? this.delta_ : -this.delta_;
       map.requestRenderFrame();
       // FIXME works for View2D only
       var view = map.getView();

src/ol/view2d.js

@@ -16,6 +16,7 @@ goog.require('ol.RotationConstraint');
 goog.require('ol.Size');
 goog.require('ol.View');
 goog.require('ol.animation');
+goog.require('ol.easing');
 goog.require('ol.projection');
 
 
@@ -255,6 +256,28 @@ goog.exportProperty(
     ol.View2D.prototype.setRotation);
 
 
+/**
+ * @param {ol.Map} map Map.
+ * @param {ol.Coordinate} delta Delta.
+ * @param {number=} opt_duration Duration.
+ */
+ol.View2D.prototype.pan = function(map, delta, opt_duration) {
+  var currentCenter = this.getCenter();
+  if (goog.isDef(currentCenter)) {
+    if (goog.isDef(opt_duration)) {
+      map.requestRenderFrame();
+      map.addPreRenderFunction(ol.animation.pan({
+        source: currentCenter,
+        duration: opt_duration,
+        easing: ol.easing.linear
+      }));
+    }
+    this.setCenter(new ol.Coordinate(
+        currentCenter.x + delta.x, currentCenter.y + delta.y));
+  }
+};
+
+
 /**
  * @param {ol.Map} map Map.
  * @param {number|undefined} rotation Rotation.