DragBox control provides visual shiftdragzoom feedback

Adding a new DragBox control and using it in the shiftdragzoom interaction to provide visual feedback of the zoom box. The control is nicely separated from the interaction - it only draws the box and does not perform any action.

css/ol.css

@@ -8,6 +8,11 @@
   -webkit-tap-highlight-color: rgba(0,0,0,0);  
 }
 
+.ol-dragbox {
+  position: absolute;
+  border: 2px solid red;
+}
+
 .ol-renderer-webgl-canvas { width:100%; height:100%; }
 
 .olTile {

src/ol/control/control.js

@@ -1,15 +1,19 @@
 goog.provide('ol.control.Control');
 
+goog.require('goog.Disposable');
 goog.require('ol.Map');
 
 
 
 /**
  * @constructor
+ * @extends {goog.Disposable}
  * @param {ol.Map} map Map.
  */
 ol.control.Control = function(map) {
 
+  goog.base(this);
+
   /**
    * @private
    * @type {ol.Map}
@@ -17,6 +21,7 @@ ol.control.Control = function(map) {
   this.map_ = map;
 
 };
+goog.inherits(ol.control.Control, goog.Disposable);
 
 
 /**

src/ol/control/dragbox.js

@@ -0,0 +1,124 @@
+goog.provide('ol.control.DragBox');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('ol.Size');
+goog.require('ol.control.Control');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {ol.Map} map Map.
+ * @param {ol.Coordinate=} opt_startCoordinate start coordinate of the box.
+ *     If not provided, call {@link startBox} to start the box.
+ */
+ol.control.DragBox = function(map, opt_startCoordinate) {
+
+  goog.base(this, map);
+
+  /**
+   * @type {Element}
+   * @private
+   */
+  this.divElement_ = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-dragbox');
+
+  /**
+   * @type {ol.Pixel|undefined}
+   * @private
+   */
+  this.startPixel_ = null;
+
+  if (goog.isDef(opt_startCoordinate)) {
+    this.startBox(opt_startCoordinate);
+  }
+
+};
+goog.inherits(ol.control.DragBox, ol.control.Control);
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.DragBox.prototype.getElement = function() {
+  return this.divElement_;
+};
+
+
+/**
+ * Adds a box to the map, at the specified coordinate. Dragging will change
+ * the size of the box.
+ * @param {ol.Coordinate} startCoordinate The coordinate to start the box at.
+ */
+ol.control.DragBox.prototype.startBox = function(startCoordinate) {
+  var map = this.getMap();
+  this.startPixel_ = map.getPixelFromCoordinate(startCoordinate);
+  goog.asserts.assert(goog.isDef(this.startPixel_));
+  goog.style.setPosition(this.divElement_, this.startPixel_);
+  goog.style.setBorderBoxSize(this.divElement_, new ol.Size(0, 0));
+  map.getViewport().appendChild(this.divElement_);
+  goog.events.listen(
+      map, ol.MapBrowserEvent.EventType.DRAG,
+      this.updateBox_, false, this);
+  goog.events.listen(
+      map, ol.MapBrowserEvent.EventType.DRAGEND,
+      this.finalizeBox_, false, this);
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} mapBrowserEvent The event to handle.
+ * @private
+ */
+ol.control.DragBox.prototype.updateBox_ = function(mapBrowserEvent) {
+  var map = this.getMap();
+  var coordinate = mapBrowserEvent.getCoordinate();
+  goog.asserts.assert(goog.isDef(coordinate));
+  var currentPixel = map.getPixelFromCoordinate(coordinate);
+  goog.style.setPosition(this.divElement_, new ol.Pixel(
+      Math.min(currentPixel.x, this.startPixel_.x),
+      Math.min(currentPixel.y, this.startPixel_.y)));
+  goog.style.setBorderBoxSize(this.divElement_, new ol.Size(
+      Math.abs(currentPixel.x - this.startPixel_.x),
+      Math.abs(currentPixel.y - this.startPixel_.y)));
+};
+
+
+/**
+ * @private
+ */
+ol.control.DragBox.prototype.finalizeBox_ = function() {
+  var map = this.getMap();
+  goog.events.unlisten(
+      map, ol.MapBrowserEvent.EventType.DRAG,
+      this.updateBox_, false, this);
+  goog.events.unlisten(
+      map, ol.MapBrowserEvent.EventType.DRAGEND,
+      this.finalizeBox_, false, this);
+};
+
+
+/**
+ * Removes the box from the map.
+ */
+ol.control.DragBox.prototype.removeBox = function() {
+  if (this.divElement_.parentNode) {
+    this.divElement_.parentNode.removeChild(this.divElement_);
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.DragBox.prototype.disposeInternal = function() {
+  this.finalizeBox_();
+  this.removeBox();
+  delete this.divElement_;
+  delete this.startPixel_;
+  goog.base(this, 'disposeInternal');
+};

src/ol/interaction/drag.js

@@ -114,7 +114,8 @@ ol.interaction.Drag.prototype.handleMapBrowserEvent =
     this.startCenter = /** @type {!ol.Coordinate} */ map.getCenter();
     this.startCoordinate = /** @type {ol.Coordinate} */
         mapBrowserEvent.getCoordinate();
-    if (this.handleDragStart(mapBrowserEvent)) {
+    var handled = this.handleDragStart(mapBrowserEvent);
+    if (handled) {
       this.dragging_ = true;
       mapBrowserEvent.preventDefault();
     }

src/ol/interaction/interaction.js

@@ -108,3 +108,4 @@ ol.interaction.Interaction.prototype.zoom = function(
     map.setResolution(resolution);
   }
 };
+

src/ol/interaction/shiftdragzoom.js

@@ -4,6 +4,7 @@ goog.provide('ol.interaction.ShiftDragZoom');
 
 goog.require('ol.Extent');
 goog.require('ol.MapBrowserEvent');
+goog.require('ol.control.DragBox');
 goog.require('ol.interaction.Constraints');
 goog.require('ol.interaction.Drag');
 
@@ -30,6 +31,12 @@ ol.SHIFT_DRAG_ZOOM_HYSTERESIS_PIXELS_SQUARED =
  */
 ol.interaction.ShiftDragZoom = function(constraints) {
   goog.base(this, constraints);
+
+  /**
+   * @type {ol.control.DragBox}
+   * @private
+   */
+  this.dragBox_ = null;
 };
 goog.inherits(ol.interaction.ShiftDragZoom, ol.interaction.Drag);
 
@@ -45,6 +52,8 @@ ol.interaction.ShiftDragZoom.prototype.handleDragEnd =
     var extent = ol.Extent.boundingExtent(
         this.startCoordinate,
         mapBrowserEvent.getCoordinate());
+    goog.dispose(this.dragBox_);
+    this.dragBox_ = null;
     this.fitExtent(map, extent);
   }
 };
@@ -57,6 +66,8 @@ ol.interaction.ShiftDragZoom.prototype.handleDragStart =
     function(mapBrowserEvent) {
   var browserEvent = mapBrowserEvent.browserEvent;
   if (browserEvent.isMouseActionButton() && browserEvent.shiftKey) {
+    this.dragBox_ =
+        new ol.control.DragBox(mapBrowserEvent.map, this.startCoordinate);
     browserEvent.preventDefault();
     return true;
   } else {

src/ol/map.js

@@ -501,14 +501,7 @@ ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) {
     interaction.handleMapBrowserEvent(mapBrowserEvent);
     return !mapBrowserEvent.defaultPrevented;
   });
-};
-
-
-/**
- * @param {goog.fx.DragEvent} dragEvent Drag event.
- */
-ol.Map.prototype.handleDraggerEvent = function(dragEvent) {
-  this.handleBrowserEvent(dragEvent.browserEvent, dragEvent.type);
+  this.dispatchEvent(mapBrowserEvent);
 };