Skip to content

Commit

Permalink
fix: Change many outputs to avoid confusion (fix #107)
Browse files Browse the repository at this point in the history 
Inspired by @angular/component google-map component
  • Loading branch information
@Wykks
Wykks committed Dec 12, 2020
1 parent eddbda7 commit 7b50fd8
Show file tree
Hide file tree
Showing 20 changed files with 718 additions and 140 deletions.
5 changes: 4 additions & 1 deletion angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,5 +159,8 @@
}
}
},
"defaultProject": "ngx-mapbox-gl"
"defaultProject": "ngx-mapbox-gl",
"cli": {
"analytics": "2b945751-c795-4db1-b8ac-172907057b11"
}
}
58 changes: 50 additions & 8 deletions projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
Output,
SimpleChanges,
} from '@angular/core';
// @ts-ignore
import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { MapService } from '../map/map.service';
import { GeocoderEvent } from '../map/map.types';
import { deprecationWarning } from '../utils';
import { ControlComponent } from './control.component';

// @ts-ignore
import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

export const MAPBOX_GEOCODER_API_KEY = new InjectionToken('MapboxApiKey');

export interface LngLatLiteral {
Expand Down Expand Up @@ -66,8 +66,23 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge

@Output() clear = new EventEmitter<void>();
@Output() loading = new EventEmitter<{ query: string }>();

@Output() geocoderResults = new EventEmitter<Results>();

@Output() geocoderResult = new EventEmitter<{ result: Result }>();

@Output() geocoderError = new EventEmitter<any>();
/**
* @deprecated Use geocoderResults instead
*/
@Output() results = new EventEmitter<Results>();
/**
* @deprecated Use geocoderResult instead
*/
@Output() result = new EventEmitter<{ result: Result }>();
/**
* @deprecated Use geocoderError instead
*/
@Output() error = new EventEmitter<any>();

geocoder: any;
Expand Down Expand Up @@ -137,20 +152,34 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge
}

