Separate appendCoordinates function from extend

examples/draw-and-extend-features.html

@@ -1,12 +1,12 @@
 ---
 layout: example.html
-title: Draw and Extend Features
-shortdesc: Example of using the extend function of ol/interaction/Draw interaction.
+title: Draw and Append Features
+shortdesc: Example of using the appendCoordinates function of ol/interaction/Draw interaction.
 docs: >
-  Example of using the the extend function of Draw interaction. Select a geometry type from the
-  dropdown above to start drawing. To finish drawing, click the last
-  point. Click the green LineString Feature to extend coordinates to your drawing.
-  Extending is supported for drawing LineStrings and Polygons.
+  Example of using the the appendCoordinates function of Draw interaction. Select a geometry type from the
+  dropdown above to start drawing. To finish drawing, click the last point.
+  Click the green LineString Feature to append its coordinates to your drawing.
+  Appending is supported for drawing LineStrings and Polygons.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>

examples/draw-and-extend-features.js

@@ -21,7 +21,7 @@ sampleFeatures.push(
       [-12000000, 4600000],
       [-12000000, 4000000],
       [-10000000, 5600000],
-      [-9000000,  3000000],
+      [-9000000, 3000000],
       [-10000000, 4000000],
       [-11000000, 3000000],
       [-13000000, 4000000],
@@ -77,7 +77,7 @@ map.on('click', (event) => {
     // In this demo we remove the new point that was clicked,
     // and add the whole feature instead:
     draw.removeLastPoint();
-    draw.extend(clickedFeature);
+    draw.appendCoordinates(clickedFeature.getGeometry().getCoordinates());
   }
 });
 

src/ol/interaction/Draw.js

@@ -903,17 +903,17 @@ class Draw extends PointerInteraction {
   }
 
   /**
-   * Extend an existing geometry by adding additional points. This only works
-   * when drawing LineStrings or Polygons. Extending supports only input
-   * features with `LineString` geometries, where the interaction will
-   * extend lines by adding points to the end of the coordinates array.
-   * @param {!Feature<LineString>} feature Feature to be extended.
+   * Extend the geometry that is being drawn, by  appending the linear coordinates
+   * given as the parameter to the coordinate array of currently drawn feature..
+   * This can be used when drawing LineStrings or Polygons. Extending supports
+   * only linear coordinates, such as the coordinates from a LineString
+   * or a LinearRing of a Polygon.
+   * @param {!LineCoordType} coordinateExtension Linear coordinates to be appended into
+   * the coordinate array.
    * @api
    */
-  extend(feature) {
-    const lineStringGeometry = feature.getGeometry();
-    const extendCoordinates = lineStringGeometry.getCoordinates();
-    const ending = extendCoordinates[extendCoordinates.length - 1].slice();
+  appendCoordinates(coordinateExtension) {
+    const ending = coordinateExtension[coordinateExtension.length - 1].slice();
     const mode = this.mode_;
 
     let coordinates = [];
@@ -925,9 +925,9 @@ class Draw extends PointerInteraction {
       return;
     }
 
-    // (1) Remove last coordinate, (2) extend coordinate list and (3) clone last coordinate
+    // (1) Remove last coordinate, (2) append coordinate list and (3) clone last coordinate
     coordinates.pop();
-    Array.prototype.push.apply(coordinates, extendCoordinates);
+    Array.prototype.push.apply(coordinates, coordinateExtension);
     coordinates.push(ending);
 
     // Update geometry and sketch line
@@ -945,6 +945,25 @@ class Draw extends PointerInteraction {
     this.updateSketchFeatures_();
   }
 
+  /**
+   * Extend an existing geometry by adding additional points. This only works
+   * on features with `LineString` geometries, where the interaction will
+   * extend lines by adding points to the end of the coordinates array.
+   * @param {!Feature<LineString>} feature Feature to be extended.
+   * @api
+   */
+  extend(feature) {
+    const geometry = feature.getGeometry();
+    const lineString = geometry;
+    this.sketchFeature_ = feature;
+    this.sketchCoords_ = lineString.getCoordinates();
+    const last = this.sketchCoords_[this.sketchCoords_.length - 1];
+    this.finishCoordinate_ = last.slice();
+    this.sketchCoords_.push(last.slice());
+    this.updateSketchFeatures_();
+    this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_));
+  }
+
   /**
    * Redraw the sketch features.
    * @private