Merge pull request #9961 from KlausBenndorf/remove-select-interaction

SelectInteraction removal

changelog/upgrade-notes.md

@@ -258,6 +258,10 @@ The `ol/source/Vector#refresh()` method now removes all features from the source
 
 The `getGetFeatureInfoUrl` of `ol/source/ImageWMS` and `ol/source/TileWMS` is now called `getFeatureInfoUrl`.
 
+##### Removal of `SelectInteraction`
+
+The `SelectInteraction` is removed. There are two examples ([Select Features by Hover](https://openlayers.org/en/master/examples/select-hover-features.html) and [Select multiple Features](https://openlayers.org/en/master/examples/select-multiple-features.html) which show how similar results can be achieved by using more basic methods.
+
 #### Other changes
 
 ##### Allow declutter in image render mode

examples/box-selection.html

@@ -3,8 +3,7 @@ layout: example.html
 title: Box Selection
 shortdesc: Using a DragBox interaction to select features.
 docs: >
-  <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
+  <p>This example shows how to use a <code>DragBox</code> interaction to select features.</p>
-  to the feature overlay of a select interaction (<code>ol/interaction/Select</code>) for highlighting.</p>
   <p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---

examples/box-selection.js

@@ -2,9 +2,13 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {DragBox, Select} from '../src/ol/interaction.js';
+import {DragBox} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import Collection from '../src/ol/Collection.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
 
 
 const vectorSource = new VectorSource({
@@ -30,11 +34,37 @@ const map = new Map({
   })
 });
 
-// a normal select interaction to handle click
+const selectedFeatures = new Collection();
-const select = new Select();
-map.addInteraction(select);
 
-const selectedFeatures = select.getFeatures();
+// style features in collection
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+selectedFeatures.on('add', function(e) {
+  e.element.setStyle(highlightStyle);
+});
+
+selectedFeatures.on('remove', function(e) {
+  e.element.setStyle(undefined);
+});
+
+
+// handle clicks
+
+map.on('singleclick', function(e) {
+  selectedFeatures.clear();
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    selectedFeatures.push(f);
+  });
+});
 
 // a DragBox interaction used to select features by drawing boxes
 const dragBox = new DragBox({

examples/earthquake-clusters.html

@@ -5,7 +5,7 @@ shortdesc: Demonstrates the use of style geometries to render source features of
 docs: >
   <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
   (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
-  the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
+  the extent of the features that make up the cluster. When hovering over a cluster, the individual features that make up the cluster will be shown.</p>
   <p>To achieve this, we make heavy use of style functions.</p>
 tags: "KML, vector, style, geometry, cluster"
 ---

examples/earthquake-clusters.js

@@ -2,7 +2,6 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js';
 import KML from '../src/ol/format/KML.js';
-import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js';
@@ -69,48 +68,50 @@ const calculateClusterInfo = function(resolution) {
 };
 
 let currentResolution;
+let hovered = null;
+
 function styleFunction(feature, resolution) {
-  if (resolution != currentResolution) {
+  if (feature !== hovered) {
-    calculateClusterInfo(resolution);
+    if (resolution != currentResolution) {
-    currentResolution = resolution;
+      calculateClusterInfo(resolution);
-  }
+      currentResolution = resolution;
-  let style;
+    }
-  const size = feature.get('features').length;
+    let style;
-  if (size > 1) {
+    const size = feature.get('features').length;
-    style = new Style({
+    if (size > 1) {
+      style = new Style({
+        image: new CircleStyle({
+          radius: feature.get('radius'),
+          fill: new Fill({
+            color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
+          })
+        }),
+        text: new Text({
+          text: size.toString(),
+          fill: textFill,
+          stroke: textStroke
+        })
+      });
+    } else {
+      const originalFeature = feature.get('features')[0];
+      style = createEarthquakeStyle(originalFeature);
+    }
+    return style;
+  } else {
+    const styles = [new Style({
       image: new CircleStyle({
         radius: feature.get('radius'),
-        fill: new Fill({
+        fill: invisibleFill
-          color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
-        })
-      }),
-      text: new Text({
-        text: size.toString(),
-        fill: textFill,
-        stroke: textStroke
       })
-    });
+    })];
-  } else {
+    const originalFeatures = feature.get('features');
-    const originalFeature = feature.get('features')[0];
+    let originalFeature;
-    style = createEarthquakeStyle(originalFeature);
+    for (let i = originalFeatures.length - 1; i >= 0; --i) {
+      originalFeature = originalFeatures[i];
+      styles.push(createEarthquakeStyle(originalFeature));
+    }
+    return styles;
   }
-  return style;
-}
-
-function selectStyleFunction(feature) {
-  const styles = [new Style({
-    image: new CircleStyle({
-      radius: feature.get('radius'),
-      fill: invisibleFill
-    })
-  })];
-  const originalFeatures = feature.get('features');
-  let originalFeature;
-  for (let i = originalFeatures.length - 1; i >= 0; --i) {
-    originalFeature = originalFeatures[i];
-    styles.push(createEarthquakeStyle(originalFeature));
-  }
-  return styles;
 }
 
 vector = new VectorLayer({
@@ -134,16 +135,17 @@ const raster = new TileLayer({
 
 const map = new Map({
   layers: [raster, vector],
-  interactions: defaultInteractions().extend([new Select({
-    condition: function(evt) {
-      return evt.type == 'pointermove' ||
-          evt.type == 'singleclick';
-    },
-    style: selectStyleFunction
-  })]),
   target: 'map',
   view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
+
+map.on('pointermove', function(e) {
+  hovered = null;
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    hovered = f;
+    f.changed();
+  });
+});

examples/icon-negative.js

@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import Select from '../src/ol/interaction/Select.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -44,27 +43,35 @@ const map = new Map({
 });
 
 const selectStyle = {};
-const select = new Select({
+let selected = null;
-  style: function(feature) {
+
-    const image = feature.get('style').getImage().getImage();
+map.on('singleclick', function(e) {
-    if (!selectStyle[image.src]) {
+  if (selected !== null) {
-      const canvas = document.createElement('canvas');
+    selected.setStyle(undefined);
-      const context = canvas.getContext('2d');
-      canvas.width = image.width;
-      canvas.height = image.height;
-      context.drawImage(image, 0, 0, image.width, image.height);
-      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-      const data = imageData.data;
-      for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
-        data[i] = 255 - data[i];
-      }
-      context.putImageData(imageData, 0, 0);
-      selectStyle[image.src] = createStyle(undefined, canvas);
-    }
-    return selectStyle[image.src];
   }
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    f.setStyle(function(feature) {
+      const image = feature.get('style').getImage().getImage();
+      if (!selectStyle[image.src]) {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        context.drawImage(image, 0, 0, image.width, image.height);
+        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
+          data[i] = 255 - data[i];
+        }
+        context.putImageData(imageData, 0, 0);
+        selectStyle[image.src] = createStyle(undefined, canvas);
+      }
+      return selectStyle[image.src];
+    });
+    selected = f;
+    return true;
+  });
 });
-map.addInteraction(select);
 
 map.on('pointermove', function(evt) {
   map.getTargetElement().style.cursor =

examples/modify-features.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Modify Features
 shortdesc: Editing features with the modify interaction.
 docs: >
-  <p>This example demonstrates how the modify and select interactions can be used together.  Zoom in to an area of interest and select a feature for editing.
+  <p>This example demonstrates how the modify interaction can be used.  Zoom in to an area of interest and select a feature for editing.
   Then drag points around to modify the feature.  You can preserve topology by selecting multiple features before editing (<code>Shift+Click</code> to select multiple features).</p>
 tags: "modify, edit, vector"
 ---

examples/modify-features.js

@@ -1,9 +1,14 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js';
+import {defaults as defaultInteractions, Modify} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {shiftKeyOnly} from '../src/ol/events/condition.js';
+import Collection from '../src/ol/Collection.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
 
 
 const raster = new TileLayer({
@@ -18,16 +23,34 @@ const vector = new VectorLayer({
   })
 });
 
-const select = new Select({
+const features = new Collection();
-  wrapX: false
+
+// style features in collection
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: 'rgb(51,153,204)',
+    width: 3
+  })
+});
+
+features.on('add', function(e) {
+  e.element.setStyle(highlightStyle);
+});
+
+features.on('remove', function(e) {
+  e.element.setStyle(undefined);
 });
 
 const modify = new Modify({
-  features: select.getFeatures()
+  features: features
 });
 
 const map = new Map({
-  interactions: defaultInteractions().extend([select, modify]),
+  interactions: defaultInteractions().extend([modify]),
   layers: [raster, vector],
   target: 'map',
   view: new View({
@@ -35,3 +58,12 @@ const map = new Map({
     zoom: 2
   })
 });
+
+map.on('singleclick', function(e) {
+  if (!shiftKeyOnly(e)) {
+    features.clear();
+  }
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    features.push(f);
+  });
+});

examples/modify-test.js

@@ -1,10 +1,11 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {defaults as defaultInteractions, Modify, Select} from '../src/ol/interaction.js';
+import {defaults as defaultInteractions, Modify} from '../src/ol/interaction.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import Collection from '../src/ol/Collection.js';
 
 
 const styleFunction = (function() {
@@ -211,23 +212,29 @@ const overlayStyle = (function() {
   };
 })();
 
-const select = new Select({
+const collection = new Collection();
-  style: overlayStyle
+
+collection.on('add', function(e) {
+  e.element.setStyle(overlayStyle);
+});
+
+collection.on('remove', function(e) {
+  e.element.setStyle(undefined);
 });
 
 const modify = new Modify({
-  features: select.getFeatures(),
+  features: collection,
   style: overlayStyle,
   insertVertexCondition: function() {
     // prevent new vertices to be added to the polygons
-    return !select.getFeatures().getArray().every(function(feature) {
+    return !collection.getArray().every(function(feature) {
       return feature.getGeometry().getType().match(/Polygon/);
     });
   }
 });
 
 const map = new Map({
-  interactions: defaultInteractions().extend([select, modify]),
+  interactions: defaultInteractions().extend([modify]),
   layers: [layer],
   target: 'map',
   view: new View({
@@ -235,3 +242,12 @@ const map = new Map({
     zoom: 2
   })
 });
+
+map.on('singleclick', function(e) {
+  collection.clear();
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    collection.push(f);
+  });
+});
+
+

examples/select-features.html

@@ -1,22 +0,0 @@
----
-layout: example.html
-title: Select Features
-shortdesc: Example of using the Select interaction.
-docs: >
-  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
-  <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
-  <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
-tags: "select, vector"
----
-<div id="map" class="map"></div>
-<form class="form-inline">
-  <label>Action type &nbsp;</label>
-    <select id="type" class="form-control">
-      <option value="click" selected>Click</option>
-      <option value="singleclick">Single-click</option>
-      <option value="pointermove">Hover</option>
-      <option value="altclick">Alt+Click</option>
-      <option value="none">None</option>
-    </select>
-  <span id="status">&nbsp;0 selected features</span>
-</form>

examples/select-features.js

@@ -1,85 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {click, pointerMove, altKeyOnly} from '../src/ol/events/condition.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
-import Select from '../src/ol/interaction/Select.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import OSM from '../src/ol/source/OSM.js';
-import VectorSource from '../src/ol/source/Vector.js';
-
-const raster = new TileLayer({
-  source: new OSM()
-});
-
-const vector = new VectorLayer({
-  source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
-  })
-});
-
-const map = new Map({
-  layers: [raster, vector],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-
-let select = null; // ref to currently selected interaction
-
-// select interaction working on "singleclick"
-const selectSingleClick = new Select();
-
-// select interaction working on "click"
-const selectClick = new Select({
-  condition: click
-});
-
-// select interaction working on "pointermove"
-const selectPointerMove = new Select({
-  condition: pointerMove
-});
-
-const selectAltClick = new Select({
-  condition: function(mapBrowserEvent) {
-    return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
-  }
-});
-
-const selectElement = document.getElementById('type');
-
-const changeInteraction = function() {
-  if (select !== null) {
-    map.removeInteraction(select);
-  }
-  const value = selectElement.value;
-  if (value == 'singleclick') {
-    select = selectSingleClick;
-  } else if (value == 'click') {
-    select = selectClick;
-  } else if (value == 'pointermove') {
-    select = selectPointerMove;
-  } else if (value == 'altclick') {
-    select = selectAltClick;
-  } else {
-    select = null;
-  }
-  if (select !== null) {
-    map.addInteraction(select);
-    select.on('select', function(e) {
-      document.getElementById('status').innerHTML = ' ' +
-          e.target.getFeatures().getLength() +
-          ' selected features (last operation selected ' + e.selected.length +
-          ' and deselected ' + e.deselected.length + ' features)';
-    });
-  }
-};
-
-
-/**
- * onchange callback on the select element.
- */
-selectElement.onchange = changeInteraction;
-changeInteraction();

examples/select-hover-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select Features by Hover
+shortdesc: Example of selecting features by hovering.
+docs: >
+  In this example, a listener is registered on the map's <code>pointermove</code> to highlight the currently hovered feature.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status"></span>

examples/select-hover-features.js

@@ -0,0 +1,61 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+let selected = null;
+const status = document.getElementById('status');
+
+map.on('pointermove', function(e) {
+  if (selected !== null) {
+    selected.setStyle(undefined);
+    selected = null;
+  }
+
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    selected = f;
+    f.setStyle(highlightStyle);
+    return true;
+  });
+
+  if (selected) {
+    status.innerHTML = ' Hovering: ' + selected.get('name');
+  } else {
+    status.innerHTML = ' ';
+  }
+});

examples/select-multiple-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select multiple Features
+shortdesc: Example of selecting multiple features.
+docs: >
+  In this example, a listener is registered on the map's <code>singleclick</code> event to add and remove features from an array.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status">&nbsp;0 selected features</span>

examples/select-multiple-features.js

@@ -0,0 +1,59 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    multiWorld: true
+  })
+});
+
+const selected = [];
+
+const status = document.getElementById('status');
+
+map.on('singleclick', function(e) {
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    const selIndex = selected.indexOf(f);
+    if (selIndex < 0) {
+      selected.push(f);
+      f.setStyle(highlightStyle);
+    } else {
+      selected.splice(selIndex, 1);
+      f.setStyle(undefined);
+    }
+  });
+
+  status.innerHTML = '&nbsp;' + selected.length + ' selected features';
+});

examples/snap.js

@@ -1,9 +1,11 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
+import {Draw, Modify, Snap} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import Collection from '../src/ol/Collection.js';
+import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
 const raster = new TileLayer({
   source: new OSM()
@@ -37,29 +39,53 @@ const map = new Map({
   })
 });
 
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: 'rgb(51,153,204)',
+    width: 3
+  })
+});
+
 const ExampleModify = {
   init: function() {
-    this.select = new Select();
+    this.features = new Collection();
-    map.addInteraction(this.select);
+
+    this.features.on('add', function(e) {
+      e.element.setStyle(highlightStyle);
+    });
+
+    this.features.on('remove', function(e) {
+      e.element.setStyle(undefined);
+    });
+
+    this.select = function(e) {
+      if (!shiftKeyOnly(e)) {
+        this.features.clear();
+      }
+      map.forEachFeatureAtPixel(e.pixel, function(f) {
+        this.features.push(f);
+      }.bind(this));
+    }.bind(this);
 
     this.modify = new Modify({
-      features: this.select.getFeatures()
+      features: this.features
     });
     map.addInteraction(this.modify);
 
     this.setEvents();
   },
   setEvents: function() {
-    const selectedFeatures = this.select.getFeatures();
-
-    this.select.on('change:active', function() {
-      selectedFeatures.forEach(function(each) {
-        selectedFeatures.remove(each);
-      });
-    });
   },
   setActive: function(active) {
-    this.select.setActive(active);
+    if (active) {
+      this.features.clear();
+      map.on('singleclick', this.select);
+    } else {
+      map.un('singleclick', this.select);
+    }
     this.modify.setActive(active);
   }
 };

