View on event while actively drawing sketch polygon.

[GregoryBologna]

I'm looking to restrict the size of a polygon that a user can create with the sketch tool based on current extent. I can calculate the distance between lat and lon, but I will need an event that I can monitor while the polygon is being drawn.

const sketchLayer = new GraphicsLayer();

sketchViewModel = new SketchViewModel({
  view: view,
  layer: sketchLayer,
  pointSymbol: pointSymbol,
  polylineSymbol: polylineSymbol,
  polygonSymbol: polygonSymbol,
  snappingOptions: {
	enabled: true,	
	featureSources: [{ layer: sketchLayer, enabled: true }],
  },
  mode: 'click',
  defaultCreateOptions: {
	hasZ: false,
	enableScaling: false,
	enableRotation: false,
	toggleToolOnClick: false,
	shapeOperation: 'none',
  },
  updateOnGraphicClick: false,
});


sketchViewModel.on('create', (event) => {      
  if (event.state === 'complete') { 
   // know if the polygon dimensions are valid size before getting here.
 }
});

[UndralBatsukh · Accepted solution]

HI there, 

You can listen to SketchViewModel.create event like you are doing. Create event fires when yon start sketching a graphic, while actively sketching it and when you complete sketching the graphic. The event payload returns things like state and the state will be active while you are drawing the graphic. The toolEventInfo returns additional information you can could tap into. Event also returns the graphic that is being drawn. You can keep checking the geometry of this graphic to make sure that it is still acceptable. This sample shows how to check if the polygon is valid while user is updating the geometry. It uses sketchViewModel. Perhaps it will give you some ideas how you can do the same thing while creating a graphic. https://developers.arcgis.com/javascript/latest/sample-code/sketch-update-validation/

[GregoryBologna]

Thanks! I can check the size of the sketch, but not sure how to block drawing without destroying the sketch. I found this in community, but I'm not seeing a 'move'. There is a 'cursor-update'. 

no 'move'
if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){
  sketchViewModel.cancel();
}‍‍‍

if(event.state === 'active') {
// console.log(`H ${event.graphic.geometry.extent.height} x W ${event.graphic.geometry.extent.width}`); 
	if(event.graphic.geometry.extent.width > 200) {
	  if (event.toolEventInfo && event.toolEventInfo.type.includes('cursor-update')) {
     // cancel() completely destroying the sketch.
     // how to just stop drawing the width without killing sketch?
		sketchViewModel.cancel();
	  }
	}
}