SketchViewModel has significant breaking changes at 4.10 that will allow you to accomplish same functionality with less code. For example, we condensed over 20 events into 4 events without losing functionality. This change should make it easier and more straightforward to maintain your code to respond to these events. The following list covers all the breaking changes.
Property changes
SketchViewModel.layer is now a required property. Additionally, only graphics added to this layer are recognized as candidates for updates by SketchViewModel. When SketchViewModel is initialized, you must set the layer property as shown below:
The parameters for the SketchViewModel.update() method were changed. The update method now accepts an array of graphics for the first parameter, instead of a single graphic. This also means users can update multiple graphics simultaneously. An optional second parameter, updateOptions, was added to allow users to modify the default behavior of SketchViewModel during an update operation.
At 4.9 and previous versions of the API, developers were required to add custom application logic to identify a specific graphic for an update operation. This was typically done by utilizing MapView's click event, along with MapView.hittest() to identify the candidate graphic to be updated. At 4.10, this logic was integrated into the default behavior of SketchViewModel, so less custom logic is needed in your application. If you have a specific workflow that conflicts with this default behavior, you can still opt out by setting the SketchViewModel.updateOnGraphicClick property to false.
1
2
3
4
5
6
7
// At 4.10, SketchViewModel provides out-of-the-box logic for updating graphics// The update method now gives more options to control how selected graphics can be// updated. For example, graphic can only be reshaped or moved with the following.sketchVM.update([graphic], {
tool: "reshape",
toggleToolOnClick: false});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Listen to update, undo and redo eventssketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate);
functiononGraphicUpdate(event) {
// get the graphic as it is being updatedconst 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 ===
"move-stop" || event.toolEventInfo.type === "reshape-stop")) {
if (contains && !intersects) {
sketchViewModel.complete();
}
} elseif ((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 graphicif ((!contains) || (intersects)) {
sketchViewModel.update({
tool: "reshape",
graphics: [graphic]
});
}
}
}
Sample updates
The following samples were updated to reflect these changes.