From 74ceb2f04022034a6d2373e87abec5de3db44670 Mon Sep 17 00:00:00 2001 From: Panagiotis Kapros Date: Mon, 16 Sep 2019 17:59:05 +0300 Subject: [PATCH] feat(FitBounds): add fitBounds to agm-polyline-point Allow agm polyline point to allow autofitting around polylines. Closes #1693 --- .../core/directives/polyline-point.spec.ts | 23 +++++++++++++++++++ packages/core/directives/polyline-point.ts | 22 +++++++++++++++--- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/packages/core/directives/polyline-point.spec.ts b/packages/core/directives/polyline-point.spec.ts index 134c94841..2f8cbad3f 100644 --- 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 index 379a5d144..8d9f0fef3 100644 --- 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 { + return this.positionChanged.pipe( + startWith({lat: this.latitude, lng: this.longitude}), + map(position => ({latLng: position})) + ); + } }