Apparantly, you can only have 2 animation states on a component

chinonso098 · Oct 26, 2023 · 1238a6b · 1238a6b
1 parent 896b352
commit 1238a6b
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 170 deletions.
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.html b/src/app/system-apps/fileexplorer/fileexplorer.component.html
@@ -1,11 +1,5 @@
-<div 
-[@openClose]="onOpen ? 'open' : 'closed'"
-(@openClose.start)="onAnimationEvent($event)"
-(@openClose.done)="onAnimationEvent($event)">
 
-    <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
-        <cos-filemanager tabindex="0" id="fileMgrSec" [folderPath]="this.directory"  (updateExplorerIconAndName)="updateIconAndName($event)" (click)="setFileExplorerWindowToFocus(this.processId)">  
-        </cos-filemanager>
-    </cos-window>
-
-</div>
+<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name">
+    <cos-filemanager tabindex="0" id="fileMgrSec" [folderPath]="this.directory"  (updateExplorerIconAndName)="updateIconAndName($event)" (click)="setFileExplorerWindowToFocus(this.processId)">  
+    </cos-filemanager>
+</cos-window>
diff --git a/src/app/system-apps/fileexplorer/fileexplorer.component.ts b/src/app/system-apps/fileexplorer/fileexplorer.component.ts
@@ -5,13 +5,10 @@ import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { FileInfo } from 'src/app/system-files/fileinfo';
 import { Process } from 'src/app/system-files/process';
-import { AnimationEvent } from '@angular/animations';
-import { openCloseAnimation } from 'src/app/system-apps/window/animation/animations';
 
 @Component({
   selector: 'cos-fileexplorer',
   templateUrl: './fileexplorer.component.html',
-  animations: [ openCloseAnimation],
   styleUrls: ['./fileexplorer.component.css']
 })
 export class FileexplorerComponent implements BaseComponent {
@@ -27,7 +24,6 @@ export class FileexplorerComponent implements BaseComponent {
   type = ComponentType.systemComponent;
   directory ='/osdrive/';
   displayName = 'File Explorer';
-  onOpen = true;
 
   constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService) { 
     this._processIdService = processIdService;
@@ -48,27 +44,6 @@ export class FileexplorerComponent implements BaseComponent {
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }
 
-  onAnimationEvent(event: AnimationEvent) {
-
-    // // openClose is trigger name in this example
-    // console.warn(`Animation Trigger: ${event.triggerName}`);
-
-    // // 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, fromState is either "open" or "closed"
-    // console.warn(`From: ${event.fromState}`);
-
-    // // 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}`);
-  }
-
   setFileExplorerWindowToFocus(pid:number):void{
     this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
   }

diff --git a/src/app/system-apps/window/animation/animations.ts b/src/app/system-apps/window/animation/animations.ts
@@ -20,16 +20,16 @@ export const openCloseAnimation =
         ])
     ]);
 