examples/translate-features.js

@@ -1,10 +1,15 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {defaults as defaultInteractions, Select, Translate} from '../src/ol/interaction.js';
+import {defaults as defaultInteractions, Translate} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import Collection from '../src/ol/Collection.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
 
 const raster = new TileLayer({
@@ -18,14 +23,32 @@ const vector = new VectorLayer({
   })
 });
 
-const select = new Select();
+const features = new Collection();
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: 'rgb(51,153,204)',
+    width: 3
+  })
+});
+
+features.on('add', function(e) {
+  e.element.setStyle(highlightStyle);
+});
+
+features.on('remove', function(e) {
+  e.element.setStyle(undefined);
+});
 
 const translate = new Translate({
-  features: select.getFeatures()
+  features: features
 });
 
 const map = new Map({
-  interactions: defaultInteractions().extend([select, translate]),
+  interactions: defaultInteractions().extend([translate]),
   layers: [raster, vector],
   target: 'map',
   view: new View({
@@ -33,3 +56,12 @@ const map = new Map({
     zoom: 2
   })
 });
+
+map.on('singleclick', function(e) {
+  if (!shiftKeyOnly(e)) {
+    features.clear();
+  }
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    features.push(f);
+  });
+});

examples/vector-esri-edit.js

@@ -1,13 +1,18 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import EsriJSON from '../src/ol/format/EsriJSON.js';
-import {defaults as defaultInteractions, Draw, Modify, Select} from '../src/ol/interaction.js';
+import {defaults as defaultInteractions, Draw, Modify} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {tile as tileStrategy} from '../src/ol/loadingstrategy.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import XYZ from '../src/ol/source/XYZ.js';
 import {createXYZ} from '../src/ol/tilegrid.js';
