i want to remove move event when reshape graphic with SketchViewModel ,how to do? view . when ( function ( ) { // Query all buffer features from the school buffers featurelayer bufferLayer . queryFeatures ( ) . then ( function ( results ) { buffers = results . features [ 0 ] . geometry ; } ) ; // Add the boundary polygon and new lot polygon graphics addGraphics ( ) ; // Create a new instance of sketchViewModel sketchViewModel = new SketchViewModel ( { view : view , layer : graphicsLayer , updateOnGraphicClick : true , defaultUpdateOptions : { // set the default options for the update operations toggleToolOnClick : false // only reshape operation will be enabled } } ) ; // Listen to sketchViewModel's update event to do // graphic reshape or move validation sketchViewModel . on ( [ "update" , "undo" , "redo" ] , onGraphicUpdate ) ; } ) ; function onGraphicUpdate ( event ) { // get the graphic as it is being updated const graphic = event . graphics [ 0 ] ; // check if the graphic is intersecting school buffers or is // still contained by the boundary polygon as the graphic is being updated intersects = geometryEngine . intersects ( buffers , graphic . geometry ) ; contains = geometryEngine . contains ( boundaryPolygon , graphic . geometry ) ; // change the graphic symbol to valid or invalid symbol // depending the graphic location graphic . symbol = intersects || ! contains ? invalidSymbol : validSymbol ; // 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 === "reshape-stop" ) { if ( contains && ! intersects ) { //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 if ( ! contains || intersects ) { sketchViewModel . update ( [ graphic ] , { tool : "reshape" } ) ; } } else if ( event . toolEventInfo && event . toolEventInfo . type === "move-start" ) { // How to stop move here? return ; } else if ( event . toolEventInfo && event . toolEventInfo . type === "move" ) { return ; } else if ( event . toolEventInfo && event . toolEventInfo . type === "move-stop" ) { return ; } }

Hi there, You can prevent the move operation for graphics by the cancel method on Sketch or SketchViewModel as shown below. if ( event . toolEventInfo && event . toolEventInfo . type . includes ( "move" ) ) { sketch . cancel ( ) ; }

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to stop move when reshape graphic with sketchviewModel?

yanli

i want to remove move event when reshape graphic with SketchViewModel ,how to do?

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">// Query all buffer features from the school buffers featurelayer</SPAN>
 bufferLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 buffers <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// Add the boundary polygon and new lot polygon graphics</SPAN>
 <SPAN class="token function">addGraphics</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// Create a new instance of sketchViewModel</SPAN>
 sketchViewModel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SketchViewModel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
 layer<SPAN class="punctuation token">:</SPAN> graphicsLayer<SPAN class="punctuation token">,</SPAN>
 updateOnGraphicClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
 defaultUpdateOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">// set the default options for the update operations</SPAN>
 toggleToolOnClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="comment token">// only reshape operation will be enabled</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// Listen to sketchViewModel's update event to do</SPAN>
 <SPAN class="comment token">// graphic reshape or move validation</SPAN>
 sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"update"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"undo"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"redo"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> onGraphicUpdate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">onGraphicUpdate</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">// get the graphic as it is being updated</SPAN>
 <SPAN class="keyword token">const</SPAN> graphic <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="comment token">// check if the graphic is intersecting school buffers or is</SPAN>
 <SPAN class="comment token">// still contained by the boundary polygon as the graphic is being updated</SPAN>
 intersects <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">intersects</SPAN><SPAN class="punctuation token">(</SPAN>buffers<SPAN class="punctuation token">,</SPAN> graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 contains <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">contains</SPAN><SPAN class="punctuation token">(</SPAN>boundaryPolygon<SPAN class="punctuation token">,</SPAN> graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// change the graphic symbol to valid or invalid symbol</SPAN>
 <SPAN class="comment token">// depending the graphic location</SPAN>
 graphic<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN>
 intersects <SPAN class="operator token">||</SPAN> <SPAN class="operator token">!</SPAN>contains <SPAN class="operator token">?</SPAN> invalidSymbol <SPAN class="punctuation token">:</SPAN> validSymbol<SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// check if the update event's the toolEventInfo.type is move-stop or reshape-stop</SPAN>
 <SPAN class="comment token">// then it means user finished moving or reshaping the graphic, call complete method.</SPAN>
 <SPAN class="comment token">// this will change update event state to complete and we will check the validity of the graphic location.</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"reshape-stop"</SPAN>
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>contains <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN>intersects<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">//sketchViewModel.complete();</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"cancel"</SPAN> <SPAN class="operator token">||</SPAN> event<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"complete"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">// graphic moving or reshaping has been completed or cancelled</SPAN>
 <SPAN class="comment token">// if the graphic is in an illegal spot, call sketchviewmodel's update method again</SPAN>
 <SPAN class="comment token">// giving user a chance to correct the location of the graphic</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>contains <SPAN class="operator token">||</SPAN> intersects<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>graphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> tool<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"reshape"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"move-start"</SPAN>
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="comment token">// How to  stop  move  here?</SPAN>
 <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"move"</SPAN>
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

 <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN>
 event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"move-stop"</SPAN>
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

 <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encuentra más publicaciones etiquetadas con

Accepted answers

UndralBatsukh

Hi there,

You can prevent the move operation for graphics by the cancel method on Sketch or SketchViewModel as shown below.

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type<SPAN class="punctuation token">.</SPAN><SPAN class="token function">includes</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"move"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cancel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

UndralBatsukh

Hi there,

You can prevent the move operation for graphics by the cancel method on Sketch or SketchViewModel as shown below.

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>toolEventInfo <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>toolEventInfo<SPAN class="punctuation token">.</SPAN>type<SPAN class="punctuation token">.</SPAN><SPAN class="token function">includes</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"move"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cancel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

yanli

Thank you! it works fine!

by the way,how to formate the javascript code in commutiy question like your reply code.

I'am newer for the commutiy

kenbuja

You can format your code using Syntax Highlighter. See this discussion for more information: https://community.esri.com/docs/DOC-8587-updated-content-text-editor

Note that this highlighter is not available when responding to a message through your Inbox.

Also, when your question is answered, click the "Mark Correct" button on that post

JeremySwagger

I would actually recommend using move-start to completely keep the geometry in place. Otherwise with move, the user can actually move the geometry slightly. move is triggered right after the first action has been made. move-start allows us to interrupt any move action before it happens. It is a small difference, I know, but it may prevent geometry mismatches downstream and maintain shape integrity.

Robert_van_Gilst

This seems to be broken in version 2.24 I get the following error when calling sketch.cancel() when type is "move-start"

Reshape.js:formatted:479 

Uncaught TypeError: Cannot read properties of null (reading 'data')
    at d._onGraphicMoveStartCallback (Reshape.js:formatted:479:58)
    at Object.onGraphicMoveStart (Reshape.js:formatted:426:49)
    at f._dragHandler (VM6316 GraphicMover.js:15:308)
    at VM6316 GraphicMover.js:8:9
    at q._callback (VM6024:2298:475)
    at k._handleEvent (VM6024:2289:385)
    at Object.eventCallback (VM6024:2286:289)
    at z._continuePropagation (VM6024:2273:181)
    at z._doNewPropagation (VM6024:2272:223)
    at z._emitInputEvent (VM6024:2272:6)

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.