Skip to content

Commit

Permalink
picture animation works better
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Nov 3, 2024
1 parent 23383e7 commit acae614
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 45 deletions.
18 changes: 15 additions & 3 deletions src/app/system-apps/photoviewer/photoviewer.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setImageViewerWindowToFocus(this.processId)">
<div class="main-container" (click)="focusOnInput()" #photoContainer>
<div class="photo-viewer-container">
<div tabindex="0" id="photoCntnr" class="photo-viewer" (keydown)="onKeyDown($event)" (click)="onClick()">
<img [src]="currentImg"/>
<div class="photo-viewer-container">
<div
[@slideToggle]="{
value: selectedIndex(),
params: {
leaveEnd: animationDirection() === 'right' ? '100%' : '-100%',
enterStart: animationDirection() === 'right' ? '-100%' : '100%'
}
}"
tabindex="0" id="photoCntnr"
class="photo-viewer" (keydown)="onKeyDown($event)" (click)="onClick()">

@for (image of images(); track image) {
<img [src]="image" />
}
</div>
</div>
<div class="photo-slider">
Expand Down
113 changes: 71 additions & 42 deletions src/app/system-apps/photoviewer/photoviewer.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit, AfterViewInit, OnDestroy, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
import { Component, OnInit, AfterViewInit, OnDestroy, ChangeDetectorRef, ViewChild, ElementRef, signal, WritableSignal } from '@angular/core';
import { FileService } from 'src/app/shared/system-service/file.service';
import { BaseComponent } from 'src/app/system-base/base/base.component';
import { ComponentType } from 'src/app/system-files/component.types';
Expand All @@ -15,12 +15,40 @@ import { SessionManagmentService } from 'src/app/shared/system-service/session.m
import { Constants } from 'src/app/system-files/constants';
import * as htmlToImage from 'html-to-image';
import { TaskBarPreviewImage } from '../taskbarpreview/taskbar.preview';
import {
style,
trigger,
transition,
animate,
query,
group,
} from '@angular/animations';


@Component({
selector: 'cos-photoviewer',
templateUrl: './photoviewer.component.html',
styleUrls: ['./photoviewer.component.css'],
animations: [
trigger('slideToggle', [
transition( '* => *', [
group([ query( ':enter', style({ transform: 'translateX({{ enterStart }}) scale(0.25)' }),
{ optional: true }),
query( ':leave',[
animate( '750ms ease-in-out', style({ transform: 'translateX({{ leaveEnd }}) scale(0.25)' })),
],
{ optional: true }
),
query(':enter', [ animate( '750ms ease-in-out', style({ transform: 'translateX(0) scale(1)' }) ),
],
{ optional: true }
),
]),
],
{ params: { leaveEnd: '', enterStart: '', }, }
),
]),
],
})
export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, AfterViewInit {

Expand All @@ -37,6 +65,7 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
private picSrc = '';
private _consts:Constants = new Constants();


SECONDS_DELAY = 250;
name= 'photoviewer';
hasWindow = true;
Expand All @@ -47,13 +76,14 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
displayName = 'PhotoViewer';
private defaultPath = '/Users/Pictures/';
private defaultImg = '/Users/Pictures/Samples/no_img.jpeg';
private tst_imageList:string[] = [`${this._consts.IMAGE_BASE_PATH}Chill on the Moon.jpg`, `${this._consts.IMAGE_BASE_PATH}Mystical.jpg`,
`${this._consts.IMAGE_BASE_PATH}Sparkling Water.jpg`]
private tst_imageList:string[] = ['/Users/Pictures/Samples/Chill on the Moon.jpg', '/Users/Pictures/Samples/mystical.jpg',
'/Users/Pictures/Samples/Sparkling Water.jpg', '/Users/Pictures/Samples/Sunset Car.jpg', '/Users/Pictures/Samples/Sunset.jpg']

imageList:string[] = []

currentImg = '';
private currentImgIndex = 0;
imageList:string[] = [];
protected images: WritableSignal<string[]> = signal([this.imageList[0]]);
protected selectedIndex = signal(1);
protected animationDirection = signal<'right' | 'left'>('right');


constructor(fileService:FileService, processIdService:ProcessIDService, runningProcessService:RunningProcessService, triggerProcessService:TriggerProcessService,
stateManagmentService: StateManagmentService, sessionManagmentService: SessionManagmentService, private changeDetectorRef: ChangeDetectorRef,) {
Expand All @@ -75,27 +105,28 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
this._fileInfo = this._triggerProcessService.getLastProcessTrigger();

if(this.imageList.length > 0)
this.currentImg = this.imageList[0];
else
this.currentImg = ''; //await this._fileService.getFileBlobAsync(this.defaultImg);
}

ngOnDestroy(): void {
1
}

this.images = signal([this.imageList[0]]);
else{
const currentImg = await this._fileService.getFileBlobAsync(this.defaultImg);
this.images = signal([currentImg]);
}
}