+import Collection from '../src/ol/Collection.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
 
 const serviceUrl = 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' +
@@ -63,17 +68,32 @@ const draw = new Draw({
   type: 'Polygon'
 });
 
-const select = new Select();
+const selected = new Collection();
-select.setActive(false);
+
-const selected = select.getFeatures();
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: 'rgb(51,153,204)',
+    width: 3
+  })
+});
+
+selected.on('add', function(e) {
+  e.element.setStyle(highlightStyle);
+});
+
+selected.on('remove', function(e) {
+  e.element.setStyle(undefined);
+});
 
 const modify = new Modify({
   features: selected
 });
-modify.setActive(false);
 
 const map = new Map({
-  interactions: defaultInteractions().extend([draw, select, modify]),
+  interactions: defaultInteractions().extend([draw, modify]),
   layers: [raster, vector],
   target: document.getElementById('map'),
   view: new View({
@@ -82,6 +102,15 @@ const map = new Map({
   })
 });
 
+function select(e) {
+  if (!shiftKeyOnly(e)) {
+    selected.clear();
+  }
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    selected.push(f);
+  });
+}
+
 const typeSelect = document.getElementById('type');
 
 
@@ -92,6 +121,11 @@ typeSelect.onchange = function() {
   draw.setActive(typeSelect.value === 'DRAW');
   select.setActive(typeSelect.value === 'MODIFY');
   modify.setActive(typeSelect.value === 'MODIFY');
+  if (typeSelect.value === 'MODIFY') {
+    map.on('singleclick', select);
+  } else {
+    map.un('singleclick', select);
+  }
 };
 
 const dirty = {};

src/ol/PluggableMap.js

@@ -47,7 +47,6 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * @property {import("./transform.js").Transform} pixelToCoordinateTransform
  * @property {Array<PostRenderFunction>} postRenderFunctions
  * @property {import("./size.js").Size} size
- * @property {!Object<string, boolean>} skippedFeatureUids
  * @property {TileQueue} tileQueue
  * @property {!Object<string, Object<string, boolean>>} usedTiles
  * @property {Array<number>} viewHints
@@ -366,13 +365,6 @@ class PluggableMap extends BaseObject {
       this.getTilePriority.bind(this),
       this.handleTileChange_.bind(this));
 
-    /**
-     * Uids of features to skip at rendering time.
-     * @type {Object<string, boolean>}
-     * @private
-     */
-    this.skippedFeatureUids_ = {};
-
     this.addEventListener(getChangeEventType(MapProperty.LAYERGROUP), this.handleLayerGroupChanged_);
     this.addEventListener(getChangeEventType(MapProperty.VIEW), this.handleViewChanged_);
     this.addEventListener(getChangeEventType(MapProperty.SIZE), this.handleSizeChanged_);
@@ -1241,7 +1233,6 @@ class PluggableMap extends BaseObject {
         pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
         postRenderFunctions: [],
         size: size,
-        skippedFeatureUids: this.skippedFeatureUids_,
         tileQueue: this.tileQueue_,
         time: time,
         usedTiles: {},
@@ -1329,14 +1320,6 @@ class PluggableMap extends BaseObject {
     this.set(MapProperty.VIEW, view);
   }
 
-  /**
-   * @param {import("./Feature.js").default} feature Feature.
-   */
-  skipFeature(feature) {
-    this.skippedFeatureUids_[getUid(feature)] = true;
-    this.render();
-  }
-
   /**
    * Force a recalculation of the map viewport size.  This should be called when
    * third-party code changes the size of the map viewport.
@@ -1363,14 +1346,6 @@ class PluggableMap extends BaseObject {
       ]);
     }
   }
-
-  /**
-   * @param {import("./Feature.js").default} feature Feature.
-   */
-  unskipFeature(feature) {
-    delete this.skippedFeatureUids_[getUid(feature)];
-    this.render();
-  }
 }
 
 

src/ol/interaction.js

@@ -31,7 +31,6 @@ export {default as MouseWheelZoom} from './interaction/MouseWheelZoom.js';
 export {default as PinchRotate} from './interaction/PinchRotate.js';
 export {default as PinchZoom} from './interaction/PinchZoom.js';
 export {default as Pointer} from './interaction/Pointer.js';
-export {default as Select} from './interaction/Select.js';
 export {default as Snap} from './interaction/Snap.js';
 export {default as Translate} from './interaction/Translate.js';
 

src/ol/interaction/Select.js

