xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

grid performance improvement

Browse Source
This commit is contained in:
Braun Patrik 2016-06-25 14:13:06 +02:00
parent 5740675344
commit 1bcf6f4fa7
5 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend/ProjectPath.ts
View File

@ -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);
}
}

3
backend/model/DiskManger.ts
View File

@ -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(), [], []);

2
frontend/app/gallery/grid/grid.gallery.component.html
View File

@ -1,4 +1,4 @@
<div #gridContainer (window:resize)="onResize()">
<div #gridContainer>
<gallery-grid-photo
*ngFor="let gridPhoto of photosToRender"
(click)="lightbox.show(gridPhoto.photo)"

19
frontend/app/gallery/grid/grid.gallery.component.ts
View File

@ -42,13 +42,22 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
}
ngOnChanges() {
if (this.isAfterViewInit == false) {
return;
}
this.onPhotosChanged();
}
@HostListener('window:resize')
onResize() {
if (this.isAfterViewInit == false) {
return;
}
this.onPhotosChanged();
}
isAfterViewInit:boolean = false;
ngAfterViewInit() {
this.lightbox.gridPhotoQL = this.gridPhotoQL;
@ -56,6 +65,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
this.onPhotosChanged();
this.isAfterViewInit = true;
}
@ -89,7 +99,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
let renderedContentHeight = 0;
while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight)) {
while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight) === true) {
let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.getContainerWidth());
photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
@ -105,20 +115,23 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
renderedContentHeight += rowHeight;
this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
}
}
private shouldRenderMore(offset:number = 0):boolean {
return document.body.scrollTop >= (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 {

42
frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -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;
}
}
}
}