Do not draw a rotated box, in dragbox/dragzoom

Use pixels to draw a straight box, perserving rotation while zooming

src/ol/interaction/dragboxinteraction.js

@@ -92,6 +92,12 @@ ol.interaction.DragBox = function(opt_options) {
    */
   this.box_ = new ol.render.Box(style);
 
+  /**
+   * @type {ol.Pixel}
+   * @private
+   */
+  this.startPixel_ = null;
+
   /**
    * @private
    * @type {ol.events.ConditionType}
@@ -107,8 +113,7 @@ goog.inherits(ol.interaction.DragBox, ol.interaction.Drag);
  * @inheritDoc
  */
 ol.interaction.DragBox.prototype.handleDrag = function(mapBrowserEvent) {
-  this.box_.setCoordinates(
-      this.startCoordinate, mapBrowserEvent.getCoordinate());
+  this.box_.setPixels(this.startPixel_, mapBrowserEvent.getPixel());
 };
 
 
@@ -150,8 +155,9 @@ ol.interaction.DragBox.prototype.handleDragStart =
     function(mapBrowserEvent) {
   var browserEvent = mapBrowserEvent.browserEvent;
   if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) {
-    this.box_.setCoordinates(this.startCoordinate, this.startCoordinate);
+    this.startPixel_ = mapBrowserEvent.getPixel();
     this.box_.setMap(mapBrowserEvent.map);
+    this.box_.setPixels(this.startPixel_, this.startPixel_);
     this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXSTART,
         mapBrowserEvent.getCoordinate()));
     return true;

src/ol/interaction/dragzoominteraction.js

@@ -52,7 +52,5 @@ ol.interaction.DragZoom.prototype.onBoxEnd = function() {
     var view = this.getMap().getView().getView2D();
 
     view.fitExtent(this.getGeometry().getExtent(), this.getMap().getSize());
-    // FIXME we should preserve rotation
-    view.setRotation(0);
   }, this));
 };

src/ol/render/box.js

@@ -3,6 +3,7 @@
 goog.provide('ol.render.Box');
 
 goog.require('goog.Disposable');
+goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('ol.geom.Polygon');
@@ -31,15 +32,15 @@ ol.render.Box = function(style) {
 
   /**
    * @private
-   * @type {ol.Coordinate}
+   * @type {ol.Pixel}
    */
-  this.startCoordinate_ = null;
+  this.startPixel_ = null;
 
   /**
    * @private
-   * @type {ol.Coordinate}
+   * @type {ol.Pixel}
    */
-  this.endCoordinate_ = null;
+  this.endPixel_ = null;
 
   /**
    * @private
@@ -62,19 +63,22 @@ goog.inherits(ol.render.Box, goog.Disposable);
  * @return {ol.geom.Polygon} Geometry.
  */
 ol.render.Box.prototype.createGeometry_ = function() {
-  goog.asserts.assert(!goog.isNull(this.startCoordinate_));
-  goog.asserts.assert(!goog.isNull(this.endCoordinate_));
-  var startCoordinate = this.startCoordinate_;
-  var endCoordinate = this.endCoordinate_;
-  var coordinates = [
+  goog.asserts.assert(!goog.isNull(this.startPixel_));
+  goog.asserts.assert(!goog.isNull(this.endPixel_));
+  goog.asserts.assert(!goog.isNull(this.map_));
+  var startPixel = this.startPixel_;
+  var endPixel = this.endPixel_;
+  var pixels = [
     [
-      startCoordinate,
-      [startCoordinate[0], endCoordinate[1]],
-      endCoordinate,
-      [endCoordinate[0], startCoordinate[1]]
+      startPixel,
+      [startPixel[0], endPixel[1]],
+      endPixel,
+      [endPixel[0], startPixel[1]]
     ]
   ];
-  return new ol.geom.Polygon(coordinates);
+  var coordinates = goog.array.map(pixels[0],
+      this.map_.getCoordinateFromPixel, this.map_);
+  return new ol.geom.Polygon([coordinates]);
 };
 
 
@@ -112,8 +116,8 @@ ol.render.Box.prototype.getGeometry = function() {
  */
 ol.render.Box.prototype.requestMapRenderFrame_ = function() {
   if (!goog.isNull(this.map_) &&
-      !goog.isNull(this.startCoordinate_) &&
-      !goog.isNull(this.endCoordinate_)) {
+      !goog.isNull(this.startPixel_) &&
+      !goog.isNull(this.endPixel_)) {
     this.map_.requestRenderFrame();
   }
 };
@@ -140,13 +144,12 @@ ol.render.Box.prototype.setMap = function(map) {
 
 
 /**
- * @param {ol.Coordinate} startCoordinate Start coordinate.
- * @param {ol.Coordinate} endCoordinate End coordinate.
+ * @param {ol.Pixel} startPixel Start pixel.
+ * @param {ol.Pixel} endPixel End pixel.
  */
-ol.render.Box.prototype.setCoordinates =
-    function(startCoordinate, endCoordinate) {
-  this.startCoordinate_ = startCoordinate;
-  this.endCoordinate_ = endCoordinate;
+ol.render.Box.prototype.setPixels = function(startPixel, endPixel) {
+  this.startPixel_ = startPixel;
+  this.endPixel_ = endPixel;
   this.geometry_ = this.createGeometry_();
   this.requestMapRenderFrame_();
 };