Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

MarkGlass

We have an app with a simple implementation of ESRI Arcgis Javascript API (arcgis-js-api v4.14.0) with esri-loader v2.13.0.We are using Angular 8 and JDK 11, .

The application displays a topographical  map in an Angular dialog window. The user may add/delete marker symbols on the map using a left mouse-click. The user may also move the marker symbol by left mouse-click on the marker symbol and dragging the marker symbol. 

 

My Question has to do with the dragging behavior. It's choppy and easily lost if the user moves too fast. 

    return loadModules([
      'esri/Map',
      'esri/views/MapView',
      'esri/Graphic',
      'esri/layers/GraphicsLayer',
    ])
      .then(([Map, MapView, Graphic, GraphicsLayer]) => {
.....          
         this.mapView.on('drag', (event:DragEvent) => {
            event.stopPropagation();

            this.mapView.hitTest(event)
              .then((response) => {
                if (response.results.length > 1) {
                  const graphic = response.results[0].graphic;

                  const mapPoint = response.results[0].mapPoint;
                  const location = this.getLocationFromMapPoint(mapPoint);
                  const pointGraphic: esri.Graphic = this.getGraphic(Graphic, location);
                  this.removePin(graphic);
                  this.addPin(pointGraphic);
                }
              });
          })

removePin(graphic) removes the pin(i.e. marker symbol) from the graphic layer and addPin places a new pin in the graphic layer.

Is there a better way to move the marker symbol?  

AndyGup

If the SketchViewModel runs slower in Angular than in a vanilla JS app, and there aren't any errors in the console, it's possible the performance issue is related to zone.js and Angular's built-in component change detection. There are two primary ways to try and address these types of issues.

You can move to a manual change detection pattern within your map component, there is a lot of info about this on the web, here is one example of how to do it.

Or, you can also try running your code outside of the Angular "zone", similar to this super basic, pseudo-example:

    this.zone.runOutsideAngular(() => {
      // Initialize MapView here
      this.initializeMap().then(() => {
        // The map has been initialized
        . . .
        // For non-map-related component events, run them outside the Zone
        this.zone.run(() => {
          console.log('mapView ready: ');
        });
      });
    });