Maps rectangle (#18184)

Add rectangle component to @angular/google-maps that allows rectangles
to be overlayed over the Google map.

Author: mbehrlich

src/dev-app/google-map/google-map-demo.html

@@ -15,6 +15,7 @@
     <map-info-window>Testing 1 2 3</map-info-window>
     <map-polyline *ngIf="isPolylineDisplayed" [options]="polylineOptions"></map-polyline>
     <map-polygon *ngIf="isPolygonDisplayed" [options]="polygonOptions"></map-polygon>
+    <map-rectangle *ngIf="isRectangleDisplayed" [options]="rectangleOptions"></map-rectangle>
   </google-map>
 
   <p><label>Latitude:</label> {{display?.lat}}</p>
@@ -50,4 +51,19 @@
     </label>
   </div>
 
+  <div>
+    <label for="rectangle-checkbox">
+      Toggle Rectangle
+      <input type="checkbox" (click)="toggleRectangleDisplay()">
+    </label>
+  </div>
+  <div>
+    <label for="editable-rectangle-checkbox">
+      Toggle Editable Rectangle
+      <input type="checkbox"
+             [disabled]="!isRectangleDisplayed"
+             (click)="toggleEditableRectangle()">
+    </label>
+  </div>
+
 </div>

src/dev-app/google-map/google-map-demo.ts

@@ -7,14 +7,27 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {MapInfoWindow, MapMarker, MapPolygon, MapPolyline} from '@angular/google-maps';
+import {
+  MapInfoWindow,
+  MapMarker,
+  MapPolygon,
+  MapPolyline,
+  MapRectangle
+} from '@angular/google-maps';
 
 const POLYLINE_PATH: google.maps.LatLngLiteral[] =
     [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}];
 
 const POLYGON_PATH: google.maps.LatLngLiteral[] =
     [{lat: 20, lng: 21}, {lat: 22, lng: 23}, {lat: 24, lng: 25}];
 
