Allow drag and drop interaction to be configured with a source

externs/olx.js

@@ -2710,6 +2710,7 @@ olx.interaction.DoubleClickZoomOptions.prototype.delta;
 
 /**
  * @typedef {{formatConstructors: (Array.<function(new: ol.format.Feature)>|undefined),
+ *     source: (ol.source.Vector|undefined),
  *     projection: ol.ProjectionLike,
  *     target: (Element|undefined)}}
  */
@@ -2724,6 +2725,18 @@ olx.interaction.DragAndDropOptions;
 olx.interaction.DragAndDropOptions.prototype.formatConstructors;
 
 
+/**
+ * Optional vector source where features will be added.  If a source is provided
+ * all existing features will be removed and new features will be added when
+ * they are dropped on the target.  If you want to add features to a vector
+ * source without removing the existing features (append only), instead of
+ * providing the source option listen for the "addfeatures" event.
+ * @type {ol.source.Vector|undefined}
+ * @api
+ */
+olx.interaction.DragAndDropOptions.prototype.source;
+
+
 /**
  * Target projection. By default, the map's view's projection is used.
  * @type {ol.ProjectionLike}

src/ol/interaction/draganddrop.js

@@ -49,6 +49,12 @@ ol.interaction.DragAndDrop = function(opt_options) {
    */
   this.dropListenKeys_ = null;
 
+  /**
+   * @private
+   * @type {ol.source.Vector}
+   */
+  this.source_ = options.source || null;
+
   /**
    * @private
    * @type {Element}
@@ -122,6 +128,10 @@ ol.interaction.DragAndDrop.prototype.handleResult_ = function(file, event) {
       break;
     }
   }
+  if (this.source_) {
+    this.source_.clear();
+    this.source_.addFeatures(features);
+  }
   this.dispatchEvent(
       new ol.interaction.DragAndDrop.Event(
           ol.interaction.DragAndDrop.EventType_.ADD_FEATURES, file,

test/spec/ol/interaction/draganddrop.test.js

@@ -6,7 +6,7 @@ goog.require('ol.events.Event');
 goog.require('ol.events.EventTarget');
 goog.require('ol.format.GeoJSON');
 goog.require('ol.interaction.DragAndDrop');
-
+goog.require('ol.source.Vector');
 
 where('FileReader').describe('ol.interaction.DragAndDrop', function() {
   var viewport, map, interaction;
@@ -37,6 +37,14 @@ where('FileReader').describe('ol.interaction.DragAndDrop', function() {
       expect(interaction.formatConstructors_).to.have.length(1);
     });
 
+    it('accepts a source option', function() {
+      var source = new ol.source.Vector();
+      var drop = new ol.interaction.DragAndDrop({
+        formatConstructors: [ol.format.GeoJSON],
+        source: source
+      });
+      expect(drop.source_).to.equal(source);
+    });
   });
 
   describe('#setActive()', function() {
@@ -128,6 +136,41 @@ where('FileReader').describe('ol.interaction.DragAndDrop', function() {
       expect(event.dataTransfer.dropEffect).to.be('copy');
       expect(event.propagationStopped).to.be(true);
     });
+
+    it('adds dropped features to a source', function(done) {
+      var source = new ol.source.Vector();
+      var drop = new ol.interaction.DragAndDrop({
+        formatConstructors: [ol.format.GeoJSON],
+        source: source
+      });
+      drop.setMap(map);
+
+      drop.on('addfeatures', function(evt) {
+        var features = source.getFeatures();
+        expect(features.length).to.be(1);
+        done();
+      });
+
+      var event = new ol.events.Event();
+      event.dataTransfer = {};
+      event.type = 'dragenter';
+      viewport.dispatchEvent(event);
+      event.type = 'dragover';
+      viewport.dispatchEvent(event);
+      event.type = 'drop';
+      event.dataTransfer.files = {
+        length: 1,
+        item: function() {
+          return JSON.stringify({
+            type: 'FeatureCollection',
+            features: [{type: 'Feature', id: '1'}]
+          });
+        }
+      };
+      viewport.dispatchEvent(event);
+      expect(event.dataTransfer.dropEffect).to.be('copy');
+      expect(event.propagationStopped).to.be(true);
+    });
   });
 
 });