Merge pull request #1613 from twpayne/select-interaction

Port ol.interaction.Select

examples/select-features.js

@@ -0,0 +1,60 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.render.FeaturesOverlay');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.MapQuest');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var unselectedStyle = [new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255,255,255,0.25)'
+  }),
+  stroke: new ol.style.Stroke({
+    color: '#6666ff'
+  })
+})];
+
+var selectedStyle = [new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255,255,255,0.5)'
+  })
+})];
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    url: 'data/geojson/countries.geojson'
+  }),
+  styleFunction: function(feature, layer) {
+    return unselectedStyle;
+  }
+});
+
+var select = new ol.interaction.Select({
+  featuresOverlay: new ol.render.FeaturesOverlay({
+    styleFunction: function(feature, layer) {
+      return selectedStyle;
+    }
+  })
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([select]),
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});

old/examples/select-features.js

@@ -1,61 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.RendererHint');
-goog.require('ol.View2D');
-goog.require('ol.interaction');
-goog.require('ol.interaction.Select');
-goog.require('ol.layer.Tile');
-goog.require('ol.layer.Vector');
-goog.require('ol.parser.ogc.GML_v3');
-goog.require('ol.source.MapQuest');
-goog.require('ol.source.Vector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Rule');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-var raster = new ol.layer.Tile({
-  source: new ol.source.MapQuest({layer: 'sat'})
-});
-
-var vector = new ol.layer.Vector({
-  id: 'vector',
-  source: new ol.source.Vector({
-    parser: new ol.parser.ogc.GML_v3(),
-    url: 'data/gml/topp-states-wfs.xml'
-  }),
-  style: new ol.style.Style({
-    rules: [
-      new ol.style.Rule({
-        filter: 'renderIntent("selected")',
-        symbolizers: [
-          new ol.style.Fill({
-            color: '#ffffff',
-            opacity: 0.5
-          })
-        ]
-      })
-    ],
-    symbolizers: [
-      new ol.style.Fill({
-        color: '#ffffff',
-        opacity: 0.25
-      }),
-      new ol.style.Stroke({
-        color: '#6666ff'
-      })
-    ]
-  })
-});
-
-var select = new ol.interaction.Select();
-
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([select]),
-  layers: [raster, vector],
-  renderer: ol.RendererHint.CANVAS,
-  target: 'map',
-  view: new ol.View2D({
-    center: [-11000000, 4600000],
-    zoom: 4
-  })
-});

old/src/ol/interaction/selectinteraction.exports

@@ -1 +0,0 @@
-@exportSymbol ol.interaction.Select

old/src/ol/interaction/selectinteraction.js

