Another attempt at in and out of focus windows

src/app/shared/system-service/running.process.service.ts

@@ -13,8 +13,8 @@ export class RunningProcessService{
     processListChangeNotify: Subject<void> = new Subject<void>();
     closeProcessNotify: Subject<Process> = new Subject<Process>();
     focusOnNextProcessNotify: Subject<void> = new Subject<void>();
-    focusOnCurrentProcessNotify: Subject<unknown[]> = new Subject<unknown[]>();
-    blurOnCurrentProcessNotify: Subject<unknown[]> = new Subject<unknown[]>();
+    focusOnCurrentProcessNotify: Subject<number> = new Subject<number>();
+    focusOutOtherProcessNotify: Subject<number> = new Subject<number>();
     restoreOrMinimizeWindowNotify: Subject<number> = new Subject<number>();
 
     constructor(){

src/app/system-apps/desktop/desktop.component.html

@@ -1,3 +1,3 @@
-<main id="vanta" class="main-desktop">
+<main id="vanta" class="main-desktop" (click)="onDesktopClick()">
     <ng-content> </ng-content>
 </main>

src/app/system-apps/desktop/desktop.component.ts

@@ -72,8 +72,13 @@ export class DesktopComponent implements OnInit, AfterViewInit{
         });
   }
 
+  onDesktopClick():void{
+    //console.log("Desktop in focus")
+  }
+
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }
 
+
 }

src/app/system-apps/fileexplorer/fileexplorer.component.html

@@ -1,6 +1,6 @@
 
 <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
-    <cos-filemanager tabindex="0" id="fileMgrSec" [folderPath]="this.directory"  (updateExplorerIconAndName)="updateIconAndName($event)" (focus)="onFocus1($event, this.processId)"  (blur)="onBlur1($event, this.processId)">  
+    <cos-filemanager tabindex="0" id="fileMgrSec" [folderPath]="this.directory"  (updateExplorerIconAndName)="updateIconAndName($event)" (click)="setFocusOnFEWindow(this.processId)">  
     </cos-filemanager>
 </cos-window>
 

src/app/system-apps/fileexplorer/fileexplorer.component.ts

@@ -44,27 +44,8 @@ export class FileexplorerComponent implements BaseComponent {
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }
 
-  onFocus1(focusEvt:FocusEvent, id:number):void{
-    // console.log('filexplor focus-event:',focusEvt);
-    // console.log('id-num:',id)
-
-    const evtData:unknown[] = [];
-    evtData.push(focusEvt);
-    evtData.push(id)
-
-    this._runningProcessService.focusOnCurrentProcessNotify.next(evtData);
-  }
-
-
-  onBlur1(blurEvt:FocusEvent, id:number):void{
-    // console.log('filexplor blur-event:',blurEvt);
-    // console.log('id-num:',id)
-
-    const evtData:unknown[] = [];
-    evtData.push(blurEvt);
-    evtData.push(id)
-
-    this._runningProcessService.blurOnCurrentProcessNotify.next(evtData);
+  setFocusOnFEWindow(pid:number):void{
+    // console.log('setFileExploreToFocus:',pid);
+    this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
   }
-
 }

src/app/system-apps/window/window.component.html

@@ -1,11 +1,11 @@
 
 <div [ngStyle]="currentStyles" #divWindow   tabindex="0" class="section window-dd-box"  
-     ngDraggable (stopped)="onDragEnd($event)"
+     ngDraggable (stopped)="onDragEnd($event)" (started)="onDragStart(this.processId)"
      (rzStop)="onRZStop($event)"  ngResizable [rzHandles]="'e,s,w,se,sw'" 
      [rzMinWidth]="defaultWidthOnOpen" [rzMinHeight]="defaultHeightOnOpen">
 
     <header tabindex="0" id="headerSec" appHighlight 
-    [ngStyle]="headerActiveStyles"  (focus)="onFocus($event, this.processId)" (blur)="onBlur($event, this.processId)"
+    [ngStyle]="headerActiveStyles"  (click)="setFocusOnWindow(this.processId)"
      (dblclick)="onTitleBarDoubleClick()">
         <h1>
             <figure>

src/app/system-apps/window/window.component.ts