-export const hideRestoreAnimation =
-    trigger('hideShow', [
+export const showHideAnimation =
+    trigger('showHide', [
         state('hide', style({
             opacity: 0
         })),
         state('show', style({
             opacity: 1,
             width: '250px', 
             height: '250px', 
-            transform: 'translate(0px,0px)'
+            // transform: 'translate(0px,0px)'
 
         })),
         transition('* => *', [

diff --git a/src/app/system-apps/window/window.component.html b/src/app/system-apps/window/window.component.html
@@ -1,44 +1,50 @@
 
-<div [ngStyle]="currentStyles" #divWindow   tabindex="0" class="section window-dd-box"  
-     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"  (click)="setFocusOnWindow(this.processId)"
-     (dblclick)="onTitleBarDoubleClick()">
-        <h1>
-            <figure>
-                <img [src]="this.icon" [alt]="this.name"/>
-                <figcaption> {{this.name}} </figcaption>
-            </figure>
-        </h1>
-        <nav>
-            <button appHighlight id="hideBtn" (click)="onHideBtnClick()" title="Hide">
-                <svg width="10" viewBox="0 0 10 1">
-                 <path d="M0 0h10v1H0z"/>
-                </svg>
-            </button>
-            <button *ngIf="!windowMaximize, else elseBlock" id="minMaxBtn" appHighlight (click)="onMaximizeBtnClick()" title="Maximize">
-                <svg width="10" viewBox="0 0 10 10">
-                    <path d="M0 0v10h10V0H0zm1 1h8v8H1V1z"/>
-                </svg>            
-            </button>
-            <ng-template #elseBlock>
-                <button  appHighlight (click)="onUnMaximizeBtnClick()"  title="Minimize">
-                    <svg width="15" viewBox="0 0 24 24">
-                        <path fill="none" d="M0 0h24v24H0z"/>
-                        <path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/>
-                    </svg>        
+<div 
+[@showHide]="showHide ? 'show' : 'hide'"
+(@showHide.start)="onAnimationEvent($event)"
+(@showHide.done)="onAnimationEvent($event)">
+
+    <div [ngStyle]="currentStyles" #divWindow   tabindex="0" class="section window-dd-box"  
+        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"  (click)="setFocusOnWindow(this.processId)"
+        (dblclick)="onTitleBarDoubleClick()">
+            <h1>
+                <figure>
+                    <img [src]="this.icon" [alt]="this.name"/>
+                    <figcaption> {{this.name}} </figcaption>
+                </figure>
+            </h1>
+            <nav>
+                <button appHighlight id="hideBtn" (click)="onHideBtnClick()" title="Hide">
+                    <svg width="10" viewBox="0 0 10 1">
+                    <path d="M0 0h10v1H0z"/>
+                    </svg>
                 </button>
-            </ng-template>
-            <button [ngStyle]="closeBtnStyles" id="closeBtn" appHighlight (click)="onCloseBtnClick()"  title="Close" >
-                <svg width="10" viewBox="0 0 10 10">
-                    <path d="M10.2.7L9.5 0 5.1 4.4.7 0 0 .7l4.4 4.4L0 9.5l.7.7 4.4-4.4 4.4 4.4.7-.7-4.4-4.4z"/>
-                </svg>
-            </button>
-        </nav>
-    </header>
-    <ng-content> </ng-content> 
-</div>
+                <button *ngIf="!windowMaximize, else elseBlock" id="minMaxBtn" appHighlight (click)="onMaximizeBtnClick()" title="Maximize">
+                    <svg width="10" viewBox="0 0 10 10">
+                        <path d="M0 0v10h10V0H0zm1 1h8v8H1V1z"/>
+                    </svg>            
+                </button>
+                <ng-template #elseBlock>
+                    <button  appHighlight (click)="onUnMaximizeBtnClick()"  title="Minimize">
+                        <svg width="15" viewBox="0 0 24 24">
+                            <path fill="none" d="M0 0h24v24H0z"/>
+                            <path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/>
+                        </svg>        
+                    </button>
+                </ng-template>
+                <button [ngStyle]="closeBtnStyles" id="closeBtn" appHighlight (click)="onCloseBtnClick()"  title="Close" >
+                    <svg width="10" viewBox="0 0 10 10">
+                        <path d="M10.2.7L9.5 0 5.1 4.4.7 0 0 .7l4.4 4.4L0 9.5l.7.7 4.4-4.4 4.4 4.4.7-.7-4.4-4.4z"/>
+                    </svg>
+                </button>
+            </nav>
+        </header>
+        <ng-content> </ng-content> 
+    </div>
 
+</div>
diff --git a/src/app/system-apps/window/window.component.ts b/src/app/system-apps/window/window.component.ts
@@ -5,11 +5,14 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 import { Subscription } from 'rxjs';
 import { StateManagmentService } from 'src/app/shared/system-service/state.management.service';
 import { WindowState } from 'src/app/system-files/state/windows.state';
+import { AnimationEvent } from '@angular/animations';
+import { showHideAnimation } from 'src/app/system-apps/window/animation/animations';
 import { WindowAnimationService } from 'src/app/shared/system-service/window.animation.service';
 
  @Component({
    selector: 'cos-window',
    templateUrl: './window.component.html',
+   animations: [showHideAnimation],
    styleUrls: ['./window.component.css']
  })
  export class WindowComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
@@ -36,6 +39,7 @@ import { WindowAnimationService } from 'src/app/shared/system-service/window.ani
   processId = 0;
   type = ComponentType.systemComponent;
   displayName = '';
+  showHide = true;
 
   windowHide = false;
   windowMaximize = false;
@@ -99,12 +103,15 @@ import { WindowAnimationService } from 'src/app/shared/system-service/window.ani
         if(windowState.getPid == this.processId){
           this.currentStyles = {
             // 'display': 'none' 
-            //opacity: 0
+            opacity: 0
           };
 
           windowState.setIsVisible = false;
+          this.showHide = false;
           this._stateManagmentService.addState(this.processId,windowState);
-          this._winAnimationSerice.hideOrShowWindowNotify.next();
+
+          console.log('Stuff is supposed to vanish')
+          //this._winAnimationSerice.hideOrShowWindowNotify.next();
         }
       }
       else if(!this.windowHide){
@@ -118,9 +125,11 @@ import { WindowAnimationService } from 'src/app/shared/system-service/window.ani
              'z-index': windowState.getZIndex
           };
 
+          console.log('Stuff is supposed to appear')
           windowState.setIsVisible = true;
+          this.showHide = true;
           this._stateManagmentService.addState(this.processId,windowState);
-          this._winAnimationSerice.hideOrShowWindowNotify.next();
+          //this._winAnimationSerice.hideOrShowWindowNotify.next();
         }
       }
     }
@@ -307,7 +316,6 @@ import { WindowAnimationService } from 'src/app/shared/system-service/window.ani
     }
 
    setNextWindowToFocus():void{
-
       const processWithWindows = this._runningProcessService.getProcesses().filter(p => p.getHasWindow == true);
 
       for (let i=0; i < processWithWindows.length; i++){
@@ -324,4 +332,26 @@ import { WindowAnimationService } from 'src/app/shared/system-service/window.ani
       }
    }
 
+
+   onAnimationEvent(event: AnimationEvent):void {
+
+    // openClose is trigger name in this example
+    console.warn(`Animation Trigger: ${event.triggerName}`);
+
+    // 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, fromState is either "open" or "closed"
+    console.warn(`From: ${event.fromState}`);
+
+    // 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}`);
+  }
+
 }
