All files / src/app/map/drawing circle-drawer.ts

13.89% Statements 5/36
0% Branches 0/2
50% Functions 1/2
13.33% Lines 4/30

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111            1x               1x                                                                                     1x                                                                                                         1x
import { loadModules } from 'esri-loader';
 
import { Drawer } from './drawer';
import { MapComponent } from '../map.component';
import { DrawingTexture, DrawActionEvent, getDefaultOutline, getDrawingSymbol } from './utils';
 
export class CircleDrawer extends Drawer {
 
  /**
   * Draw a circle on a map.
   *
   * @param map The MapComponent on which the circle must be drawn.
   * @param texture The texture which must be used to draw the circle.
   */
  async draw(
    map: MapComponent,
    texture: DrawingTexture
  ) {
    this.clearListeners();
 
    const [Draw] = await loadModules(['esri/views/2d/draw/Draw']);
 
    const draw: __esri.Draw = new Draw({
      view: map.mapView
    });
    const drawAction = draw.create('circle', {});
 
    this.drawActionListeners.push(
      drawAction.on(
        'vertex-add',
        async (event) => await this.createCircle(event, map, texture)
      ),
 
      drawAction.on(
        'cursor-update',
        async (event) => await this.createCircle(event, map, texture)
      ),
 
      drawAction.on(
        'draw-complete',
        async (event) => {
          await this.createCircle(event, map, texture);
          this.currentGraphic = null;
          this.draw(map, texture);
        }
      )
    );
  }
 
  /**
   * Generate a circle for the vertices captured by a DrawActionEvent and
   * add it to the drawingsLayer of a MapComponent.
   *
   * @param event The DrawActionEvent which triggered the circle's drawing.
   * @param map The MapComponent on which the circle must be drawn.
   * @param texture The texture to use to draw the circle.
   */
  private async createCircle(
    event: DrawActionEvent,
    map: MapComponent,
    texture: DrawingTexture
  ) {
    const [
      Graphic,
      Circle,
      SimpleFillSymbol
    ] = await loadModules([
      'esri/Graphic',
      'esri/geometry/Circle',
      'esri/symbols/SimpleFillSymbol'
    ]);
 
    const drawingSymbol: __esri.SimpleFillSymbol = new SimpleFillSymbol({
      color: [143, 143, 143, 0.75]
    });
 
    if (this.currentGraphic != null) {
        map.drawingsLayer.remove(this.currentGraphic);
    }
 
    function computeRadius(vertices: number[][]) {
      const width = Math.abs(vertices[0][0] - vertices[1][0]);
      const height = Math.abs(vertices[0][1] - vertices[1][1]);
      return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
    }
 
    const circle = new Circle({
      spatialReference: map.mapView.spatialReference.clone(),
      center: event.vertices[0],
      radius: event.vertices.length < 2 ? null : computeRadius(event.vertices) * 111500
    });
    circle.spatialReference = map.mapView.spatialReference.clone();
 
    this.currentGraphic = new Graphic({
      geometry: circle,
      symbol: drawingSymbol,
      visible: true
    });
 
    if (this.currentGraphic != null) {
      if (event.type === 'cursor-update') {
        (this.currentGraphic.symbol as __esri.FillSymbol).outline = await getDefaultOutline();
      } else if (event.type === 'draw-complete') {
        this.currentGraphic.symbol = await getDrawingSymbol(texture);
        // (this.currentGraphic.symbol as __esri.FillSymbol).outline = {} as __esri.SimpleLineSymbol;
      }
 
      map.drawingsLayer.add(this.currentGraphic);
    }
  }
}