Skip To ContentArcGIS for DevelopersSign In Dashboard
require(["esri/widgets/Sketch"], function(Sketch) { /* code goes here */ });
Class: esri/widgets/Sketch
Inheritance: Sketch Widget Accessor
Since: ArcGIS API for JavaScript 4.10

Sketch widget provides a simple UI for creating and updating graphics on a MapView or a SceneView. This significantly minimizes the code required for working with graphics in the view. It is intended to be used with graphics stored in its layer property.

By default, the Sketch widget provides out-of-the-box tools for creating and updating graphics with point, polyline, polygon, rectangle and circle geometries.

sketch-geometries

Known Limitations

  • Graphics with polyline or polygon geometries can not be rotated or scaled in a SceneView.
  • Graphics with geometries where hasZ is true will be ignored by update() in a SceneView.
  • Multipoint geometry can only be created in a MapView.

Pointer and keyboard gestures for creating graphics with different geometries are described in the tables below.

Creating point graphics

GestureAction
Left-clickAdds a point graphic at the pointer location.
CAdds a point graphic at the pointer location.

Creating polyline and polygon graphics

GestureAction
Left-clickAdds a vertex at the pointer location.
Left-dragAdds a vertex for each pointer move.
FAdds a vertex to the polyline or polygon graphic.
CCompletes the polyline or polygon graphic sketch.
ZIncrementally undo actions recorded in the stack.
RIncrementally redo actions recorded in the stack.
Spacebar+Left-dragPan the view while creating a polyline or polygon graphic.
Left-click on the first vertexCompletes the polygon graphic sketch.

Creating polygon graphics with predefined shapes

The following keyboard shortcuts apply when creating polygon graphics with predefined shapes.

GestureAction
Left-click+DragCreates a rectangle graphic with dimensions based on the bounding box between initial click and cursor location. Creates a circle graphic with radius based on the distance between initial click and cursor location.
Ctrl+Left-click+DragChanges the shape from a rectangle to a square or from a circle to an ellipse.
Alt+Left-click+DragCreates a rectangle graphic with a center at initial click, and dimensions based on the distance between the initial click to the cursor location. Creates a circle graphic with a radius based on the bounding box between the initial click and the cursor location.
Ctrl+Alt+Left-click+DragCombines the behavior described above.

Updating graphics

The Sketch widget provides users with the ability to move, rotate, scale or reshape graphics during an update operation. To begin updating, Left-click on a graphic. Use Shift+Left-click to add more graphics to the selection, for bulk updating. Once graphics are selected, the following actions can be performed.

GestureActionExample
Left-click on a graphicSelect a graphic to move, rotate or scale.Select a graphic
Shift+Left-click graphicsSelect multiple graphics to move, rotate or scale.Select graphics
Drag graphicMove the selected graphic.Drag the graphic
Drag rotate handleRotate the selected graphic.Rotate the graphic
Drag scale handleScale the selected graphic.Scale the graphic
ZIncrementally undo actions recorded in the stack.Undo update
RIncrementally redo actions recorded in the stack.Redo update
Left-click on view (not the graphic)Complete the graphic update.Sketch update complete
Press Delete keyRemove the selected graphic(s) from the layer.Sketch delete graphic

The following update operations can be performed on a single polyline or polygon graphic:

GestureActionExample
Left-click on a graphicSelect a graphic to move or reshape.Select a graphic
Drag graphicMove the selected graphic.Drag the graphic
Left-click on a ghost vertexAdd a new vertex.Add a vertex
Left-click on a vertexSelect a vertex.Select a vertex
Ctrl+Left-click on verticesSelect or unselect multiple vertices.Select vertices
Drag vertexMove the selected vertex or vertices.Drag vertices
Right-click on a vertexDelete a vertex.Delete a vertex
Select multiple vertices and press Backspace or Delete keyDelete multiple vertices.Delete vertices

The following update operations can be performed on a single graphic with point geometry in a SceneView, if the graphic uses a 3D object symbol layer:

