topic Re: Drawing oddities in 3.20 API in ArcGIS JavaScript Maps SDK Questions

Drawing oddities in 3.20 API

TyroneBiggums — Mon, 10 Apr 2017 16:13:33 GMT

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?

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 18:10:55 GMT

Maybe if I asked this differently. In code I have:

toolbar.on("draw-end", addGraphic);

The graphic object is passed to addGraphic.

To grab the top left point of a rectangle, I have this in code:

item.Geometry.Polygon.Rings[0][0][0] = x; // top-left x
item.Geometry.Polygon.Rings[0][0][1] = y; // top-left y

Since [0][0][0], [0][0][1] is the x, y of the first point drawn (where the user first clicks the map) to begin drawing the rectangle, x, y is not always the top left point of the rectangle.

Is there a way to draw, or re-draw, a shape clockwise from the top left most point on the map (that doesn't interfere with the API)?

Maybe the best way is to not go by array position but geo-math?

Re: Drawing oddities in 3.20 API

RobertScheitlin__GISP — Wed, 12 Apr 2017 18:26:09 GMT

Tyrone,

Since you are working with it as a polygon have you tried to run a GeometryService simplify on it is the polygon.isclockwise(ring) is false?

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 18:45:34 GMT

Robert, I am using a GeometryService.simplify on it to measure. Thank you for directing me at isClockwise.

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 19:26:40 GMT

rscheitlin‌, kind of weird... if I draw a rectangle while clicking and dragging to the NW, the isClockwise returns true. If I click and drag NE or SW, isClockwise returns false. If I click and drag SE or NW, isClockwise will return true.

So, it was a start, but I'm still a little stuck.

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 19:38:42 GMT

Oops, actually... that's just using the draw toolbar. GeometryService.simplify puts everything in clockwise as if it is redrawn? isClockwise is true for every way I draw it, and the ring's points are in different positions compared to the draw toolbar.

Re: Drawing oddities in 3.20 API

RobertScheitlin__GISP — Wed, 12 Apr 2017 19:44:45 GMT

Tyrone,

Strange. What about running the isSimple GeometryEngine method?

https://developers.arcgis.com/javascript/3/jsapi/esri.geometry.geometryengine-amd.html#issimple

Re: Drawing oddities in 3.20 API

JohnGrayson — Wed, 12 Apr 2017 20:00:08 GMT

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

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 20:06:46 GMT

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.

Re: Drawing oddities in 3.20 API

JohnGrayson — Wed, 12 Apr 2017 20:23:44 GMT

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);

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 20:28:53 GMT

Is that a 3.20 thing? The ref says added in 3.13 but Google doesn't have any results for "geometryEngineAsync issimple 3.20", the ref has no samples and geometryEngineAsync.isSimple (in code) isn't a thing.

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 20:56:28 GMT

I will play around with this idea. Thank you.

Re: Drawing oddities in 3.20 API

RobertScheitlin__GISP — Wed, 12 Apr 2017 21:01:47 GMT

Tyrone,

Did the link I provide not work for you? There really would not be any samples as this is such a simple method, just create the GeometryEngine class and then run the isSimple(geometry) method and it returns a boolean. GeometryEngineAsync is just another class that run async instead of synchronous.

Re: Drawing oddities in 3.20 API

TyroneBiggums — Wed, 12 Apr 2017 21:24:33 GMT

The link worked, however, the isSimple method gives me: TypeError: Object doesn't support property or method 'isSimple' TypeError: Object doesn't support property or method 'isSimple'

Re: Drawing oddities in 3.20 API

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:32:07 GMT

Tyrone,

You are creating a GeometryEngine object right?

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

Re: Drawing oddities in 3.20 API

TyroneBiggums — Thu, 13 Apr 2017 12:53:14 GMT

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.

Re: Drawing oddities in 3.20 API

RobertScheitlin__GISP — Thu, 13 Apr 2017 13:00:06 GMT

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.