@arcgis/core/views/draw/PolylineDrawAction.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type CursorUpdateEvent from "./CursorUpdateEvent.js";
import type DrawAction from "./DrawAction.js";
import type DrawCompleteEvent from "./DrawCompleteEvent.js";
import type VertexAddEvent from "./VertexAddEvent.js";
import type VertexRemoveEvent from "./VertexRemoveEvent.js";
import type { DrawingMode } from "./types.js";
import type { DrawActionProperties } from "./DrawAction.js";

export interface PolylineDrawActionProperties extends DrawActionProperties, Partial<Pick<PolylineDrawAction, "mode">> {}

export interface PolylineDrawActionEvents {
  /**
   * Fires when a vertex is added.
   *
   * @example
   * // fires when a vertex is added.
   * action.on("vertex-add", function (evt) {
   *   view.graphics.removeAll();
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   let graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  "vertex-add": VertexAddEvent;
  /**
   * Fires when a vertex is removed.
   *
   * @example
   * // Update the graphic on the view as vertex is removed
   * action.on("vertex-remove", function (evt) {
   *   view.graphics.removeAll();
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   let graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  "vertex-remove": VertexRemoveEvent;
  /**
   * Fires after the pointer moves on the view.
   *
   * @example
   * // Give a visual feedback to the user as the pointer moves on the view.
   * action.on("cursor-update", function (evt) {
   *   view.graphics.removeAll();
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   let graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  "cursor-update": CursorUpdateEvent;
  /**
   * Fires after the user has completed drawing a polyline.
   *
   * @example
   * // listen to PolylineDrawAction.draw-complete
   * // add the graphic representing the completed
   * // polyline to the view
   * action.on("draw-complete", function (evt) {
   *   removeGraphic(graphic);
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  "draw-complete": DrawCompleteEvent;
  /**
   * Fires in response to undo action or when [undo()](https://developers.arcgis.com/javascript/latest/references/core/views/draw/PolylineDrawAction/#undo) is called.
   *
   * @since 4.7
   * @example
   * // Update the graphic on the view as the last action was undone
   * action.on("undo", function (evt) {
   *   view.graphics.removeAll();
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   let graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  undo: VertexAddEvent | VertexRemoveEvent;
  /**
   * Fires in response to redo action or when [redo()](https://developers.arcgis.com/javascript/latest/references/core/views/draw/PolylineDrawAction/#redo) is called.
   *
   * @since 4.7
   * @example
   * // Update the graphic on the view as the last action was redone
   * action.on("redo", function (evt) {
   *   view.graphics.removeAll();
   *   let polyline = new Polyline({
   *     paths: evt.vertices,
   *     spatialReference: view.spatialReference
   *   });
   *   let graphic = createGraphic(polyline);
   *   view.graphics.add(graphic);
   * });
   */
  redo: VertexAddEvent | VertexRemoveEvent;
}

/**
 * This class uses different [events](https://developers.arcgis.com/javascript/latest/references/core/views/draw/PolylineDrawAction/#PolylineDrawActionEvents) to generate a set of vertices to create a new [Polyline](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polyline/)
 * geometry using [Draw](https://developers.arcgis.com/javascript/latest/references/core/views/draw/Draw/).
 * When [draw.create("polyline")](https://developers.arcgis.com/javascript/latest/references/core/views/draw/Draw/#create) is called, a reference to this class is
 * returned. You can listen to [events](https://developers.arcgis.com/javascript/latest/references/core/views/draw/PolylineDrawAction/#PolylineDrawActionEvents) on the PolylineDrawAction instance, which
 * allows users to create polylines that meet criteria specified by the developer.
 *
 * @since 4.5
 * @see [Sample - Draw non-intersecting line](https://developers.arcgis.com/javascript/latest/sample-code/draw-line/)
 * @example
 * function enableCreatePolyline(draw, view) {
 *   let action = draw.create("polyline");
 *
 *   // listen to PolylineDrawAction.vertex-add
 *   // Fires when the user clicks, or presses the "F" key
 *   // Can also fire when the "R" key is pressed to redo.
 *   action.on("vertex-add", function (evt) {
 *     createPolylineGraphic(evt.vertices);
 *   });
 *
 *   // listen to PolylineDrawAction.vertex-remove
 *   // Fires when the "Z" key is pressed to undo the
 *   // last added vertex
 *   action.on("vertex-remove", function (evt) {
 *     createPolylineGraphic(evt.vertices);
 *   });
 *
 *   // listen to PolylineDrawAction.cursor-update
 *   // fires when the pointer moves over the view
 *   action.on("cursor-update", function (evt) {
 *     createPolylineGraphic(evt.vertices);
 *   });
 *
 *   // listen to PolylineDrawAction.draw-complete
 *   // event to create a graphic when user double-clicks
 *   // on the view or presses the "Enter" key
 *   action.on("draw-complete", function (evt) {
 *     createPolylineGraphic(evt.vertices);
 *   });
 * }
 *
 * function createPolylineGraphic(vertices){
 *   view.graphics.removeAll();
 *   let polyline = {
 *     type: "polyline", // autocasts as Polyline
 *     paths: vertices,
 *     spatialReference: view.spatialReference
 *   };
 *
 *   let graphic = new Graphic({
 *     geometry: polyline,
 *     symbol: {
 *       type: "simple-line", // autocasts as SimpleLineSymbol
 *       color: [4, 90, 141],
 *       width: 3,
 *       cap: "round",
 *       join: "round"
 *     }
 *  });
 *  view.graphic.add(graphic);
 * }
 */
export default class PolylineDrawAction extends DrawAction {
  /**
   * @deprecated
   * Do not directly reference this property.
   * Use EventNames and EventTypes helpers from \@arcgis/core/Evented
   */
  "@eventTypes": PolylineDrawActionEvents;
  constructor(properties?: PolylineDrawActionProperties);
  /**
   * The drawing mode. It is only relevant when the action is first created.
   * Its value cannot be changed during the action lifecycle.
   *
   * **Possible Values**
   *
   * Value | Description |
   * ----- | ----------- |
   * hybrid | Vertices are added while the pointer is clicked or dragged.
   * freehand | Vertices are added while the pointer is dragged.
   * click | Vertices are added when the pointer is clicked.
   *
   * @default "hybrid"
   * @since 4.7
   * @example draw.create("polyline", {mode: "freehand"});
   */
  accessor mode: DrawingMode;
  /**
   * Completes drawing the polyline geometry and fires the [@draw-complete](https://developers.arcgis.com/javascript/latest/references/core/views/draw/PolylineDrawAction/#event-draw-complete) event.
   * Call this method if the drawing logic needs to be completed other than by double-clicking or pressing the "Enter" key.
   */
  complete(): void;
}