GestureActionExample
Left-click on a graphicSelect a graphic to move, rotate or scale.Select a graphic
Drag inner handleMove the selected graphic.Drag the graphic
Drag outer handle sidewaysRotate the selected graphic.Rotate the graphic
Drag outer handle inwards or outwardsScale the selected graphic.Scale the graphic
For information about gaining full control of widget styles, see the Styling topic.
See also:
Example:
// Create a new instance of sketch widget and set
// its required parameters
var sketch = new Sketch({
  layer: graphicsLayer,
  view: view
});

// Listen to sketch widget's create event.
sketch.on("create", function(event) {
  // check if the create event's state has changed to complete indicating
  // the graphic create operation is completed.
  if (event.state === "complete") {
    // remove the graphic from the layer. Sketch adds
    // the completed graphic to the layer by default.
    polygonGraphicsLayer.remove(event.graphic);

    // use the graphic.geometry to query features that intersect it
    selectFeatures(event.graphic.geometry);
  }
});

Constructors

new Sketch(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Example:
// typical usage
var sketch = new Sketch({
  layer: layer,
  view: view
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
String

When creating new graphics (for example after create() has been called), this property reflects the create tool being used.

more details
more detailsSketch
String[]

Property controlling the visibility and order of create tool buttons.

more details
more detailsSketch
String|HTMLElement

The ID or node representing the DOM element containing the widget.

more details
more detailsWidget
Graphic

The graphic that is being created.

more details
more detailsSketch
String

The name of the class.

more details
more detailsAccessor
Object

Default update options set for the Sketch widget.

more details
more detailsSketch
Boolean

When true, this property indicates whether the widget has been destroyed.

more details
more detailsWidget
String

The Sketch widget's default CSS icon class.

more details
more detailsSketch
String

The unique ID assigned to the widget when the widget is created.

more details
more detailsWidget
String

The Sketch widget's default label.

more details
more detailsSketch
GraphicsLayer

The GraphicsLayer associated with the Sketch widget.

more details
more detailsSketch
String

Determines the layout/orientation of the Sketch widget.

more details
more detailsSketch
String

The Sketch widget's state.

more details
more detailsSketch
Collection<Graphic>

An array of graphics that are being updated by the Sketch widget.

more details
more detailsSketch
MapView|SceneView

A reference to the MapView or SceneView.

more details
more detailsSketch
SketchViewModel

The view model for the Sketch widget.

more details
more detailsSketch

Property Details

activeTool Stringreadonly

When creating new graphics (for example after create() has been called), this property reflects the create tool being used. When updating graphics (for example after update() has been called), this property reflects the update tool being used. If no create or update operation is in progress, this is null.

Possible Values: point | polyline | polygon | circle | rectangle | move | transform | reshape

availableCreateTools String[]
Since: ArcGIS API for JavaScript 4.12

Property controlling the visibility and order of create tool buttons.

Default Value:["point", "polyline", "polygon", "rectangle", "circle"]

The ID or node representing the DOM element containing the widget. This property can only be set once.

createGraphic Graphicreadonly

The graphic that is being created.

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

defaultUpdateOptions Objectreadonly
Since: ArcGIS API for JavaScript 4.11

Default update options set for the Sketch widget. Update options set on this property will be overwritten if the update options are changed when update() method is called.

Properties:
tool String
optional

Name of the update tool. The default tool is transform for graphics with polygon and polyline geometries and move for graphics with point and multipoint geometries. However, if a graphic with point geometry uses a 3D object symbol layer, the default tool is transform.

enableRotation Boolean
optional
Default Value:true

Indicates if the rotation operation will be enabled when updating graphics. Only applies if tool is transform.

enableScaling Boolean
optional
Default Value:true

Indicates if the scale operation will be enabled when updating graphics. Only applies if tool is transform.

multipleSelectionEnabled Boolean
optional
Default Value:true

Indicates whether more than one selection can be made at once. This pertains to shift+click interaction with the transform tool.

preserveAspectRatio Boolean
optional
Default Value:false

Indicates if the uniform scale operation will be enabled when updating graphics. enableScaling must be set true when setting this property to true. Only applies if tool is transform and is always true when transforming points that use a 3D object symbol layer.

toggleToolOnClick Boolean
optional
Default Value:true

Indicates if the graphic being updated can be toggled between transform and reshape update options.

destroyed Boolean inherited

When true, this property indicates whether the widget has been destroyed.

iconClass String

The Sketch widget's default CSS icon class.

The unique ID assigned to the widget when the widget is created. If not set by the developer, it will default to the container ID, or if that is not present then it will be automatically generated.

label String

The Sketch widget's default label.

The GraphicsLayer associated with the Sketch widget. The Sketch widget adds new graphics to this layer or can only update graphics stored in this layer.

layout String

Determines the layout/orientation of the Sketch widget.

Possible Values: vertical | horizontal

Default Value:horizontal
state Stringreadonly

The Sketch widget's state.

Possible Values: ready | disabled | active

updateGraphics Collection<Graphic>readonly

An array of graphics that are being updated by the Sketch widget.

A reference to the MapView or SceneView. Set this to link the Sketch widget to a specific view.

viewModel SketchViewModel

The view model for the Sketch widget. This is a class that contains all the logic (properties and methods) that controls this widget's behavior. See the SketchViewModel class to access all properties and methods on the Sketch widget.

Method Overview

NameReturn TypeSummaryClass

Cancels the active operation and fires the create or update event and changes the event's state to cancel.

more details
more detailsSketch
String

A utility method used for building the value for a widget's class property.

more details
more detailsWidget

Completes the active operation and fires the create or update event and changes the event's state to complete.

more details
more detailsSketch

Create a graphic with the geometry specified in the tool parameter.

more details
more detailsSketch

Destroys the widget instance.

more details
more detailsWidget
Boolean

Emits an event on the instance.

more details
more detailsWidget
Boolean

Indicates whether there is an event listener on the instance that matches the provided event name.

more details
more detailsWidget
Object

Registers an event handler on the instance.

more details
more detailsWidget

Widget teardown helper.

more details
more detailsWidget

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget

Incrementally redo actions recorded in the stack.

more details
more detailsSketch
Object

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget

Renders widget to the DOM immediately.

more details
more detailsWidget

Resets the Sketch widget to prepare for another create operation.

more details
more detailsSketch

This method is primarily used by developers when implementing custom widgets.

more details
more detailsWidget

Incrementally undo actions recorded in the stack.

more details
more detailsSketch
Promise<void>

Initializes an update operation for the specified graphic(s) and fires update event.

more details
more detailsSketch

Method Details

cancel()

Cancels the active operation and fires the create or update event and changes the event's state to cancel. If called in the middle of a create operation, cancel() discards the partially created graphic.

classes(classNames){String}inherited

A utility method used for building the value for a widget's class property. This aids in simplifying CSS class setup.

Parameter:
classNames (String|String[]|Object)[]
repeatable

The class names.

Returns:
TypeDescription
StringThe computed class name.
See also:
Example:
// .tsx syntax showing how to set CSS classes while rendering the widget

render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}
complete()

Completes the active operation and fires the create or update event and changes the event's state to complete. If called in the middle of a create operation, complete() finishes the active create operation and keeps the valid geometry.

create(tool, createOptions)

Create a graphic with the geometry specified in the tool parameter. When the first vertex of the graphic is added, the create event will start firing. The provided tool will become the activeTool.

Parameters:
tool String

Name of the create tool. Specifies the geometry for the graphic to be created.

Possible Values: point | polyline | polygon | rectangle | circle

createOptions Object
optional

Options for the graphic to be created.

Specification:
mode String
optional

Specifies how the graphic can be created. The create mode applies only when creating polygon, polyline, rectangle and circle geometries.

Possible Values:

ValueDescription
hybridVertices are added while the pointer is clicked or dragged. Applies to and is the default for polygon and polyline.
freehandVertices are added while the pointer is dragged. Applies to polygon, polyline rectangle and circle. Default for rectangle and circle.
clickVertices are added when the pointer is clicked.
Example:
// Call create method to create a polygon with freehand mode.
sketch.create("polygon", { mode: "freehand" });

// listen to create event, only respond when event's state changes to complete
sketch.on("create", function(event) {
  if (event.state === "complete") {
    // remove the graphic from the layer associated with the Sketch widget
    // instead use the polygon that user created to query features that
    // intersect it.
    polygonGraphicsLayer.remove(event.graphic);
    selectFeatures(event.graphic.geometry);
  }
});
destroy()inherited

Destroys the widget instance.

emit(type, event){Boolean}inherited

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters:
type String

The name of the event.

event Object
optional

The event payload.

Returns:
TypeDescription
Booleantrue if a listener was notified
hasEventListener(type){Boolean}inherited

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameter:
type String

The name of the event.

Returns:
TypeDescription
BooleanReturns true if the class supports the input event.
on(type, listener){Object}inherited

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters:

A event type, or an array of event types, to listen for.

listener Function

The function to call when the event is fired.

Returns:
TypeDescription
ObjectReturns an event handler with a remove() method that can be called to stop listening for the event(s).
PropertyTypeDescription
removeFunctionWhen called, removes the listener from the event.
Example:
view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});
own(handles)inherited

