RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html below:

Edit | API Reference | ArcGIS API for JavaScript 3.46

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 Constants 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:

Add : Click and drag a ghost vertice to add it to the graphic.
Delete : Right-click a vertex and select "Delete".
Move: Click and drag a vertex.

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 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. 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. . 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 activate

{
  graphic: <Graphic>,
  tool: <String>
}

Activates the toolbar for editing geometries. deactivate

{
  graphic: <Graphic>,
  info: <Object>,
  tool: <String>
}

Deactivates the toolbar and reactivates map navigation. graphic-click

{
  graphic: <Graphic>,
  info: <Object>
}

Fires when a graphic is clicked. graphic-first-move

{
  graphic: <Graphic>
}

Fires when the user begins to move a graphic. graphic-move

{
  graphic: <Graphic>,
  transform: <Object>
}

Fired continuously as the graphic moves. graphic-move-start

{
  graphic: <Graphic>
}

Fired when the mouse button is pressed down on the graphic, usually while moving a graphic. graphic-move-stop

{
  graphic: <Graphic>,
  transform: <Object>
}

Fired when the mouse button is released, usually after moving the graphic. rotate

{
  graphic: <Graphic>,
  info: <Object>
}

Fires continuously as a graphic is rotated. rotate-first-move

{
  graphic: <Graphic>
}

Fires when the user begins to drag a handle to rotate the graphic. rotate-start

{
  graphic: <Graphic>
}

Fires when a user clicks on the handle to begin rotating a graphic. rotate-stop

{
  graphic: <Graphic>,
  info: <Object>
}

Fires when the mouse button is released from the rotate handle to finish rotating the graphic. scale

{
  graphic: <Graphic>,
  info: <Object>
}

Fires continuously as the graphic is being scaled. scale-first-move

{
  graphic: <Graphic>
}

Fires when the user begins to drag a handle to scale the graphic. scale-start

{
  graphic: <Graphic>
}

Fires when a user clicks on the handle to scale or resize a graphic. scale-stop

{
  graphic: <Graphic>,
  info: <Object>
}

Fires when the mouse button is released from the scale handle to finish scaling the graphic. vertex-add

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired after a new vertex is added to a polyline or polygon or a new point is added to a multipoint. vertex-click

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired when the mouse button is clicked on the vertex of a polyline or polygon or a point in a multipoint. vertex-delete

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired after a vertex(polyline, polygon) or point(multipoint) is deleted. vertex-first-move

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired when the user begins to move the vertex of a polyline or polygon or a point of a multipoint. vertex-mouse-out

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fires as the mouse exits a vertex(polyline, polygon) or a point(multipoint). vertex-mouse-over

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired when the mouse moves over a vertex (polyline, polygon) or point (multipoint). vertex-move

{
  graphic: <Graphic>,
  transform: <Object>,
  vertexinfo: <Object>
}

Fired continuously as the user is moving a vertex (polyline, polygon) or point (multipoint). vertex-move-start

{
  graphic: <Graphic>,
  vertexinfo: <Object>
}

Fired when the mouse button is pressed down on a vertex (polyline, polygon) or point (multipoint). vertex-move-stop

{
  graphic: <Graphic>,
  transform: <Object>,
  vertexinfo: <Object>
}

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: <Map> map Required Map the toolbar is associated with. <Object> options Optional Optional parameters. See options list. options properties: <Boolean> allowAddVertices Optional Specifies whether users can add new vertices. Valid for polyline and polygon geometries. <Boolean> allowDeleteVertices Optional Specifies whether users can delete vertices. Valid for polyline, polygon and multipoint geometries. <LineSymbol> ghostLineSymbol Optional Line symbol used to draw the guild lines, displayed when moving vertices. Valid for polyline and polygon geometries. <MarkerSymbol> ghostVertexSymbol Optional Marker symbol used to display the insertable vertices. Valid for polyline and polygon geometries. <Node | String> textSymbolEditorHolder Optional If users want to place the text symbol editor to a user defined HTML element. <Boolean> uniformScaling Optional When true, if the geometry is re-sized the aspect ration will be preserved. <MarkerSymbol> vertexSymbol 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: <String> tool Required Specify the active tool(s). Combine tools using the | operator. See the Constants table for a list of valid values. <Graphic> graphic Required The graphic to edit. <Object> options Optional See the object specifications table below for the structure of the options object. Object Specifications:

