Merge pull request #1871 from twpayne/select-toggle

Replace ol.interaction.Select add with toggle

examples/select-features.html

@@ -33,7 +33,7 @@
 
         <div class="span12">
           <h4 id="title">Select features example</h4>
-          <p id="shortdesc">Example of using the Select interaction. Select features by clicking polygons. Hold the Shift-key to add to the selection.</p>
+          <p id="shortdesc">Example of using the Select interaction. Select features by clicking polygons. Hold the Shift-key to toggle the feature in the selection.</p>
           <div id="docs">
             <p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
           </div>

src/objectliterals.jsdoc

@@ -515,9 +515,9 @@
 /**
  * @typedef {Object} olx.interaction.SelectOptions
  * @property {ol.events.ConditionType|undefined} addCondition A conditional
- *     modifier (e.g. shift key) that determines if the selection is added to
+ *     modifier (e.g. alt key) that determines if the feature is added to
- *     the current selection. By default, a shift-click adds to the current
+ *     the current selection. By default, this is never.  Note that the default
- *     selection.
+ *     toggle condition allows features to be added.
  * @property {ol.events.ConditionType|undefined} condition A conditional
  *     modifier (e.g. shift key) that determines if the interaction is active
  *     (i.e. selection occurs) or not. By default, a click with no modifier keys
@@ -529,6 +529,13 @@
  * @property {Array.<ol.layer.Layer>|undefined} layers Layers.  Zero or more
  *     layers from which features should be selected.
  * @property {ol.style.Style|Array.<ol.style.Style>|ol.feature.StyleFunction|undefined} style FeatureOverlay style.
+ * @property {ol.events.ConditionType|undefined} removeCondition A conditional
+ *     modifier (e.g. alt key) that determines if the feature is removed from
+ *     the current selection. By default, this is never.
+ * @property {ol.events.ConditionType|undefined} toggleCondition A conditional
+ *     modifier (e.g. shift key) that determines if the selection is toggled in
+ *     the current selection. By default, a shift-click toggles the feature in
+ *     the current selection.
  */
 
 /**

src/ol/events/condition.exports

@@ -1,6 +1,7 @@
 @exportSymbol ol.events.condition.altKeyOnly
 @exportSymbol ol.events.condition.altShiftKeysOnly
 @exportSymbol ol.events.condition.always
+@exportSymbol ol.events.condition.never
 @exportSymbol ol.events.condition.noModifierKeys
 @exportSymbol ol.events.condition.platformModifierKeyOnly
 @exportSymbol ol.events.condition.shiftKeyOnly

src/ol/events/condition.js

@@ -55,6 +55,15 @@ ol.events.condition.altShiftKeysOnly = function(mapBrowserEvent) {
 ol.events.condition.always = goog.functions.TRUE;
 
 
+/**
+ * Always false.
+ * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @return {boolean} False.
+ * @todo stability experimental
+ */
+ol.events.condition.never = goog.functions.FALSE;
+
+
 /**
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
  * @return {boolean} True if the event is a click event.

src/ol/interaction/selectinteraction.js

@@ -30,7 +30,21 @@ ol.interaction.Select = function(options) {
    * @type {ol.events.ConditionType}
    */
   this.addCondition_ = goog.isDef(options.addCondition) ?
-      options.addCondition : ol.events.condition.shiftKeyOnly;
+      options.addCondition : ol.events.condition.never;
+
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.removeCondition_ = goog.isDef(options.removeCondition) ?
+      options.removeCondition : ol.events.condition.never;
+
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.toggleCondition_ = goog.isDef(options.toggleCondition) ?
+      options.toggleCondition : ol.events.condition.shiftKeyOnly;
 
   var layerFilter;
   if (goog.isDef(options.layerFilter)) {
@@ -95,20 +109,14 @@ ol.interaction.Select.prototype.handleMapBrowserEvent =
     return true;
   }
   var add = this.addCondition_(mapBrowserEvent);
+  var remove = this.removeCondition_(mapBrowserEvent);
+  var toggle = this.toggleCondition_(mapBrowserEvent);
+  var set = !add && !remove && !toggle;
   var map = mapBrowserEvent.map;
   var features = this.featureOverlay_.getFeatures();
-  if (add) {
+  if (set) {
-    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
+    // Replace the currently selected feature(s) with the feature at the pixel,
-        /**
+    // or clear the selected feature(s) if there is no feature at the pixel.
-         * @param {ol.Feature} feature Feature.
-         * @param {ol.layer.Layer} layer Layer.
-         */
-        function(feature, layer) {
-          if (goog.array.indexOf(features.getArray(), feature) == -1) {
-            features.push(feature);
-          }
-        }, undefined, this.layerFilter_);
-  } else {
     /** @type {ol.Feature|undefined} */
     var feature = map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
         /**
@@ -134,6 +142,25 @@ ol.interaction.Select.prototype.handleMapBrowserEvent =
         features.clear();
       }
     }
+  } else {
+    // Modify the currently selected feature(s).
+    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
+        /**
+         * @param {ol.Feature} feature Feature.
+         * @param {ol.layer.Layer} layer Layer.
+         */
+        function(feature, layer) {
+          var index = goog.array.indexOf(features.getArray(), feature);
+          if (index == -1) {
+            if (add || toggle) {
+              features.push(feature);
+            }
+          } else {
+            if (remove || toggle) {
+              features.removeAt(index);
+            }
+          }
+        }, undefined, this.layerFilter_);
   }
   return false;
 };