Widget teardown helper. Any handles added to it will be automatically removed when the widget is destroyed.

Parameter:

Handles marked for removal once the widget is destroyed.

postInitialize()inherited

This method is primarily used by developers when implementing custom widgets. Executes after widget is ready for rendering.

redo()

Incrementally redo actions recorded in the stack. Calling this method will fire the redo event.

render(){Object}inherited

This method is primarily used by developers when implementing custom widgets. It must be implemented by subclasses for rendering.

Returns:
TypeDescription
ObjectThe rendered virtual node.
renderNow()inherited

Renders widget to the DOM immediately.

reset()
Deprecated
  • since version 4.12. Use cancel() instead.

Resets the Sketch widget to prepare for another create operation. Reset discards the current sketch, if called in middle of create operation.

scheduleRender()inherited

This method is primarily used by developers when implementing custom widgets. Schedules widget rendering. This method is useful for changes affecting the UI.

undo()

Incrementally undo actions recorded in the stack. Calling this method will fire the undo event.

update(graphics, updateOptions){Promise<void>}

Initializes an update operation for the specified graphic(s) and fires update event.

Parameters:
Specification:

A graphic or an array of graphics to be updated. Only graphics added to SketchViewModel's layer property can be updated.

updateOptions Object
optional

Update options for the graphics to be updated.

