From f8a6553ea34a736c0e56e080c35a5980f7b34244 Mon Sep 17 00:00:00 2001 From: TSHiYK Date: Fri, 22 Jul 2016 11:03:42 +0900 Subject: [PATCH] feat(MarkerManager): set a visible option to marker. Closes #524 --- src/core/directives/google-map-marker.ts | 10 ++++- src/core/services/google-maps-types.ts | 2 + src/core/services/managers/marker-manager.ts | 7 +++- test/services/managers/marker-manager.spec.ts | 37 ++++++++++++++++++- 4 files changed, 52 insertions(+), 4 deletions(-) diff --git a/src/core/directives/google-map-marker.ts b/src/core/directives/google-map-marker.ts index 79fb2238c..36bc877b1 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', 'opacity' + 'openInfoWindow', 'fitBounds', 'opacity', 'visible' ], outputs: ['markerClick', 'dragEnd'] }) @@ -73,6 +73,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn */ iconUrl: string; + /** + * If true, the marker is visible + */ + visible: boolean = true; + /** * Whether to automatically open the child info window when the marker is clicked. */ @@ -137,6 +142,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn if (changes['opacity']) { this._markerManager.updateOpacity(this); } + if (changes['visible']) { + this._markerManager.updateVisible(this); + } } private _addEventListeners() { diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts index 40b1bb442..aa8473774 100644 --- a/src/core/services/google-maps-types.ts +++ b/src/core/services/google-maps-types.ts @@ -28,6 +28,7 @@ export interface Marker extends MVCObject { setDraggable(draggable: boolean): void; setIcon(icon: string): void; setOpacity(opacity: number): void; + setVisible(visible: boolean): void; getLabel(): MarkerLabel; } @@ -39,6 +40,7 @@ export interface MarkerOptions { draggable?: boolean; icon?: string; opacity?: number; + visible?: boolean; } export interface MarkerLabel { diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts index 9bcb9ba34..7e8d3e68b 100644 --- a/src/core/services/managers/marker-manager.ts +++ b/src/core/services/managers/marker-manager.ts @@ -53,13 +53,18 @@ export class MarkerManager { return this._markers.get(marker).then((m: Marker) => m.setOpacity(marker.opacity)); } + updateVisible(marker: SebmGoogleMapMarker): Promise { + return this._markers.get(marker).then((m: Marker) => m.setVisible(marker.visible)); + } + addMarker(marker: SebmGoogleMapMarker) { const markerPromise = this._mapsWrapper.createMarker({ position: {lat: marker.latitude, lng: marker.longitude}, label: marker.label, draggable: marker.draggable, icon: marker.iconUrl, - opacity: marker.opacity + opacity: marker.opacity, + visible: marker.visible }); this._markers.set(marker, markerPromise); } diff --git a/test/services/managers/marker-manager.spec.ts b/test/services/managers/marker-manager.spec.ts index efe0aeeae..099077e22 100644 --- a/test/services/managers/marker-manager.spec.ts +++ b/test/services/managers/marker-manager.spec.ts @@ -34,7 +34,8 @@ export function main() { label: 'A', draggable: false, icon: undefined, - opacity: 1 + opacity: 1, + visible: true }); })); }); @@ -77,7 +78,8 @@ export function main() { label: 'A', draggable: false, icon: undefined, - opacity: 1 + opacity: 1, + visible: true }); const iconUrl = 'http://angular-maps.com/icon.png'; newMarker.iconUrl = iconUrl; @@ -106,6 +108,7 @@ export function main() { label: 'A', draggable: false, icon: undefined, + visible: true, opacity: 1 }); const opacity = 0.4; @@ -114,5 +117,35 @@ export function main() { () => { expect(markerInstance.setOpacity).toHaveBeenCalledWith(opacity); }); }))); }); + + describe('set visible option', () => { + it('should update that marker via setVisible method when the visible 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'; + newMarker.visible = false; + + const markerInstance: Marker = + jasmine.createSpyObj('Marker', ['setMap', 'setVisible']); + (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, + visible: false, + opacity: 1 + }); + newMarker.visible = true; + return markerManager.updateVisible(newMarker).then( + () => { expect(markerInstance.setVisible).toHaveBeenCalledWith(true); }); + }))); + }); }); }