Make Select interaction work when there are multiple instances

openlayers · Feb 18, 2020 · 14f4040 · 14f4040
1 parent 5ea0b52
commit 14f4040
Showing 1 changed file with 38 additions and 14 deletions.
diff --git a/src/ol/interaction/Select.js b/src/ol/interaction/Select.js
@@ -12,6 +12,7 @@ import Interaction from './Interaction.js';
 import {clear} from '../obj.js';
 import {createEditingStyle} from '../style/Style.js';
 import Collection from '../Collection.js';
+import {unByKey} from '../Observable.js';
 
 
 /**
@@ -133,6 +134,17 @@ class SelectEvent extends Event {
 
 }
 
+/**
+ * An association between selected feature (key) and original style (value)
+ * @type {Object.<number, import("../style/Style.js").default|Array.<import("../style/Style.js").default>|import("../style/Style.js").StyleFunction>}
+ */
+const featureStyleAssociation = {};
+
+/**
+ * Count of select interactions that have the associated feature selected
+ * @type {Object.<number, number>}
+ */
+const featureStyleAssociationCount = {};
 
 /**
  * @classdesc
@@ -210,12 +222,9 @@ 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>}
+     * @type {Object<number, import("../events.js").EventsKey}
      */
-    this.featureStyleAssociation_ = {};
+    this.featureChangeListenerKeys_ = {};
 
     /**
      * @private
@@ -319,11 +328,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.restoreFeatureStyle_.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 +343,7 @@ class Select extends Interaction {
   addFeature_(evt) {
     const feature = evt.element;
     if (this.style_) {
-      this.giveSelectedStyle_(feature);
+      this.applySelectedStyle_(feature);
     }
   }
 
@@ -345,28 +354,43 @@ class Select extends Interaction {
   removeFeature_(evt) {
     const feature = evt.element;
     if (this.style_) {
-      this.removeSelectedStyle_(feature);
+      this.restoreFeatureStyle_(feature);
     }
   }
 
   /**
    * @param {import("../Feature.js").default} feature Feature
    * @private
    */
-  giveSelectedStyle_(feature) {
+  applySelectedStyle_(feature) {
     const key = getUid(feature);
-    this.featureStyleAssociation_[key] = feature.getStyle();
+    if (!(key in featureStyleAssociation)) {
+      featureStyleAssociation[key] = feature.getStyle();
+      featureStyleAssociationCount[key] = 0;
+    }
+    featureStyleAssociationCount[key]++;
     feature.setStyle(this.style_);
+    this.featureChangeListenerKeys_[key] = feature.on('change', function() {
+      if (feature.getStyle() !== this.style_) {
+        feature.setStyle(this.style_);
+      }
+    }.bind(this));
   }
 
   /**
    * @param {import("../Feature.js").default} feature Feature
    * @private
    */
-  removeSelectedStyle_(feature) {
+  restoreFeatureStyle_(feature) {
     const key = getUid(feature);
-    feature.setStyle(this.featureStyleAssociation_[key]);
-    delete this.featureStyleAssociation_[key];
+    unByKey(this.featureChangeListenerKeys_[key]);
+    delete this.featureChangeListenerKeys_[key];
+    feature.setStyle(featureStyleAssociation[key]);
+    featureStyleAssociationCount[key]--;
+    if (featureStyleAssociationCount[key] === 0) {
+      delete featureStyleAssociation[key];
+      delete featureStyleAssociationCount[key];
+    }
   }
 
   /**