Merge pull request #11978 from ahocevar/snap-delta-optional

Add snapToPointer option

examples/modify-icon.html

@@ -4,7 +4,7 @@ title: Icon modification
 shortdesc: Example using a Modify interaction to edit an icon.
 docs: >
   The icon on this map can be dragged to modify its location.
-  <p>The Modify interaction can be configured with a `layer` option. With this option, hit detection will be used to determine the modification candidate.</p>
+  <p>The Modify interaction can be configured with a `hitDetection` option. With this option, the modification candidate will not be determined by the `pixelTolerance`, but match the visual appearance of the geometry.</p>
 tags: "vector, modify, icon, marker"
 ---
 <div id="map" class="map"></div>

src/ol/interaction/Modify.js

@@ -128,6 +128,8 @@ const ModifyEventType = {
  * provided, a vector source must be provided with the `source` option.
  * @property {boolean} [wrapX=false] Wrap the world horizontally on the sketch
  * overlay.
+ * @property {boolean} [snapToPointer=!hitDetection] The vertex, point or segment being modified snaps to the
+ * pointer coordinate when clicked within the `pixelTolerance`.
  */
 
 /**
@@ -386,6 +388,14 @@ class Modify extends PointerInteraction {
      * @type {Array<number>}
      */
     this.delta_ = [0, 0];
+
+    /**
+     * @private
+     */
+    this.snapToPointer_ =
+      options.snapToPointer === undefined
+        ? !this.hitDetection_
+        : options.snapToPointer;
   }
 
   /**
@@ -1163,8 +1173,10 @@ class Modify extends PointerInteraction {
         const vertexSegments = {};
         vertexSegments[getUid(closestSegment)] = true;
 
-        this.delta_[0] = vertex[0] - pixelCoordinate[0];
+        if (!this.snapToPointer_) {
-        this.delta_[1] = vertex[1] - pixelCoordinate[1];
+          this.delta_[0] = vertex[0] - pixelCoordinate[0];
+          this.delta_[1] = vertex[1] - pixelCoordinate[1];
+        }
         if (
           node.geometry.getType() === GeometryType.CIRCLE &&
           node.index === CIRCLE_CIRCUMFERENCE_INDEX

test/spec/ol/interaction/modify.test.js

@@ -208,6 +208,11 @@ describe('ol.interaction.Modify', function () {
       expect(rbushEntries[0].feature).to.be(feature);
       expect(modify.hitDetection_).to.be(layer);
     });
+
+    it('accepts a snapToPointer option', function () {
+      const modify = new Modify({source: source, snapToPointer: true});
+      expect(modify.snapToPointer_).to.be(true);
+    });
   });
 
   describe('vertex deletion', function () {
@@ -1039,6 +1044,37 @@ describe('ol.interaction.Modify', function () {
         pointFeature.getGeometry()
       );
     });
+
+    it('snaps to pointer by default', function () {
+      const modify = new Modify({
+        source: source,
+      });
+      map.addInteraction(modify);
+      source.clear();
+      const pointFeature = new Feature(new Point([0, 0]));
+      source.addFeature(pointFeature);
+      map.renderSync();
+      simulateEvent('pointerdown', 2, 2, null, 0);
+      simulateEvent('pointerdrag', 2, 2, null, 0);
+      simulateEvent('pointerup', 2, 2, null, 0);
+      expect(pointFeature.getGeometry().getCoordinates()).to.eql([2, -2]);
+    });
+
+    it('does not snap to pointer when snapToPointer is false', function () {
+      const modify = new Modify({
+        source: source,
+        snapToPointer: false,
+      });
+      map.addInteraction(modify);
+      source.clear();
+      const pointFeature = new Feature(new Point([0, 0]));
+      source.addFeature(pointFeature);
+      map.renderSync();
+      simulateEvent('pointerdown', 2, 2, null, 0);
+      simulateEvent('pointerdrag', 2, 2, null, 0);
+      simulateEvent('pointerup', 2, 2, null, 0);
+      expect(pointFeature.getGeometry().getCoordinates()).to.eql([0, 0]);
+    });
   });
 
   describe('#getOverlay', function () {