Specification:
tool String
optional

Name of the update tool. Specifies the update operation for the selected graphics. The provided tool will become the activeTool.

Possible Values:

ValueDescription
transformThis is the default tool for graphics with a polygon geometry, polyline geometry or graphics that use a 3D object symbol layer with a point geometry. It allows one or multiple graphics to be scaled, rotated and moved by default. Its default behavior can be changed by setting the enableRotation, enableScaling or preserveAspectRatio arguments when calling the update method or setting them on the defaultUpdateOptions property when the Sketch widget initializes.
reshapeThis tool allows the entire graphic or individual vertices of the graphic to be moved. Vertices can be added or removed. This tool can only be used with a single graphic that has a polygon or polyline geometry.
moveThis is the default tool for graphics with a point geometry that do not use a 3D object symbol layer. It should be used for specific cases where you just want to move selected polygon and polyline graphics without additional options. Additionally, the move tool does not support toggling to different modes, since the move operation is built into both the transform and reshape tools by default.
enableRotation Boolean
optional
Default Value: true

Indicates if the rotation operation will be enabled when updating graphics. Only applies if tool is transform.

enableScaling Boolean
optional
Default Value: true

Indicates if the scale operation will be enabled when updating graphics. Only applies if tool is transform.

preserveAspectRatio Boolean
optional
Default Value: false

Indicates if the uniform scale operation will be enabled when updating graphics. enableScaling must be set true when setting this property to true. Only applies if tool is transform and is always true when transforming points that use a 3D object symbol layer.

toggleToolOnClick Boolean
optional
Default Value: true

Indicates if the graphic being updated can be toggled between transform and reshape update options.

