Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: Edit
[ AMD Module Require | Legacy Module Require ]
require(["esri/toolbars/edit"], function(Edit) { /* code goes here */ });
Description
(Added at v2.0)
The Edit toolbar is a helper class that provides functionality to move graphics or modify individual vertices, i.e., edit the geometry of existing graphics. To add new graphics, use the Draw toolbar. Updated at version 2.1 to include support for rotating and scaling.
Mouse behavior when editing features:
- To move a feature, once the Edit toolbar is activated with that feature, press down on the feature, drag it, then let go at the new location.
- To add a vertex to a polyline or polygon, click on a "ghost" vertices and move it to the new location.
- To delete a vertex from a polyline or polygon, right-click the vertex and select 'Delete Vertex' from the menu. Only valid for polylines with at least three vertices and polygons with at least four vertices.
- To rotate or scale a geometry click the handle and move to the desired location.
Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new Edit(map, options?) | Creates a new Edit object. |
Constants
| Name | Description |
|---|---|
EDIT_TEXT | When a textSymbol point is in edit mode, double-clicking leads to text editing mode, which is a text box where uses can change the text content. Pressing Enter key or clicking outside applies the change to the text symbol. |
EDIT_VERTICES | Display and edit vertices of a Polyline, Polygon, or Multipoint. For Polyline and Polygon ghost vertices are also displayed. Ghost vertices are points in between the existing points on a path or ring that is not yet part of the graphic. The last three points in a polygon, last two points in a line, and last point in a multipoint cannot be deleted. The three edit operations are:
|
MOVE | Move graphic to a new location on the map. Applicable to Point, Polyline, or Polygon. |
ROTATE | Rotate the graphic. As of version 2.1. |
SCALE | Scale or resize a graphic. As of version 2.1 |
Methods
| Name | Return type | Summary | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| activate(tool, graphic, options?) | None | Activates the toolbar to edit the supplied graphic. | ||||||||
| deactivate() | None | Deactivates the toolbar. | ||||||||
| getCurrentState() | Object | An object with the following properties that describe the current state.
| ||||||||
| refresh() | None | Refreshes the internal state of the toolbar. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| activate | {
graphic: < | Activates the toolbar for editing geometries. |
| deactivate | {
graphic: < | Deactivates the toolbar and reactivates map navigation. |
| graphic-click | {
graphic: < | Fires when a graphic is clicked. |
| graphic-first-move | {
graphic: < | Fires when the user begins to move a graphic. |
| graphic-move | {
graphic: < | Fired continuously as the graphic moves. |
| graphic-move-start | {
graphic: < | Fired when the mouse button is pressed down on the graphic, usually while moving a graphic. |
| graphic-move-stop | {
graphic: < | Fired when the mouse button is released, usually after moving the graphic. |
| rotate | {
graphic: < | Fires continuously as a graphic is rotated. |
| rotate-first-move | {
graphic: < | Fires when the user begins to drag a handle to rotate the graphic. |
| rotate-start | {
graphic: < | Fires when a user clicks on the handle to begin rotating a graphic. |
| rotate-stop | {
graphic: < | Fires when the mouse button is released from the rotate handle to finish rotating the graphic. |
| scale | {
graphic: < | Fires continuously as the graphic is being scaled. |
| scale-first-move | {
graphic: < | Fires when the user begins to drag a handle to scale the graphic. |
| scale-start | {
graphic: < | Fires when a user clicks on the handle to scale or resize a graphic. |
| scale-stop | {
graphic: < | Fires when the mouse button is released from the scale handle to finish scaling the graphic. |
| vertex-add | {
graphic: < | Fired after a new vertex is added to a polyline or polygon or a new point is added to a multipoint. |
| vertex-click | {
graphic: < | Fired when the mouse button is clicked on the vertex of a polyline or polygon or a point in a multipoint. |
| vertex-delete | {
graphic: < | Fired after a vertex(polyline, polygon) or point(multipoint) is deleted. |
| vertex-first-move | {
graphic: < | Fired when the user begins to move the vertex of a polyline or polygon or a point of a multipoint. |
| vertex-mouse-out | {
graphic: < | Fires as the mouse exits a vertex(polyline, polygon) or a point(multipoint). |
| vertex-mouse-over | {
graphic: < | Fired when the mouse moves over a vertex (polyline, polygon) or point (multipoint). |
| vertex-move | {
graphic: < | Fired continuously as the user is moving a vertex (polyline, polygon) or point (multipoint). |
| vertex-move-start | {
graphic: < | Fired when the mouse button is pressed down on a vertex (polyline, polygon) or point (multipoint). |
| vertex-move-stop | {
graphic: < | Fired when the mouse button is released from a vertex (polyline, polygon) or point(multipoint). |
Constructor Details
Creates a new Edit object. A map is a required parameter.
Parameters:
< |
Required | Map the toolbar is associated with. |
< |
Optional | Optional parameters. See options list. |
options properties: < |
Optional | Specifies whether users can add new vertices. Valid for polyline and polygon geometries. |
< |
Optional | Specifies whether users can delete vertices. Valid for polyline, polygon and multipoint geometries. |
< |
Optional | Line symbol used to draw the guild lines, displayed when moving vertices. Valid for polyline and polygon geometries. |
< |
Optional | Marker symbol used to display the insertable vertices. Valid for polyline and polygon geometries. |
< |
Optional | If users want to place the text symbol editor to a user defined HTML element. |
< |
Optional | When true, if the geometry is re-sized the aspect ration will be preserved. |
< |
Optional | Marker symbol used to draw the vertices. Valid for polyline and polygon geometries. |
Method Details
Activates the toolbar to edit the supplied graphic. After activation the toolbar is ready for user interaction using the specified tool.
Parameters:
< |
Required | Specify the active tool(s). Combine tools using the | operator. See the Constants table for a list of valid values. |
< |
Required | The graphic to edit. |
< |
Optional | See the object specifications table below for the structure of the options object.
|
Object Specifications:
<
options>< |
Optional | Specifies whether users can add new vertices. Valid geometry: Polyline, Polygon |
< |
Optional | Specifies whether users can delete vertices. Valid geometry: Polygon, Polygon, Multipoint |
< |
Optional | Symbol to use when rotating or scaling geometries. |
< |
Optional | Symbol for guide lines, displayed when rotating or moving geometries. |
< |
Optional | Symbol for guide lines, displayed when moving vertices |
< |
Optional | Symbol for insertable vertices |
< |
Optional | Specifies whether users should place the text symbol editor to a user defined HTML element |
< |
Optional | Specifies whether the geometry is resized if the aspect ratio will be preserved. |
< |
Optional | Symbol for vertices |
Sample:
require([
"esri/toolbars/edit", ...
], function(Edit, ... ) {
var editToolbar = new Edit( ... );
//Use the edit toolbar to edit vertices
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
...
});
require([
"esri/toolbars/edit", ...
], function(Edit, ... ) {
var editToolbar = new Edit( ... );
//Combine tools
editToolbar.activate(Edit.MOVE | Edit.SCALE, evt.graphic);
...
});
Deactivates the toolbar. Call this method to deactivate the toolbar after editing the graphic.
Sample:
editToolbar.deactivate();
See also: on("deactivate")
An object with the following properties that describe the current state.
| Value | Description |
| <Number> tool | Indicates the current tool. Valid values are listed in the constants table. |
| <Graphic> graphic | The graphic that is currently being edited. |
| <Boolean> isModified | Indicates if the graphic has been modified. |
Return type:
ObjectEvent Details
[ On Style Events | Connect Style Event ]
Activates the toolbar for editing geometries. Activating the toolbar disables map navigation. (Added at v3.6)
Deactivates the toolbar and reactivates map navigation. (Added at v3.6)
Event Object Properties:
< |
The graphic the toolbar was associated with. |
< |
The info object has the following properties:
{
isModified:<Boolean>
}
|
< |
The editing type. The Constants table lists valid editing values. |
Sample:
require([
...
], function( ... ) {
editToolbar.on("deactivate", function(evt) {
if(evt.info.isModified){
firePerimeterFL.applyEdits(null, [evt.graphic], null);
}
});
...
});
See also: deactivate()
Fires when a graphic is clicked. Applicable only when the MOVE tool is active. (Added at v3.6)
Fires when the user begins to move a graphic. Applicable only when the MOVE tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
Fired continuously as the graphic moves. Applicable only when the MOVE tool is active. (Added at v3.6)
Fired when the mouse button is pressed down on the graphic, usually while moving a graphic. Applicable only when the MOVE tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
Fired when the mouse button is released, usually after moving the graphic. Applicable only when the MOVE tool is active. (Added at v3.6)
Fires continuously as a graphic is rotated. (Added at v3.6)
Event Object Properties:
< |
The rotated graphic. |
< |
The info object has the following properties:
{
transform: <Object>,
angle: <Number>
around: <Object>
}
|
Sample:
require([
...
], function( ... ) {
editToolbar.on('rotate',function(evt){
var info = evt.info;
var around = info.around; //x,y,scalex,scaley
var angle = info.angle;
var transform = info.transform //dx,dy,xx,xy,yx,yy
});
...
});
Fires when the user begins to drag a handle to rotate the graphic. (Added at v3.6)
Event Object Properties:
< |
The rotated graphic. |
Sample:
require([
...
], function( ... ) {
editToolbar.on('rotate-first-move',function(evt){
console.log('Rotating');
});
...
});
Fires when a user clicks on the handle to begin rotating a graphic. (Added at v3.6)
Event Object Properties:
< |
The rotated graphic. |
Sample:
require([
...
], function( ... ) {
editToolbar.on('rotate-start',function(evt){
console.log('Start Rotating');
});
...
});
Fires when the mouse button is released from the rotate handle to finish rotating the graphic. (Added at v3.6)
Event Object Properties:
< |
The rotated graphic. |
< |
The info object has the following properties:
{
transform: <Object>,
angle: <Number>
around: <Object>
}
|
Sample:
require([
...
], function( ... ) {
editToolbar.on('rotate-stop',function(evt){
var info = evt.info;
var around = info.around; //x,y,scalex,scaley
var angle = info.angle;
var transform = info.transform //dx,dy,xx,xy,yx,yy
});
...
});
Fires continuously as the graphic is being scaled. (Added at v3.6)
Event Object Properties:
< |
The scaled graphic. |
< |
The info object has the following properties:
{
transform: <Object>,
scaleX: <Number>,
scaleY: <Number>,
around: <Object>
}
|
Sample:
require([
...
], function( ... ) {
editToolbar.on('scale',function(evt){
var info = evt.info;
var around = info.around; //height,width,x,y
var transform = info.transform; //dx,dy,xx,xy,yx,yy
var scalex = info.scaleX;
var scaley = info.scaleY;
});
...
});
Fires when the user begins to drag a handle to scale the graphic. (Added at v3.6)
Event Object Properties:
< |
The scaled graphic. |
Sample:
require([
...
], function( ... ) {
editToolbar.on('scale-first-move',function(evt){
console.log('Begin Scaling');
});
...
});
Fires when a user clicks on the handle to scale or resize a graphic. (Added at v3.6)
Event Object Properties:
< |
The scaled graphic. |
Sample:
require([
...
], function( ... ) {
editToolbar.on('scale-start',function(evt){
console.log('Scaling Started');
});
...
});
Fires when the mouse button is released from the scale handle to finish scaling the graphic. (Added at v3.6)
Event Object Properties:
< |
The scaled graphic. |
< |
The info object has the following properties:
{
transform: <Object>,
scaleX: <Number>,
scaleY: <Number>,
around: <Object>
}
|
Sample:
require([
...
], function( ... ) {
editToolbar.on('scale-stop',function(evt){
var info = evt.info;
var around = info.around; //height,width,x,y
var transform = info.transform; //dx,dy,xx,xy,yx,yy
var scalex = info.scaleX;
var scaley = info.scaleY;
});
...
});
Fired after a new vertex is added to a polyline or polygon or a new point is added to a multipoint. Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired when the mouse button is clicked on the vertex of a polyline or polygon or a point in a multipoint. Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired after a vertex(polyline, polygon) or point(multipoint) is deleted. Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired when the user begins to move the vertex of a polyline or polygon or a point of a multipoint. Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fires as the mouse exits a vertex(polyline, polygon) or a point(multipoint). Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired when the mouse moves over a vertex (polyline, polygon) or point (multipoint). Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired continuously as the user is moving a vertex (polyline, polygon) or point (multipoint). Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
Represents the linear transformation applied to the graphic. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired when the mouse button is pressed down on a vertex (polyline, polygon) or point (multipoint). Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |
Fired when the mouse button is released from a vertex (polyline, polygon) or point(multipoint). Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)
Event Object Properties:
< |
The graphic associated with the toolbar. |
< |
Represents the linear transformation applied to the graphic. |
< |
See the object specifications table below for the structure of the vertexinfo object. |
Object Specifications:
<
vertexinfo>< |
Specifies whether the event fired for an existing vertex or a ghost vertex. When true, pointIndex indicates the position the vertex will take when added to the graphic. |
< |
Index of the vertex in the segment indicated by segmentIndex. |
< |
Index of the ring or path that contains the vertex. Always 0 for multipoints. |