Skip to content

Commit

Permalink
fix: use AsyncSubject for internal load event
Browse files Browse the repository at this point in the history
When a component was initialised after the load event (with ngIf for example), he was stuck to doing nothing
  • Loading branch information
Wykks committed Nov 14, 2017
1 parent ef08f9f commit 456013a
Show file tree
Hide file tree
Showing 9 changed files with 16 additions and 12 deletions.
5 changes: 1 addition & 4 deletions src/app/lib/layer/layer.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/layer/layer.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 8 additions & 1 deletion src/app/lib/map/map.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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)));
Expand Down Expand Up @@ -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)));
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/canvas-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/geojson/geojson-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/image-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/raster-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/vector-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/app/lib/source/video-source.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 456013a

Please sign in to comment.