self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-10 04:07:35 +02:00
Code Issues Releases Activity

Map unsubscribe from theme changes on destroy #587 #68 #140

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-15 20:19:09 +01:00
parent fa8142f12d
commit eb05621b7f
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, HostListener, Input, OnChanges, ViewChild,} from '@angular/core';
import {Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, ViewChild,} from '@angular/core';
import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
import {Dimension} from '../../../../model/IRenderable';
import {FullScreenService} from '../../fullscreen.service';
@ -32,13 +32,14 @@ import {
} from 'leaflet';
import {LeafletControlLayersConfig} from '@asymmetrik/ngx-leaflet';
import {ThemeService} from '../../../../model/theme.service';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-gallery-map-lightbox',
styleUrls: ['./lightbox.map.gallery.component.css'],
templateUrl: './lightbox.map.gallery.component.html',
})
export class GalleryMapLightboxComponent implements OnChanges {
export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
@Input() photos: PhotoDTO[];
@Input() gpxFiles: FileDTO[];
public lightboxDimension: Dimension = {
@ -110,6 +111,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
private thumbnailsOnLoad: ThumbnailBase[] = [];
private startPosition: Dimension = null;
private leafletMap: Map;
darkModeSubscription: Subscription;
constructor(
public fullScreenService: FullScreenService,
@ -144,7 +146,11 @@ export class GalleryMapLightboxComponent implements OnChanges {
);
// update map theme on dark theme
this.themeService.darkMode.subscribe(this.selectBaseLayer);
this.darkModeSubscription = this.themeService.darkMode.subscribe(this.selectBaseLayer);
}
ngOnDestroy(): void {
this.darkModeSubscription.unsubscribe();
}
private selectBaseLayer = () => {

8
src/frontend/app/ui/gallery/map/map.gallery.component.ts
View File

@ -7,6 +7,7 @@ import {MapService} from './map.service';
import {Config} from '../../../../../common/config/public/Config';
import {LatLngLiteral, Map, MapOptions, Marker, marker, tileLayer, TileLayer} from 'leaflet';
import {ThemeService} from '../../../model/theme.service';
import {Subscription} from 'rxjs';
@Component({
selector: 'app-gallery-map',
@ -34,12 +35,17 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
center: [0, 0],
};
markerLayer: Marker[] = [];
darkModeSubscription: Subscription;
constructor(public mapService: MapService,
private themeService: ThemeService) {
this.initThemeModes();
}
ngOnDestroy(): void {
this.darkModeSubscription.unsubscribe();
}
initThemeModes() {
this.layers = {
'light': tileLayer(this.mapService.MapLayer.url, {
@ -56,7 +62,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
this.options.layers = [this.layers.light];
}
// update map theme on dark theme
this.themeService.darkMode.subscribe((isDark) => {
this.darkModeSubscription = this.themeService.darkMode.subscribe((isDark) => {
if (!this.leafletMap) {
return;
}