Bug: Sketch widget auto-splits user's drawn polygon, sometimes.

02-07-2019 04:51 AM
New Contributor III

The attached 2.5m video explains better than my words below.

Apart from nice, non-intersecting polygons, the user is able to create two types of self-intersecting polygon: a polygon with a hole in it, and a 'twisted' complex polygon.

My problem is primarily with the twisted/complex polygons.

In the video I create a 4 point polygon that intersects itself.

(My code sets the symbol of the users drawn polygon as red if the polygons 'isSelfIntersecting' is true.)

Sometimes the creation will result in a correctly identified 'selfintersecting' polygon, sometimes it shows that the polygon is in fact non-intersecting - but at this point it has broken the polygon into two polygons!!

If the Sketch widget has decided it is a self-intersecting polygon, you can move it as a whole, or edit it's points.  During this movement or editing, during the drag operations you can see it changes it's mind as to whether it's self intersecting or not.  If you complete the move or edit in a state where it has decided it is not self-intersecting, it will still split the polygon into multiple polygons.

As far as a user-story is concerned, "the user should be told the polygon fails some validation, and they should then have the opportunity to fix it."

NB: If the user creates a regular polygon, then edits it, there is no problem in them making it self-intersecting, moving it, then fixing the self-intersection.  The problems only seem to trigger if initially created with self-intersections.

0 Kudos
5 Replies
Esri Regular Contributor

Hi there, 

Let us investigate the issue. I will update you once we identify the issue. 

Thanks for bringing up to your attention.


0 Kudos
Esri Regular Contributor

Actually could you provide your snippet where you are setting the symbol when the polygon intersects itself? Thanks.

0 Kudos
New Contributor III

Hi Undral,

I hope this collection of method paint a good enough picture - you can also see how I have tried to stop the user creating more than one polygon (there may be bugs in there!).  Note I have referred to 'self-intersecting' as 'complex'...


public initSketchDrawingTools( sketch: esri.Sketch 😞 void {
this.sketchDrawingTools = sketch;

this.sketchDrawingTools.on('create', (e) => this.handleSketchCreate( e ) );
this.sketchDrawingTools.on('update', (e) => this.handleSketchUpdate( e ) );

// Warning: This was undocumented for ESRI 4.10's API, but was found with some JS hacking
// https://community.esri.com/message/829602-sketch-widget-delete-event-410
// https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html
this.sketchDrawingTools.on('reset', (e) => this.handleSketchReset( e ) );


public handleSketchCreate( e:any 😞 void {
this.identifyComplexPolygons( [e.graphic] );
if( e.state == 'start' ) {
this.cancelCreatingMultiplePolygons( e.state );
} else if ( e.state === 'complete' ) {
this.cancelCreatingMultiplePolygons( e.state);
this.handleUpdatesFromUser( [e.graphic] );

public handleSketchUpdate( e:any 😞 void {
this.identifyComplexPolygons( e.graphics );
if ( e.state === 'complete' ) {

public handleSketchReset( e:any 😞 void {

* There will be a more polite-to-the-user way of stopping multiple polygons, but this works adequately for now
* The complication of 'start'|'complete' is simply becuase even creating the first polygon seemed to be able to create multiple (esrt 4.10 bug?)
private cancelCreatingMultiplePolygons( state:'start'|'complete'): void {
let maxExistingGraphics = 0;
if( state == 'complete' ) maxExistingGraphics = 1;

if( this.graphicsLayer.graphics.length > maxExistingGraphics ) {
this.sketchDrawingTools.cancel(); // intended to cancel a current Create operation
// It seems creating a polygon can SOMETIMES create multiple polygons (simple complexities seem to do this)
// So we also need to REMOVE these extra polygons. The user will have to learn the hard way (until the back-end supports multiple areas)
// This is a bug in the esri 4.10 library, hopefully it will be fixed.
this.graphicsLayer.removeMany( this.graphicsLayer.graphics.slice( 1 ).toArray() );
let geometry = this.graphicsLayer.graphics.getItemAt(0).geometry;
if( geometry.type == 'polygon' ) {
let polygon = geometry as esri.Polygon;
polygon.rings = [polygon.rings[0]]; // remove any posibility of a single polygon having multiple rings.

// Since the user has been blocked creating a polygon, maybe they didnt know there was one already in use.
// Slip the map over to the existing polygon - hopefully this is enough to help them.
if( state == 'start' ) this.mapView.goTo( this.graphicsLayer.graphics.getItemAt( 0 ), {duration:1200,easing:'ease-in-out'} );

private identifyComplexPolygons( graphics:esri.Graphic[] 😞 void {
// Show the user that the polygon is not usable
graphics.forEach( graphic=> {
const polygon = (graphic.geometry as esri.Polygon);
let symbol = polygon.isSelfIntersecting? this.badGeometrySymbol : this.geometrySymbol;
if( graphic.symbol != symbol ) graphic.symbol = symbol;

0 Kudos
New Contributor III

Undral Batsukh‌, any conclusions yet?

0 Kudos
New Contributor III

I have this exact same issue when drawing self-intersecting polygons using the sketch widget. Polygon.isSelfIntersecting values can end up being false randomly.

Undral Batsukh‌ any updates?