Returns:
TypeDescription
Promise<void>Resolves when the requested update tool has been loaded and is ready to use.
Examples:
// start update operation for the selected graphic
// with transform tool. Only allow uniform scaling operation.
sketch.update([selectedGraphic], {
  tool: "transform",
  enableRotation: false,
  enableScaling: true,
  preserveAspectRatio: true,
  toggleToolOnClick: false
});
// Listen to sketch's update event to validate graphic's
// location while it is being reshaped or moved
sketch.on("update", onGraphicUpdate);
function onGraphicUpdate(event) {
  // get the graphic as it is being updated
  const graphic = event.graphics[0];
  // check if the graphic is intersecting school buffers
  intersects = geometryEngine.intersects(buffers, graphic.geometry);

  // change the graphic symbol to valid or invalid symbol
  // depending the graphic location
  graphic.symbol = (intersects) ? invalidSymbol : validSymbol

  // check if the update event's the toolEventInfo.type is move-stop or reshape-stop
  // user finished moving or reshaping the graphic, call complete method.
  // This changes update event state to complete.
  const toolType = event.toolEventInfo.type;
  if (event.toolEventInfo && (toolType === "move-stop" || toolType === "reshape-stop")) {
    if (!intersects) {
      sketch.complete();
    }
  } else if ((event.state === "cancel" || event.state === "complete")) {
      // graphic update has been completed or cancelled
      // if the graphic is in a bad spot, call sketch's update method again
      // giving user a chance to correct the location of the graphic
      if ((!contains) || (intersects)) {
        sketch.update({
          tool: "reshape",
          graphics: [graphic],
          toggleToolOnClick: false
        });
      }
  }
}

Type Definitions

This information is returned as toolEventInfo parameter for the create event when the graphic is being created. It returns VertexAddEventInfo when the user clicks the view or CursorUpdateEventInfo or when the user moves the cursor.

CursorUpdateEventInfo Object

This information is returned as toolEventInfo parameter for the create event when the user moves the cursor on the view while the graphic is being created.

Properties:
type String

Type is always cursor-update.

coordinates Number[]

An array of numbers representing the coordinates of the cursor location.

Example:
// listen to create event
sketch.on("create", function(event){
  // respond to create event while the cursor is being moved on the view.
  const eventInfo = event.toolEventInfo;
  if (eventInfo && eventInfo.type === "cursor-update"){
    console.log(eventInfo.type, eventInfo.coordinates[0], eventInfo.coordinates[1]);
  }
});
MoveEventInfo Object

This information is returned as toolEventInfo parameter for the update event while the user is moving the graphics. It returns additional information associated with the move operation and what stage it is at.

Properties:
type String

Returns information indicating the stage of the move operation.

Possible Values:

ValueDescription
move-startThe type changes to move-start at the start of move operation.
moveThe type changes to move while graphics are being moved.
move-stopThe type changes to move-stop once graphics are moved.

Number of pixels moved on the x-axis from the last known position.

Number of pixels moved on the y-axis from the last known position.

mover Graphic

The instance of the graphic that is being moved.

Example:
// listen to update event
sketch.on("update", function(event){
  // check if the graphics are done being moved, printout dx, dy parameters to the console.
  const eventInfo = event.toolEventInfo;
  if (eventInfo && eventInfo.type.includes("move")){
    console.log(eventInfo.type, eventInfo.dx, eventInfo.dy);
  }
});
ReshapeEventInfo Object

This information is returned as toolEventInfo parameter for the update event while the user is reshaping the graphics. It returns additional information associated with the reshape operation and what stage it is at.

Property:
type String

Returns information indicating the stage of the reshape operation.

Possible Values:

ValueDescription
reshape-startThe type changes to reshape-start at the start of reshape operation.
reshapeThe type changes to reshape while graphics are being reshaped.
reshape-stopThe type changes to reshape-stop once graphics are reshaped.
Example:
// listen to update event
sketch.on("update", function(event){
  // check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.
  const eventInfo = event.toolEventInfo;
  if (eventInfo && eventInfo.type.includes("reshape")) {
    console.log(eventInfo.type, event.graphics[0].geometry);
  }
});
RotateEventInfo Object

This information is returned as toolEventInfo parameter for the update event while the user is rotating the graphics. It returns additional information associated with the rotate operation and what stage it is at.

Properties:
type String

Returns information indicating the stage of the rotate operation.

Possible Values:

