Add index to the Collection events

src/ol/Collection.js

@@ -26,8 +26,9 @@ export class CollectionEvent extends Event {
   /**
    * @param {CollectionEventType} type Type.
    * @param {*=} opt_element Element.
+   * @param {number} opt_index The index of the added or removed element.
    */
-  constructor(type, opt_element) {
+  constructor(type, opt_element, opt_index) {
     super(type);
 
     /**
@@ -37,6 +38,12 @@ export class CollectionEvent extends Event {
      */
     this.element = opt_element;
 
+    /**
+     * The index of the added or removed element.
+     * @type {number}
+     * @api
+     */
+    this.index = opt_index;
   }
 
 }
@@ -178,7 +185,7 @@ class Collection extends BaseObject {
     this.array_.splice(index, 0, elem);
     this.updateLength_();
     this.dispatchEvent(
-      new CollectionEvent(CollectionEventType.ADD, elem));
+      new CollectionEvent(CollectionEventType.ADD, elem, index));
   }
 
   /**
@@ -233,7 +240,7 @@ class Collection extends BaseObject {
     const prev = this.array_[index];
     this.array_.splice(index, 1);
     this.updateLength_();
-    this.dispatchEvent(new CollectionEvent(CollectionEventType.REMOVE, prev));
+    this.dispatchEvent(new CollectionEvent(CollectionEventType.REMOVE, prev, index));
     return prev;
   }
 
@@ -252,9 +259,9 @@ class Collection extends BaseObject {
       const prev = this.array_[index];
       this.array_[index] = elem;
       this.dispatchEvent(
-        new CollectionEvent(CollectionEventType.REMOVE, prev));
+        new CollectionEvent(CollectionEventType.REMOVE, prev, index));
       this.dispatchEvent(
-        new CollectionEvent(CollectionEventType.ADD, elem));
+        new CollectionEvent(CollectionEventType.ADD, elem, index));
     } else {
       for (let j = n; j < index; ++j) {
         this.insertAt(j, undefined);

test/spec/ol/collection.test.js

@@ -140,53 +140,58 @@ describe('ol.collection', function() {
   describe('setAt and event', function() {
     it('does dispatch events', function() {
       const collection = new Collection(['a', 'b']);
-      let added, removed;
+      let added, removed, addedIndex, removedIndex;
       listen(collection, CollectionEventType.ADD, function(e) {
         added = e.element;
+        addedIndex = e.index;
+      });
+      listen(collection, CollectionEventType.REMOVE, function(e) {
+        removed = e.element;
+        removedIndex = e.index;
       });
-      listen(
-        collection, CollectionEventType.REMOVE, function(e) {
-          removed = e.element;
-        });
       collection.setAt(1, 1);
       expect(added).to.eql(1);
+      expect(addedIndex).to.eql(1);
       expect(removed).to.eql('b');
+      expect(removedIndex).to.eql(1);
     });
   });
 
   describe('removeAt and event', function() {
     it('does dispatch events', function() {
       const collection = new Collection(['a']);
-      let removed;
+      let removed, removedIndex;
-      listen(
+      listen(collection, CollectionEventType.REMOVE, function(e) {
-        collection, CollectionEventType.REMOVE, function(e) {
+        removed = e.element;
-          removed = e.element;
+        removedIndex = e.index;
-        });
+      });
       collection.pop();
       expect(removed).to.eql('a');
+      expect(removedIndex).to.eql(0);
     });
   });
 
   describe('insertAt and event', function() {
     it('does dispatch events', function() {
       const collection = new Collection([0, 2]);
-      let added;
+      let added, addedIndex;
-      listen(
+      listen(collection, CollectionEventType.ADD, function(e) {
-        collection, CollectionEventType.ADD, function(e) {
+        added = e.element;
-          added = e.element;
+        addedIndex = e.index;
-        });
+      });
       collection.insertAt(1, 1);
       expect(added).to.eql(1);
+      expect(addedIndex).to.eql(1);
     });
   });
 
   describe('setAt beyond end', function() {
     it('triggers events properly', function() {
-      const added = [];
+      const added = [], addedIndexes = [];
-      listen(
+      listen(collection, CollectionEventType.ADD, function(e) {
-        collection, CollectionEventType.ADD, function(e) {
+        added.push(e.element);
-          added.push(e.element);
+        addedIndexes.push(e.index);
-        });
+      });
       collection.setAt(2, 0);
       expect(collection.getLength()).to.eql(3);
       expect(collection.item(0)).to.be(undefined);
@@ -196,6 +201,7 @@ describe('ol.collection', function() {
       expect(added[0]).to.eql(undefined);
       expect(added[1]).to.eql(undefined);
       expect(added[2]).to.eql(0);
+      expect(addedIndexes).to.eql([0, 1, 2]);
     });
   });
 
@@ -232,12 +238,14 @@ describe('ol.collection', function() {
   describe('add event', function() {
     it('triggers add when pushing', function() {
       const collection = new Collection();
-      let elem;
+      let elem, addedIndex;
       listen(collection, CollectionEventType.ADD, function(e) {
         elem = e.element;
+        addedIndex = e.index;
       });
       const length = collection.push(1);
       expect(elem).to.eql(length);
+      expect(addedIndex).to.eql(0);
     });
   });
 
@@ -276,12 +284,14 @@ describe('ol.collection', function() {
     });
     it('fires events', function() {
       const collection = new Collection();
-      const elems = [];
+      const elems = [], addedIndexes = [];
       listen(collection, CollectionEventType.ADD, function(e) {
         elems.push(e.element);
+        addedIndexes.push(e.index);
       });
       collection.extend([1, 2]);
       expect(elems).to.eql([1, 2]);
+      expect(addedIndexes).to.eql([0, 1]);
     });
   });