private hookEvents(events: GeocoderEvent) {
if (events.results.observers.length) {
this.geocoder.on('results', (evt: Results) => this.zone.run(() => events.results.emit(evt)));
this.warnDeprecatedOutputs(events);
if (events.results.observers.length || events.geocoderResults.observers.length) {
this.geocoder.on('results', (evt: Results) =>
this.zone.run(() => {
events.geocoderResults.emit(evt);
events.results.emit(evt);
})
);
}
if (events.result.observers.length) {
this.geocoder.on('result', (evt: { result: Result }) => {
// Workaroud issue https://github.com/mapbox/mapbox-gl-geocoder/issues/99
if (this.lastResultId !== evt.result.id) {
this.lastResultId = evt.result.id;
this.zone.run(() => events.result.emit(evt));
this.zone.run(() => {
events.geocoderResult.emit(evt);
events.result.emit(evt);
});
}
});
}
if (events.error.observers.length) {
this.geocoder.on('error', (evt: any) => this.zone.run(() => events.error.emit(evt)));
if (events.error.observers.length || events.geocoderError.observers.length) {
this.geocoder.on('error', (evt: any) =>
this.zone.run(() => {
events.geocoderError.emit(evt);
events.error.emit(evt);
})
);
}
if (events.loading.observers.length) {
this.geocoder.on('loading', (evt: { query: string }) => this.zone.run(() => events.loading.emit(evt)));
Expand All @@ -159,4 +188,17 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge
this.geocoder.on('clear', () => this.zone.run(() => events.clear.emit()));
}
}

private warnDeprecatedOutputs(events: GeocoderEvent) {
const dw = deprecationWarning.bind(undefined, GeocoderControlDirective.name);
if (events.results.observers.length) {
dw('results', 'geocoderResults');
}
if (events.result.observers.length) {
dw('result', 'geocoderResult');
}
if (events.error.observers.length) {
dw('error', 'geocoderError');
}
}
}
48 changes: 42 additions & 6 deletions projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { LayerComponent } from '../layer/layer.component';
import { MapService } from '../map/map.service';
import { MarkerComponent } from '../marker/marker.component';
import { FeatureComponent } from '../source/geojson/feature.component';
import { deprecationWarning } from '../utils';

@Directive({
selector: '[mglDraggable]',
Expand All @@ -14,8 +15,20 @@ export class DraggableDirective implements OnInit, OnDestroy {
// tslint:disable-next-line:no-input-rename
@Input('mglDraggable') layer?: LayerComponent;

@Output() featureDragStart = new EventEmitter<MapMouseEvent>();
@Output() featureDragEnd = new EventEmitter<MapMouseEvent>();
@Output() featureDrag = new EventEmitter<MapMouseEvent>();
/**
* @deprecated Use featureDragStart instead
*/
@Output() dragStart = new EventEmitter<MapMouseEvent>();
/**
* @deprecated Use featureDragEnd instead
*/
@Output() dragEnd = new EventEmitter<MapMouseEvent>();
/**
* @deprecated Use featureDrag instead
*/
@Output() drag = new EventEmitter<MapMouseEvent>();

private destroyed$: ReplaySubject<void> = new ReplaySubject(1);
Expand All @@ -28,6 +41,7 @@ export class DraggableDirective implements OnInit, OnDestroy {
) {}

ngOnInit() {
this.warnDeprecatedOutputs();
let enter$;
let leave$;
let updateCoords;
Expand Down Expand Up @@ -83,20 +97,29 @@ export class DraggableDirective implements OnInit, OnDestroy {
const dragEnd$ = dragStart$.pipe(switchMap(() => mouseUp$.pipe(take(1))));
dragStart$.subscribe((evt) => {
moving = true;
if (this.dragStart.observers.length) {
this.NgZone.run(() => this.dragStart.emit(evt));
if (this.featureDragStart.observers.length || this.dragStart.observers.length) {
this.NgZone.run(() => {
this.featureDragStart.emit(evt);
this.dragStart.emit(evt);
});
}
});
dragging$.subscribe((evt) => {
updateCoords([evt.lngLat.lng, evt.lngLat.lat]);
if (this.drag.observers.length) {
this.NgZone.run(() => this.drag.emit(evt));
if (this.featureDrag.observers.length || this.drag.observers.length) {
this.NgZone.run(() => {
this.featureDrag.emit(evt);
this.drag.emit(evt);
});
}
});
dragEnd$.subscribe((evt) => {
moving = false;
if (this.dragEnd.observers.length) {
this.NgZone.run(() => this.dragEnd.emit(evt));
if (this.featureDragEnd.observers.length || this.dragEnd.observers.length) {
this.NgZone.run(() => {
this.featureDragEnd.emit(evt);
this.dragEnd.emit(evt);
});
}
if (!inside) {
// It's possible to dragEnd outside the target (small input lag)
Expand Down Expand Up @@ -129,4 +152,17 @@ export class DraggableDirective implements OnInit, OnDestroy {
}
return true;
}

private warnDeprecatedOutputs() {
const dw = deprecationWarning.bind(undefined, DraggableDirective.name);
if (this.dragStart.observers.length) {
dw('dragStart', 'featureDragStart');
}
if (this.dragEnd.observers.length) {
dw('dragEnd', 'featureDragEnd');
}
if (this.drag.observers.length) {
dw('drag', 'featureDrag');
}
}
}
22 changes: 22 additions & 0 deletions projects/ngx-mapbox-gl/src/lib/image/image.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { fromEvent, Subscription } from 'rxjs';
import { filter, startWith, switchMap } from 'rxjs/operators';
import { MapService } from '../map/map.service';
import { MapImageData, MapImageOptions } from '../map/map.types';
import { deprecationWarning } from '../utils';

@Component({
selector: 'mgl-image',
Expand All @@ -27,7 +28,15 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
@Input() options?: MapImageOptions;
@Input() url?: string;

@Output() imageError = new EventEmitter<{ status: number }>();
@Output() imageLoaded = new EventEmitter<void>();
/**
* @deprecated Use imageError instead
*/
@Output() error = new EventEmitter<{ status: number }>();
/**
* @deprecated Use imageLoaded instead
*/
@Output() loaded = new EventEmitter<void>();

private isAdded = false;
Expand All @@ -37,6 +46,7 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
constructor(private MapService: MapService, private zone: NgZone) {}

ngOnInit() {
this.warnDeprecatedOutputs();
this.sub = this.MapService.mapLoaded$
.pipe(
switchMap(() =>
Expand Down Expand Up @@ -81,13 +91,25 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
this.isAdded = true;
this.isAdding = false;
this.zone.run(() => {
this.imageLoaded.emit();
this.loaded.emit();
});
} catch (error) {
this.zone.run(() => {
this.imageError.emit(error);
this.error.emit(error);
});
}
}
}

private warnDeprecatedOutputs() {
const dw = deprecationWarning.bind(undefined, ImageComponent.name);
if (this.error.observers.length) {
dw('error', 'imageError');
}
if (this.loaded.observers.length) {
dw('loaded', 'imageLoaded');
}
}
}
Loading

0 comments on commit 7b50fd8

Please sign in to comment.