From 8ed927b8a0746cb706b7a6a14ce03ad3f882a29c Mon Sep 17 00:00:00 2001 From: TSHiYK Date: Thu, 21 Jul 2016 18:47:28 +0900 Subject: [PATCH] feat(SebmGoogleMapMarker): support opacity Closes #523 Closes #522 --- src/core/directives/google-map-marker.ts | 19 +++++++--- src/core/services/google-maps-types.ts | 2 ++ src/core/services/managers/marker-manager.ts | 7 +++- test/services/managers/marker-manager.spec.ts | 35 +++++++++++++++++-- 4 files changed, 55 insertions(+), 8 deletions(-) diff --git a/src/core/directives/google-map-marker.ts b/src/core/directives/google-map-marker.ts index 4e7443d96..79fb2238c 100644 --- a/src/core/directives/google-map-marker.ts +++ b/src/core/directives/google-map-marker.ts @@ -38,7 +38,7 @@ let markerId = 0; selector: 'sebm-google-map-marker', inputs: [ 'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl', - 'openInfoWindow', 'fitBounds' + 'openInfoWindow', 'fitBounds', 'opacity' ], outputs: ['markerClick', 'dragEnd'] }) @@ -78,6 +78,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn */ openInfoWindow: boolean = true; + /** + * The marker's opacity between 0.0 and 1.0. + */ + opacity: number = 1; + /** * This event emitter gets emitted when the user clicks on the marker. */ @@ -129,6 +134,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn if (changes['iconUrl']) { this._markerManager.updateIcon(this); } + if (changes['opacity']) { + this._markerManager.updateOpacity(this); + } } private _addEventListeners() { @@ -140,10 +148,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn }); this._observableSubscriptions.push(cs); - const ds = this._markerManager.createEventObservable('dragend', this) - .subscribe((e: mapTypes.MouseEvent) => { - this.dragEnd.emit({coords: {lat: e.latLng.lat(), lng: e.latLng.lng()}}); - }); + const ds = + this._markerManager.createEventObservable('dragend', this) + .subscribe((e: mapTypes.MouseEvent) => { + this.dragEnd.emit({coords: {lat: e.latLng.lat(), lng: e.latLng.lng()}}); + }); this._observableSubscriptions.push(ds); } diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts index aa56107c6..40b1bb442 100644 --- a/src/core/services/google-maps-types.ts +++ b/src/core/services/google-maps-types.ts @@ -27,6 +27,7 @@ export interface Marker extends MVCObject { setLabel(label: string|MarkerLabel): void; setDraggable(draggable: boolean): void; setIcon(icon: string): void; + setOpacity(opacity: number): void; getLabel(): MarkerLabel; } @@ -37,6 +38,7 @@ export interface MarkerOptions { label?: string|MarkerLabel; draggable?: boolean; icon?: string; + opacity?: number; } export interface MarkerLabel { diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts index c7e3ebdd9..9bcb9ba34 100644 --- a/src/core/services/managers/marker-manager.ts +++ b/src/core/services/managers/marker-manager.ts @@ -49,12 +49,17 @@ export class MarkerManager { return this._markers.get(marker).then((m: Marker) => m.setIcon(marker.iconUrl)); } + updateOpacity(marker: SebmGoogleMapMarker): Promise { + return this._markers.get(marker).then((m: Marker) => m.setOpacity(marker.opacity)); + } + addMarker(marker: SebmGoogleMapMarker) { const markerPromise = this._mapsWrapper.createMarker({ position: {lat: marker.latitude, lng: marker.longitude}, label: marker.label, draggable: marker.draggable, - icon: marker.iconUrl + icon: marker.iconUrl, + opacity: marker.opacity }); this._markers.set(marker, markerPromise); } diff --git a/test/services/managers/marker-manager.spec.ts b/test/services/managers/marker-manager.spec.ts index dbbea90e8..efe0aeeae 100644 --- a/test/services/managers/marker-manager.spec.ts +++ b/test/services/managers/marker-manager.spec.ts @@ -33,7 +33,8 @@ export function main() { position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false, - icon: undefined + icon: undefined, + opacity: 1 }); })); }); @@ -75,7 +76,8 @@ export function main() { position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false, - icon: undefined + icon: undefined, + opacity: 1 }); const iconUrl = 'http://angular-maps.com/icon.png'; newMarker.iconUrl = iconUrl; @@ -83,5 +85,34 @@ export function main() { () => { expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl); }); }))); }); + + describe('set marker opacity', () => { + it('should update that marker via setOpacity method when the markerOpacity changes', + async(inject( + [MarkerManager, GoogleMapsAPIWrapper], + (markerManager: MarkerManager, apiWrapper: GoogleMapsAPIWrapper) => { + const newMarker = new SebmGoogleMapMarker(markerManager); + newMarker.latitude = 34.4; + newMarker.longitude = 22.3; + newMarker.label = 'A'; + + const markerInstance: Marker = + jasmine.createSpyObj('Marker', ['setMap', 'setOpacity']); + (apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance)); + + markerManager.addMarker(newMarker); + expect(apiWrapper.createMarker).toHaveBeenCalledWith({ + position: {lat: 34.4, lng: 22.3}, + label: 'A', + draggable: false, + icon: undefined, + opacity: 1 + }); + const opacity = 0.4; + newMarker.opacity = opacity; + return markerManager.updateOpacity(newMarker).then( + () => { expect(markerInstance.setOpacity).toHaveBeenCalledWith(opacity); }); + }))); + }); }); }