From 1bcf6f4fa72378d1c7e99b04381c73365bf8ffaa Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Sat, 25 Jun 2016 14:13:06 +0200 Subject: [PATCH] grid performance improvement --- backend/ProjectPath.ts | 8 +++- backend/model/DiskManger.ts | 3 +- .../gallery/grid/grid.gallery.component.html | 2 +- .../gallery/grid/grid.gallery.component.ts | 19 +++++++-- .../photo/photo.grid.gallery.component.ts | 42 +++++++++---------- 5 files changed, 44 insertions(+), 30 deletions(-) diff --git a/backend/ProjectPath.ts b/backend/ProjectPath.ts index 54ab768..b2a77d0 100644 --- a/backend/ProjectPath.ts +++ b/backend/ProjectPath.ts @@ -6,10 +6,14 @@ class ProjectPathClass { public ImageFolder:string; public ThumbnailFolder:string; + isAbsolutePath(pathStr) { + return path.resolve(pathStr) === path.normalize(pathStr).replace(RegExp(pathStr.sep + '$'), ''); + } + constructor() { this.Root = path.join(__dirname, "/../"); - this.ImageFolder = path.join(this.Root, Config.Server.imagesFolder); - this.ThumbnailFolder = path.join(this.Root, Config.Server.thumbnailFolder); + this.ImageFolder = this.isAbsolutePath(Config.Server.imagesFolder) ? Config.Server.imagesFolder : path.join(this.Root, Config.Server.imagesFolder); + this.ThumbnailFolder = this.isAbsolutePath(Config.Server.thumbnailFolder) ? Config.Server.thumbnailFolder : path.join(this.Root, Config.Server.thumbnailFolder); } } diff --git a/backend/model/DiskManger.ts b/backend/model/DiskManger.ts index a77cd24..b031a74 100644 --- a/backend/model/DiskManger.ts +++ b/backend/model/DiskManger.ts @@ -15,13 +15,14 @@ import { PositionMetaData, GPSMetadata } from "../../common/entities/Photo"; +import {ProjectPath} from "../ProjectPath"; export class DiskManager { public static scanDirectory(relativeDirectoryName, cb:(error:any, result:Directory) => void) { console.log("DiskManager: scanDirectory"); let directoryName = path.basename(relativeDirectoryName); let directoryParent = path.join(path.dirname(relativeDirectoryName), "/"); - let absoluteDirectoryName = path.join(__dirname, "/../../demo/images", relativeDirectoryName); + let absoluteDirectoryName = path.join(ProjectPath.ImageFolder, relativeDirectoryName); let directory = new Directory(1, directoryName, directoryParent, new Date(), [], []); diff --git a/frontend/app/gallery/grid/grid.gallery.component.html b/frontend/app/gallery/grid/grid.gallery.component.html index 018abad..c09edd3 100644 --- a/frontend/app/gallery/grid/grid.gallery.component.html +++ b/frontend/app/gallery/grid/grid.gallery.component.html @@ -1,4 +1,4 @@ -
+
= (document.body.clientHeight + offset - window.innerHeight) * 0.7 - || document.body.clientHeight + offset < window.innerHeight; + || (document.body.clientHeight + offset) * 0.85 < window.innerHeight; } @HostListener('window:scroll') onScroll() { this.renderPhotos(); + this.gridPhotoQL.toArray().forEach((pc:GalleryPhotoComponent) => { + pc.onScroll(); + }); } private getContainerWidth():number { diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts index ca1053c..ee960f5 100644 --- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts +++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts @@ -47,7 +47,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit SearchTypes:any = []; searchEnabled:boolean = true; - scrollListener = null; + wasInView:boolean = null; constructor(private thumbnailService:ThumbnailLoaderService, private renderer:Renderer) { this.SearchTypes = SearchTypes; @@ -88,23 +88,17 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit this.image.show = true; this.loading.show = false; this.thumbnailTask = null; - if (this.scrollListener) { - this.scrollListener(); - } }, onError: (error)=> {//onError this.thumbnailTask = null; - if (this.scrollListener) { - this.scrollListener(); - } //TODO: handle error console.error("something bad happened"); console.error(error); } }; - this.scrollListener = this.renderer.listenGlobal('window', 'scroll', () => { - this.onScroll(); - }); + /* this.scrollListener = this.renderer.listenGlobal('window', 'scroll', () => { + this.onScroll(); + });*/ if (this.gridPhoto.isReplacementThumbnailAvailable()) { this.thumbnailTask = this.thumbnailService.loadImage(this.gridPhoto, ThumbnailLoadingPriority.medium, listener); } else { @@ -121,9 +115,6 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit this.thumbnailService.removeTask(this.thumbnailTask); this.thumbnailTask = null; } - if (this.scrollListener) { - this.scrollListener(); - } } @@ -132,19 +123,24 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit && document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop; } + onScroll() { if (this.thumbnailTask != null) { - if (this.isInView() == true) { - if (this.gridPhoto.isReplacementThumbnailAvailable()) { - this.thumbnailTask.priority = ThumbnailLoadingPriority.medium; + let isInView = this.isInView(); + if (this.wasInView != isInView) { + this.wasInView = isInView; + if (isInView == true) { + if (this.gridPhoto.isReplacementThumbnailAvailable()) { + this.thumbnailTask.priority = ThumbnailLoadingPriority.medium; + } else { + this.thumbnailTask.priority = ThumbnailLoadingPriority.high; + } } else { - this.thumbnailTask.priority = ThumbnailLoadingPriority.high; - } - } else { - if (this.gridPhoto.isReplacementThumbnailAvailable()) { - this.thumbnailTask.priority = ThumbnailLoadingPriority.low; - } else { - this.thumbnailTask.priority = ThumbnailLoadingPriority.medium; + if (this.gridPhoto.isReplacementThumbnailAvailable()) { + this.thumbnailTask.priority = ThumbnailLoadingPriority.low; + } else { + this.thumbnailTask.priority = ThumbnailLoadingPriority.medium; + } } } }