diff --git a/src/app/user-apps/jsdos/jsdos.component.html b/src/app/user-apps/jsdos/jsdos.component.html
@@ -1,9 +1,4 @@
-<div 
-[@openClose]="onOpen ? 'open' : 'closed'"
-(@openClose.start)="onAnimationEvent($event)"
-(@openClose.done)="onAnimationEvent($event)">
 
-    <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setJSDosWindowToFocus(this.processId)">
-        <div #doswindow class="canvas" style="height:800px; width:600px; position: relative;" ></div> 
-    </cos-window>
-</div>
+<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setJSDosWindowToFocus(this.processId)">
+    <div #doswindow class="canvas" style="height:800px; width:600px; position: relative;" ></div> 
+</cos-window>
diff --git a/src/app/user-apps/jsdos/jsdos.component.ts b/src/app/user-apps/jsdos/jsdos.component.ts
@@ -10,16 +10,13 @@ import { Process } from 'src/app/system-files/process';
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
 import { FileInfo } from 'src/app/system-files/fileinfo';
-import { AnimationEvent } from '@angular/animations';
-import { openCloseAnimation } from 'src/app/system-apps/window/animation/animations';
 
 declare const Dos: DosPlayerFactoryType;
 declare const emulators:Emulators
 
 @Component({
   selector: 'cos-jsdos',
   templateUrl: './jsdos.component.html',
-  animations: [ openCloseAnimation],
   styleUrls: ['./jsdos.component.css']
 })
 export class JsdosComponent implements BaseComponent, OnInit, OnDestroy, AfterViewInit {
@@ -38,7 +35,6 @@ export class JsdosComponent implements BaseComponent, OnInit, OnDestroy, AfterVi
   processId = 0;
   type = ComponentType.userComponent;
   displayName = 'JS-Dos';
-  onOpen = true;
 
   dosOptions:DosPlayerOptions = {
     style: "none",
@@ -92,28 +88,6 @@ export class JsdosComponent implements BaseComponent, OnInit, OnDestroy, AfterVi
     this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
   }
 
-
-  onAnimationEvent(event: AnimationEvent) {
-
-    // // openClose is trigger name in this example
-    // console.warn(`Animation Trigger: ${event.triggerName}`);
-
-    // // 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, fromState is either "open" or "closed"
-    // console.warn(`From: ${event.fromState}`);
-
-    // // 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}`);
-  }
-
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type, this._triggerProcessService.getLastProcessTrigger)
   }

diff --git a/src/app/user-apps/title/title.component.html b/src/app/user-apps/title/title.component.html
@@ -1,12 +1,6 @@
-    <div 
-    [@hideShow]="HideShow ? 'show' : 'hide'"
-    (@hideShow.start)="onAnimationEvent($event)"
-    (@hideShow.done)="onAnimationEvent($event)">
-
-        <cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setTitleWindowToFocus(this.processId)">
-            <p  class="title"> Hello, World! </p>
-        </cos-window>
-    </div>
+<cos-window [runningProcessID]="this.processId" [processAppIcon]="this.icon" [processAppName]="this.name" (click)="setTitleWindowToFocus(this.processId)">
+    <p  class="title"> Hello, World! </p>
+</cos-window>