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

13.16% Statements 5/38
100% Branches 0/0
100% Functions 1/1
12.9% Lines 4/31

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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126            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 PolygonDrawer extends Drawer {
 
  /**
   * Draw a polygon on a map.
   *
   * @param map The MapComponent on which the polygon must be drawn.
   * @param texture The texture which must be used to draw the polygon.
   */
  async draw(
    map: MapComponent,
    texture: DrawingTexture
  ) {
    const [Draw] = await loadModules(['esri/views/2d/draw/Draw']);
 
    this.clearListeners();
 
    const draw: __esri.Draw = new Draw({
      view: map.mapView
    });
    const drawAction = draw.create('polygon', {});
 
    this.drawActionListeners.push(
      drawAction.on(
        'vertex-add',
        async (event) => await this.createPolygon(event, map, texture)
      ),
 
      drawAction.on(
        'vertex-remove',
        async (event) => await this.createPolygon(event, map, texture)
      ),
 
      drawAction.on(
        'cursor-update',
        async (event) => await this.createPolygon(event, map, texture)
      ),
 
      drawAction.on(
        'draw-complete',
        async (event) => {
          await this.createPolygon(event, map, texture);
          this.currentGraphic = null;
          this.draw(map, texture);
        }
      ),
    );
  }
 
  /**
   * Generate a poylgon for the vertices captured by a DrawActionEvent and
   * add it to the drawingsLayer of a MapComponent.
   *
   * @param event The DrawActionEvent which triggered the polygon's drawing.
   * @param map The MapComponent on which the polygon must be drawn.
   * @param texture The texture to use to draw the polygon.
   */
  private async createPolygon(
    event: DrawActionEvent,
    map: MapComponent,
    texture: DrawingTexture
  ) {
    const [
      Graphic,
      Polygon,
      Polyline,
      SimpleFillSymbol
    ] = await loadModules([
      'esri/Graphic',
      'esri/geometry/Polygon',
      'esri/geometry/Polyline',
      'esri/symbols/SimpleFillSymbol'
    ]);
 
    const drawingSymbol: __esri.SimpleFillSymbol = new SimpleFillSymbol({
      color: [143, 143, 143, 0.75]
    });
 
    if (this.currentGraphic != null) {
      map.drawingsLayer.remove(this.currentGraphic);
    }
 
    if (Array(event.vertices).length === 2) {
      const polyline: __esri.Polyline = new Polyline({
        spatialReference: map.mapView.spatialReference.clone(),
        paths: [Array(event.vertices)]
      });
 
      const lineSymbol = await getDefaultOutline();
 
      this.currentGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
      });
 
    } else {
      const polygon: __esri.Polygon = new Polygon({
        spatialReference: map.mapView.spatialReference.clone(),
        rings: event.vertices
      });
 
      this.currentGraphic = new Graphic({
        geometry: polygon,
        symbol: drawingSymbol,
      });
 
      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);
      }
    }
  }
}