From 1537efb5b5f7eb9223dc4b6233977145c40a589f Mon Sep 17 00:00:00 2001 From: Patrik Braun Date: Sun, 23 Jul 2017 22:36:53 +0200 Subject: [PATCH] map performance improvement --- .../loading.photo.grid.gallery.component.html | 2 +- .../lightbox.map.gallery.component.css | 13 +++- .../lightbox.map.gallery.component.html | 73 +++++++++++-------- .../lightbox.map.gallery.component.ts | 21 ++++-- .../app/gallery/thumnailManager.service.ts | 19 +++-- 5 files changed, 81 insertions(+), 47 deletions(-) diff --git a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html index 4377e237..d727f5b1 100644 --- a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html +++ b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html @@ -1,5 +1,5 @@
-
diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css index 1ad5ad6c..7049bee2 100644 --- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css +++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.css @@ -62,4 +62,15 @@ .highlight:hover { opacity: 1.0; -} \ No newline at end of file +} + +.preview-loading { + background-color: #bbbbbb; + color: #7f7f7f; + font-size: 50px; +} + +.preview-loading span { + top: calc(50% - 25px); + left: calc(50% - 25px); +} diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html index 9ba3900d..5bee664b 100644 --- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html +++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html @@ -1,49 +1,60 @@
-
- - - - - - - -
+
+ + + + +
+ +
+ + + +
-
-
+
+
- + - + -
-
+ +
diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts index 33e1dee0..ecd9a80c 100644 --- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -3,7 +3,7 @@ import {PhotoDTO} from "../../../../../common/entities/PhotoDTO"; import {Dimension} from "../../../model/IRenderable"; import {FullScreenService} from "../../fullscreen.service"; import {AgmMap} from "@agm/core"; -import {IconThumbnail, ThumbnailManagerService} from "../../thumnailManager.service"; +import {IconThumbnail, Thumbnail, ThumbnailManagerService} from "../../thumnailManager.service"; import {IconPhoto} from "../../IconPhoto"; import {Photo} from "../../Photo"; @@ -28,7 +28,8 @@ export class GalleryMapLightboxComponent implements OnChanges { @ViewChild(AgmMap) map: AgmMap; - constructor(public fullScreenService: FullScreenService, private thumbnailService: ThumbnailManagerService) { + constructor(public fullScreenService: FullScreenService, + private thumbnailService: ThumbnailManagerService) { } @@ -85,8 +86,6 @@ export class GalleryMapLightboxComponent implements OnChanges { this.visible = false; this.hideImages(); }, 500); - - } showImages() { @@ -103,6 +102,7 @@ export class GalleryMapLightboxComponent implements OnChanges { width = height * (p.metadata.size.width / p.metadata.size.height); } const iconTh = this.thumbnailService.getIcon(new IconPhoto(p)); + iconTh.Visible = true; const obj: MapPhoto = { latitude: p.metadata.positionData.GPSData.latitude, longitude: p.metadata.positionData.GPSData.longitude, @@ -110,7 +110,7 @@ export class GalleryMapLightboxComponent implements OnChanges { preview: { width: width, height: height, - url: (new Photo(p, width, height)).getThumbnailPath() + thumbnail: this.thumbnailService.getLazyThumbnail(new Photo(p, width, height)) } }; @@ -129,8 +129,15 @@ export class GalleryMapLightboxComponent implements OnChanges { } } + public loadPreview(mp: MapPhoto) { + mp.preview.thumbnail.load(); + } + hideImages() { - this.mapPhotos.forEach((mp) => mp.iconThumbnail.destroy()); + this.mapPhotos.forEach((mp) => { + mp.iconThumbnail.destroy(); + mp.preview.thumbnail.destroy(); + }); this.mapPhotos = []; } @@ -176,7 +183,7 @@ export interface MapPhoto { preview: { width: number; height: number; - url: string; + thumbnail: Thumbnail; } } diff --git a/frontend/app/gallery/thumnailManager.service.ts b/frontend/app/gallery/thumnailManager.service.ts index 8fb1fea4..71b41566 100644 --- a/frontend/app/gallery/thumnailManager.service.ts +++ b/frontend/app/gallery/thumnailManager.service.ts @@ -18,6 +18,10 @@ export class ThumbnailManagerService { return new Thumbnail(photo, this.thumbnailLoader); } + public getLazyThumbnail(photo: Photo): Thumbnail { + return new Thumbnail(photo, this.thumbnailLoader, false); + } + public getIcon(photo: IconPhoto) { return new IconThumbnail(photo, this.thumbnailLoader); @@ -32,7 +36,7 @@ export abstract class ThumbnailBase { protected loading: boolean = false; protected error: boolean = false; protected onLoad: Function = null; - protected thumbnailTask: ThumbnailTaskEntity; + protected thumbnailTask: ThumbnailTaskEntity = null; constructor(protected thumbnailService: ThumbnailLoaderService) { @@ -126,7 +130,7 @@ export class IconThumbnail extends ThumbnailBase { export class Thumbnail extends ThumbnailBase { - constructor(private photo: Photo, thumbnailService: ThumbnailLoaderService) { + constructor(private photo: Photo, thumbnailService: ThumbnailLoaderService, autoLoad: boolean = true) { super(thumbnailService); if (this.photo.isThumbnailAvailable()) { this.src = this.photo.getThumbnailPath(); @@ -136,10 +140,14 @@ export class Thumbnail extends ThumbnailBase { this.src = this.photo.getReplacementThumbnailPath(); this.available = true; } + if (autoLoad) { + this.load(); + } + } - if (!this.photo.isThumbnailAvailable()) { + public load() { + if (!this.photo.isThumbnailAvailable() && this.thumbnailTask == null) { setTimeout(() => { - let listener: ThumbnailLoadingListener = { onStartedLoading: () => { //onLoadStarted this.loading = true; @@ -162,11 +170,8 @@ export class Thumbnail extends ThumbnailBase { } else { this.thumbnailTask = this.thumbnailService.loadImage(this.photo, ThumbnailLoadingPriority.high, listener); } - - }, 0); } - } set Visible(visible: boolean) {