Make dragVertexTolerance configurable

changelog/upgrade-notes.md

@@ -9,6 +9,8 @@ For better drawing experience, especially on mobile devices, two changes were ma
  1. On long press, the current vertex can be moved to its desired position.
  2. When moving the mouse or panning the map, no draw cursor is shown, and the geometry being drawn is not updated. But because of 1., the draw cursor will appear on long press.
 
+To get the old behavior, configure the `Drag` interaction with `dragVertexDelay: 0`.
+
 #### Changes in proj4 integration
 
 Because relying on a globally available proj4 is not practical with ES modules, we have made a change to the way we integrate proj4:

externs/olx.js

@@ -2356,6 +2356,7 @@ olx.interaction.DragZoomOptions.prototype.out;
  * @typedef {{clickTolerance: (number|undefined),
  *     features: (ol.Collection.<ol.Feature>|undefined),
  *     source: (ol.source.Vector|undefined),
+ *     dragVertexDelay: (number|undefined),
  *     snapTolerance: (number|undefined),
  *     type: (ol.geom.GeometryType|string),
  *     stopClick: (boolean|undefined),
@@ -2401,6 +2402,14 @@ olx.interaction.DrawOptions.prototype.features;
 olx.interaction.DrawOptions.prototype.source;
 
 
+/**
+ * Delay in milliseconds after pointerdown before the current vertex can be
+ * dragged to its exact position. Default is 500 ms.
+ * @type {number|undefined}
+ */
+olx.interaction.DrawOptions.prototype.dragVertexDelay;
+
+
 /**
  * Pixel distance for snapping to the drawing finish. Default is `12`.
  * @type {number|undefined}

src/ol/interaction/Draw.js

@@ -205,6 +205,12 @@ const Draw = function(options) {
    */
   this.geometryFunction_ = geometryFunction;
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.dragVertexDelay_ = options.dragVertexDelay !== undefined ? options.dragVertexDelay : 500;
+
   /**
    * Finish coordinate for the feature (first point for polygons, last point for
    * linestrings).
@@ -346,7 +352,7 @@ Draw.handleEvent = function(event) {
   let pass = true;
   if (this.lastDragTime_ && event.type === MapBrowserEventType.POINTERDRAG) {
     const now = Date.now();
-    if (now - this.lastDragTime_ >= 500) {
+    if (now - this.lastDragTime_ >= this.dragVertexDelay_) {
       this.downPx_ = event.pixel;
       this.shouldHandle_ = !this.freehand_;
       move = true;
@@ -368,7 +374,7 @@ Draw.handleEvent = function(event) {
     pass = false;
   } else if (move) {
     pass = event.type === MapBrowserEventType.POINTERMOVE;
-    if (pass && this.freehand_) {
+    if (pass && this.freehand_ || this.dragVertexDelay_ === 0) {
       pass = this.handlePointerMove_(event);
     } else if (event.type === MapBrowserEventType.POINTERDRAG && !this.downTimeout_) {
       this.handlePointerMove_(event);
@@ -401,7 +407,7 @@ Draw.handleDownEvent_ = function(event) {
     this.downTimeout_ = setTimeout(function() {
       this.handlePointerMove_(new MapBrowserPointerEvent(
         MapBrowserEventType.POINTERMOVE, event.map, event.pointerEvent, event.frameState));
-    }.bind(this), 500);
+    }.bind(this), this.dragVertexDelay_);
     this.downPx_ = event.pixel;
     return true;
   } else {