@@ -1,118 +0,0 @@
-goog.provide('ol.interaction.Select');
-
-goog.require('goog.array');
-goog.require('goog.asserts');
-goog.require('ol.Feature');
-goog.require('ol.FeatureRenderIntent');
-goog.require('ol.events.ConditionType');
-goog.require('ol.events.condition');
-goog.require('ol.interaction.Interaction');
-goog.require('ol.layer.Vector');
-
-
-
-/**
- * Allows the user to select features on the map.
- * @constructor
- * @extends {ol.interaction.Interaction}
- * @param {olx.interaction.SelectOptions=} opt_options Options.
- * @todo stability experimental
- */
-ol.interaction.Select = function(opt_options) {
-  var options = goog.isDef(opt_options) ? opt_options : {};
-
-  /**
-   * @private
-   * @type {ol.events.ConditionType}
-   */
-  this.condition_ = goog.isDef(options.condition) ?
-      options.condition : ol.events.condition.singleClick;
-
-  /**
-   * @private
-   * @type {ol.events.ConditionType}
-   */
-  this.addCondition_ = goog.isDef(options.addCondition) ?
-      options.addCondition : ol.events.condition.shiftKeyOnly;
-
-  var layerFilter = options.layers;
-  if (!goog.isDef(layerFilter)) {
-    layerFilter = goog.functions.TRUE;
-  } else if (goog.isArray(layerFilter)) {
-    layerFilter = function(layer) {return options.layers.indexOf(layer) > -1;};
-  }
-  goog.asserts.assertFunction(layerFilter);
-
-  /**
-   * @type {function(ol.layer.Layer):boolean}
-   * @private
-   */
-  this.layerFilter_ = layerFilter;
-
-  goog.base(this);
-};
-goog.inherits(ol.interaction.Select, ol.interaction.Interaction);
-
-
-/**
- * @inheritDoc.
- */
-ol.interaction.Select.prototype.handleMapBrowserEvent =
-    function(mapBrowserEvent) {
-  if (this.condition_(mapBrowserEvent)) {
-    var map = mapBrowserEvent.map;
-    var layers = goog.array.filter(
-        map.getLayerGroup().getLayersArray(), this.layerFilter_);
-    var clear = !this.addCondition_(mapBrowserEvent);
-
-    var that = this;
-    var select = function(featuresByLayer) {
-      that.select(map, featuresByLayer, layers, clear);
-    };
-
-    map.getFeatures({
-      layers: layers,
-      pixel: mapBrowserEvent.getPixel(),
-      success: select
-    });
-  }
-  // TODO: Implement box selection
-  return true;
-};
-
-
-/**
- * @param {ol.Map} map The map where the selction event originated.
- * @param {Array.<Array.<ol.Feature>>} featuresByLayer Features by layer.
- * @param {Array.<ol.layer.Layer>} layers The queried layers.
- * @param {boolean} clear Whether the current layer content should be cleared.
- */
-ol.interaction.Select.prototype.select =
-    function(map, featuresByLayer, layers, clear) {
-  for (var i = 0, ii = featuresByLayer.length; i < ii; ++i) {
-    var layer = layers[i];
-    if (!(layer instanceof ol.layer.Vector)) {
-      // TODO Support non-vector layers and remove this
-      continue;
-    }
-
-    var featuresToSelect = featuresByLayer[i];
-    var selectedFeatures = layer.getVectorSource().getFeatures(
-        ol.layer.Vector.selectedFeaturesFilter);
-    if (clear) {
-      for (var j = selectedFeatures.length - 1; j >= 0; --j) {
-        selectedFeatures[j].setRenderIntent(
-            ol.FeatureRenderIntent.DEFAULT);
-      }
-    }
-    for (var j = featuresToSelect.length - 1; j >= 0; --j) {
-      var feature = featuresToSelect[j];
-      // TODO: Make toggle configurable
-      feature.setRenderIntent(feature.getRenderIntent() ==
-          ol.FeatureRenderIntent.SELECTED ?
-              ol.FeatureRenderIntent.DEFAULT :
-              ol.FeatureRenderIntent.SELECTED);
-    }
-    // TODO: Dispatch an event with selectedFeatures and unselectedFeatures
-  }
-};

old/test/spec/ol/interaction/selectinteraction.test.js

@@ -1,77 +0,0 @@
-goog.provide('ol.test.interaction.Select');
-
-describe('ol.interaction.Select', function() {
-  var map, target, select, source, vector, features;
-
-  beforeEach(function() {
-    target = document.createElement('div');
-    target.style.width = '256px';
-    target.style.height = '256px';
-    document.body.appendChild(target);
-    map = new ol.Map({
-      target: target
-    });
-
-    features = [
-      new ol.Feature({
-        geometry: new ol.geom.Point([-1, 1])
-      }),
-      new ol.Feature({
-        geometry: new ol.geom.Point([1, -1])
-      })
-    ];
-
-    source = new ol.source.Vector({});
-    source.addFeatures(features);
-    vector = new ol.layer.Vector({source: source});
-    select = new ol.interaction.Select({
-      layers: [vector]
-    });
-    map.getInteractions().push(select);
-  });
-
-  afterEach(function() {
-    goog.dispose(select);
-    goog.dispose(map);
-    document.body.removeChild(target);
-    select = null;
-    map = null;
-    target = null;
-  });
-
-  describe('#select', function() {
-
-    var selectedFeaturesFilter = function(feature) {
-      return feature.getRenderIntent() == 'selected';
-    };
-
-    it('toggles selection of features', function() {
-      select.select(map, [features], [vector]);
-      expect(source.getFeatures(selectedFeaturesFilter).length).to.be(2);
-      select.select(map, [features], [vector]);
-      expect(source.getFeatures(selectedFeaturesFilter).length).to.be(0);
-    });
-
-    it('can append features to an existing selection', function() {
-      select.select(map, [[features[0]]], [vector], true);
-      select.select(map, [[features[1]]], [vector]);
-      expect(source.getFeatures(selectedFeaturesFilter).length).to.be(2);
-    });
-
-    it('can clear a selection before selecting new features', function() {
-      select.select(map, [[features[0]]], [vector], true);
-      select.select(map, [[features[1]]], [vector], true);
-      expect(source.getFeatures(selectedFeaturesFilter).length).to.be(1);
-    });
-
-  });
-
-});
-
-goog.require('goog.dispose');
-goog.require('ol.Feature');
-goog.require('ol.Map');
-goog.require('ol.geom.Point');
-goog.require('ol.interaction.Select');
-goog.require('ol.layer.Vector');
-goog.require('ol.source.Vector');