ValueDescription
rotate-startThe type changes to rotate-start at the start of rotate operation.
rotateThe type changes to rotate while graphics are being rotated.
rotate-stopThe type changes to rotate-stop once graphics are rotated.
angle Number

Angle of rotation in degrees.

Example:
// listen to update event
sketch.on("update", function(event){
  if (evt.tool === "transform") {
    if (event.toolEventInfo) {
      const info = evt.toolEventInfo,
      type = info.type;

      // rotate events only
      if (type.includes("rotate")) {
        // check if the rotation angle exceeded 45
        if (info.angle > 45) {
          // complete the graphic update operation
          sketch.complete();
        }
      }
    }
  }
});
ScaleEventInfo Object

This information is returned as toolEventInfo parameter for the update event while the user is scaling or resizing the graphics. It returns additional information associated with the scale operation and what stage it is at.

Properties:
type String

Returns information indicating the stage of the scale operation.

Possible Values:

ValueDescription
scale-startThe type changes to scale-start at the start of scale or resize operation.
scaleThe type changes to scale while graphics are being scaled or resized.
scale-stopThe type changes to scale-stop once graphics are scaled or resized.
xScale Number

The x scale factor used to enlarge or shrink the geometry.

yScale Number

The y scale factor used to enlarge or shrink the geometry.

This information is returned as toolEventInfo parameter for the update event when the user is updating graphics.

VertexAddEventInfo Object

This information is returned as toolEventInfo parameter for the create or update event when the user adds vertices to the graphic being created or updated.

Properties:
type String

Type is always vertex-add.

added Graphic[]

An array of graphics with point geometries representing the vertices that were added.

Example:
// listen to create event
sketch.on("create", function(event){
  // check if vertices are being added to the graphic that is being updated.
  if (event.toolEventInfo && event.toolEventInfo.type === "vertex-add"){
    const addedPoint = event.toolEventInfo.added[0].geometry;
    console.log(event.toolEventInfo.type, addedPoint.x, addedPoint.y);
  }
});
VertexRemoveEventInfo Object

This information is returned as toolEventInfo parameter for the update event when the user is removing vertices from the graphic.

Properties:
type String

Type is always vertex-remove.

removed Graphic[]

An array of graphics with point geometries representing the vertices that were removed.

Example:
// listen to update event
sketch.on("update", function(event){
  // check if vertices are being added to the graphic that is being updated.
  const eventInfo = event.toolEventInfo;
  if (eventInfo && eventInfo.type === "vertex-remove"){
    const removedPoint = eventInfo.removed[0].geometry;
    console.log(eventInfo.type, removedPoint.x,removedPoint.y);
  }
});

Event Overview

NameTypeSummaryClass
{graphic: Graphic,state: String,tool: String,toolEventInfo: CreateToolEventInfo,type: String}

Fires when a user starts sketching a graphic, is actively sketching a graphic and completes sketching a graphic.

more details
more detailsSketch
{graphics: Graphic[],tool: String,type: String}

Fires when a user deletes selected graphics by clicking the Delete feature button on the Sketch widget.

more details
more detailsSketch
{graphics: Graphic[],tool: String,type: String}

Fires in response to redo action during creation of a new graphic or updating existing graphics.

more details
more detailsSketch
{graphics: Graphic[],tool: String,type: String}

Fires in response to undo action during creation of a new graphic or updating existing graphics.

more details
more detailsSketch
{graphics: Graphic[],state: String,tool: String,type: String,toolEventInfo: UpdateToolEventInfo}

Fires when the user starts updating graphics, is actively updating graphics, and completes updating graphics.

more details
more detailsSketch

Event Details

create

Fires when a user starts sketching a graphic, is actively sketching a graphic and completes sketching a graphic.

Properties:
graphic Graphic

The graphic that is being created.

state String

The current state of the event.

Possible Values:

ValueDescription
startState changes to start when the first vertex is created. Not applicable when creating points.
activeState is active while graphic is being created. Not applicable when creating points.
completeState changes to complete after the complete() method is called, when the user double clicks, presses the C key or clicks the first vertex of the polygon while creating a graphic. When point is created, the create event is fired with the complete state.
cancelState changes to cancel if the create() or cancel() methods are called during the create operation and before the state changes to complete.
tool String

