vertices remain on clear graphics

547
5
Jump to solution
05-08-2020 04:08 AM
rsharma
Occasional Contributor III

Hi

My polygon vertices remain when i remove graphics.

My polygons come from db, as well i created new polygons on the spot.

While one of many polygon coming from db always stay editable and one of new polygon created always remain editablle.

the one editable polygon always leave its vertices on removal, even when i used       sketchViewModel.complete();

I tried alot , but didn't get it how to get it fixed.

Any help will be appriceable.

//Clear All method

 jQuery('#main').on('click', '.clear_all', function(){
      //clear all graphics added to graphics layer
      clearAll=true;
      sketchViewModel.complete();
      graphicsLayer.removeAll();

    });

  //Double click to delete  boundaries
           view.on("double-click", function(event){
              view.hitTest(event).then(function(response) {
                var results = response.results;
                 sketchViewModel.complete();
               results.forEach(function(result) {
                if(result.graphic.geometry.type==='polygon'&&result.graphic.layer === sketchViewModel.layer && result.graphic.attributes && result.graphic.attributes.newDevelopment){
                   graphicsLayer.remove(result.graphic);
                 }
                });
              });
           });

For making them editable, i use this code below

          view.when(function() {

            ..

            ..

       // Listen to sketchViewModel's update event to do graphic reshape validation
          sketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate);
      
          //now the graphic has been added to the graphics layer and the SketchviewMdoel is created
          //to show it as editable when page load
        sketchViewModel.update([newDevelopmentGraphic], {tool: "reshape"});
        });//End View.When

      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 then stop move event
          if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){
              sketchViewModel.cancel();
              markersketchViewModel.cancel();
            }
            // If toolEventInfo.type is 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();
            markersketchViewModel.complete();
          } 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  reshaping has been completed or cancelled
              graphic.attributes.state = "updated";
              sketchViewModel.update([graphic], { tool: "reshape" });
          }
       else{
         graphic.symbol = validSymbol;
        }
        }//End OnGraphicsUpdate

// This function is called when a user clicks on the view.
        function setUpGraphicClickHandler() {
          view.on("click", function(event) {
            view.hitTest(event).then(function(response) {
              var results = response.results;
            if(results.length === 0){
              sketchViewModel.complete();
               markersketchViewModel.complete();
            }
              // Check if the new development graphic and temp graphics with attribute named newDevelopment was clicked and pass
              // the graphic to sketchViewModel.update() with reshape tool.
              results.forEach(function(result) {
                if (
                  result.graphic.layer === sketchViewModel.layer &&
                  result.graphic.attributes &&
                  result.graphic.attributes.newDevelopment
                ) {
                  sketchViewModel.update([result.graphic], { tool: "reshape" });
                }
                else if(sketchViewModel.state !== 'active'){
                  sketchViewModel.cancel();
                  view.popup.open({features: [result.graphic], location: result.graphic.geometry});
                } 
              });
            });
          });
        }//End setUpGraphicClickHandler

0 Kudos
1 Solution

Accepted Solutions
rsharma
Occasional Contributor III

Hi Sir,

I solved the problem as below code, i removed the bolded lines, and its working fine now.

No need to complete their state and no need to reshape them again. they will remain in their basic state that is one editable at a time.

    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 then stop move event
          if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){
              sketchViewModel.cancel();
              markersketchViewModel.cancel();
            }
            // If toolEventInfo.type is 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();
            markersketchViewModel.complete();
          } 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  reshaping has been completed or cancelled
              graphic.attributes.state = "updated";
         
              //sketchViewModel.update([graphic], { tool: "reshape" });
          }
        else{
         graphic.symbol = validSymbol;
        }
        }//End OnGraphicsUpdate

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

Rajni,

  This is what you need (tested on my end).

      //Double click to delete  boundaries
      view.on("double-click", function (event) {
        //Prevent map from zooming in initially
        event.preventDefault();
        event.stopPropagation();
        var gRemoved = false;
        view.hitTest(event).then(function (response) {
          var results = response.results;
          sketchViewModel.complete();
          results.forEach(function (result) {
            if (result.graphic.geometry.type === 'polygon' && result.graphic.layer === sketchViewModel
              .layer && result.graphic.attributes && result.graphic.attributes.newDevelopment) {
              graphicsLayer.remove(result.graphic);
              gRemoved = true;
            }
          });
          sketchViewModel.cancel();
          //if a graphic was not deleted then zoom in as normal
          if (!gRemoved){
            var pnt  = new Point({x: event.mapPoint.x, y: event.mapPoint.y, spatialReference: view.spatialReference});
            view.goTo({target: pnt, scale: (view.scale * .5)});
          }
        });
      });
rsharma
Occasional Contributor III

Sir

Still m not able to resolve this issue,

your help will be very thankful

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rajni,

   When I put the double click event in the code that I have for you it works. So I am not sure what is wrong on your end. I am not sure also why you commented out a line of code that I provided in my working example.

///event.preventDefault();

rsharma
Occasional Contributor III

i commented this line bcz it gives error on using ///event.preventDefault();

Also my polygons comes on click, from db and as well as i get them by drawing them manually.

So the polygon comes from db always remain editable.

polygon drawn from tool become editable one at a time, 

while polygon onclick of view become editable one at a time with drawn polygon including

1 polygon from db always remain editable (while other drawn and onclick  on view out of these 2 only one polygon editable at a time).

I think their is great need to rectify this thing

0 Kudos
rsharma
Occasional Contributor III

Hi Sir,

I solved the problem as below code, i removed the bolded lines, and its working fine now.

No need to complete their state and no need to reshape them again. they will remain in their basic state that is one editable at a time.

    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 then stop move event
          if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){
              sketchViewModel.cancel();
              markersketchViewModel.cancel();
            }
            // If toolEventInfo.type is 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();
            markersketchViewModel.complete();
          } 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  reshaping has been completed or cancelled
              graphic.attributes.state = "updated";
         
              //sketchViewModel.update([graphic], { tool: "reshape" });
          }
        else{
         graphic.symbol = validSymbol;
        }
        }//End OnGraphicsUpdate

0 Kudos