1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/gallery/map/map.gallery.component.ts

64 lines
2.0 KiB
TypeScript
Raw Normal View History

2018-05-28 00:04:35 +08:00
import {Component, ElementRef, Input, OnChanges, ViewChild, AfterViewInit} from '@angular/core';
2018-03-31 03:30:30 +08:00
import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
import {Dimension, IRenderable} from '../../model/IRenderable';
import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.component';
2018-05-28 00:04:35 +08:00
import {ThumbnailManagerService} from '../thumnailManager.service';
import {FullScreenService} from '../fullscreen.service';
import {LatLngBounds, MapsAPILoader, AgmMap} from '@agm/core';
2018-11-26 07:26:29 +08:00
import {FileDTO} from '../../../../common/entities/FileDTO';
2018-03-31 03:30:30 +08:00
@Component({
2018-05-04 07:17:08 +08:00
selector: 'app-gallery-map',
templateUrl: './map.gallery.component.html',
styleUrls: ['./map.gallery.component.css']
})
2018-05-28 00:04:35 +08:00
export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewInit {
2018-11-26 07:26:29 +08:00
@Input() photos: PhotoDTO[];
@Input() metaFiles: FileDTO[];
@ViewChild(GalleryMapLightboxComponent) mapLightbox: GalleryMapLightboxComponent;
mapPhotos: Array<{ latitude: number, longitude: number }> = [];
@ViewChild('map') mapElement: ElementRef;
2018-11-29 06:49:33 +08:00
height: number = null;
2018-05-28 00:04:35 +08:00
constructor(private mapsAPILoader: MapsAPILoader) {
}
ngOnChanges() {
this.mapPhotos = this.photos.filter(p => {
2017-06-22 03:16:04 +08:00
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData &&
p.metadata.positionData.GPSData.latitude && p.metadata.positionData.GPSData.longitude;
}).map(p => {
return {
latitude: p.metadata.positionData.GPSData.latitude,
longitude: p.metadata.positionData.GPSData.longitude
};
});
2018-05-28 00:04:35 +08:00
}
ngAfterViewInit() {
setTimeout(() => {
this.height = this.mapElement.nativeElement.clientHeight;
2018-05-28 00:04:35 +08:00
}, 0);
}
click() {
this.mapLightbox.show(this.getDimension());
}
2017-02-06 00:27:58 +08:00
public getDimension(): Dimension {
return <Dimension>{
top: this.mapElement.nativeElement.offsetTop,
left: this.mapElement.nativeElement.offsetLeft,
width: this.mapElement.nativeElement.offsetWidth,
height: this.mapElement.nativeElement.offsetHeight
};
}
}