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

Add snapToPointer option
This commit is contained in:
Andreas Hocevar
2021-02-06 12:57:17 +01:00
committed by GitHub
3 changed files with 51 additions and 3 deletions

View File

@@ -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>

View File

@@ -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];
this.delta_[1] = vertex[1] - pixelCoordinate[1];
if (!this.snapToPointer_) {
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

View File

@@ -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 () {