Merge pull request #11698 from ahocevar/draw-pointer

Draw pointer improvements

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"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label for="type">Geometry type &nbsp;</label>
-  <select id="type">
+  <label for="type">Geometry type: &nbsp;</label>
+  <select class="form-control mr-2 mb-2 mt-2" id="type">
     <option value="Point">Point</option>
     <option value="LineString">LineString</option>
     <option value="Polygon">Polygon</option>
     <option value="Circle">Circle</option>
     <option value="None">None</option>
   </select>
+  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
 </form>

examples/draw-features.js

@@ -45,4 +45,8 @@ typeSelect.onchange = function () {
   addInteraction();
 };
 
+document.getElementById('undo').addEventListener('click', function () {
+  draw.removeLastPoint();
+});
+
 addInteraction();

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);
     }