Name of the create tool.

Possible Values: point | polyline | polygon | rectangle | circle

toolEventInfo CreateToolEventInfo

Returns additional information associated with the create operation such as where the user is clicking the view or where the user is moving the cursor to. Value of this parameter changes to null when the create event's state changes to complete or cancel.

type String

The type of the event. For this event, the type is always create.

Example:
// Listen to sketch widget's create event.
sketch.on("create", function(event) {
  // check if the create event's state has changed to complete indicating
  // the graphic create operation is completed.
  if (event.state === "complete") {
    // remove the graphic from the layer. Sketch adds
    // the completed graphic to the layer by default.
    polygonGraphicsLayer.remove(event.graphic);

    // use the graphic.geometry to query features that intersect it
    selectFeatures(event.graphic.geometry);
  }
});
delete
Since: ArcGIS API for JavaScript 4.11

Fires when a user deletes selected graphics by clicking the Delete feature button on the Sketch widget.

Properties:
graphics Graphic[]

An array of deleted graphics.

tool String

Name of the tool that was active when graphics are deleted.

Possible Values: | move | reshape | transform |

type String

The type of the event. For this event, the type is always delete.

redo

Fires in response to redo action during creation of a new graphic or updating existing graphics.

Properties:
graphics Graphic[]

An array of graphics that are being updated or created.

tool String

Name of the create or update tool that is active.

Possible Values: point | polyline | polygon | rectangle | circle | move | transform | reshape

type String

The type of the event. For this event, the type is always redo.

undo

Fires in response to undo action during creation of a new graphic or updating existing graphics.

Properties:
graphics Graphic[]

An array of graphics that are being updated or created.

tool String

Name of the create or update tool that is active.

Possible Values: point | polyline | polygon | rectangle | circle | move | transform | reshape

type String

The type of the event. For this event, the type is always undo.

update

Fires when the user starts updating graphics, is actively updating graphics, and completes updating graphics.

Properties:
graphics Graphic[]

An array of graphics that are being updated.

state String

The state of the event.

Possible Values:

ValueDescription
startState changes to start when a graphic is selected to be updated.
activeState is active while graphics are being updated and toolEventInfo parameter is not null.
completeState changes to complete after graphics are updated.
cancelState changes to cancel when graphics are selected and then unselected without any updates, or when the update(), create() or cancel() method is called before the update event's state changes to complete.
tool String

Name of the update operation tool.

Possible Values: move | transform | reshape

type String

The type of the event. For this event, the type is always update.

toolEventInfo UpdateToolEventInfo

Returns additional information associated with the update operation that is taking place for the selected graphics and what stage it is at. Value of this parameter changes to null when the update event's state changes to complete.

Example:
// Listen to sketch's update event to show relevant data in a chart
// as the graphics are being moved
sketch.on("update", onMove);

// Point graphics at the center and edge of the buffer polygon are being moved.
// Recalculate the buffer with updated geometry and run the query stats using
// the updated buffer and update the chart.
function onMove(event) {
  // If the edge graphic is moving, keep the center graphic
  // at its initial location. Only move edge graphic to resize the buffer.
  if (event.toolEventInfo && event.toolEventInfo.mover.attributes.edge) {
    const toolType = event.toolEventInfo.type;
    if (toolType === "move-start") {
      centerGeometryAtStart = centerGraphic.geometry;
    }
    // keep the center graphic at its initial location when edge point is moving
    else if (toolType === "move" || toolType === "move-stop") {
      centerGraphic.geometry = centerGeometryAtStart;
    }
  }

  // the center or edge graphic is being moved, recalculate the buffer
  const vertices = [
    [centerGraphic.geometry.x, centerGraphic.geometry.y],
    [edgeGraphic.geometry.x, edgeGraphic.geometry.y]
  ];

  // client-side stats query of features that intersect the buffer
  calculateBuffer(vertices);

  // user is clicking on the view... call update method with the center and edge graphics
  if ((event.state === "cancel" || event.state === "complete")) {
    sketch.update({
      tool: "move",
      graphics: [edgeGraphic, centerGraphic]
    });
  }
}

API Reference search results

NameTypeModule
Loading...