@@ -1,483 +0,0 @@
-/**
- * @module ol/interaction/Select
- */
-import {getUid} from '../util.js';
-import CollectionEventType from '../CollectionEventType.js';
-import {extend, includes} from '../array.js';
-import Event from '../events/Event.js';
-import {singleClick, never, shiftKeyOnly, pointerMove} from '../events/condition.js';
-import {TRUE} from '../functions.js';
-import GeometryType from '../geom/GeometryType.js';
-import Interaction from './Interaction.js';
-import VectorLayer from '../layer/Vector.js';
-import {clear} from '../obj.js';
-import VectorSource from '../source/Vector.js';
-import {createEditingStyle} from '../style/Style.js';
-
-
-/**
- * @enum {string}
- */
-const SelectEventType = {
-  /**
-   * Triggered when feature(s) has been (de)selected.
-   * @event SelectEvent#select
-   * @api
-   */
-  SELECT: 'select'
-};
-
-
-/**
- * A function that takes an {@link module:ol/Feature} or
- * {@link module:ol/render/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
- * selected or `false` otherwise.
- * @typedef {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default):boolean} FilterFunction
- */
-
-
-/**
- * @typedef {Object} Options
- * @property {import("../events/condition.js").Condition} [addCondition] A function
- * that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
- * boolean to indicate whether that event should be handled.
- * By default, this is {@link module:ol/events/condition~never}. Use this if you
- * want to use different events for add and remove instead of `toggle`.
- * @property {import("../events/condition.js").Condition} [condition] A function that
- * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
- * boolean to indicate whether that event should be handled. This is the event
- * for the selected features as a whole. By default, this is
- * {@link module:ol/events/condition~singleClick}. Clicking on a feature selects that
- * feature and removes any that were in the selection. Clicking outside any
- * feature removes all from the selection.
- * See `toggle`, `add`, `remove` options for adding/removing extra features to/
- * from the selection.
- * @property {Array<import("../layer/Layer.js").default>|function(import("../layer/Layer.js").default): boolean} [layers]
- * A list of layers from which features should be selected. Alternatively, a
- * filter function can be provided. The function will be called for each layer
- * in the map and should return `true` for layers that you want to be
- * selectable. If the option is absent, all visible layers will be considered
- * selectable.
- * @property {import("../style/Style.js").StyleLike} [style]
- * Style for the selected features. By default the default edit style is used
- * (see {@link module:ol/style}).
- * @property {import("../events/condition.js").Condition} [removeCondition] A function
- * that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
- * boolean to indicate whether that event should be handled.
- * By default, this is {@link module:ol/events/condition~never}. Use this if you
- * want to use different events for add and remove instead of `toggle`.
- * @property {import("../events/condition.js").Condition} [toggleCondition] A function
- * that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
- * boolean to indicate whether that event should be handled. This is in addition
- * to the `condition` event. By default,
- * {@link module:ol/events/condition~shiftKeyOnly}, i.e. pressing `shift` as
- * well as the `condition` event, adds that feature to the current selection if
- * it is not currently selected, and removes it if it is. See `add` and `remove`
- * if you want to use different events instead of a toggle.
- * @property {boolean} [multi=false] A boolean that determines if the default
- * behaviour should select only single features or all (overlapping) features at
- * the clicked map position. The default of `false` means single select.
- * @property {import("../Collection.js").default<import("../Feature.js").default>} [features]
- * Collection where the interaction will place selected features. Optional. If
- * not set the interaction will create a collection. In any case the collection
- * used by the interaction is returned by
- * {@link module:ol/interaction/Select~Select#getFeatures}.
- * @property {FilterFunction} [filter] A function
- * that takes an {@link module:ol/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
- * selected or `false` otherwise.
- * @property {boolean} [wrapX=true] Wrap the world horizontally on the selection
- * overlay.
- * @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside
- * the radius around the given position will be checked for features.
- */
-
-
-/**
- * @classdesc
- * Events emitted by {@link module:ol/interaction/Select~Select} instances are instances of
- * this type.
- */
-class SelectEvent extends Event {
-  /**
-   * @param {SelectEventType} type The event type.
-   * @param {Array<import("../Feature.js").default>} selected Selected features.
-   * @param {Array<import("../Feature.js").default>} deselected Deselected features.
-   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Associated
-   *     {@link module:ol/MapBrowserEvent}.
-   */
-  constructor(type, selected, deselected, mapBrowserEvent) {
-    super(type);
-
-    /**
-     * Selected features array.
-     * @type {Array<import("../Feature.js").default>}
-     * @api
-     */
-    this.selected = selected;
-
-    /**
-     * Deselected features array.
-     * @type {Array<import("../Feature.js").default>}
-     * @api
-     */
-    this.deselected = deselected;
-
-    /**
-     * Associated {@link module:ol/MapBrowserEvent}.
-     * @type {import("../MapBrowserEvent.js").default}
-     * @api
-     */
-    this.mapBrowserEvent = mapBrowserEvent;
-
-  }
-
-}
-
-
-/**
- * @classdesc
- * Interaction for selecting vector features. By default, selected features are
- * styled differently, so this interaction can be used for visual highlighting,
- * as well as selecting features for other actions, such as modification or
- * output. There are three ways of controlling which features are selected:
- * using the browser event as defined by the `condition` and optionally the
- * `toggle`, `add`/`remove`, and `multi` options; a `layers` filter; and a
- * further feature filter using the `filter` option.
- *
- * Selected features are added to an internal unmanaged layer.
- *
- * @fires SelectEvent
- * @api
- */
-class Select extends Interaction {
-  /**
-   * @param {Options=} opt_options Options.
-   */
-  constructor(opt_options) {
-
-    super({
-      handleEvent: handleEvent
-    });
-
-    const options = opt_options ? opt_options : {};
-
-    /**
-     * @private
-     * @type {import("../events/condition.js").Condition}
-     */
-    this.condition_ = options.condition ? options.condition : singleClick;
-
-    /**
-     * @private
-     * @type {import("../events/condition.js").Condition}
-     */
-    this.addCondition_ = options.addCondition ? options.addCondition : never;
-
-    /**
-     * @private
-     * @type {import("../events/condition.js").Condition}
-     */
-    this.removeCondition_ = options.removeCondition ? options.removeCondition : never;
-
-    /**
-     * @private
-     * @type {import("../events/condition.js").Condition}
-     */
-    this.toggleCondition_ = options.toggleCondition ? options.toggleCondition : shiftKeyOnly;
-
-    /**
-     * @private
-     * @type {boolean}
-     */
-    this.multi_ = options.multi ? options.multi : false;
-
-    /**
-     * @private
-     * @type {FilterFunction}
-     */
-    this.filter_ = options.filter ? options.filter : TRUE;
-
-    /**
-     * @private
-     * @type {number}
-     */
-    this.hitTolerance_ = options.hitTolerance ? options.hitTolerance : 0;
-
-    const featureOverlay = new VectorLayer({
-      source: new VectorSource({
-        useSpatialIndex: false,
-        features: options.features,
-        wrapX: options.wrapX
-      }),
-      style: options.style ? options.style :
-        getDefaultStyleFunction(),
-      updateWhileAnimating: true,
-      updateWhileInteracting: true
-    });
-
-    /**
-     * @private
-     * @type {VectorLayer}
-     */
-    this.featureOverlay_ = featureOverlay;
-
-    /** @type {function(import("../layer/Layer.js").default): boolean} */
-    let layerFilter;
-    if (options.layers) {
-      if (typeof options.layers === 'function') {
-        layerFilter = options.layers;
-      } else {
-        const layers = options.layers;
-        layerFilter = function(layer) {
-          return includes(layers, layer);
-        };
-      }
-    } else {
-      layerFilter = TRUE;
-    }
-
-    /**
-     * @private
-     * @type {function(import("../layer/Layer.js").default): boolean}
-     */
-    this.layerFilter_ = layerFilter;
-
-    /**
-     * An association between selected feature (key)
-     * and layer (value)
-     * @private
-     * @type {Object<string, import("../layer/Layer.js").default>}
-     */
-    this.featureLayerAssociation_ = {};
-
-    const features = this.getFeatures();
-    features.addEventListener(CollectionEventType.ADD, this.addFeature_.bind(this));
-    features.addEventListener(CollectionEventType.REMOVE, this.removeFeature_.bind(this));
-  }
-
-  /**
-   * @param {import("../Feature.js").FeatureLike} feature Feature.
-   * @param {import("../layer/Layer.js").default} layer Layer.
-   * @private
-   */
-  addFeatureLayerAssociation_(feature, layer) {
-    this.featureLayerAssociation_[getUid(feature)] = layer;
-  }
-
-  /**
-   * Get the selected features.
-   * @return {import("../Collection.js").default<import("../Feature.js").default>} Features collection.
-   * @api
-   */
-  getFeatures() {
-    return this.featureOverlay_.getSource().getFeaturesCollection();
-  }
-
-  /**
-   * Returns the Hit-detection tolerance.
-   * @returns {number} Hit tolerance in pixels.
-   * @api
-   */
-  getHitTolerance() {
-    return this.hitTolerance_;
-  }
-
-  /**
-   * Returns the associated {@link module:ol/layer/Vector~Vector vectorlayer} of
-   * the (last) selected feature. Note that this will not work with any
-   * programmatic method like pushing features to
-   * {@link module:ol/interaction/Select~Select#getFeatures collection}.
-   * @param {import("../Feature.js").FeatureLike} feature Feature
-   * @return {VectorLayer} Layer.
-   * @api
-   */
-  getLayer(feature) {
-    return (
-      /** @type {VectorLayer} */ (this.featureLayerAssociation_[getUid(feature)])
-    );
-  }
-
-  /**
-   * Get the overlay layer that this interaction renders selected features to.
-   * @return {VectorLayer} Overlay layer.
-   * @api
-   */
-  getOverlay() {
-    return this.featureOverlay_;
-  }
-
-  /**
-   * Hit-detection tolerance. Pixels inside the radius around the given position
-   * will be checked for features.
-   * @param {number} hitTolerance Hit tolerance in pixels.
-   * @api
-   */
-  setHitTolerance(hitTolerance) {
-    this.hitTolerance_ = hitTolerance;
-  }
-
-  /**
-   * Remove the interaction from its current map, if any,  and attach it to a new
-   * map, if any. Pass `null` to just remove the interaction from the current map.
-   * @param {import("../PluggableMap.js").default} map Map.
-   * @override
-   * @api
-   */
-  setMap(map) {
-    const currentMap = this.getMap();
-    const selectedFeatures = this.getFeatures();
-    if (currentMap) {
-      selectedFeatures.forEach(currentMap.unskipFeature.bind(currentMap));
-    }
-    super.setMap(map);
-    this.featureOverlay_.setMap(map);
-    if (map) {
-      selectedFeatures.forEach(map.skipFeature.bind(map));
-    }
-  }
-
-  /**
-   * @param {import("../Collection.js").CollectionEvent} evt Event.
-   * @private
-   */
-  addFeature_(evt) {
-    const map = this.getMap();
-    if (map) {
-      map.skipFeature(/** @type {import("../Feature.js").default} */ (evt.element));
-    }
-  }
-
-  /**
-   * @param {import("../Collection.js").CollectionEvent} evt Event.
-   * @private
-   */
-  removeFeature_(evt) {
-    const map = this.getMap();
-    if (map) {
-      map.unskipFeature(/** @type {import("../Feature.js").default} */ (evt.element));
-    }
-  }
-
-  /**
-   * @param {import("../Feature.js").FeatureLike} feature Feature.
-   * @private
-   */
-  removeFeatureLayerAssociation_(feature) {
-    delete this.featureLayerAssociation_[getUid(feature)];
-  }
-}
-
-
-/**
- * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
- * selected state of features.
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
- * @this {Select}
- */
-function handleEvent(mapBrowserEvent) {
-  if (!this.condition_(mapBrowserEvent)) {
-    return true;
-  }
-  const add = this.addCondition_(mapBrowserEvent);
-  const remove = this.removeCondition_(mapBrowserEvent);
-  const toggle = this.toggleCondition_(mapBrowserEvent);
-  const set = !add && !remove && !toggle;
-  const map = mapBrowserEvent.map;
-  const features = this.getFeatures();
-  const deselected = [];
-  const selected = [];
-  if (set) {
-    // Replace the currently selected feature(s) with the feature(s) at the
-    // pixel, or clear the selected feature(s) if there is no feature at
-    // the pixel.
-    clear(this.featureLayerAssociation_);
-    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
-      (
-        /**
-         * @param {import("../Feature.js").FeatureLike} feature Feature.
-         * @param {import("../layer/Layer.js").default} layer Layer.
-         * @return {boolean|undefined} Continue to iterate over the features.
-         */
-        function(feature, layer) {
-          if (this.filter_(feature, layer)) {
-            selected.push(feature);
-            this.addFeatureLayerAssociation_(feature, layer);
-            return !this.multi_;
-          }
-        }).bind(this), {
-        layerFilter: this.layerFilter_,
-        hitTolerance: this.hitTolerance_
-      });
-    for (let i = features.getLength() - 1; i >= 0; --i) {
-      const feature = features.item(i);
-      const index = selected.indexOf(feature);
-      if (index > -1) {
-        // feature is already selected
-        selected.splice(index, 1);
-      } else {
-        features.remove(feature);
-        deselected.push(feature);
-      }
-    }
-    if (selected.length !== 0) {
-      features.extend(selected);
-    }
-  } else {
-    // Modify the currently selected feature(s).
-    map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
-      (
-        /**
-         * @param {import("../Feature.js").FeatureLike} feature Feature.
-         * @param {import("../layer/Layer.js").default} layer Layer.
-         * @return {boolean|undefined} Continue to iterate over the features.
-         */
-        function(feature, layer) {
-          if (this.filter_(feature, layer)) {
-            if ((add || toggle) && !includes(features.getArray(), feature)) {
-              selected.push(feature);
-              this.addFeatureLayerAssociation_(feature, layer);
-            } else if ((remove || toggle) && includes(features.getArray(), feature)) {
-              deselected.push(feature);
-              this.removeFeatureLayerAssociation_(feature);
-            }
-            return !this.multi_;
-          }
-        }).bind(this), {
-        layerFilter: this.layerFilter_,
-        hitTolerance: this.hitTolerance_
-      });
-    for (let j = deselected.length - 1; j >= 0; --j) {
-      features.remove(deselected[j]);
-    }
-    features.extend(selected);
-  }
-  if (selected.length > 0 || deselected.length > 0) {
-    this.dispatchEvent(
-      new SelectEvent(SelectEventType.SELECT,
-        selected, deselected, mapBrowserEvent));
-  }
-  return pointerMove(mapBrowserEvent);
-}
-
-
-/**
- * @return {import("../style/Style.js").StyleFunction} Styles.
- */
-function getDefaultStyleFunction() {
-  const styles = createEditingStyle();
-  extend(styles[GeometryType.POLYGON], styles[GeometryType.LINE_STRING]);
-  extend(styles[GeometryType.GEOMETRY_COLLECTION], styles[GeometryType.LINE_STRING]);
-
-  return function(feature, resolution) {
-    if (!feature.getGeometry()) {
-      return null;
-    }
-    return styles[feature.getGeometry().getType()];
-  };
-}
-
-
-export default Select;