<options>

<Boolean> allowAddVertices Optional Specifies whether users can add new vertices. Valid geometry: Polyline, Polygon <Boolean> allowDeleteVertices Optional Specifies whether users can delete vertices. Valid geometry: Polygon, Polygon, Multipoint <MarkerSymbol> boxHandleSymbol Optional Symbol to use when rotating or scaling geometries. <LineSymbol> boxLineSymbol Optional Symbol for guide lines, displayed when rotating or moving geometries. <LineSymbol> ghostLineSymbol Optional Symbol for guide lines, displayed when moving vertices <MarkerSymbol> ghostVertexSymbol Optional Symbol for insertable vertices <Boolean> textSymbolEditorHolder Optional Specifies whether users should place the text symbol editor to a user defined HTML element <Boolean> uniformScaling Optional Specifies whether the geometry is resized if the aspect ratio will be preserved. <MarkerSymbol> vertexSymbol 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();

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.

Refreshes the internal state of the toolbar.

Event Details

[ On Style Events | Connect Style Event ]

Activates the toolbar for editing geometries. Activating the toolbar disables map navigation. (Added at v3.6)

Event Object Properties: <Graphic> graphic The graphic to edit whose vertices will be edited or moved. <String> tool The editing type. The Constants table lists valid editing values.

Deactivates the toolbar and reactivates map navigation. (Added at v3.6)

Event Object Properties: <Graphic> graphic The graphic the toolbar was associated with. <Object> info

The info object has the following properties:


{

  isModified:<Boolean>

}

<String> tool 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);
    }
  });
  ...
});

Fires when a graphic is clicked. Applicable only when the MOVE tool is active. (Added at v3.6)

Event Object Properties: <Graphic> graphic The clicked graphic. <Object> info See the object specifications table below for the structure of the info object. Object Specifications:

<info>

<Point> mapPoint Location of mouse click in map coordinates. <Point> screenPoint Location of mouse click in screen coordinates (pixels).

Fires when the user begins to move a graphic. Applicable only when the MOVE tool is active. (Added at v3.6)

Event Object Properties: <Graphic> graphic The graphic associated with the toolbar.

Fired continuously as the graphic moves. Applicable only when the MOVE tool is active. (Added at v3.6)

Event Object Properties: <Graphic> graphic The graphic associated with the toolbar. <Object> transform Represents the linear transformation applied to the graphic.

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: <Graphic> graphic 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)

Event Object Properties: <Graphic> graphic The graphic associated with the toolbar. <Object> transform Represents the linear transformation applied to the graphic.

Fires continuously as a graphic is rotated. (Added at v3.6)

Event Object Properties: <Graphic> graphic The rotated graphic. <Object> info

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: <Graphic> graphic 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: <Graphic> graphic 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: <Graphic> graphic The rotated graphic. <Object> info

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: <Graphic> graphic The scaled graphic. <Object> info

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: <Graphic> graphic 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: <Graphic> graphic 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: <Graphic> graphic The scaled graphic. <Object> info

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: <Graphic> graphic The graphic associated with the toolbar. <Object> vertexinfo See the object specifications table below for the structure of the vertexinfo object. Object Specifications:

<vertexinfo>

<Boolean> isGhost 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. <Number> pointIndex Index of the vertex in the segment indicated by segmentIndex. <Number> 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)

<vertexinfo>

Fired after a vertex(polyline, polygon) or point(multipoint) is deleted. Applicable only when the EDIT_VERTICES tool is active. (Added at v3.6)

<vertexinfo>

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)

<vertexinfo>

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)

<vertexinfo>

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)

<vertexinfo>

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: <Graphic> graphic The graphic associated with the toolbar. <Object> transform Represents the linear transformation applied to the graphic. <Object> vertexinfo See the object specifications table below for the structure of the vertexinfo object. Object Specifications:

<vertexinfo>

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)

<vertexinfo>

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)

<vertexinfo>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4