Make DragBox interaction dispatch events

- boxstart/boxend events are dispatched,
- behavior is removed,
- geometry drawn by box render is a simple polygon instead of one with hole.

src/objectliterals.jsdoc

@@ -314,7 +314,6 @@
 
 /**
  * @typedef {Object} olx.interaction.DragBoxOptions
- * @property {function(ol.Map, ol.geom.Polygon)} behavior Behavior function.
  * @property {ol.events.ConditionType|undefined} condition A conditional
  *     modifier (i.e. Shift key) that determines if the interaction is active
  *     or not, default is always.

src/ol/interaction/dragboxinteraction.exports

@@ -1,4 +1,5 @@
 @exportSymbol ol.interaction.DragBox
+@exportProperty ol.interaction.DragBox.prototype.getGeometry
 
 @exportSymbol ol.DragBoxEvent
 @exportProperty ol.DragBoxEvent.prototype.getCoordinate

src/ol/interaction/dragboxinteraction.js

@@ -80,14 +80,6 @@ ol.interaction.DragBox = function(opt_options) {
 
   var options = goog.isDef(opt_options) ? opt_options : {};
 
-  /**
-   * @private
-   * @type {function(ol.Map, ol.geom.Polygon)}
-   */
-  this.behavior_ = goog.isDef(options.behavior) ?
-      options.behavior : goog.nullFunction;
-
-
   /**
    * @private
    * @type {ol.style.Style}
@@ -120,6 +112,22 @@ ol.interaction.DragBox.prototype.handleDrag = function(mapBrowserEvent) {
 };
 
 
+/**
+ * Returns geometry of last drawn box.
+ * @return {ol.geom.Geometry} Geometry.
+ */
+ol.interaction.DragBox.prototype.getGeometry = function() {
+  return this.box_.getGeometry();
+};
+
+
+/**
+ * To be overriden by child classes.
+ * @protected
+ */
+ol.interaction.DragBox.prototype.onBoxEnd = goog.nullFunction;
+
+
 /**
  * @inheritDoc
  */
@@ -128,9 +136,9 @@ ol.interaction.DragBox.prototype.handleDragEnd =
   this.box_.setMap(null);
   if (this.deltaX * this.deltaX + this.deltaY * this.deltaY >=
       ol.DRAG_BOX_HYSTERESIS_PIXELS_SQUARED) {
-    var map = mapBrowserEvent.map;
-    var geometry = this.box_.getGeometry();
-    this.behavior_(map, geometry);
+    this.onBoxEnd(mapBrowserEvent);
+    this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXEND,
+        mapBrowserEvent.getCoordinate()));
   }
 };
 
@@ -144,6 +152,8 @@ ol.interaction.DragBox.prototype.handleDragStart =
   if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) {
     this.box_.setCoordinates(this.startCoordinate, this.startCoordinate);
     this.box_.setMap(mapBrowserEvent.map);
+    this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXSTART,
+        mapBrowserEvent.getCoordinate()));
     return true;
   } else {
     return false;

src/ol/interaction/dragzoominteraction.js

@@ -1,11 +1,9 @@
 goog.provide('ol.interaction.DragZoom');
 
 goog.require('goog.asserts');
-goog.require('ol.Size');
-goog.require('ol.View2D');
 goog.require('ol.events.condition');
 goog.require('ol.interaction.DragBox');
-goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -25,56 +23,36 @@ ol.interaction.DragZoom = function(opt_options) {
   var condition = goog.isDef(options.condition) ?
       options.condition : ol.events.condition.shiftKeyOnly;
 
-  /**
-   * @type {function(ol.Map, ol.geom.Polygon)}
-   */
-  var behavior = (
-      /**
-       * @param {ol.Map} map Map.
-       * @param {ol.geom.Polygon} polygon Polugon.
-       */
-      function(map, polygon) {
-        map.withFrozenRendering(function() {
-          // FIXME works for View2D only
-          var view = map.getView();
-          goog.asserts.assertInstanceof(view, ol.View2D);
-
-          var linearRings = polygon.getLinearRings();
-          goog.asserts.assert(linearRings.length == 2);
-
-          var innerLinearRing = linearRings[1];
-          var innerLinearRingExtent = innerLinearRing.getExtent();
-
-          var mapSize = /** @type {ol.Size} */ (map.getSize());
-
-          map.withFrozenRendering(function() {
-            view.fitExtent(innerLinearRingExtent, mapSize);
-            // FIXME we should preserve rotation
-            view.setRotation(0);
-          });
-        });
-      });
-
   /**
    * @private
    * @type {ol.style.Style}
    */
   var style = goog.isDef(options.style) ?
       options.style : new ol.style.Style({
-        fill: new ol.style.Fill({
-          color: 'rgba(0,0,0,0.5)'
-        }),
-        image: null,
-        stroke: null,
-        text: null,
-        zIndex: 0
+        stroke: new ol.style.Stroke({
+          color: 'blue'
+        })
       });
 
   goog.base(this, {
-    behavior: behavior,
     condition: condition,
     style: style
   });
 
 };
 goog.inherits(ol.interaction.DragZoom, ol.interaction.DragBox);
+
+
+/**
+ * @inheritDoc
+ */
+ol.interaction.DragZoom.prototype.onBoxEnd = function() {
+  this.getMap().withFrozenRendering(goog.bind(function() {
+    // FIXME works for View2D only
+    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

@@ -59,23 +59,14 @@ goog.inherits(ol.render.Box, goog.Disposable);
 
 /**
  * @private
- * @param {ol.Extent} extent Extent.
  * @return {ol.geom.Polygon} Geometry.
  */
-ol.render.Box.prototype.createGeometry_ = function(extent) {
+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 = [
-    // outer ring
-    [
-      [extent[0], extent[1]],
-      [extent[0], extent[3]],
-      [extent[2], extent[3]],
-      [extent[2], extent[1]]
-    ],
-    // inner ring
     [
       startCoordinate,
       [startCoordinate[0], endCoordinate[1]],
@@ -100,8 +91,7 @@ ol.render.Box.prototype.disposeInternal = function() {
  * @private
  */
 ol.render.Box.prototype.handleMapPostCompose_ = function(event) {
-  var extent = event.getFrameState().extent;
-  this.geometry_ = this.createGeometry_(extent);
+  this.geometry_ = this.createGeometry_();
   var style = this.style_;
   goog.asserts.assert(!goog.isNull(style));
   var render = event.getRender();