Merge pull request #12297 from mike-000/patch-1

Add condition option to Translate interaction

src/ol/interaction/Translate.js

@@ -6,6 +6,7 @@ import Event from '../events/Event.js';
 import InteractionProperty from './Property.js';
 import PointerInteraction from './Pointer.js';
 import {TRUE} from '../functions.js';
+import {always} from '../events/condition.js';
 import {getChangeEventType} from '../Object.js';
 import {includes} from '../array.js';
 
@@ -43,6 +44,10 @@ const TranslateEventType = {
 
 /**
  * @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 {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 {Array<import("../layer/Layer.js").default>|function(import("../layer/Layer.js").default): boolean} [layers] A list of layers from which features should be
@@ -175,6 +180,12 @@ class Translate extends PointerInteraction {
      */
     this.hitTolerance_ = options.hitTolerance ? options.hitTolerance : 0;
 
+    /**
+     * @private
+     * @type {import("../events/condition.js").Condition}
+     */
+    this.condition_ = options.condition ? options.condition : always;
+
     /**
      * @type {import("../Feature.js").default}
      * @private
@@ -193,6 +204,9 @@ class Translate extends PointerInteraction {
    * @return {boolean} If the event was consumed.
    */
   handleDownEvent(event) {
+    if (!event.originalEvent || !this.condition_(event)) {
+      return false;
+    }
     this.lastFeature_ = this.featuresAtPixel_(event.pixel, event.map);
     if (!this.lastCoordinate_ && this.lastFeature_) {
       this.startCoordinate_ = event.coordinate;

test/browser/spec/ol/interaction/translate.test.js

@@ -10,6 +10,7 @@ import Translate, {
 import VectorLayer from '../../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../../src/ol/source/Vector.js';
 import View from '../../../../../src/ol/View.js';
+import {shiftKeyOnly} from '../../../../../src/ol/events/condition.js';
 
 describe('ol.interaction.Translate', function () {
   let target, map, source, features;
@@ -256,6 +257,39 @@ describe('ol.interaction.Translate', function () {
     });
   });
 
+  describe('moving features, with condition option', function () {
+    let translate;
+
+    beforeEach(function () {
+      translate = new Translate({condition: shiftKeyOnly});
+      map.addInteraction(translate);
+    });
+
+    it('moves targeted feature when condition is met', function () {
+      const events = trackEvents(features[0], translate);
+
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20, true);
+      simulateEvent('pointerdrag', 50, -40);
+      simulateEvent('pointerup', 50, -40);
+      expect(features[0].getGeometry().getCoordinates()).to.eql([50, 40]);
+
+      validateEvents(events, [features[0]]);
+    });
+
+    it('does not move feature when condition is not met', function () {
+      const events = trackEvents(features[0], translate);
+
+      simulateEvent('pointermove', 20, 30);
+      simulateEvent('pointerdown', 20, 30);
+      simulateEvent('pointerdrag', 50, -40);
+      simulateEvent('pointerup', 50, -40);
+      expect(features[1].getGeometry().getCoordinates()).to.eql([20, -30]);
+
+      expect(events).to.be.empty();
+    });
+  });
+
   describe('changes css cursor', function () {
     let element, translate;