Drawing oddities in 3.20 API

[TyroneBiggums]

I have a draw tool using the draw and edit toolbar classes. The idea is that the user can draw a shape on the map. There is a UI that allows the user to select the drawn shape from a list. There is a context menu to edit the shape. The problem is with rectangle.

If the user starts to draw a rectangle and drags down and to the right, everything is fine. The edit UI displays, showing the top left point of the rectangle and the bottom right. However, the user cannot edit the bottom right point, to a point that is north of the top left point with out buggy behavior. In fact, if the once bottom right point (now top right) is edited a second time, the rectangle turns into a line.

And, this rectangle to line issue can be replicated by drawing a rectangle upside down. If the user clicks and drags north east, to make the rectangle, the top left point ends up being the bottom left.

I hope I explained this well enough. I understand this to be all in how the expected clockwise creation of points of a shape? Is there anything I can do to make cleaner shapes so they can be edited?

[RobertScheitlin__GISP]

Tyrone,

   You are creating a GeometryEngine object right?

require(["esri/geometry/geometryEngine"], function(geometryEngine) { 
   var isSimple = geometryEngine.isSimple(Geometry);
});‍‍‍

[TyroneBiggums]

Ah, right, so it works if I spell it right. But, it's just as odd. If I check if isSimple within the geoSvc, it's always true. If I check if isSimple after I draw a rectangle, half the time it's true, half it's false, just as above.

I think I'm going to have to check the min/max x/y like John Grayson mentioned.

[RobertScheitlin__GISP]

Tyrone,

  So when you draw and you check if it is simple and it is not then you run the simplify before you add it.

[JohnGrayson]

I'm not sure it this helps, but using the Draw and Edit toolbars seems to allow for this functionality:

JS Bin - Draw and Edit Toolbars

[TyroneBiggums]

Yes, but I'm allowing the user to fine-tune their polygons to the decimal point, with input fields. To keep it a rectangle, I'm only allowing them to modify two opposite points (top-left and bottom-right). Using the straight toolbars, you can turn the rectangle upside down and inside out and it won't care. The only issue I have found is updating the graphic with new rings, and finding the right points to edit in the first place.

[JohnGrayson]

If you're just dealing with an extent, I wonder if you could re-assemble it by finding the new xmin, ymin, xmax, and ymax. Just compare the previous and new values and keep the appropriate ones.  For example, something kind of like this:

var updatedXmin = Math.min(previousXmin, newXmin);

var updatedYmin = Math.min(previousYmin, newYmin);

var updatedXmax = Math.max(previousXmax, newXmax);

var updatedYmax = Math.max(previousYmax, newYmax);

[TyroneBiggums]

I will play around with this idea. Thank you.