From 3c8e620e594f5bbb9107b3d5f1d05182b0d0839f Mon Sep 17 00:00:00 2001 From: HarelM Date: Wed, 6 Nov 2024 22:33:21 +0200 Subject: [PATCH] Align destory calls --- .../src/lib/control/control.component.ts | 15 +++++++-------- .../src/lib/image/image.component.ts | 11 ++++++----- .../src/lib/layer/layer.component.ts | 2 +- .../ngx-maplibre-gl/src/lib/map/map.component.ts | 2 +- .../src/lib/marker/marker.component.ts | 7 +++++-- .../src/lib/popup/popup.component.ts | 9 ++++++--- .../src/lib/source/geojson/feature.component.ts | 2 +- .../src/lib/source/image-source.component.ts | 2 +- .../src/lib/source/source.directive.ts | 11 ++++++----- .../examples/live-update-feature.component.ts | 2 +- .../live-update-image-srource.component.ts | 2 +- .../demo/examples/marker-alignment.component.ts | 2 +- .../demo/examples/ngx-cluster-html.component.ts | 14 +++++++------- .../stackblitz-edit/stackblitz-edit.component.ts | 2 +- .../layout/layout-toolbar-menu.component.ts | 9 +++++---- 15 files changed, 50 insertions(+), 42 deletions(-) diff --git a/projects/ngx-maplibre-gl/src/lib/control/control.component.ts b/projects/ngx-maplibre-gl/src/lib/control/control.component.ts index 77fc6cfc..3bcb6b61 100644 --- a/projects/ngx-maplibre-gl/src/lib/control/control.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/control/control.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, - DestroyRef, ElementRef, + OnDestroy, afterNextRender, inject, input, @@ -61,10 +61,9 @@ export class CustomControl implements IControl { changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, }) -export class ControlComponent { +export class ControlComponent implements OnDestroy { /** Init injection */ private readonly mapService = inject(MapService); - private readonly destroyRef = inject(DestroyRef); /** Init input */ readonly position = input(); @@ -83,11 +82,11 @@ export class ControlComponent { }); } }); + } - this.destroyRef.onDestroy(() => { - if (this.mapService?.mapInstance?.hasControl(this.control)) { - this.mapService.removeControl(this.control); - } - }); + ngOnDestroy(): void { + if (this.mapService?.mapInstance?.hasControl(this.control)) { + this.mapService.removeControl(this.control); + } } } diff --git a/projects/ngx-maplibre-gl/src/lib/image/image.component.ts b/projects/ngx-maplibre-gl/src/lib/image/image.component.ts index 93d1983a..b5a72613 100644 --- a/projects/ngx-maplibre-gl/src/lib/image/image.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/image/image.component.ts @@ -4,6 +4,7 @@ import { DestroyRef, NgZone, OnChanges, + OnDestroy, OnInit, SimpleChanges, inject, @@ -54,7 +55,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ImageComponent implements OnInit, OnChanges { +export class ImageComponent implements OnInit, OnChanges, OnDestroy { /** Init injection */ private readonly mapService = inject(MapService); private readonly destroyRef = inject(DestroyRef); @@ -79,10 +80,6 @@ export class ImageComponent implements OnInit, OnChanges { private isAdded = signal(false); private isAdding = signal(false); - constructor() { - this.destroyRef.onDestroy(() => this.removeImage()); - } - ngOnInit() { this.mapService.mapLoaded$ .pipe( @@ -112,6 +109,10 @@ export class ImageComponent implements OnInit, OnChanges { } } + ngOnDestroy(): void { + this.removeImage() + } + removeImage() { if (this.isAdded()) { this.mapService.removeImage(this.id()); diff --git a/projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts b/projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts index f80b1086..7f3b1e80 100644 --- a/projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts @@ -145,7 +145,7 @@ export class LayerComponent } } - ngOnDestroy() { + ngOnDestroy(): void { if (this.layerAdded()) { const sourceIdAdded = this.sourceIdAdded(); this.mapService.removeLayer(this.id()); diff --git a/projects/ngx-maplibre-gl/src/lib/map/map.component.ts b/projects/ngx-maplibre-gl/src/lib/map/map.component.ts index 3885f4d5..21fe8346 100644 --- a/projects/ngx-maplibre-gl/src/lib/map/map.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/map/map.component.ts @@ -347,7 +347,7 @@ export class MapComponent implements OnChanges, OnDestroy, MapEvent { }); } - ngOnDestroy() { + ngOnDestroy(): void { this.mapService.destroyMap(); } diff --git a/projects/ngx-maplibre-gl/src/lib/marker/marker.component.ts b/projects/ngx-maplibre-gl/src/lib/marker/marker.component.ts index 6ea1d526..9ec9df83 100644 --- a/projects/ngx-maplibre-gl/src/lib/marker/marker.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/marker/marker.component.ts @@ -4,6 +4,7 @@ import { DestroyRef, ElementRef, OnChanges, + OnDestroy, OnInit, SimpleChanges, ViewEncapsulation, @@ -45,7 +46,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, }) -export class MarkerComponent implements OnChanges, OnInit { +export class MarkerComponent implements OnChanges, OnInit, OnDestroy { /** Init injection */ private readonly mapService = inject(MapService); private readonly destroyRef = inject(DestroyRef); @@ -109,8 +110,10 @@ export class MarkerComponent implements OnChanges, OnInit { this.markerInstance.set(marker); }); }); + } - this.destroyRef.onDestroy(() => this.removeMarker()); + ngOnDestroy(): void { + this.removeMarker(); } ngOnInit() { diff --git a/projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts b/projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts index f58a86b3..35d18402 100644 --- a/projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts @@ -4,6 +4,7 @@ import { DestroyRef, ElementRef, OnChanges, + OnDestroy, OnInit, SimpleChanges, afterNextRender, @@ -43,7 +44,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, }) -export class PopupComponent implements OnChanges, OnInit { +export class PopupComponent implements OnChanges, OnInit, OnDestroy { /** Init injection */ private readonly destroyRef = inject(DestroyRef); private readonly mapService = inject(MapService); @@ -105,8 +106,6 @@ export class PopupComponent implements OnChanges, OnInit { .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(); }); - - this.destroyRef.onDestroy(() => this.removePopupFromMarker()); } ngOnInit() { @@ -157,6 +156,10 @@ export class PopupComponent implements OnChanges, OnInit { } } + ngOnDestroy(): void { + this.removePopupFromMarker(); + } + private createPopup() { return this.mapService.createPopup( { diff --git a/projects/ngx-maplibre-gl/src/lib/source/geojson/feature.component.ts b/projects/ngx-maplibre-gl/src/lib/source/geojson/feature.component.ts index de37bce5..e482899b 100644 --- a/projects/ngx-maplibre-gl/src/lib/source/geojson/feature.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/source/geojson/feature.component.ts @@ -52,7 +52,7 @@ export class FeatureComponent implements OnInit, OnDestroy { this.geoJSONSourceComponent._addFeature(this.feature); } - ngOnDestroy() { + ngOnDestroy(): void { this.geoJSONSourceComponent._removeFeature(this.feature); } diff --git a/projects/ngx-maplibre-gl/src/lib/source/image-source.component.ts b/projects/ngx-maplibre-gl/src/lib/source/image-source.component.ts index c87cf477..d75e3400 100644 --- a/projects/ngx-maplibre-gl/src/lib/source/image-source.component.ts +++ b/projects/ngx-maplibre-gl/src/lib/source/image-source.component.ts @@ -65,7 +65,7 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges { }); } - ngOnDestroy() { + ngOnDestroy(): void { const sourceId = this.sourceId(); if (sourceId !== null) { this.mapService.removeSource(sourceId); diff --git a/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts b/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts index 5784c9e0..a9b6c70e 100644 --- a/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts +++ b/projects/ngx-maplibre-gl/src/lib/source/source.directive.ts @@ -1,6 +1,7 @@ import { DestroyRef, Directive, + OnDestroy, OnInit, inject, input, @@ -19,7 +20,7 @@ import { Source, SourceSpecification } from 'maplibre-gl'; @Directive({ standalone: true, }) -export class SourceDirective implements OnInit { +export class SourceDirective implements OnInit, OnDestroy { /** Init injection */ readonly mapService = inject(MapService); private readonly destroyRef = inject(DestroyRef); @@ -35,10 +36,6 @@ export class SourceDirective implements OnInit { private readonly loadSourceSubject = new Subject(); readonly loadSource$ = this.loadSourceSubject.asObservable(); - constructor() { - this.destroyRef.onDestroy(() => this.removeSource()); - } - ngOnInit() { this.mapService.mapLoaded$ .pipe( @@ -54,6 +51,10 @@ export class SourceDirective implements OnInit { .subscribe(); } + ngOnDestroy(): void { + this.removeSource(); + } + refresh() { this.removeSource(); this.loadSourceSubject.next(); diff --git a/projects/showcase/src/app/demo/examples/live-update-feature.component.ts b/projects/showcase/src/app/demo/examples/live-update-feature.component.ts index 95e900c5..cb501c6d 100644 --- a/projects/showcase/src/app/demo/examples/live-update-feature.component.ts +++ b/projects/showcase/src/app/demo/examples/live-update-feature.component.ts @@ -69,7 +69,7 @@ export class LiveUpdateFeatureComponent implements OnDestroy { }); } - ngOnDestroy() { + ngOnDestroy(): void { if (this.timer) { clearInterval(this.timer); } diff --git a/projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts b/projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts index b45ac86e..5b7de802 100644 --- a/projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts +++ b/projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts @@ -76,7 +76,7 @@ export class LiveUpdateImageSourceComponent implements OnDestroy { }); } - ngOnDestroy() { + ngOnDestroy(): void { if (this.timer !== undefined) { clearInterval(this.timer); } diff --git a/projects/showcase/src/app/demo/examples/marker-alignment.component.ts b/projects/showcase/src/app/demo/examples/marker-alignment.component.ts index 74e8fd63..1ab60eb1 100644 --- a/projects/showcase/src/app/demo/examples/marker-alignment.component.ts +++ b/projects/showcase/src/app/demo/examples/marker-alignment.component.ts @@ -63,7 +63,7 @@ export class MarkerAlignmentComponent implements OnDestroy { }) } - ngOnDestroy() { + ngOnDestroy(): void { if (this.timer) { clearInterval(this.timer); } diff --git a/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts b/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts index aee50e19..09666b18 100644 --- a/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts +++ b/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts @@ -6,8 +6,7 @@ import { viewChild, input, signal, - inject, - DestroyRef, + OnDestroy, } from '@angular/core'; import { MatPaginator, @@ -139,8 +138,8 @@ export class ClusterPopupComponent implements OnChanges { ClusterPopupComponent, ], }) -export class NgxClusterHtmlComponent { - private destroyRef = inject(DestroyRef); +export class NgxClusterHtmlComponent implements OnDestroy { + private timer: ReturnType; readonly earthquakes = signal(null); readonly selectedCluster = signal<{ @@ -149,19 +148,20 @@ export class NgxClusterHtmlComponent { } | null>(null); constructor() { - let timer: ReturnType; afterNextRender(async () => { const earthquakes: GeoJSON.FeatureCollection = (await import( './earthquakes.geo.json' )) as any; - timer = setInterval(() => { + this.timer = setInterval(() => { if (earthquakes.features.length) { earthquakes.features.pop(); } this.earthquakes.set({ ...earthquakes }); }, 500); }); - this.destroyRef.onDestroy(() => clearInterval(timer)); + } + ngOnDestroy(): void { + clearInterval(this.timer) } selectCluster(event: MouseEvent, feature: any) { diff --git a/projects/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts b/projects/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts index 28932a05..3aab1e48 100644 --- a/projects/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts +++ b/projects/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts @@ -73,7 +73,7 @@ export class StackblitzEditComponent implements AfterViewInit, OnDestroy { private changeDetectorRef: ChangeDetectorRef ) {} - ngOnDestroy() { + ngOnDestroy(): void { if (this.sub) { this.sub.unsubscribe(); } diff --git a/projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts b/projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts index 1e918252..026b43d2 100644 --- a/projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts +++ b/projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts @@ -3,8 +3,8 @@ import { ApplicationRef, Component, ComponentFactoryResolver, - DestroyRef, Injector, + OnDestroy, afterNextRender, inject, input, @@ -21,10 +21,9 @@ import { standalone: true, imports: [PortalModule], }) -export class LayoutToolbarMenuComponent { +export class LayoutToolbarMenuComponent implements OnDestroy { private readonly componentFactoryResolver = inject(ComponentFactoryResolver); private readonly injector = inject(Injector); - private readonly destroyRef = inject(DestroyRef); private readonly appRef = inject(ApplicationRef); readonly position = input<'left' | 'right'>(); @@ -46,7 +45,9 @@ export class LayoutToolbarMenuComponent { ); this.portalOutlet.attach(this.portal()); }); + } - this.destroyRef.onDestroy(() => this.portalOutlet?.detach()); + ngOnDestroy(): void { + this.portalOutlet?.detach() } }