[GIS] ArcGIS JS API Edit Toolbar permits MOVE but not EDIT_VERTICES or ROTATE – JavaScript error thrown

arcgis-javascript-apieditingjavascript

I'm putting together an ArcGIS (v10.1) JS API (v3.2) application and I've hit a snag in drawing / editing functionality.

Users can draw a new geometry or edit an existing one. I'm using the draw and edit toolbars to achieve this, but attempting to activate the edit toolbar is producing some strange errors and I don't know where to start debugging.

This function works fine for moving a Graphic around on the map:

editGraphic: function(graphic) {

    this.editToolbar.activate(
        esri.toolbars.Edit.MOVE,
        graphic,
        {allowAddVertices: true, allowDeleteVertices: true} // used for EDIT_VERTICES action
    );
}

However, if I change the action to esri.toolbars.Edit.EDIT_VERTICES, esri.toolbars.Edit.ROTATE, or any combination I get

Uncaught TypeError: Cannot call method 'add' of null _VertexMover.js:19

I've managed to do some digging (it's not easy as ESRI has everything uglified and Chrome's developer tools crash when I try to pretty print the API to support tracing the error. It seems the null object in question is a property called _scratchGL, which I assume should be the Graphics Layer, but is null (note it's not undefined).

The edit toolbar is defined as

this.editToolbar = new esri.toolbars.Edit(this.map)

and obviously the map is what it should be.

I discovered while debugging other errors that the Graphic should be passed to my edit function via a Graphics Layer event, so the graphic variable passed to my function is sourced in this way (I think this is necessary to ensure key properties are set on Graphic, such as the Graphics Layer it belongs to).

Unfortunately due to the size and many files in my application it's just not possible to show a useful sub-section of the code and I can't provide the whole lot.

The fact that I can use the MOVE action tells me that I'm doing things correctly, so why can I not edit vertices or rotate?

Fundamentally I'm not doing anything different to this example, which uses the same version of the API. However it is perhaps significant that if I add the following line of code it does not respond to clicks, even when all other map click handlers are disabled

dojo.connect(this.map.graphics, "onClick", function(evt){
    debugger;
});

Has anyone had a similar experience? I've Googled this quite a bit but to no useful outcome. I don't even know where to start on the problem. Any thoughts very much appreciated.

Best Answer

Honestly, you're into a corner the API that not a lot of people are using so I'm not surprised there weren't many results from Google on this. Editing in a web app isn't yet an operation that a lot of people are using.

The issue is probably in the "tool" argument you're passing to editToolbar.activate. That argument isn't an array of constants but rather uses a bitmask. While clever, it is not intuitive or readable.

When you want to specify multiple operations, combine them with the | operator. This is documented in the activate method section of the edit toolbar docs. It's also shown in the edit toolbar sample. If that doesn't work, please post all of the code you're using to call editToolbar.activate.

Edit: here's a simplified version of the edit toolbar sample showing edit vertices + add vertices as well as rotate: http://jsfiddle.net/GKuhX/

Related Question