diff --git a/examples/draw-features.html b/examples/draw-features.html index 281d725a6a..ce1c480540 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(); diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index 0d8c9c2118..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) { + } else if (move && this.getPointerCount() < 2) { pass = event.type === MapBrowserEventType.POINTERMOVE; if (pass && this.freehand_) { this.handlePointerMove_(event); @@ -603,34 +610,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(); } @@ -643,6 +653,7 @@ class Draw extends PointerInteraction { * @private */ handlePointerMove_(event) { + this.pointerType_ = event.originalEvent.pointerType; if ( this.downPx_ && ((!this.freehand_ && this.shouldHandle_) || @@ -884,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); }