From 23a544aa30507f879c55d62771c0fe89dd0ed40a Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 29 Oct 2020 20:00:12 +0100 Subject: [PATCH 1/4] Only draw when one pointer is active --- src/ol/interaction/Draw.js | 57 ++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index 0d8c9c2118..d92049fbb7 100644 --- a/src/ol/interaction/Draw.js +++ b/src/ol/interaction/Draw.js @@ -535,7 +535,7 @@ class Draw extends PointerInteraction { event.type === MapBrowserEventType.POINTERDOWN ) { pass = false; - } else if (move) { + } else if (move && this.getPointerCount() === 1) { pass = event.type === MapBrowserEventType.POINTERMOVE; if (pass && this.freehand_) { this.handlePointerMove_(event); @@ -603,34 +603,37 @@ class Draw extends PointerInteraction { handleUpEvent(event) { let pass = true; - if (this.downTimeout_) { - clearTimeout(this.downTimeout_); - this.downTimeout_ = undefined; - } - - this.handlePointerMove_(event); - - const circleMode = this.mode_ === Mode.CIRCLE; - - if (this.shouldHandle_) { - if (!this.finishCoordinate_) { - this.startDrawing_(event); - if (this.mode_ === Mode.POINT) { - this.finishDrawing(); - } - } else if (this.freehand_ || circleMode) { - this.finishDrawing(); - } else if (this.atFinish_(event)) { - if (this.finishCondition_(event)) { - this.finishDrawing(); - } - } else { - this.addToDrawing_(event.coordinate); + if (this.getPointerCount() === 0) { + if (this.downTimeout_) { + clearTimeout(this.downTimeout_); + this.downTimeout_ = undefined; + } + + this.handlePointerMove_(event); + + const circleMode = this.mode_ === Mode.CIRCLE; + + if (this.shouldHandle_) { + if (!this.finishCoordinate_) { + this.startDrawing_(event); + if (this.mode_ === Mode.POINT) { + this.finishDrawing(); + } + } else if (this.freehand_ || circleMode) { + this.finishDrawing(); + } else if (this.atFinish_(event)) { + if (this.finishCondition_(event)) { + this.finishDrawing(); + } + } else { + this.addToDrawing_(event.coordinate); + } + pass = false; + } else if (this.freehand_) { + this.abortDrawing(); } - pass = false; - } else if (this.freehand_) { - this.abortDrawing(); } + if (!pass && this.stopClick_) { event.stopPropagation(); } From 48f357d5185bb219861c2f1e80b1f15e190d5980 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 29 Oct 2020 22:06:51 +0100 Subject: [PATCH 2/4] Visual feedback for removeLastPoint() on touch devices --- src/ol/interaction/Draw.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index d92049fbb7..8f8e502dec 100644 --- a/src/ol/interaction/Draw.js +++ b/src/ol/interaction/Draw.js @@ -215,6 +215,13 @@ class Draw extends PointerInteraction { */ this.lastDragTime_; + /** + * Pointer type of the last pointermove event + * @type {string} + * @private + */ + this.pointerType_; + /** * @type {boolean} * @private @@ -535,7 +542,7 @@ class Draw extends PointerInteraction { event.type === MapBrowserEventType.POINTERDOWN ) { pass = false; - } else if (move && this.getPointerCount() === 1) { + } else if (move && this.getPointerCount() < 2) { pass = event.type === MapBrowserEventType.POINTERMOVE; if (pass && this.freehand_) { this.handlePointerMove_(event); @@ -646,6 +653,7 @@ class Draw extends PointerInteraction { * @private */ handlePointerMove_(event) { + this.pointerType_ = event.originalEvent.pointerType; if ( this.downPx_ && ((!this.freehand_ && this.shouldHandle_) || @@ -887,14 +895,26 @@ class Draw extends PointerInteraction { if (this.mode_ === Mode.LINE_STRING) { coordinates = /** @type {LineCoordType} */ (this.sketchCoords_); coordinates.splice(-2, 1); - this.geometryFunction_(coordinates, geometry, projection); if (coordinates.length >= 2) { this.finishCoordinate_ = coordinates[coordinates.length - 2].slice(); + if (this.pointerType_ !== 'mouse') { + const finishCoordinate = this.finishCoordinate_.slice(); + coordinates.pop(); + coordinates.push(finishCoordinate); + this.sketchPoint_.setGeometry(new Point(finishCoordinate)); + } } + this.geometryFunction_(coordinates, geometry, projection); } else if (this.mode_ === Mode.POLYGON) { coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0]; coordinates.splice(-2, 1); sketchLineGeom = this.sketchLine_.getGeometry(); + if (this.pointerType_ !== 'mouse') { + const finishCoordinate = coordinates[coordinates.length - 2].slice(); + coordinates.pop(); + coordinates.push(finishCoordinate); + this.sketchPoint_.setGeometry(new Point(finishCoordinate)); + } sketchLineGeom.setCoordinates(coordinates); this.geometryFunction_(this.sketchCoords_, geometry, projection); } From 4980e58db095cd8da40f0bbe7ab7ed4f7f9a38a7 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 29 Oct 2020 22:55:08 +0100 Subject: [PATCH 3/4] Add undo to draw-features example --- examples/draw-features.html | 7 ++++--- examples/draw-features.js | 4 ++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/draw-features.html b/examples/draw-features.html index 281d725a6a..cd43dff850 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -6,17 +6,18 @@ docs: > Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and circles, hold - the `Shift` key. + the `Shift` key. To remove the last point of a line or polygon, press "Undo". tags: "draw, edit, freehand, vector" ---
- - +
diff --git a/examples/draw-features.js b/examples/draw-features.js index cefff36c35..fdac072ede 100644 --- a/examples/draw-features.js +++ b/examples/draw-features.js @@ -45,4 +45,8 @@ typeSelect.onchange = function () { addInteraction(); }; +document.getElementById('undo').addEventListener('click', function () { + draw.removeLastPoint(); +}); + addInteraction(); From 4fe8c541465556de5e209d7518db23ba96e9c2a1 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Mon, 2 Nov 2020 11:14:25 +0100 Subject: [PATCH 4/4] Input is a void element Co-authored-by: Tim Schaub --- examples/draw-features.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/draw-features.html b/examples/draw-features.html index cd43dff850..ce1c480540 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -19,5 +19,5 @@ tags: "draw, edit, freehand, vector" - +