Pause or Resume Draw or DrawAction, or Add Vertices to Draw or DrawAction Programmatically

GaryLSheppardJr

I'm using the Draw class to let the user draw different kinds of graphics on the map. The Draw polyline sample works really well. Now I would like to let the user pause drawing and then resume the in-progress drawing. Is this possible using the Draw class?

I don't see anything on Draw or DrawAction that would let me pause and resume, which would be exactly what I want. What about cancelling the drawing, saving the vertices in memory, and then adding those vertices to a new Draw or DrawAction? Is that possible, and if so, how is it done?

This is similar to my previous question about doing something similar with SketchViewModel. This new question is about Draw as opposed to SketchViewModel.

TristanMorrison

---

What about cancelling the drawing, saving the vertices in memory, and then adding those vertices to a new Draw or DrawAction? Is that possible, and if so, how is it done?

I think that, using this approach, you will be able to achieve what you're going for. The first part of this scenario — starting a drawing operation and then "pausing" it — will be fairly straightforward. You will start the DrawAction as normal. The UI for the "pause" action will be up to you, but as far as JS API components are concerned, you will simply call the complete() method of either the Draw or the DrawAction. Note that, unlike in the higher-level context of SketchViewModel, there is not a specific method to "cancel" the operation, but that's only because, in the lower-level context of Draw, where the API components are not adding any graphics to the view for you, there wouldn't really be a difference between "completing" and "canceling."

The second part — "resuming" the drawing operation — is less straightforward, but still able to be done cleanly and without having to resort to any convoluted or hacky code. I have made a sample in CodePen showing how it can be done. Basically, you don't have to do anything special when you create the second DrawAction; it never needs to know that you already had some vertices when you began. What's different is that, when you create/update the graphic that represents the user's drawing, you create the geometry using your initial vertices plus (concatenated with) the vertices from the DrawAction event.

The CodePen sample is a modified version of the Draw polyline sample that you mentioned. I modified it to demonstrate how, given four existing vertices, a PolylineDrawAction can be used to "continue drawing" that polyline — i.e. to draw a polyline with the first four vertices already defined. I also stripped out all code from the original sample related to checking for self-intersection. I've explained more in comments in the code, but I've also left most of the comments from the original. You can distinguish mine because they start with // TM:

Let me know if this approach works for you, and/or if you need any clarification of the sample.