Merge pull request #11978 from ahocevar/snap-delta-optional
Add snapToPointer option
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user