Skip to content

Commit

Permalink
replaced OutPut Events with Subscriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Sep 19, 2024
1 parent feae4c6 commit 71b885e
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 41 deletions.
46 changes: 28 additions & 18 deletions src/app/shared/system-component/filetreeview/filetreeview.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output, OnChanges } from '@angular/core';
import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { FileTreeNode } from 'src/app/system-files/file.tree.node';
import { FileService } from '../../system-service/file.service';

@Component({
selector: 'cos-filetreeview',
Expand All @@ -12,17 +13,17 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
@Input() showRoot = true;
@Input() isHoverActive = false;
@Input() treeData: FileTreeNode[] = [];
@Output() updateFileTreeData = new EventEmitter<string>();
@Output() navigateToPath = new EventEmitter<string[]>();
private _fileService:FileService;

chevronBtnStyle:Record<string, unknown> = {};
expandedViews:string[]= [];
selectedElementId = '';
processId = 0;
nextLevel = 0;
name = 'filetreeview';

constructor( ){
1
constructor(fileService:FileService){
this._fileService = fileService;
}

ngOnInit():void{
Expand All @@ -44,9 +45,9 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
ulId = `fileExplrTreeView-${this.pid}-${this.level}`;
imgId = `fileExplrTreeView-img-${this.pid}-${this.level}`;

console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
console.log('passed name:', name);
console.log('SC--passed id:', ulId);
console.log('SC--passed imgId:', imgId);
console.log('SC--passed name:', name);

const toggler = document.getElementById(ulId) as HTMLElement;
const imgDiv = document.getElementById(imgId) as HTMLElement;
Expand All @@ -66,14 +67,14 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
showGrandChildren(path:string, id:number,):void{
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}`;
console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
console.log('SGC--passed id:', ulId);
console.log('SGC--passed imgId:', imgId);

const toggler = document.getElementById(ulId) as HTMLElement;
const imgDiv = document.getElementById(imgId) as HTMLElement;

if(toggler){
console.log('toggler:', toggler);
console.log('SGC--toggler:', toggler);
// toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");


Expand All @@ -90,7 +91,10 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

//pass event to the parent
this.updateFileTreeData.emit(path);
//this.updateFileTreeData.emit(path);
const uid = `${this.name}-${this.pid}`;
this._fileService.addEventOriginator(uid);
this._fileService.fetchDirectoryDataNotify.next(path);

setTimeout(()=>{ this.showExpandedViews();}, 2000);
}
Expand Down Expand Up @@ -118,14 +122,14 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
const ulId = `fileExplrTreeView-${this.pid}-${this.level}-${id}-${id1}`;
const imgId = `fileExplrTreeView-img-${this.pid}-${this.level}-${id}-${id1}`;

console.log('passed id:', ulId);
console.log('passed imgId:', imgId);
console.log('SGGC--passed id:', ulId);
console.log('SGGC--passed imgId:', imgId);

const toggler = document.getElementById(ulId) as HTMLElement;
const imgDiv = document.getElementById(imgId) as HTMLElement;

if(toggler){
console.log('toggler:', toggler);
console.log('SGGC--toggler:', toggler);
//toggler.parentElement?.querySelector(".nested")?.classList.toggle("active");


Expand All @@ -141,7 +145,10 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

//pass event to the parent
this.updateFileTreeData.emit(path);
//this.updateFileTreeData.emit(path);
const uid = `${this.name}-${this.pid}`;
this._fileService.addEventOriginator(uid);
this._fileService.fetchDirectoryDataNotify.next(path);

setTimeout(()=>{ this.showExpandedViews();}, 2000);
}
Expand Down Expand Up @@ -181,8 +188,11 @@ export class FileTreeViewComponent implements OnInit, OnChanges {
}

navigateToSelectedPath(name:string, path:string):void{
const data:string[] = [name, path]
this.navigateToPath.emit(data);
const data:string[] = [name, path];

const uid = `filetreeview-1-${this.pid}`;
this._fileService.addEventOriginator(uid);
this._fileService.goToDirectoryNotify.next(data);
}

setcolorChevron(isHoverActive:boolean):void{
Expand Down
5 changes: 3 additions & 2 deletions src/app/shared/system-service/file.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ export class FileService{
private _fileExistsMap!:Map<string,number>;
private _eventOriginator = '';

dirFilesReadyNotify: Subject<void> = new Subject<void>();
dirFilesUpdateNotify: Subject<void> = new Subject<void>();
fetchDirectoryDataNotify: Subject<string> = new Subject<string>();
goToDirectoryNotify: Subject<string[]> = new Subject<string[]>();

SECONDS_DELAY = 200;

Expand Down Expand Up @@ -57,7 +58,7 @@ export class FileService{
reject();
}
});
this._fileSystem = BrowserFS.BFSRequire('fs')
this._fileSystem = BrowserFS.BFSRequire('fs');
resolve();
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/system-apps/fileexplorer/fileexplorer.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@
<div class="fileexp-content-container">
<div class="navigation-content-container" (mouseenter)="showExpandTreeIconBtn()" (mouseleave)="hideExpandTreeIconBtn()" #navExplorerContainer>
<div style="height: 10px; width: 100%;"></div>
<cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode" (updateFileTreeData)="updateFileTreeAsync($event)" (navigateToPath)="navigateToFolder($event)" ></cos-filetreeview>
<cos-filetreeview [pid] ="this.processId" [isHoverActive]="showExpandTreeIcon" [treeData]="fileTreeNode"></cos-filetreeview>
</div>
<div class="file-content-container" #fileExplorerContentContainer>

Expand Down
50 changes: 37 additions & 13 deletions src/app/system-apps/fileexplorer/fileexplorer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
@ViewChild('fileExplorerMainContainer', {static: true}) fileExplrMainCntnr!: ElementRef;
@ViewChild('fileExplorerRootContainer', {static: true}) fileExplorerRootContainer!: ElementRef;
@ViewChild('fileExplorerContentContainer', {static: true}) fileExplrCntntCntnr!: ElementRef;
@ViewChild('navExplorerContainer', {static: true}) navExplorerCntnr!: ElementRef;

private _processIdService:ProcessIDService;
private _runningProcessService:RunningProcessService;
Expand All @@ -55,6 +56,8 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
private _autoArrangeIconsNotifySub!:Subscription;
private _autoAlignIconsNotifyBySub!:Subscription;
private _dirFilesUpdatedSub!: Subscription;
private _fetchDirectoryDataSub!: Subscription;
private _goToDirectoryDataSub!: Subscription;
private _hideContextMenuSub!:Subscription;
private _maximizeWindowSub!: Subscription;
private _minimizeWindowSub!: Subscription;
Expand Down Expand Up @@ -151,7 +154,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
searchForm!: FormGroup;

searchHistory =['Java','ProgramFile', 'Perenne'];
pathHistory =['/icons','/Games', '/Videos'];
pathHistory =['/Users/Vidoes','/Users/Games', '/Users/Music'];

menuData = [
{icon:'', label: 'Open', action: this.onTriggerRunProcess.bind(this) },
Expand Down Expand Up @@ -188,12 +191,12 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
hasWindow = true;


constructor(processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService,
constructor(processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileService:FileService, triggerProcessService:TriggerProcessService,
fileManagerService:FileManagerService, formBuilder: FormBuilder, stateManagmentService:StateManagmentService, sessionManagmentService:SessionManagmentService,
menuService:MenuService ) {
this._processIdService = processIdService;
this._runningProcessService = runningProcessService;
this._fileService = fileInfoService;
this._fileService = fileService;
this._triggerProcessService = triggerProcessService;
this._stateManagmentService = stateManagmentService;
this._sessionManagmentService = sessionManagmentService;
Expand All @@ -210,6 +213,23 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
this._fileService.removeEventOriginator();
}
});
this._fetchDirectoryDataSub = this._fileService.fetchDirectoryDataNotify.subscribe((p) => {
const name = 'filetreeview';
const uid = `${name}-${this.processId}`;
if(this._fileService.getEventOrginator() === uid){
this.updateFileTreeAsync(p);
this._fileService.removeEventOriginator();
}
})

this._goToDirectoryDataSub = this._fileService.goToDirectoryNotify.subscribe((p) => {
const name = 'filetreeview-1';
const uid = `${name}-${this.processId}`;
if(this._fileService.getEventOrginator() === uid){
this.navigateToFolder(p);
this._fileService.removeEventOriginator();
}
})

this._maximizeWindowSub = this._runningProcessService.maximizeProcessWindowNotify.subscribe(() =>{this.maximizeWindow()});
this._minimizeWindowSub = this._runningProcessService.minimizeProcessWindowNotify.subscribe((p) =>{this.minimizeWindow(p)})
Expand Down Expand Up @@ -271,6 +291,8 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
this._hideContextMenuSub?.unsubscribe();
this._maximizeWindowSub?.unsubscribe();
this._minimizeWindowSub?.unsubscribe();
this._fetchDirectoryDataSub?.unsubscribe();
this._goToDirectoryDataSub?.unsubscribe();
}

captureComponentImg():void{
Expand Down Expand Up @@ -684,7 +706,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
this._fileService.resetDirectoryFiles();
let directoryEntries = await this._fileService.getEntriesFromDirectoryAsync(this.directory);

console.log('directoryEntries:',directoryEntries);
//console.log('directoryEntries:',directoryEntries); //TBD

if(this.directory === '/'){
if(!showUrlFiles){
Expand Down Expand Up @@ -731,7 +753,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
children: []
}

console.log('ftn:', ftn);
//console.log('ftn:', ftn); //TBD
this.fileTreeNode.push(ftn);
}

Expand All @@ -750,20 +772,20 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
// this.directory, will not be correct for all cases. Make sure to check
for(const dirEntry of directoryEntries){

const isFile = await this._fileService.checkIfDirectory(`${path}/${dirEntry}`);
const isFile = await this._fileService.checkIfDirectory(`${path}/${dirEntry}`.replace('//','/'));
const ftn:FileTreeNode = {
name : dirEntry,
path: `${path}/${dirEntry}`,
path: `${path}/${dirEntry}`.replace('//','/'),
isFolder: isFile,
children: []
}

console.log('update-ftn:', ftn);
//console.log('update-ftn:', ftn); //TBD
tmpFileTreeNode.push(ftn);
}

const res = this.addChildrenToNode(this.fileTreeNode, path, tmpFileTreeNode);
console.log('updatedTreeData:', res);
//console.log('updatedTreeData:', res);
this.fileTreeNode = res;
this.fileTreeHistory.push(path);
}
Expand Down Expand Up @@ -874,7 +896,6 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}

setNavPathIcon(fileName:string, directory:string){

console.log(`fileexplorer - setNavPathIcon: fileName:${fileName} ----- directory:${directory}`)

if(directory === `/Users/${fileName}`){
Expand Down Expand Up @@ -1484,9 +1505,9 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn
}

populateHopsList():void{
const tmpArray = this.directory.split('/');
tmpArray.shift();
tmpArray.unshift('This PC');
const tmpArray = this.directory.split('/').filter(x => x !== '');
if(tmpArray.length === 0){ tmpArray[0]='This PC'; }
else{ tmpArray.unshift('This PC'); }

if(this.directory.includes('/Users')){
this._directoryHops = tmpArray;
Expand Down Expand Up @@ -1702,6 +1723,8 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

this.fileExplrMainCntnr.nativeElement.style.height = `${(mainWindow?.offsetHeight || 0 ) - pixelTosubtract}px`;
this.fileExplrCntntCntnr.nativeElement.style.height = `${(mainWindow?.offsetHeight || 0 ) - pixelTosubtract}px`;
this.navExplorerCntnr.nativeElement.style.height = `${(mainWindow?.offsetHeight || 0 ) - pixelTosubtract}px`;

}
}

Expand All @@ -1719,6 +1742,7 @@ export class FileExplorerComponent implements BaseComponent, OnInit, AfterViewIn

this.fileExplrMainCntnr.nativeElement.style.height = `${res}px`;
this.fileExplrCntntCntnr.nativeElement.style.height = `${res}px`;
this.navExplorerCntnr.nativeElement.style.height = `${res}px`;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/app/system-apps/taskbarentries/taskbarentries.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class TaskBarEntriesComponent implements AfterViewInit, OnDestroy {
unPinned = "unPinned";

hasWindow = false;
icon = 'osdrive/Cheetah/System/Imageres/generic-program.ico';
icon = 'osdrive/Cheetah/System/Imageres/generic_program.png';
name = 'taskbarentry';
processId = 0;
type = ComponentType.System;
Expand Down
12 changes: 6 additions & 6 deletions src/app/system-apps/window/window.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,11 +272,11 @@ import { Process } from 'src/app/system-files/process';

setHeaderActive(pid:number):void{

//console.log('setHeaderActive:',pid);
//console.log('setHeaderActive:',pid);//TBD
if(this.processId == pid){


//console.log('setHeaderActive 1:',pid);
//console.log('setHeaderActive 1:',pid);//TBD
this.headerActiveStyles = {
'background-color':'blue'
};
Expand Down Expand Up @@ -370,7 +370,7 @@ import { Process } from 'src/app/system-files/process';
}

onDragStart(pid:number):void{
console.log('i am trouble');
//console.log('i am trouble'); //TBD
//this.setFocusOnWindow(pid);
}

Expand Down Expand Up @@ -572,7 +572,7 @@ import { Process } from 'src/app/system-files/process';
if(windowState !== undefined){
if((windowState.pid == pid) && (!z_index) || (windowState.pid == pid) && (windowState.z_index <= z_index)){

//console.log('setWindowToFocusById --- i got in here');
//console.log('setWindowToFocusById --- i got in here');//TBD

z_index = this.MAX_Z_INDEX;
this._stateManagmentService.addState(this.z_index, z_index);
Expand All @@ -597,8 +597,8 @@ import { Process } from 'src/app/system-files/process';
const z_index = this.TMP_Z_INDEX;

if(!windowState.is_visible){
//console.log('window:',uid + ' is currently hidden');
console.log(`translate(${String(windowState.x_axis)}px, ${String(windowState.y_axis)}px)`);
//console.log('window:',uid + ' is currently hidden');//TBD
//console.log(`translate(${String(windowState.x_axis)}px, ${String(windowState.y_axis)}px)`); //TBD
this.currentStyles = {
'z-index':z_index,
'opacity': 1,
Expand Down

0 comments on commit 71b885e

Please sign in to comment.