create polygon with x,y coordinate and edit it via sketchviewmodel

[rsharma]

I need to display and edit polygon but problem is in updatesketchview model they are using different coordinates format like this:

[RobertScheitlin__GISP]

Rajni,

   Sure just look at the documentation. The update event has a state complete That you would listen for.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#events-summar... 

[rsharma]

Robert , i already tried to console but didn't get anything it gives map point and graphics here

results. I want updated vertices of ring of polygon

view.hitTest(event).then(function(response) {
              var results = response.results;
              // Check if the new development graphic was clicked and pass
              // the graphic to sketchViewModel.update() with reshape tool.
              //console.log(results);
              results.forEach(function(result) {
                console.log(result.mapPoint);
                if (
                  result.graphic.layer === sketchViewModel.layer &&
                  result.graphic.attributes &&
                  result.graphic.attributes.newDevelopment
                ) {
                  sketchViewModel.update([result.graphic], { tool: "reshape" });
                }
              });
            });

Are you talking about UpdateToolEventInfo, is their any example of it how to get coordinates, bcz it have many functions under it

[RobertScheitlin__GISP]

Rajni,

   OK you seem to be misunderstanding. You need to watch the sketchViewModel update event.

sketchViewModel.watch("update", function(event){
  If(event.state === "complete"){
    //do something here
  }
});‍‍‍‍‍

[rsharma]

I still didn't get any function in update event and complete state to get updated vertices

[RobertScheitlin__GISP]

Rajni,

   OK, sorry I looked at your code again and you are already listening for sketchviewmodel update in the onGraphicUpdate function.

      function onGraphicUpdate(event) {
        // get the graphic as it is being updated
        const graphic = event.graphics[0];

        // check if the update event's the toolEventInfo.type is move-stop or reshape-stop
        // then it means user finished moving or reshaping the graphic, call complete method.
        // this will change update event state to complete and we will check the validity of the graphic location.
        if (
          event.toolEventInfo &&
          (event.toolEventInfo.type === "move-stop" ||
            event.toolEventInfo.type === "reshape-stop")
        ) {
          sketchViewModel.complete();
        } else if (event.state === "cancel" || event.state === "complete") {
          // graphic moving or reshaping has been completed or cancelled
          // if the graphic is in an illegal spot, call sketchviewmodel's update method again
          // giving user a chance to correct the location of the graphic
          sketchViewModel.update([graphic], {
            tool: "reshape"
          });
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So inside the else if on line 14 above this is where you are getting the sketch view models update > complete. So if you want the new graphic after it has been updated than inside that else if is where you get it.

[rsharma]

Hi Robert, as you suggested I listen to sketchviewmodel update event as below

          } else if (event.state === "cancel" || event.state === "complete") {
            //check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.
             
            // graphic moving or reshaping has been completed or cancelled
            // if the graphic is in an illegal spot, call sketchviewmodel's update method again
            // giving user a chance to correct the location of the graphic
              sketchViewModel.update([graphic], { tool: "reshape" });
          }
              const eventInfo = event.toolEventInfo;
                  if (eventInfo && eventInfo.type.includes("reshape")) {
                    console.log(eventInfo.type, event.graphics[0].geometry);
                  }
        }

and get updated  ring vertices in console->

reshape-stop > accessor > post-meta > store > values > rings

Another query is i have to click to polygon to reshape it, i just want the polygon to appear editable when my page loads. So is their any event i can use to show it editable when the webpage appears

[RobertScheitlin__GISP]

Rajni,

  Just add this line when you want to in your code:

sketchViewModel.update([graphic], { tool: "reshape" });

[rsharma]

Robert, i have already added these lines, you can see in my code. i just want the polygon to appear editable when my page loads. Not when i click on it

[RobertScheitlin__GISP]

Rajni,

Robert, i have already added these lines, you can see in my code. i just want the polygon to appear editable when my page loads. Not when i click on it

I am not talking about the fact that this line already exists in the code. I am saying that once you add your polygon on app startup you need to call that line after the polygon graphic is added to the map.

[rsharma]

I have tried to edit it after this line in my code. But it doesn't workout for me.

webmap.add(graphicsLayer); 

sketchViewModel.update([graphic], { tool: "reshape" });