Merge pull request #10330 from greggian/modify-circle

Fix modifying circle geometries

src/ol/interaction/Modify.js

@@ -807,8 +807,8 @@ class Modify extends PointerInteraction {
     if (!this.condition_(evt)) {
       return false;
     }
-    this.handlePointerAtPixel_(evt.pixel, evt.map);
     const pixelCoordinate = evt.coordinate;
+    this.handlePointerAtPixel_(evt.pixel, evt.map, pixelCoordinate);
     this.dragSegments_.length = 0;
     this.modified_ = false;
     const vertexFeature = this.vertexFeature_;
@@ -916,16 +916,17 @@ class Modify extends PointerInteraction {
    */
   handlePointerMove_(evt) {
     this.lastPixel_ = evt.pixel;
-    this.handlePointerAtPixel_(evt.pixel, evt.map);
+    this.handlePointerAtPixel_(evt.pixel, evt.map, evt.coordinate);
   }
 
   /**
    * @param {import("../pixel.js").Pixel} pixel Pixel
    * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../coordinate.js").Coordinate=} opt_coordinate The pixel Coordinate.
    * @private
    */
-  handlePointerAtPixel_(pixel, map) {
+  handlePointerAtPixel_(pixel, map, opt_coordinate) {
-    const pixelCoordinate = map.getCoordinateFromPixel(pixel);
+    const pixelCoordinate = opt_coordinate || map.getCoordinateFromPixel(pixel);
     const projection = map.getView().getProjection();
     const sortByDistance = function(a, b) {
       return projectedDistanceToSegmentDataSquared(pixelCoordinate, a, projection) -

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

@@ -9,6 +9,7 @@ import LineString from '../../../../src/ol/geom/LineString.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import Polygon from '../../../../src/ol/geom/Polygon.js';
 import Modify, {ModifyEvent} from '../../../../src/ol/interaction/Modify.js';
+import Snap from '../../../../src/ol/interaction/Snap.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Event from '../../../../src/ol/events/Event.js';
@@ -737,4 +738,43 @@ describe('ol.interaction.Modify', function() {
     });
   });
 
+  describe('circle modification with snap', function() {
+    it('changes the circle radius and center', function() {
+      const circleFeature = new Feature(new Circle([10, 10], 20));
+      features.length = 0;
+      features.push(circleFeature);
+
+      const modify = new Modify({
+        features: new Collection(features)
+      });
+      map.addInteraction(modify);
+
+      const snap = new Snap({
+        features: new Collection(features),
+        pixelTolerance: 1
+      });
+      map.addInteraction(snap);
+
+      // Change center
+      simulateEvent('pointermove', 10, -10, null, 0);
+      simulateEvent('pointerdown', 10, -10, null, 0);
+      simulateEvent('pointermove', 5, -5, null, 0);
+      simulateEvent('pointerdrag', 5, -5, null, 0);
+      simulateEvent('pointerup', 5, -5, null, 0);
+
+      expect(circleFeature.getGeometry().getRadius()).to.equal(20);
+      expect(circleFeature.getGeometry().getCenter()).to.eql([5, 5]);
+
+      // Increase radius
+      simulateEvent('pointermove', 25, -4, null, 0);
+      simulateEvent('pointerdown', 25, -4, null, 0);
+      simulateEvent('pointermove', 30, -5, null, 0);
+      simulateEvent('pointerdrag', 30, -5, null, 0);
+      simulateEvent('pointerup', 30, -5, null, 0);
+
+      expect(circleFeature.getGeometry().getRadius()).to.equal(25);
+      expect(circleFeature.getGeometry().getCenter()).to.eql([5, 5]);
+    });
+  });
+
 });