diff --git a/examples/select-features.html b/examples/select-features.html index 9fd1180239..215ace4caa 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -3,7 +3,7 @@ layout: example.html title: Select Features shortdesc: Example of using the Select interaction. docs: > - Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.

+ Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold the Shift key to toggle the feature in the selection.

Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.

In this example, a listener is registered for the Select interaction's select event in order to update the selection status above. tags: "select, vector" diff --git a/examples/translate-features.html b/examples/translate-features.html index 05dbea4e4d..473582f8ca 100644 --- a/examples/translate-features.html +++ b/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 Shift key and select multiple features. + Then drag the features around to move them elsewhere on the map. tags: "drag, translate, feature, vector, editing" ---

diff --git a/src/ol/interaction/Translate.js b/src/ol/interaction/Translate.js index cabdb7b52e..c2b7efe110 100644 --- a/src/ol/interaction/Translate.js +++ b/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} [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} [features] Features contained in this collection will be able to be translated together. * @property {Array|function(import("../layer/Layer.js").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): 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