diff --git a/examples/draw-and-modify-features.js b/examples/draw-and-modify-features.js index 4da34fced8..d28118d920 100644 --- a/examples/draw-and-modify-features.js +++ b/examples/draw-and-modify-features.js @@ -71,4 +71,9 @@ typeSelect.onchange = function() { addInteractions(); }; +// Avoid context menu for long taps when editing on mobile +map.getTargetElement().oncontextmenu = function(e) { + e.preventDefault(); +}; + addInteractions(); diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index 0fb61d448e..8371f4e31a 100644 --- a/src/ol/interaction/Draw.js +++ b/src/ol/interaction/Draw.js @@ -56,6 +56,12 @@ const Draw = function(options) { */ this.downPx_ = null; + /** + * @type {number} + * @private + */ + this.lastDragTime_; + /** * @type {boolean} * @private @@ -255,7 +261,8 @@ const Draw = function(options) { wrapX: options.wrapX ? options.wrapX : false }), style: options.style ? options.style : - Draw.getDefaultStyleFunction() + Draw.getDefaultStyleFunction(), + updateWhileInteracting: true }); /** @@ -323,7 +330,18 @@ Draw.prototype.setMap = function(map) { */ Draw.handleEvent = function(event) { this.freehand_ = this.mode_ !== Draw.Mode_.POINT && this.freehandCondition_(event); + let move = event.type === MapBrowserEventType.POINTERMOVE; let pass = true; + if (this.lastDragTime_ && event.type === MapBrowserEventType.POINTERDRAG) { + const now = Date.now(); + if (now - this.lastDragTime_ >= 500) { + this.downPx_ = event.pixel; + this.shouldHandle_ = !this.freehand_; + move = true; + } else { + this.lastDragTime_ = undefined; + } + } if (this.freehand_ && event.type === MapBrowserEventType.POINTERDRAG && this.sketchFeature_ !== null) { @@ -332,11 +350,12 @@ Draw.handleEvent = function(event) { } else if (this.freehand_ && event.type === MapBrowserEventType.POINTERDOWN) { pass = false; - } else if (event.type === MapBrowserEventType.POINTERMOVE) { - pass = this.handlePointerMove_(event); + } else if (move) { + pass = event.type === MapBrowserEventType.POINTERMOVE && this.handlePointerMove_(event); } else if (event.type === MapBrowserEventType.DBLCLICK) { pass = false; } + return PointerInteraction.handleEvent.call(this, event) && pass; }; @@ -349,6 +368,7 @@ Draw.handleEvent = function(event) { */ Draw.handleDownEvent_ = function(event) { this.shouldHandle_ = !this.freehand_; + this.lastDragTime_ = Date.now(); if (this.freehand_) { this.downPx_ = event.pixel;