Merge pull request #11198 from mike-000/patch-17

Add condition option to Extent interaction

examples/extent-interaction.js

@@ -4,6 +4,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
 const vectorSource = new VectorSource({
   url: 'data/geojson/countries.geojson',
@@ -26,18 +27,5 @@ const map = new Map({
   }),
 });
 
-const extent = new ExtentInteraction();
+const extent = new ExtentInteraction({condition: shiftKeyOnly});
 map.addInteraction(extent);
-extent.setActive(false);
-
-//Enable interaction by holding shift
-window.addEventListener('keydown', function (event) {
-  if (event.keyCode == 16) {
-    extent.setActive(true);
-  }
-});
-window.addEventListener('keyup', function (event) {
-  if (event.keyCode == 16) {
-    extent.setActive(false);
-  }
-});

src/ol/interaction/Extent.js

@@ -9,6 +9,7 @@ import Point from '../geom/Point.js';
 import PointerInteraction from './Pointer.js';
 import VectorLayer from '../layer/Vector.js';
 import VectorSource from '../source/Vector.js';
+import {always} from '../events/condition.js';
 import {boundingExtent, getArea} from '../extent.js';
 import {
   closestOnSegment,
@@ -22,6 +23,10 @@ import {toUserExtent} from '../proj.js';
 
 /**
  * @typedef {Object} Options
+ * @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.
+ * Default is {@link module:ol/events/condition~always}.
  * @property {import("../extent.js").Extent} [extent] Initial extent. Defaults to no
  * initial extent.
  * @property {import("../style/Style.js").StyleLike} [boxStyle]
@@ -87,6 +92,13 @@ class Extent extends PointerInteraction {
 
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
+    /**
+     * Condition
+     * @type {import("../events/condition.js").Condition}
+     * @private
+     */
+    this.condition_ = options.condition ? options.condition : always;
+
     /**
      * Extent of the drawn box
      * @type {import("../extent.js").Extent}
@@ -280,7 +292,7 @@ class Extent extends PointerInteraction {
    * @return {boolean} `false` to stop event propagation.
    */
   handleEvent(mapBrowserEvent) {
-    if (!mapBrowserEvent.originalEvent) {
+    if (!mapBrowserEvent.originalEvent || !this.condition_(mapBrowserEvent)) {
       return true;
     }
     //display pointer (if not dragging)