feat(FitBounds): add fitBounds to agm-polyline-point

Allow agm polyline point to allow autofitting around polylines. Closes #1693
sebholstein · Sep 16, 2019 · 74ceb2f · 74ceb2f
1 parent 2bf73de
commit 74ceb2f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/packages/core/directives/polyline-point.spec.ts b/packages/core/directives/polyline-point.spec.ts
@@ -1,4 +1,6 @@
 import { SimpleChange, SimpleChanges } from '@angular/core';
+import { discardPeriodicTasks, fakeAsync, tick } from '@angular/core/testing';
+import { FitBoundsDetails } from '../services/fit-bounds';
 import { AgmPolylinePoint } from './polyline-point';
 
 describe('AgmPolylinePoint', () => {
@@ -45,5 +47,26 @@ describe('AgmPolylinePoint', () => {
       expect(polylinePoint.positionChanged.emit)
           .toHaveBeenCalledWith({lat: 'newLat', lng: 'newLng'});
     });
+    it('should emit bounds on latitude and longitude change', fakeAsync(() => {
+      const polylinePoint = new AgmPolylinePoint();
+      polylinePoint.latitude = 50;
+      polylinePoint.longitude = -50;
+
+      let value: FitBoundsDetails = null;
+      polylinePoint.getFitBoundsDetails$().subscribe(details => value = details);
+
+      expect(value).toEqual({ latLng: {lat: 50, lng: -50} });
+
+      const positionChanges: SimpleChanges = {
+        'latitude': new SimpleChange(50, 100, false),
+        'longitude': new SimpleChange(-50, -100, false),
+      };
+      polylinePoint.ngOnChanges(positionChanges);
+
+      tick(1);
+      expect(value).toEqual({ latLng: {lat: 100, lng: -100} });
+
+      discardPeriodicTasks();
+    }));
   });
 });
diff --git a/packages/core/directives/polyline-point.ts b/packages/core/directives/polyline-point.ts
@@ -1,12 +1,20 @@
-import { Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Directive, EventEmitter, forwardRef, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 import { LatLngLiteral } from '../../core/services/google-maps-types';
+import { FitBoundsAccessor, FitBoundsDetails } from '../services/fit-bounds';
 
 /**
  * AgmPolylinePoint represents one element of a polyline within a  {@link
  * AgmPolyline}
  */
-@Directive({selector: 'agm-polyline-point'})
-export class AgmPolylinePoint implements OnChanges {
+@Directive({
+  selector: 'agm-polyline-point',
+  providers: [
+    {provide: FitBoundsAccessor, useExisting: forwardRef(() => AgmPolylinePoint)},
+  ],
+})
+export class AgmPolylinePoint implements OnChanges, FitBoundsAccessor {
   /**
    * The latitude position of the point.
    */
@@ -33,4 +41,12 @@ export class AgmPolylinePoint implements OnChanges {
       this.positionChanged.emit(position);
     }
   }
+
+  /** @internal */
+  getFitBoundsDetails$(): Observable<FitBoundsDetails> {
+    return this.positionChanged.pipe(
+      startWith({lat: this.latitude, lng: this.longitude}),
+      map(position => ({latLng: position}))
+    );
+  }
 }