+const RECTANGLE_BOUNDS: google.maps.LatLngBoundsLiteral = {
+  east: 30,
+  north: 15,
+  west: 10,
+  south: -5
+};
+
 /** Demo Component for @angular/google-maps/map */
 @Component({
   selector: 'google-map-demo',
@@ -25,6 +38,7 @@ export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
   @ViewChild(MapPolyline) polyline: MapPolyline;
   @ViewChild(MapPolygon) polygon: MapPolygon;
+  @ViewChild(MapRectangle) rectangle: MapRectangle;
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
@@ -37,6 +51,9 @@ export class GoogleMapDemo {
   isPolygonDisplayed = false;
   polygonOptions:
       google.maps.PolygonOptions = {paths: POLYGON_PATH, strokeColor: 'grey', strokeOpacity: 0.8};
+  isRectangleDisplayed = false;
+  rectangleOptions: google.maps
+      .RectangleOptions = {bounds: RECTANGLE_BOUNDS, strokeColor: 'grey', strokeOpacity: 0.8};
 
   handleClick(event: google.maps.MouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
@@ -77,4 +94,16 @@ export class GoogleMapDemo {
       paths: this.polygon.getPaths()
     };
   }
+
+  toggleRectangleDisplay() {
+    this.isRectangleDisplayed = !this.isRectangleDisplayed;
+  }
+
+  toggleEditableRectangle() {
+    this.rectangleOptions = {
+      ...this.rectangleOptions,
+      editable: !this.rectangleOptions.editable,
+      bounds: this.rectangle.getBounds()
+    };
+  }
 }

src/google-maps/google-maps-module.ts

@@ -13,13 +13,15 @@ import {MapInfoWindow} from './map-info-window/map-info-window';
 import {MapMarker} from './map-marker/map-marker';
 import {MapPolygon} from './map-polygon/map-polygon';
 import {MapPolyline} from './map-polyline/map-polyline';
+import {MapRectangle} from './map-rectangle/map-rectangle';
 
 const COMPONENTS = [
   GoogleMap,
   MapInfoWindow,
   MapMarker,
   MapPolyline,
   MapPolygon,
+  MapRectangle,
 ];
 
 @NgModule({

src/google-maps/map-rectangle/map-rectangle.spec.ts

@@ -0,0 +1,165 @@
+import {Component, ViewChild} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {DEFAULT_OPTIONS, UpdatedGoogleMap} from '../google-map/google-map';
+import {GoogleMapsModule} from '../google-maps-module';
+import {
+  createMapConstructorSpy,
+  createMapSpy,
+  createRectangleConstructorSpy,
+  createRectangleSpy,
+  TestingWindow,
+} from '../testing/fake-google-map-utils';
+
+import {MapRectangle} from './map-rectangle';
+
+describe('MapRectangle', () => {
+  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
+  let rectangleBounds: google.maps.LatLngBoundsLiteral;
+  let rectangleOptions: google.maps.RectangleOptions;
+
+  beforeEach(async(() => {
+    rectangleBounds = {east: 30, north: 15, west: 10, south: -5};
+    rectangleOptions = {bounds: rectangleBounds, strokeColor: 'grey', strokeOpacity: 0.8};
+    TestBed.configureTestingModule({
+      imports: [GoogleMapsModule],
+      declarations: [TestApp],
+    });
+  }));
+
+  beforeEach(() => {
+    TestBed.compileComponents();
+
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+  });
+
+  afterEach(() => {
+    const testingWindow: TestingWindow = window;
+    delete testingWindow.google;
+  });
+
+  it('initializes a Google Map Rectangle', () => {
+    const rectangleSpy = createRectangleSpy({});
+    const rectangleConstructorSpy = createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(rectangleConstructorSpy).toHaveBeenCalledWith({bounds: undefined});
+    expect(rectangleSpy.setMap).toHaveBeenCalledWith(mapSpy);
+  });
+
+  it('sets bounds from input', () => {
+    const bounds: google.maps.LatLngBoundsLiteral = {east: 3, north: 5, west: -3, south: -5};
+    const options: google.maps.RectangleOptions = {bounds};
+    const rectangleSpy = createRectangleSpy(options);
+    const rectangleConstructorSpy = createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.bounds = bounds;
+    fixture.detectChanges();
+
+    expect(rectangleConstructorSpy).toHaveBeenCalledWith(options);
+  });
+
+  it('gives precedence to bounds input over options', () => {
+    const bounds: google.maps.LatLngBoundsLiteral = {east: 3, north: 5, west: -3, south: -5};
+    const expectedOptions: google.maps.RectangleOptions = {...rectangleOptions, bounds};
+    const rectangleSpy = createRectangleSpy(expectedOptions);
+    const rectangleConstructorSpy = createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = rectangleOptions;
+    fixture.componentInstance.bounds = bounds;
+    fixture.detectChanges();
+
+    expect(rectangleConstructorSpy).toHaveBeenCalledWith(expectedOptions);
+  });
+
+  it('exposes methods that provide information about the Rectangle', () => {
+    const rectangleSpy = createRectangleSpy(rectangleOptions);
+    createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const rectangleComponent = fixture.debugElement.query(By.directive(
+        MapRectangle))!.injector.get<MapRectangle>(MapRectangle);
+    fixture.detectChanges();
+
+    rectangleComponent.getBounds();
+    expect(rectangleSpy.getBounds).toHaveBeenCalled();
+
+    rectangleSpy.getDraggable.and.returnValue(true);
+    expect(rectangleComponent.getDraggable()).toBe(true);
+
+    rectangleSpy.getEditable.and.returnValue(true);
+    expect(rectangleComponent.getEditable()).toBe(true);
+
+    rectangleSpy.getVisible.and.returnValue(true);
+    expect(rectangleComponent.getVisible()).toBe(true);
+  });
+
+  it('initializes Rectangle event handlers', () => {
+    const rectangleSpy = createRectangleSpy(rectangleOptions);
+    createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const addSpy = rectangleSpy.addListener;
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(addSpy).toHaveBeenCalledWith('bounds_changed', jasmine.any(Function));
+    expect(addSpy).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mousedown', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mousemove', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseup', jasmine.any(Function));
+    expect(addSpy).toHaveBeenCalledWith('rightclick', jasmine.any(Function));
+  });
+
+  it('should be able to add an event listener after init', () => {
+    const rectangleSpy = createRectangleSpy(rectangleOptions);
+    createRectangleConstructorSpy(rectangleSpy).and.callThrough();
+
+    const addSpy = rectangleSpy.addListener;
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(addSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+
+    // Pick an event that isn't bound in the template.
+    const subscription = fixture.componentInstance.rectangle.rectangleDragend.subscribe();
+    fixture.detectChanges();
+
+    expect(addSpy).toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    subscription.unsubscribe();
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map>
+                <map-rectangle [options]="options"
+                               [bounds]="bounds"
+                               (boundsChanged)="handleBoundsChange()"
+                               (rectangleClick)="handleClick()"
+                               (rectangleRightclick)="handleRightclick()">
+                </map-rectangle>
+            </google-map>`,
+})
+class TestApp {
+  @ViewChild(MapRectangle) rectangle: MapRectangle;
+  options?: google.maps.RectangleOptions;
+  bounds?: google.maps.LatLngBoundsLiteral;
+
+  handleBoundsChange() {}
+
+  handleClick() {}
+
+  handleRightclick() {}
+}