src/objectliterals.jsdoc

@@ -401,6 +401,25 @@
  * @todo stability experimental
  */
 
+/**
+ * @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
+ *     the current selection. By default, a shift-click adds to the current
+ *     selection.
+ * @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
+ *     toggles the selection.
+ * @property {function(ol.layer.Layer): boolean|undefined} layerFilter Filter
+ *     function to restrict selection to a subset of layers.
+ * @property {ol.layer.Layer|undefined} layer Layer. The single layer from which
+ *     features should be selected.
+ * @property {Array.<ol.layer.Layer>|undefined} layers Layers.  Zero or more
+ *     layers from which features should be selected.
+ * @property {ol.render.FeaturesOverlay} featuresOverlay Features overlay.
+ */
+
 /**
  * @typedef {Object} olx.interaction.TouchPanOptions
  * @property {ol.Kinetic|undefined} kinetic Kinetic inertia to apply to the

src/ol/interaction/selectinteraction.exports

@@ -0,0 +1,3 @@
+@exportSymbol ol.interaction.Select
+@exportProperty ol.interaction.Select.prototype.getFeaturesOverlay
+@exportProperty ol.interaction.Select.prototype.setMap

src/ol/interaction/selectinteraction.js

@@ -0,0 +1,141 @@
+goog.provide('ol.interaction.Select');
+
+goog.require('goog.array');
+goog.require('goog.functions');
+goog.require('ol.events.condition');
+goog.require('ol.interaction.Interaction');
+goog.require('ol.render.FeaturesOverlay');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.interaction.Interaction}
+ * @param {olx.interaction.SelectOptions=} opt_options Options.
+ */
+ol.interaction.Select = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.condition_ = goog.isDef(options.condition) ?
+      options.condition : ol.events.condition.singleClick;
+
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.addCondition_ = goog.isDef(options.addCondition) ?
+      options.addCondition : ol.events.condition.shiftKeyOnly;
+
+  var layerFilter;
+  if (goog.isDef(options.layerFilter)) {
+    layerFilter = options.layerFilter;
+  } else if (goog.isDef(options.layer)) {
+    var layer = options.layer;
+    layerFilter = function(l) {
+      return l === layer;
+    };
+  } else if (goog.isDef(options.layers)) {
+    var layers = options.layers;
+    layerFilter = function(layer) {
+      return goog.array.indexOf(layers, layer) != -1;
+    };
+  } else {
+    layerFilter = goog.functions.TRUE;
+  }
+
+  /**
+   * @private
+   * @type {function(ol.layer.Layer): boolean}
+   */
+  this.layerFilter_ = layerFilter;
+
+  /**
+   * @private
+   * @type {ol.render.FeaturesOverlay}
+   */
+  this.featuresOverlay_ = options.featuresOverlay;
+
+};
+goog.inherits(ol.interaction.Select, ol.interaction.Interaction);
+
+
+/**
+ * @return {ol.render.FeaturesOverlay} Features overlay.
+ */
+ol.interaction.Select.prototype.getFeaturesOverlay = function() {
+  return this.featuresOverlay_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.interaction.Select.prototype.handleMapBrowserEvent =
+    function(mapBrowserEvent) {
+  if (!this.condition_(mapBrowserEvent)) {
+    return true;
+  }
+  var add = this.addCondition_(mapBrowserEvent);
+  var map = mapBrowserEvent.map;
+  var features = this.featuresOverlay_.getFeatures();
+  map.withFrozenRendering(
+      /**
+       * @this {ol.interaction.Select}
+       */
+      function() {
+        if (add) {
+          map.forEachFeatureAtPixel(mapBrowserEvent.getPixel(),
+              /**
+               * @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 {
+          var feature = map.forEachFeatureAtPixel(mapBrowserEvent.getPixel(),
+              /**
+               * @param {ol.Feature} feature Feature.
+               * @param {ol.layer.Layer} layer Layer.
+               */
+              function(feature, layer) {
+                return feature;
+              }, undefined, this.layerFilter_);
+          if (goog.isDef(feature)) {
+            if (features.getLength() == 1) {
+              if (features.getAt(0) !== feature) {
+                features.setAt(0, feature);
+              }
+            } else {
+              if (features.getLength() != 1) {
+                features.clear();
+              }
+              features.push(feature);
+            }
+          } else {
+            if (features.getLength() !== 0) {
+              features.clear();
+            }
+          }
+        }
+      }, this);
+  return false;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.interaction.Select.prototype.setMap = function(map) {
+  goog.base(this, 'setMap', map);
+  this.featuresOverlay_.setMap(map);
+};