async ngAfterViewInit():Promise<void> {
this.setImageViewerWindowToFocus(this.processId);

this.picSrc = (this.picSrc !=='') ?
this.picSrc : this.getPictureSrc(this._fileInfo.getContentPath, this._fileInfo.getCurrentPath);
//this.picSrc = '';

console.log('this.picSrc ',this.picSrc);

await this.getCurrentPicturePathAndSearchForOthers();
if(this.imageList.length > 0){
this.currentImg = this.imageList[0];
}else{
this.currentImg = this.picSrc || ''; // await this._fileService.getFileBlobAsync(this.defaultImg);
if(this.imageList.length > 0)
this.images = signal([this.imageList[0]]);
else{
const currentImg = await this._fileService.getFileBlobAsync(this.defaultImg);
this.images = signal([this.picSrc || currentImg]);
}

const appData = (this.imageList.length > 0)? this.imageList : this.picSrc;
Expand All @@ -109,6 +140,10 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
},this.SECONDS_DELAY)
}

ngOnDestroy(): void {
1
}

captureComponentImg():void{
htmlToImage.toPng(this.photoContainer.nativeElement).then(htmlImg =>{
//console.log('img data:',htmlImg);
Expand All @@ -122,37 +157,32 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
}

onKeyDown(evt:KeyboardEvent):void{

if(evt.key == "ArrowLeft"){
if((this.currentImgIndex >= 0)){
this.currentImg = this.imageList[this.currentImgIndex--];

if(this.currentImgIndex < 0){
this.currentImgIndex = this.imageList.length - 1;
}
}
if(evt.key === "ArrowLeft"){
if (this.selectedIndex() > 0) {
this.animationDirection.set('left');
this.selectedIndex.set(this.selectedIndex() - 1);
this.images.set([this.imageList[this.selectedIndex()]]);
}
}

if(evt.key == "ArrowRight"){
if(this.currentImgIndex <= this.imageList.length - 1){
this.currentImg = this.imageList[this.currentImgIndex++];

if(this.currentImgIndex > this.imageList.length -1){
this.currentImgIndex = 0;
}
if(evt.key === "ArrowRight"){
if (this.selectedIndex() < this.imageList.length - 1) {
this.animationDirection.set('right');
this.selectedIndex.set(this.selectedIndex() + 1);
this.images.set([this.imageList[this.selectedIndex()]]);
}
}
}

onClick(id?:number):void{

if(id !== undefined){
this.currentImg = this.imageList[id];
this.currentImgIndex = id;
this.images.set([this.imageList[id]]);
}else{
this.currentImgIndex = this.currentImgIndex + 1;
if(this.currentImgIndex <= this.imageList.length - 1){
this.currentImg = this.imageList[this.currentImgIndex];
if (this.selectedIndex() < this.imageList.length - 1) {
this.animationDirection.set('right');
this.selectedIndex.set(this.selectedIndex() + 1);
this.images.set([this.imageList[this.selectedIndex()]]);
}
}
}
Expand All @@ -164,7 +194,6 @@ export class PhotoViewerComponent implements BaseComponent, OnInit, OnDestroy, A
}
}


async getCurrentPicturePathAndSearchForOthers():Promise<void>{
let imgCount = 0;

Expand Down

0 comments on commit acae614

Please sign in to comment.