Changes for SketchViewModel at 4.10

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:

4.10 layer property required4.10 layer property required4.9 layer property optional
Use dark colors for code blocksCopy
const sketchViewModel = new SketchViewModel({
  layer: graphicsLayer, // was not required at 4.9
  view: view
});

The SketchViewModel.graphic property was removed. Use the SketchViewModel.createGraphic or SketchViewModel.updateGraphics properties to get references to graphics being created or updated.

Method changes

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.

4.10 update() method4.10 update() method4.9 update() method
Use dark colors for code blocksCopy
// 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
});

Events changes

At 4.9, SketchViewModel emitted more than 20 events depending on whether a user was creating or updating a graphic. At 4.10, we condensed these into four distinct events: create, update, undo and redo. See Sketch update validation sample and Query statistics by geometry sample.

4.10 events4.10 events4.9 events
Use dark colors for code blocksCopy
// Listen to update, undo and redo events
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 ===
      "move-stop" || 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({
        tool: "reshape",
        graphics: [graphic]
      });
    }
  }
}

Sample updates

The following samples were updated to reflect these changes.

ArcGIS API for JavaScript

Changes for SketchViewModel at 4.10

Was this page helpful?

Was this page helpful?