src/ol/render/canvas/Executor.js

@@ -1,14 +1,12 @@
 /**
  * @module ol/render/canvas/Executor
  */
-import {getUid} from '../../util.js';
 import {equals} from '../../array.js';
 import {createEmpty, createOrUpdate,
   createOrUpdateEmpty, extend, intersects} from '../../extent.js';
 import {lineStringLength} from '../../geom/flat/length.js';
 import {drawTextOnPath} from '../../geom/flat/textpath.js';
 import {transform2D} from '../../geom/flat/transform.js';
-import {isEmpty} from '../../obj.js';
 import {drawImage, defaultPadding, defaultTextBaseline} from '../canvas.js';
 import CanvasInstruction from './Instruction.js';
 import {TEXT_ALIGN} from './TextBuilder.js';
@@ -497,8 +495,6 @@ class Executor extends Disposable {
    * @private
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../transform.js").Transform} transform Transform.
-   * @param {Object<string, boolean>} skippedFeaturesHash Ids of features
-   *     to skip.
    * @param {Array<*>} instructions Instructions array.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
    * @param {function(import("../../Feature.js").FeatureLike): T|undefined} featureCallback Feature callback.
@@ -510,7 +506,6 @@ class Executor extends Disposable {
   execute_(
     context,
     transform,
-    skippedFeaturesHash,
     instructions,
     snapToPixel,
     featureCallback,
@@ -530,7 +525,6 @@ class Executor extends Disposable {
         transform, this.pixelCoordinates_);
       transformSetFromArray(this.renderedTransform_, transform);
     }
-    const skipFeatures = !isEmpty(skippedFeaturesHash);
     let i = 0; // instruction index
     const ii = instructions.length; // end of instructions
     let d = 0; // data index
@@ -562,9 +556,7 @@ class Executor extends Disposable {
       switch (type) {
         case CanvasInstruction.BEGIN_GEOMETRY:
           feature = /** @type {import("../../Feature.js").FeatureLike} */ (instruction[1]);
-          if ((skipFeatures && skippedFeaturesHash[getUid(feature)]) || !feature.getGeometry()) {
+          if (opt_hitExtent !== undefined && !intersects(
-            i = /** @type {number} */ (instruction[2]);
-          } else if (opt_hitExtent !== undefined && !intersects(
             opt_hitExtent, feature.getGeometry().getExtent())) {
             i = /** @type {number} */ (instruction[2]) + 1;
           } else {
@@ -871,22 +863,17 @@ class Executor extends Disposable {
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
-   * @param {Object<string, boolean>} skippedFeaturesHash Ids of features
-   *     to skip.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
    */
-  execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel) {
+  execute(context, transform, viewRotation, snapToPixel) {
     this.viewRotation_ = viewRotation;
-    this.execute_(context, transform,
+    this.execute_(context, transform, this.instructions, snapToPixel, undefined, undefined);
-      skippedFeaturesHash, this.instructions, snapToPixel, undefined, undefined);
   }
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
-   * @param {Object<string, boolean>} skippedFeaturesHash Ids of features
-   *     to skip.
    * @param {function(import("../../Feature.js").FeatureLike): T=} opt_featureCallback
    *     Feature callback.
    * @param {import("../../extent.js").Extent=} opt_hitExtent Only check features that intersect this
@@ -898,12 +885,11 @@ class Executor extends Disposable {
     context,
     transform,
     viewRotation,
-    skippedFeaturesHash,
     opt_featureCallback,
     opt_hitExtent
   ) {
     this.viewRotation_ = viewRotation;
-    return this.execute_(context, transform, skippedFeaturesHash,
+    return this.execute_(context, transform,
       this.hitDetectionInstructions, true, opt_featureCallback, opt_hitExtent);
   }
 }

src/ol/render/canvas/ExecutorGroup.js

@@ -167,7 +167,6 @@ class ExecutorGroup extends Disposable {
    * @param {number} resolution Resolution.
    * @param {number} rotation Rotation.
    * @param {number} hitTolerance Hit tolerance in pixels.
-   * @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
    * @param {function(import("../../Feature.js").FeatureLike): T} callback Feature callback.
    * @param {Array<import("../../Feature.js").FeatureLike>} declutteredFeatures Decluttered features.
    * @return {T|undefined} Callback result.
@@ -178,7 +177,6 @@ class ExecutorGroup extends Disposable {
     resolution,
     rotation,
     hitTolerance,
-    skippedFeaturesHash,
     callback,
     declutteredFeatures
   ) {
@@ -256,8 +254,7 @@ class ExecutorGroup extends Disposable {
         builderType = ORDER[j];
         executor = executors[builderType];
         if (executor !== undefined) {
-          result = executor.executeHitDetection(context, transform, rotation,
+          result = executor.executeHitDetection(context, transform, rotation, featureCallback, hitExtent);
-            skippedFeaturesHash, featureCallback, hitExtent);
           if (result) {
             return result;
           }
@@ -297,14 +294,12 @@ class ExecutorGroup extends Disposable {
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
-   * @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
    * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
    * @param {Array<BuilderType>=} opt_builderTypes Ordered replay types to replay.
    *     Default is {@link module:ol/render/replay~ORDER}
    * @param {Object<string, import("../canvas.js").DeclutterGroup>=} opt_declutterReplays Declutter replays.
    */
-  execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel, opt_builderTypes,
+  execute(context, transform, viewRotation, snapToPixel, opt_builderTypes, opt_declutterReplays) {
-    opt_declutterReplays) {
 
     /** @type {Array<number>} */
     const zs = Object.keys(this.executorsByZIndex_).map(Number);
@@ -335,7 +330,7 @@ class ExecutorGroup extends Disposable {
               declutter.push(replay, transform.slice(0));
             }
           } else {
-            replay.execute(context, transform, viewRotation, skippedFeaturesHash, snapToPixel);
+            replay.execute(context, transform, viewRotation, snapToPixel);
           }
         }
       }
@@ -436,7 +431,6 @@ export function getCircleArray(radius) {
  */
 export function replayDeclutter(declutterReplays, context, rotation, opacity, snapToPixel, declutterItems) {
   const zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
-  const skippedFeatureUids = {};
   for (let z = 0, zz = zs.length; z < zz; ++z) {
     const executorData = declutterReplays[zs[z].toString()];
     let currentExecutor;
@@ -450,7 +444,7 @@ export function replayDeclutter(declutterReplays, context, rotation, opacity, sn
         });
       }
       const transform = executorData[i++];
-      executor.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
+      executor.execute(context, transform, rotation, snapToPixel);
     }
   }
 }

src/ol/renderer/Map.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/renderer/Map
  */
-import {abstract, getUid} from '../util.js';
+import {abstract} from '../util.js';
 import Disposable from '../Disposable.js';
 import {getWidth} from '../extent.js';
 import {TRUE} from '../functions.js';
@@ -95,8 +95,8 @@ class MapRenderer extends Disposable {
      * @return {?} Callback result.
      */
     function forEachFeatureAtCoordinate(managed, feature, layer) {
-      if (!(getUid(feature) in frameState.skippedFeatureUids && !managed)) {
+      if (managed) {
-        return callback.call(thisArg, feature, managed ? layer : null);
+        return callback.call(thisArg, feature, layer);
       }
     }
 

src/ol/renderer/canvas/VectorImageLayer.js

@@ -3,7 +3,6 @@
  */
 import ImageCanvas from '../../ImageCanvas.js';
 import ViewHint from '../../ViewHint.js';
-import {equals} from '../../array.js';
 import {getHeight, getWidth, isEmpty, scaleFromCenter} from '../../extent.js';
 import {assign} from '../../obj.js';
 import CanvasImageLayerRenderer from './ImageLayer.js';
@@ -25,11 +24,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
   constructor(layer) {
     super(layer);
 
-    /**
-     * @type {!Array<string>}
-     */
-    this.skippedFeatures_ = [];
-
     /**
      * @private
      * @type {import("./VectorLayer.js").default}
@@ -76,7 +70,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
     }
 
     if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
-      let skippedFeatures = this.skippedFeatures_;
       vectorRenderer.useContainer(null, null, 1);
       const context = vectorRenderer.context;
       const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
@@ -89,14 +82,10 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
           rotation: 0
         }))
       }));
-      const newSkippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
       const image = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas, function(callback) {
-        if (vectorRenderer.prepareFrame(imageFrameState) &&
+        if (vectorRenderer.prepareFrame(imageFrameState) && vectorRenderer.replayGroupChanged) {
-              (vectorRenderer.replayGroupChanged ||
-              !equals(skippedFeatures, newSkippedFeatures))) {
           vectorRenderer.renderFrame(imageFrameState, null);
           renderDeclutterItems(imageFrameState, null);
-          skippedFeatures = newSkippedFeatures;
           callback();
         }
       });
@@ -104,7 +93,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
       image.addEventListener(EventType.CHANGE, function() {
         if (image.getState() === ImageState.LOADED) {
           this.image_ = image;
-          this.skippedFeatures_ = skippedFeatures;
         }
       }.bind(this));
       image.load();

src/ol/renderer/canvas/VectorLayer.js

@@ -144,9 +144,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
 
     const transform = this.getRenderTransform(frameState, width, height, 0);
-    const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
     const declutterReplays = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer()).getDeclutter() ? {} : null;
-    replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
+    replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
 
     if (vectorSource.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
       let startX = extent[0];
@@ -157,7 +156,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         --world;
         offsetX = worldWidth * world;
         const transform = this.getRenderTransform(frameState, width, height, offsetX);
-        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
+        replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
         startX += worldWidth;
       }
       world = 0;
@@ -166,7 +165,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         ++world;
         offsetX = worldWidth * world;
         const transform = this.getRenderTransform(frameState, width, height, offsetX);
-        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
+        replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
         startX -= worldWidth;
       }
     }
@@ -203,7 +202,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       const layer = /** @type {import("../../layer/Vector").default} */ (this.getLayer());
       /** @type {!Object<string, boolean>} */
       const features = {};
-      const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
+      const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance,
         /**
          * @param {import("../../Feature.js").FeatureLike} feature Feature.
          * @return {?} Callback result.

src/ol/renderer/canvas/VectorTileLayer.js

@@ -357,7 +357,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       const executorGroups = tile.executorGroups[getUid(layer)];
       for (let t = 0, tt = executorGroups.length; t < tt; ++t) {
         const executorGroup = executorGroups[t];
-        found = found || executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
+        found = found || executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance,
           /**
            * @param {import("../../Feature.js").FeatureLike} feature Feature.
            * @return {?} Callback result.
@@ -497,7 +497,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
             }
           }
         }
-        executorGroup.execute(context, transform, rotation, {}, hifi, replayTypes, declutterReplays);
+        executorGroup.execute(context, transform, rotation, hifi, replayTypes, declutterReplays);
         if (!declutterReplays && !clipped) {
           context.restore();
           clips.push(currentClip);
@@ -617,7 +617,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     translateTransform(transform, -tileExtent[0], -tileExtent[3]);
     for (let i = 0, ii = executorGroups.length; i < ii; ++i) {
       const executorGroup = executorGroups[i];
-      executorGroup.execute(context, transform, 0, {}, true, IMAGE_REPLAYS[layer.getRenderMode()]);
+      executorGroup.execute(context, transform, 0, true, IMAGE_REPLAYS[layer.getRenderMode()]);
     }
     replayState.renderedTileResolution = tile.wantedResolution;
   }

src/ol/source/Raster.js

@@ -220,7 +220,6 @@ class RasterSource extends ImageSource {
       pixelToCoordinateTransform: createTransform(),
       postRenderFunctions: [],
       size: [0, 0],
-      skippedFeatureUids: {},
       tileQueue: this.tileQueue_,
       time: Date.now(),
       usedTiles: {},

test/spec/ol/interaction/select.test.js

@@ -1,451 +0,0 @@
-import Collection from '../../../../src/ol/Collection.js';
-import Feature from '../../../../src/ol/Feature.js';
-import Map from '../../../../src/ol/Map.js';
-import MapBrowserEventType from '../../../../src/ol/MapBrowserEventType.js';
-import MapBrowserPointerEvent from '../../../../src/ol/MapBrowserPointerEvent.js';
-import View from '../../../../src/ol/View.js';
-import Polygon from '../../../../src/ol/geom/Polygon.js';
-import Interaction from '../../../../src/ol/interaction/Interaction.js';
-import Select from '../../../../src/ol/interaction/Select.js';
-import VectorLayer from '../../../../src/ol/layer/Vector.js';
-import VectorSource from '../../../../src/ol/source/Vector.js';
-
-
-describe('ol.interaction.Select', function() {
-  let target, map, layer, source;
-
-  const width = 360;
-  const height = 180;
-
-  beforeEach(function(done) {
-    target = document.createElement('div');
-
-    const style = target.style;
-    style.position = 'absolute';
-    style.left = '-1000px';
-    style.top = '-1000px';
-    style.width = width + 'px';
-    style.height = height + 'px';
-    document.body.appendChild(target);
-
-    const geometry = new Polygon([[[0, 0], [0, 40], [40, 40], [40, 0]]]);
-
-    // Four overlapping features, two features of type "foo" and two features
-    // of type "bar". The rendering order is, from top to bottom, foo -> bar
-    // -> foo -> bar.
-    const features = [];
-    features.push(
-      new Feature({
-        geometry: geometry,
-        type: 'bar'
-      }),
-      new Feature({
-        geometry: geometry,
-        type: 'foo'
-      }),
-      new Feature({
-        geometry: geometry,
-        type: 'bar'
-      }),
-      new Feature({
-        geometry: geometry,
-        type: 'foo'
-      }));
-
-    source = new VectorSource({
-      features: features
-    });
-
-    layer = new VectorLayer({source: source});
-
-    map = new Map({
-      target: target,
-      layers: [layer],
-      view: new View({
-        projection: 'EPSG:4326',
-        center: [0, 0],
-        resolution: 1
-      })
-    });
-
-    map.once('postrender', function() {
-      done();
-    });
-  });
-
-  afterEach(function() {
-    map.dispose();
-    document.body.removeChild(target);
-  });
-
-  /**
-   * Simulates a browser event on the map viewport.  The client x/y location
-   * will be adjusted as if the map were centered at 0,0.
-   * @param {string} type Event type.
-   * @param {number} x Horizontal offset from map center.
-   * @param {number} y Vertical offset from map center.
-   * @param {boolean=} opt_shiftKey Shift key is pressed.
-   */
-  function simulateEvent(type, x, y, opt_shiftKey) {
-    const viewport = map.getViewport();
-    // calculated in case body has top < 0 (test runner with small window)
-    const position = viewport.getBoundingClientRect();
-    const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false;
-    const event = new PointerEvent(type, {
-      clientX: position.left + x + width / 2,
-      clientY: position.top + y + height / 2,
-      shiftKey: shiftKey
-    });
-    map.handleMapBrowserEvent(new MapBrowserPointerEvent(type, map, event));
-  }
-
-  describe('constructor', function() {
-
-    it('creates a new interaction', function() {
-      const select = new Select();
-      expect(select).to.be.a(Select);
-      expect(select).to.be.a(Interaction);
-    });
-
-    describe('user-provided collection', function() {
-
-      it('uses the user-provided collection', function() {
-        const features = new Collection();
-        const select = new Select({features: features});
-        expect(select.getFeatures()).to.be(features);
-      });
-
-    });
-
-  });
-
-  describe('selecting a polygon', function() {
-    let select;
-
-    beforeEach(function() {
-      select = new Select();
-      map.addInteraction(select);
-    });
-
-    it('select with single-click', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(1);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      const features = select.getFeatures();
-      expect(features.getLength()).to.equal(1);
-    });
-
-    it('single-click outside the geometry', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(1);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent(MapBrowserEventType.SINGLECLICK, -10, -10);
-
-      expect(listenerSpy.callCount).to.be(0);
-
-      const features = select.getFeatures();
-      expect(features.getLength()).to.equal(0);
-    });
-
-    it('select twice with single-click', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(1);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent(MapBrowserEventType.SINGLECLICK, 10, -20);
-      simulateEvent(MapBrowserEventType.SINGLECLICK, 9, -21);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      const features = select.getFeatures();
-      expect(features.getLength()).to.equal(1);
-    });
-
-    it('select with shift single-click', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(1);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20, true);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      const features = select.getFeatures();
-      expect(features.getLength()).to.equal(1);
-    });
-  });
-
-  describe('multiselecting polygons', function() {
-    let select;
-
-    beforeEach(function() {
-      select = new Select({
-        multi: true
-      });
-      map.addInteraction(select);
-    });
-
-    it('select with single-click', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(4);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      const features = select.getFeatures();
-      expect(features.getLength()).to.equal(4);
-    });
-
-    it('select with shift single-click', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        expect(e.selected).to.have.length(4);
-      });
-      select.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20, true);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      let features = select.getFeatures();
-      expect(features.getLength()).to.equal(4);
-      expect(select.getLayer(features.item(0))).to.equal(layer);
-
-      // Select again to make sure the internal layer isn't reported
-      simulateEvent('singleclick', 10, -20);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      features = select.getFeatures();
-      expect(features.getLength()).to.equal(4);
-      expect(select.getLayer(features.item(0))).to.equal(layer);
-    });
-  });
-
-  describe('toggle selecting polygons', function() {
-    let select;
-
-    beforeEach(function() {
-      select = new Select({
-        multi: true
-      });
-      map.addInteraction(select);
-    });
-
-    it('with SHIFT + single-click', function() {
-      const listenerSpy = sinon.spy();
-      select.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20, true);
-
-      expect(listenerSpy.callCount).to.be(1);
-
-      let features = select.getFeatures();
-      expect(features.getLength()).to.equal(4);
-
-      map.renderSync();
-
-      simulateEvent('singleclick', 10, -20, true);
-
-      expect(listenerSpy.callCount).to.be(2);
-
-      features = select.getFeatures();
-      expect(features.getLength()).to.equal(0);
-    });
-  });
-
-  describe('filter features using the filter option', function() {
-
-    describe('with multi set to true', function() {
-
-      it('only selects features that pass the filter', function() {
-        const select = new Select({
-          multi: true,
-          filter: function(feature, layer) {
-            return feature.get('type') === 'bar';
-          }
-        });
-        map.addInteraction(select);
-
-        simulateEvent('singleclick', 10, -20);
-        const features = select.getFeatures();
-        expect(features.getLength()).to.equal(2);
-        expect(features.item(0).get('type')).to.be('bar');
-        expect(features.item(1).get('type')).to.be('bar');
-      });
-
-      it('only selects features that pass the filter ' +
-         'using shift single-click', function() {
-        const select = new Select({
-          multi: true,
-          filter: function(feature, layer) {
-            return feature.get('type') === 'bar';
-          }
-        });
-        map.addInteraction(select);
-
-        simulateEvent('singleclick', 10, -20,
-          true);
-        const features = select.getFeatures();
-        expect(features.getLength()).to.equal(2);
-        expect(features.item(0).get('type')).to.be('bar');
-        expect(features.item(1).get('type')).to.be('bar');
-      });
-    });
-
-    describe('with multi set to false', function() {
-
-      it('only selects the first feature that passes the filter', function() {
-        const select = new Select({
-          multi: false,
-          filter: function(feature, layer) {
-            return feature.get('type') === 'bar';
-          }
-        });
-        map.addInteraction(select);
-        simulateEvent('singleclick', 10, -20);
-        const features = select.getFeatures();
-        expect(features.getLength()).to.equal(1);
-        expect(features.item(0).get('type')).to.be('bar');
-      });
-
-      it('only selects the first feature that passes the filter ' +
-         'using shift single-click', function() {
-        const select = new Select({
-          multi: false,
-          filter: function(feature, layer) {
-            return feature.get('type') === 'bar';
-          }
-        });
-        map.addInteraction(select);
-        simulateEvent('singleclick', 10, -20,
-          true);
-        const features = select.getFeatures();
-        expect(features.getLength()).to.equal(1);
-        expect(features.item(0).get('type')).to.be('bar');
-      });
-    });
-  });
-
-  describe('#getLayer(feature)', function() {
-    let interaction;
-
-    beforeEach(function() {
-      interaction = new Select();
-      map.addInteraction(interaction);
-    });
-    afterEach(function() {
-      map.removeInteraction(interaction);
-    });
-
-    it('returns a layer from a selected feature', function() {
-      const listenerSpy = sinon.spy(function(e) {
-        const feature = e.selected[0];
-        const layer_ = interaction.getLayer(feature);
-        expect(e.selected).to.have.length(1);
-        expect(feature).to.be.a(Feature);
-        expect(layer_).to.be.a(VectorLayer);
-        expect(layer_).to.equal(layer);
-      });
-      interaction.on('select', listenerSpy);
-
-      simulateEvent('singleclick', 10, -20);
-      // Select again to make sure that the internal layer doesn't get reported.
-      simulateEvent('singleclick', 10, -20);
-    });
-  });
-
-  describe('#setActive()', function() {
-    let interaction;
-
-    beforeEach(function() {
-      interaction = new Select();
-
-      expect(interaction.getActive()).to.be(true);
-
-      map.addInteraction(interaction);
-
-      expect(interaction.featureOverlay_).not.to.be(null);
-
-      simulateEvent('singleclick', 10, -20);
-    });
-
-    afterEach(function() {
-      map.removeInteraction(interaction);
-    });
-
-    describe('#setActive(false)', function() {
-      it('keeps the the selection', function() {
-        interaction.setActive(false);
-        expect(interaction.getFeatures().getLength()).to.equal(1);
-      });
-    });
-
-    describe('#setActive(true)', function() {
-      beforeEach(function() {
-        interaction.setActive(false);
-      });
-      it('fires change:active', function() {
-        const listenerSpy = sinon.spy();
-        interaction.on('change:active', listenerSpy);
-        interaction.setActive(true);
-        expect(listenerSpy.callCount).to.be(1);
-      });
-    });
-
-  });
-
-  describe('#setMap()', function() {
-    let interaction;
-
-    beforeEach(function() {
-      interaction = new Select();
-      expect(interaction.getActive()).to.be(true);
-    });
-
-    describe('#setMap(null)', function() {
-      beforeEach(function() {
-        map.addInteraction(interaction);
-      });
-      afterEach(function() {
-        map.removeInteraction(interaction);
-      });
-      describe('#setMap(null) when interaction is active', function() {
-        it('unsets the map from the feature overlay', function() {
-          const spy = sinon.spy(interaction.featureOverlay_, 'setMap');
-          interaction.setMap(null);
-          expect(spy.getCall(0).args[0]).to.be(null);
-        });
-      });
-    });
-
-    describe('#setMap(map)', function() {
-      describe('#setMap(map) when interaction is active', function() {
-        it('sets the map into the feature overlay', function() {
-          const spy = sinon.spy(interaction.featureOverlay_, 'setMap');
-          interaction.setMap(map);
-          expect(spy.getCall(0).args[0]).to.be(map);
-        });
-      });
-    });
-  });
-
-  describe('#getOverlay', function() {
-    it('returns the feature overlay layer', function() {
-      const select = new Select();
-      expect (select.getOverlay()).to.eql(select.featureOverlay_);
-    });
-  });
-});

