fix: use AsyncSubject for internal load event

When a component was initialised after the load event (with ngIf for example), he was stuck to doing nothing
Wykks · Nov 14, 2017 · 456013a · 456013a
1 parent ef08f9f
commit 456013a
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 12 deletions.
diff --git a/src/app/lib/layer/layer.component.spec.ts b/src/app/lib/layer/layer.component.spec.ts
@@ -11,10 +11,7 @@ describe('LayerComponent', () => {
     addLayer = jasmine.createSpy('addLayer');
     removeLayer = jasmine.createSpy('removeLayer');
     setAllLayerPaintProperty = jasmine.createSpy('setAllPaintProperty');
-    mapCreated$ = of(undefined);
-    mapEvents = {
-      load: of(undefined)
-    };
+    mapLoaded$ = of(undefined);
   }
 
   let msSpy: MapServiceSpy;

diff --git a/src/app/lib/layer/layer.component.ts b/src/app/lib/layer/layer.component.ts
@@ -67,7 +67,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addLayer({
         layerOptions: {
           id: this.id,

diff --git a/src/app/lib/map/map.service.ts b/src/app/lib/map/map.service.ts
@@ -35,15 +35,18 @@ export type AllSource = MapboxGl.VectorSource |
 export class MapService {
   mapInstance: MapboxGl.Map;
   mapCreated$: Observable<void>;
+  mapLoaded$: Observable<void>;
   mapEvents: MapEvent;
 
   private mapCreated = new AsyncSubject<void>();
+  private mapLoaded = new AsyncSubject<void>();
 
   constructor(
     private zone: NgZone,
     @Optional() @Inject(MAPBOX_API_KEY) private readonly MAPBOX_API_KEY: string
   ) {
     this.mapCreated$ = this.mapCreated.asObservable();
+    this.mapLoaded$ = this.mapLoaded.asObservable();
   }
 
   setup(options: SetupMap) {
@@ -343,6 +346,11 @@ export class MapService {
   }
 
   private hookEvents(events: MapEvent) {
+    this.mapInstance.on('load', () => {
+      this.mapLoaded.next(undefined);
+      this.mapLoaded.complete();
+      this.zone.run(() => events.load.emit());
+    });
     this.mapInstance.on('resize', () => this.zone.run(() => events.resize.emit()));
     this.mapInstance.on('remove', () => this.zone.run(() => events.remove.emit()));
     this.mapInstance.on('mousedown', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseDown.emit(evt)));
@@ -379,7 +387,6 @@ export class MapService {
     this.mapInstance.on('boxzoomcancel', (evt: MapboxGl.MapBoxZoomEvent) => this.zone.run(() => events.boxZoomCancel.emit(evt)));
     this.mapInstance.on('webglcontextlost', () => this.zone.run(() => events.webGlContextLost.emit()));
     this.mapInstance.on('webglcontextrestored', () => this.zone.run(() => events.webGlContextRestored.emit()));
-    this.mapInstance.on('load', () => this.zone.run(() => events.load.emit()));
     this.mapInstance.on('render', () => this.zone.run(() => events.render.emit()));
     this.mapInstance.on('error', () => this.zone.run(() => events.error.emit()));
     this.mapInstance.on('data', (evt: MapboxGl.EventData) => this.zone.run(() => events.data.emit(evt)));

diff --git a/src/app/lib/source/canvas-source.component.ts b/src/app/lib/source/canvas-source.component.ts
@@ -24,7 +24,7 @@ export class CanvasSourceComponent implements OnInit, OnDestroy, OnChanges, Canv
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       const source = {
         type: 'canvas',
         coordinates: this.coordinates,

diff --git a/src/app/lib/source/geojson/geojson-source.component.ts b/src/app/lib/source/geojson/geojson-source.component.ts
@@ -35,7 +35,7 @@ export class GeoJSONSourceComponent implements OnInit, OnDestroy, OnChanges, Geo
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addSource(this.id, {
         type: 'geojson',
         data: this.data,

diff --git a/src/app/lib/source/image-source.component.ts b/src/app/lib/source/image-source.component.ts
@@ -23,7 +23,7 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addSource(this.id, {
         type: 'image',
         url: this.url,

diff --git a/src/app/lib/source/raster-source.component.ts b/src/app/lib/source/raster-source.component.ts
@@ -29,7 +29,7 @@ export class RasterSourceComponent implements OnInit, OnDestroy, OnChanges, Rast
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       const source = {
         type: this.type,
         url: this.url,

diff --git a/src/app/lib/source/vector-source.component.ts b/src/app/lib/source/vector-source.component.ts
@@ -27,7 +27,7 @@ export class VectorSourceComponent implements OnInit, OnDestroy, OnChanges, Vect
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addSource(this.id, {
         type: this.type,
         url: this.url,

diff --git a/src/app/lib/source/video-source.component.ts b/src/app/lib/source/video-source.component.ts
@@ -23,7 +23,7 @@ export class VideoSourceComponent implements OnInit, OnDestroy, OnChanges, Video
   ) { }
 
   ngOnInit() {
-    this.MapService.mapCreated$.switchMap(() => this.MapService.mapEvents.load).first().subscribe(() => {
+    this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addSource(this.id, {
         type: 'video',
         urls: this.urls,