Merge pull request #10699 from ahocevar/select

Make Select interaction work when there are multiple instances

src/ol/interaction/Select.js

@@ -133,6 +133,12 @@ class SelectEvent extends Event {
 
 }
 
+/**
+ * Original feature styles to reset to when features are no longer selected.
+ * @type {Object.<number, import("../style/Style.js").default|Array.<import("../style/Style.js").default>|import("../style/Style.js").StyleFunction>}
+ */
+const originalFeatureStyles = {};
+
 
 /**
  * @classdesc
@@ -209,14 +215,6 @@ class Select extends Interaction {
      */
     this.style_ = options.style !== undefined ? options.style : getDefaultStyleFunction();
 
-    /**
-     * An association between selected feature (key)
-     * and original style (value)
-     * @private
-     * @type {Object.<number, import("../style/Style.js").default|Array.<import("../style/Style.js").default>|import("../style/Style.js").StyleFunction>}
-     */
-    this.featureStyleAssociation_ = {};
-
     /**
      * @private
      * @type {import("../Collection.js").default}
@@ -319,11 +317,11 @@ class Select extends Interaction {
   setMap(map) {
     const currentMap = this.getMap();
     if (currentMap && this.style_) {
-      this.features_.forEach(this.removeSelectedStyle_.bind(this));
+      this.features_.forEach(this.restorePreviousStyle_.bind(this));
     }
     super.setMap(map);
     if (map && this.style_) {
-      this.features_.forEach(this.giveSelectedStyle_.bind(this));
+      this.features_.forEach(this.applySelectedStyle_.bind(this));
     }
   }
 
@@ -334,7 +332,7 @@ class Select extends Interaction {
   addFeature_(evt) {
     const feature = evt.element;
     if (this.style_) {
-      this.giveSelectedStyle_(feature);
+      this.applySelectedStyle_(feature);
     }
   }
 
@@ -345,17 +343,26 @@ class Select extends Interaction {
   removeFeature_(evt) {
     const feature = evt.element;
     if (this.style_) {
-      this.removeSelectedStyle_(feature);
+      this.restorePreviousStyle_(feature);
     }
   }
 
+  /**
+   * @return {import("../style/Style.js").default|Array.<import("../style/Style.js").default>|import("../style/Style.js").StyleFunction|null} Select style.
+   */
+  getStyle() {
+    return this.style_;
+  }
+
   /**
    * @param {import("../Feature.js").default} feature Feature
    * @private
    */
-  giveSelectedStyle_(feature) {
+  applySelectedStyle_(feature) {
     const key = getUid(feature);
-    this.featureStyleAssociation_[key] = feature.getStyle();
+    if (!(key in originalFeatureStyles)) {
+      originalFeatureStyles[key] = feature.getStyle();
+    }
     feature.setStyle(this.style_);
   }
 
@@ -363,10 +370,17 @@ class Select extends Interaction {
    * @param {import("../Feature.js").default} feature Feature
    * @private
    */
-  removeSelectedStyle_(feature) {
+  restorePreviousStyle_(feature) {
     const key = getUid(feature);
-    feature.setStyle(this.featureStyleAssociation_[key]);
-    delete this.featureStyleAssociation_[key];
+    const selectInteractions = /** @type {Array<Select>} */ (this.getMap().getInteractions().getArray().filter(function(interaction) {
+      return interaction instanceof Select && interaction.getFeatures().getArray().indexOf(feature) !== -1;
+    }));
+    if (selectInteractions.length > 0) {
+      feature.setStyle(selectInteractions[selectInteractions.length - 1].getStyle());
+    } else {
+      feature.setStyle(originalFeatureStyles[key]);
+      delete originalFeatureStyles[key];
+    }
   }
 
   /**