test/spec/ol/renderer/canvas/builder.test.js

@@ -1,4 +1,3 @@
-import {getUid} from '../../../../../src/ol/util.js';
 import Feature from '../../../../../src/ol/Feature.js';
 import GeometryCollection from '../../../../../src/ol/geom/GeometryCollection.js';
 import LineString from '../../../../../src/ol/geom/LineString.js';
@@ -29,14 +28,13 @@ describe('ol.render.canvas.BuilderGroup', function() {
 
     /**
      * @param {BuilderGroup} builder The builder to get instructions from.
-     * @param {Object=} skippedUids The ids to skip.
      * @param {number=} pixelRatio The pixel ratio.
      * @param {boolean=} overlaps Whether there is overlaps.
      */
-    function execute(builder, skippedUids, pixelRatio, overlaps) {
+    function execute(builder, pixelRatio, overlaps) {
       const executor = new ExecutorGroup([-180, -90, 180, 90], 1,
         pixelRatio || 1, !!overlaps, builder.finish());
-      executor.execute(context, transform, 0, skippedUids || {});
+      executor.execute(context, transform, 0, false);
     }
 
     beforeEach(function() {
@@ -147,43 +145,6 @@ describe('ol.render.canvas.BuilderGroup', function() {
       expect(beginPathCount).to.be(3);
     });
 
-    it('batches fill and stroke instructions for skipped feature at the beginning', function() {
-      renderFeature(builder, feature1, style1, 1);
-      renderFeature(builder, feature2, style2, 1);
-      renderFeature(builder, feature3, style2, 1);
-      const skippedUids = {};
-      skippedUids[getUid(feature1)] = true;
-      execute(builder, skippedUids);
-      expect(fillCount).to.be(1);
-      expect(strokeCount).to.be(1);
-      expect(beginPathCount).to.be(1);
-    });
-
-    it('batches fill and stroke instructions for skipped feature at the end', function() {
-      renderFeature(builder, feature1, style1, 1);
-      renderFeature(builder, feature2, style1, 1);
-      renderFeature(builder, feature3, style2, 1);
-      const skippedUids = {};
-      skippedUids[getUid(feature3)] = true;
-      execute(builder, skippedUids);
-      expect(fillCount).to.be(1);
-      expect(strokeCount).to.be(1);
-      expect(beginPathCount).to.be(1);
-    });
-
-    it('batches fill and stroke instructions for skipped features', function() {
-      renderFeature(builder, feature1, style1, 1);
-      renderFeature(builder, feature2, style1, 1);
-      renderFeature(builder, feature3, style2, 1);
-      const skippedUids = {};
-      skippedUids[getUid(feature1)] = true;
-      skippedUids[getUid(feature2)] = true;
-      execute(builder, skippedUids);
-      expect(fillCount).to.be(1);
-      expect(strokeCount).to.be(1);
-      expect(beginPathCount).to.be(1);
-    });
-
     it('does not batch when overlaps is set to true', function() {
       builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 1, true);
       renderFeature(builder, feature1, style1, 1);
@@ -263,7 +224,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
       renderFeature(builder, multipolygon, style, 1);
       renderFeature(builder, geometrycollection, style, 1);
       scaleTransform(transform, 0.1, 0.1);
-      execute(builder, {}, 1, true);
+      execute(builder, 1, true);
       expect(calls.length).to.be(9);
       expect(calls[0].geometry).to.be(point.getGeometry());
       expect(calls[0].feature).to.be(point);

test/spec/ol/renderer/canvas/vectorimage.test.js

@@ -38,7 +38,6 @@ describe('ol/renderer/canvas/VectorImageLayer', function() {
         layerStatesArray: [layer.getLayerState()],
         layerIndex: 0,
         extent: extent,
-        skippedFeatureUids: {},
         viewHints: [],
         viewState: {
           projection: projection,

test/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -190,7 +190,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       const replayGroup = {};
       renderer.replayGroup_ = replayGroup;
       replayGroup.forEachFeatureAtCoordinate = function(coordinate,
-        resolution, rotation, hitTolerance, skippedFeaturesUids, callback) {
+        resolution, rotation, hitTolerance, callback) {
         const feature = new Feature();
         callback(feature);
         callback(feature);
@@ -202,7 +202,6 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       const coordinate = [0, 0];
       const frameState = {
         layerStatesArray: [{}],
-        skippedFeatureUids: {},
         viewState: {
           resolution: 1,
           rotation: 0
@@ -228,7 +227,6 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       worldWidth = getWidth(projExtent);
       buffer = layer.getRenderBuffer();
       frameState = {
-        skippedFeatureUids: {},
         viewHints: [],
         viewState: {
           projection: projection,

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -314,7 +314,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       });
       renderer = new CanvasVectorTileLayerRenderer(layer);
       executorGroup.forEachFeatureAtCoordinate = function(coordinate,
-        resolution, rotation, hitTolerance, skippedFeaturesUids, callback) {
+        resolution, rotation, hitTolerance, callback) {
         const feature = new Feature();
         callback(feature);
         callback(feature);
@@ -326,7 +326,6 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       const coordinate = [0, 0];
       const frameState = {
         layerStatesArray: [{}],
-        skippedFeatureUids: {},
         viewState: {
           projection: getProjection('EPSG:3857'),
           resolution: 1,