fix(sources): add a guard to ensure that the source is added before o…

…nChanges
Wykks · Oct 18, 2017 · 64f3f97 · 64f3f97
1 parent ee05737
commit 64f3f97
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 20 deletions.
diff --git a/src/app/lib/source/canvas-source.component.ts b/src/app/lib/source/canvas-source.component.ts
@@ -17,24 +17,30 @@ export class CanvasSourceComponent implements OnInit, OnDestroy, OnChanges, Canv
   @Input() contextType: '2d' | 'webgl' | 'experimental-webgl' | 'webgl2';
   @Input() animate?: boolean;
 
+  private sourceAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
 
   ngOnInit() {
-    const source = {
-      type: 'canvas',
-      coordinates: this.coordinates,
-      canvas: this.canvas,
-      animate: this.animate,
-      contextType: this.contextType
-    };
     this.MapService.mapLoaded$.subscribe(() => {
+      const source = {
+        type: 'canvas',
+        coordinates: this.coordinates,
+        canvas: this.canvas,
+        animate: this.animate,
+        contextType: this.contextType
+      };
       this.MapService.addSource(this.id, source);
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.coordinates && !changes.coordinates.isFirstChange() ||
       changes.canvas && !changes.canvas.isFirstChange() ||

diff --git a/src/app/lib/source/geojson/geojson-source.component.ts b/src/app/lib/source/geojson/geojson-source.component.ts
@@ -25,17 +25,18 @@ export class GeoJSONSourceComponent implements OnInit, OnDestroy, OnChanges, Geo
 
   private updateFeatureData = new Subject();
   private sub: Subscription;
+  private sourceAdded = false;
 
   constructor(
     private MapService: MapService
   ) { }
 
   ngOnInit() {
-    this.data = this.data ? this.data : {
-      type: 'FeatureCollection',
-      features: []
-    };
     this.MapService.mapLoaded$.subscribe(() => {
+      this.data = this.data ? this.data : {
+        type: 'FeatureCollection',
+        features: []
+      };
       this.MapService.addSource(this.id, {
         type: 'geojson',
         data: this.data,
@@ -50,10 +51,14 @@ export class GeoJSONSourceComponent implements OnInit, OnDestroy, OnChanges, Geo
         const source = this.MapService.getSource<GeoJSONSource>(this.id);
         source.setData(this.data!);
       });
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.maxzoom && !changes.maxzoom.isFirstChange() ||
       changes.buffer && !changes.buffer.isFirstChange() ||

diff --git a/src/app/lib/source/image-source.component.ts b/src/app/lib/source/image-source.component.ts
@@ -15,6 +15,8 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
   @Input() url: string;
   @Input() coordinates: number[][];
 
+  private sourceAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
@@ -26,10 +28,14 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
         url: this.url,
         coordinates: this.coordinates
       });
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.url && !changes.url.isFirstChange() ||
       changes.coordinates && !changes.coordinates.isFirstChange()

diff --git a/src/app/lib/source/raster-source.component.ts b/src/app/lib/source/raster-source.component.ts
@@ -21,26 +21,32 @@ export class RasterSourceComponent implements OnInit, OnDestroy, OnChanges, Rast
 
   type: 'raster' = 'raster'; // Just to make ts happy
 
+  private sourceAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
 
   ngOnInit() {
-    const source = {
-      type: this.type,
-      url: this.url,
-      tiles: this.tiles,
-      bounds: this.bounds,
-      minzoom: this.minzoom,
-      maxzoom: this.maxzoom,
-      tileSize: this.tileSize
-    };
     this.MapService.mapLoaded$.subscribe(() => {
+      const source = {
+        type: this.type,
+        url: this.url,
+        tiles: this.tiles,
+        bounds: this.bounds,
+        minzoom: this.minzoom,
+        maxzoom: this.maxzoom,
+        tileSize: this.tileSize
+      };
       this.MapService.addSource(this.id, source);
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.url && !changes.url.isFirstChange() ||
       changes.tiles && !changes.tiles.isFirstChange() ||

diff --git a/src/app/lib/source/vector-source.component.ts b/src/app/lib/source/vector-source.component.ts
@@ -19,6 +19,8 @@ export class VectorSourceComponent implements OnInit, OnDestroy, OnChanges, Vect
 
   type: 'vector' = 'vector'; // Just to make ts happy
 
+  private sourceAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
@@ -32,10 +34,14 @@ export class VectorSourceComponent implements OnInit, OnDestroy, OnChanges, Vect
         minzoom: this.minzoom,
         maxzoom: this.maxzoom,
       });
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.url && !changes.url.isFirstChange() ||
       changes.tiles && !changes.tiles.isFirstChange() ||

diff --git a/src/app/lib/source/video-source.component.ts b/src/app/lib/source/video-source.component.ts
@@ -15,6 +15,8 @@ export class VideoSourceComponent implements OnInit, OnDestroy, OnChanges, Video
   @Input() urls: string[];
   @Input() coordinates: number[][];
 
+  private sourceAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
@@ -26,10 +28,14 @@ export class VideoSourceComponent implements OnInit, OnDestroy, OnChanges, Video
         urls: this.urls,
         coordinates: this.coordinates
       });
+      this.sourceAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.sourceAdded) {
+      return;
+    }
     if (
       changes.urls && !changes.urls.isFirstChange() ||
       changes.coordinates && !changes.coordinates.isFirstChange()