Merge pull request #12647 from mike-000/patch-11

Remove Translate option conflicts and update documentation

examples/select-features.html

@@ -3,7 +3,7 @@ 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>
+  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 the <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"

examples/translate-features.html

@@ -3,7 +3,9 @@ layout: example.html
 title: Translate Features
 shortdesc: Example of a translate features interaction.
 docs: >
-  This example demonstrates how the translate and select interactions can be used together.  Zoom in to an area of interest and click to select a feature.  Then drag the feature around to move it elsewhere on the map.
+  This example demonstrates how the translate and select interactions can be used together.
+  Zoom in to an area of interest and click to select a feature or hold the <code>Shift</code> key and select multiple features.
+  Then drag the features around to move them elsewhere on the map.
 tags: "drag, translate, feature, vector, editing"
 ---
 <div id="map" class="map"></div>

src/ol/interaction/Translate.js

@@ -47,17 +47,17 @@ const TranslateEventType = {
  * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
  * boolean to indicate whether that event should be handled.
  * Default is {@link module:ol/events/condition.always}.
- * @property {Collection<import("../Feature.js").default>} [features] Only features contained in this collection will be able to be translated. If
- * not specified, all features on the map will be able to be translated.
+ * @property {Collection<import("../Feature.js").default>} [features] Features contained in this collection will be able to be translated together.
  * @property {Array<import("../layer/Layer.js").default>|function(import("../layer/Layer.js").default<import("../source/Source").default>): boolean} [layers] A list of layers from which features should be
  * translated. 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 translatable. If the option is
  * absent, all visible layers will be considered translatable.
+ * Not used if `features` is provided.
  * @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
- * translated or `false` otherwise.
+ * translated or `false` otherwise. Not used if `features` is provided.
  * @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features.
  */
@@ -123,6 +123,9 @@ export class TranslateEvent extends Event {
 /**
  * @classdesc
  * Interaction for translating (moving) features.
+ * If you want to translate multiple features in a single action (for example,
+ * the collection used by a select interaction), construct the interaction with
+ * the `features` option.
  *
  * @fires TranslateEvent
  * @api
@@ -173,7 +176,7 @@ class Translate extends PointerInteraction {
 
     /** @type {function(import("../layer/Layer.js").default<import("../source/Source").default>): boolean} */
     let layerFilter;
-    if (options.layers) {
+    if (options.layers && !this.features_) {
       if (typeof options.layers === 'function') {
         layerFilter = options.layers;
       } else {
@@ -196,7 +199,7 @@ class Translate extends PointerInteraction {
      * @private
      * @type {FilterFunction}
      */
-    this.filter_ = options.filter ? options.filter : TRUE;
+    this.filter_ = options.filter && !this.features_ ? options.filter : TRUE;
 
     /**
      * @private