@@ -48,8 +48,8 @@ import { WindowState } from 'src/app/system-files/state/windows.state';
       this._stateManagmentService = stateManagmentService;
       this._restoreOrMinSub = this._runningProcessService.restoreOrMinimizeWindowNotify.subscribe((p) => {this.restoreHiddenWindow(p)});
       this._focusOnNextProcessSub = this._runningProcessService.focusOnNextProcessNotify.subscribe(() => {this.setNextWindowToFocus()});
-      this._focusOnCurrentProcessSub = this._runningProcessService.focusOnCurrentProcessNotify.subscribe((evt) => {this.setWindowToFocusUsingEvt(evt)});
-      this._blurOnCurrentProcessSub = this._runningProcessService.blurOnCurrentProcessNotify.subscribe((evt) => {this.setWindowToBlurUsingEvt(evt)});
+      this._focusOnCurrentProcessSub = this._runningProcessService.focusOnCurrentProcessNotify.subscribe((p) => {this.setFocusOnWindow(p)});
+      this._blurOnCurrentProcessSub = this._runningProcessService.focusOutOtherProcessNotify.subscribe((p) => {this.removeFocusOnWindow(p)});
     }
 
     get getDivWindowElement(): HTMLElement {
@@ -224,6 +224,10 @@ import { WindowState } from 'src/app/system-files/state/windows.state';
       }
     }
 
+    onDragStart(pid:number){
+      this.setFocusOnWindow(pid);
+    }
+
     onRZStop(input:any){
       const height = Number(input.size.height);
       const width = Number(input.size.width);
@@ -241,84 +245,40 @@ import { WindowState } from 'src/app/system-files/state/windows.state';
       this._runningProcessService.focusOnNextProcessNotify.next();
     }
 
-    setWindowToFocusUsingEvt(eventData:unknown[]):void{
+    setFocusOnWindow(pid:number):void{
       /**
        * If you want to make a non-focusable element focusable, 
        * you must add a tabindex attribute to it. And divs falls into the category non-focusable elements .
        */
-        //console.log('set window to focus evt from filmgr:',eventData)//TBD
-        //const focusEvt:FocusEvent = eventData[0] as FocusEvent;
-        const pid:number = eventData[1] as number;
-
-        if(this.processId == pid){
-          this.setHeaderActive(pid);
-          this.setWindowToFocusById(pid);
-        }
-    }
-
-    onFocus(focusEvt:FocusEvent,  pid:number):void{
-      //console.log('This is focusEvt from window:', focusEvt); //TBD
 
+      this._runningProcessService.focusOutOtherProcessNotify.next(pid);
+
       if(this.processId == pid){
-          this.headerActiveStyles = {
-            'background-color':'blue'
-          };
-          this.setWindowToFocusById(pid);
+        this.setHeaderActive(pid);
+        this.setWindowToFocusById(pid);
       }
     }
 
-    setWindowToBlurUsingEvt(eventData:unknown[]):void{
-      /**
-       * If you want to make a non-focusable element focusable, 
-       * you must add a tabindex attribute to it. And divs falls into the category non-focusable elements .
-       */
-        //console.log('set window to blur evt from filmgr:',eventData) //TBD
-        //const focusEvt:FocusEvent = eventData[0] as FocusEvent;
-        const pid:number = eventData[1] as number;
-
-        if(this.processId == pid){
-          this.setHeaderInActive(pid);
-        }
-    }
+    /**
+     * the pid of the current window currently in focus is passed. if the pid of other windows do not match,
+     * then they are set out of focus 
+     */
+    removeFocusOnWindow(pid:number):void{
+      const processWithWindows = this._runningProcessService.getProcesses().filter(p => p.getHasWindow == true && p.getProcessId != pid);
 
-    onBlur(blurEvt:FocusEvent, pid:number):void{
-      //console.log('This is blurEvt from window:', blurEvt); //TBD
-      const targetList:string[] = ['closeBtn', 'hideBtn', 'minMaxBtn', 'fileMgrSec'];
+      for (let i=0; i < processWithWindows.length; i++){
+          const process = processWithWindows[i];
+          const window = this._stateManagmentService.getState(process.getProcessId) as WindowState;
 
-      if(this.processId == pid){
-
-        const target = blurEvt.target as HTMLElement;
-        const cTarget = blurEvt.currentTarget as HTMLElement;
-        const rTarget = blurEvt.relatedTarget as HTMLElement;
-
-        if(target !== null){
-          if (target.id === 'headerSec' && rTarget == null) {
-            this.setHeaderInActive(pid);
-          }else if (target.id === 'headerSec' &&  targetList.indexOf(rTarget.id) !== -1){
-            this.setHeaderActive(pid);
-
-              if(rTarget.id === 'closeBtn'){
-                //console.log('chnage closeBtn color') TBD
-                this.setBtnFocus(pid)
-              }
-          }else
-            this.setHeaderInActive(pid);
-        }
-        else if(rTarget == null || rTarget.id !== 'fileMgrSec' ){
-          this.setHeaderInActive(pid);
-        }else{
-          blurEvt.stopPropagation();
-          blurEvt.preventDefault();
+          if(window != undefined && window.getIsVisible){
+            this.setHeaderInActive(window.getPid);
         }
       }
-   }
+    }
+
 
    setWindowToFocusById(pid:number):void{
-      /**
-       * If you want to make a non-focusable element focusable, 
-       * you must add a tabindex attribute to it. And divs falls into the category non-focusable elements .
-       */
-      //console.log('set window to focus:',pid) //TBD
+
       let z_index = this._stateManagmentService.getState(this.z_index) as number;
       const windowState = this._stateManagmentService.getState(pid) as WindowState;
 
@@ -333,18 +293,19 @@ import { WindowState } from 'src/app/system-files/state/windows.state';
         this.currentStyles = {
           'z-index':z_index
         };
+        this.setHeaderActive(pid);
       }
     }
 
    setNextWindowToFocus():void{
-      //console.log('just checking')
+
       const processWithWindows = this._runningProcessService.getProcesses().filter(p => p.getHasWindow == true);
 
       for (let i=0; i < processWithWindows.length; i++){
           const process = processWithWindows[i];
           const window = this._stateManagmentService.getState(process.getProcessId) as WindowState;
 
-          console.log("setNextWindowToFocus:", window);
+          //console.log("setNextWindowToFocus:", window);
 
         if(window != undefined && window.getIsVisible){
           //console.log('process:',process.getProcessId +'----'+process.getProcessName); //TBD

src/app/user-apps/title/title.component.html

@@ -3,7 +3,7 @@
     (@openClose.start)="onAnimationEvent($event)"
     (@openClose.done)="onAnimationEvent($event)">
 
-    <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
+    <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setFileExploreToFocus(this.processId)">
         <p  class="title"> Hello, World! </p>
     </cos-window>
 

src/app/user-apps/title/title.component.ts

@@ -69,26 +69,29 @@ export class TitleComponent implements BaseComponent{
   }
 
 
+  setFileExploreToFocus(pid:number):void{
+    this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
+  }
 
   onAnimationEvent(event: AnimationEvent) {
 
-    // openClose is trigger name in this example
-    console.warn(`Animation Trigger: ${event.triggerName}`);
+    // // openClose is trigger name in this example
+    // console.warn(`Animation Trigger: ${event.triggerName}`);
 
-    // phaseName is "start" or "done"
-    console.warn(`Phase: ${event.phaseName}`);
+    // // phaseName is "start" or "done"
+    // console.warn(`Phase: ${event.phaseName}`);
 
-    // in our example, totalTime is 1000 (number of milliseconds in a second)
-    console.warn(`Total time: ${event.totalTime}`);
+    // // in our example, totalTime is 1000 (number of milliseconds in a second)
+    // console.warn(`Total time: ${event.totalTime}`);
 
-    // in our example, fromState is either "open" or "closed"
-    console.warn(`From: ${event.fromState}`);
+    // // in our example, fromState is either "open" or "closed"
+    // console.warn(`From: ${event.fromState}`);
 
-    // in our example, toState either "open" or "closed"
-    console.warn(`To: ${event.toState}`);
+    // // in our example, toState either "open" or "closed"
+    // console.warn(`To: ${event.toState}`);
 
-    // the HTML element itself, the button in this case
-    console.warn(`Element: ${event.element}`);
+    // // the HTML element itself, the button in this case
+    // console.warn(`Element: ${event.element}`);
   }
 
   private getComponentDetail():Process{