Merge pull request #54 from cryptic-game/experimental

44-Reworked the window system to fix wrong window closing-master

Author: MaxiHuHe04

package-lock.json

@@ -11,34 +11,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.0.0",
-    "@angular/cdk": "^8.0.1",
-    "@angular/common": "~8.0.0",
-    "@angular/compiler": "~8.0.0",
-    "@angular/core": "~8.0.0",
-    "@angular/forms": "~8.0.0",
-    "@angular/platform-browser": "~8.0.0",
-    "@angular/platform-browser-dynamic": "~8.0.0",
-    "@angular/router": "~8.0.0",
+    "@angular/animations": "^8.1.2",
+    "@angular/cdk": "^8.1.1",
+    "@angular/common": "^8.1.2",
+    "@angular/compiler": "^8.1.2",
+    "@angular/core": "^8.1.2",
+    "@angular/forms": "^8.1.2",
+    "@angular/platform-browser": "^8.1.2",
+    "@angular/platform-browser-dynamic": "^8.1.2",
+    "@angular/router": "^8.1.2",
     "ngx-contextmenu": "^5.2.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.0",
-    "@angular/cli": "~8.0.2",
-    "@angular/compiler-cli": "~8.0.0",
-    "@angular/language-service": "~8.0.0",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "^0.800.6",
+    "@angular/cli": "^8.1.2",
+    "@angular/compiler-cli": "^8.1.2",
+    "@angular/language-service": "^8.1.2",
+    "@types/jasmine": "^3.3.15",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "^5.0.1",
     "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "^2.1.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "protractor": "~5.4.0",

package.json

@@ -21,6 +21,7 @@ import { WindowFrameComponent } from './desktop/window/window-frame.component';
 import { WindowManagerComponent } from './desktop/window-manager/window-manager.component';
 import { TestWindowComponent } from './desktop/windows/test-window/test-window.component';
 import { TerminalComponent } from './desktop/windows/terminal/terminal.component';
+import { WindowPlaceDirective } from './desktop/window/window-place.directive';
 
 const routes: Routes = [
   { path: '', component: DesktopComponent, canActivate: [DesktopGuard] },
@@ -44,7 +45,8 @@ const routes: Routes = [
     WindowFrameComponent,
     WindowManagerComponent,
     TestWindowComponent,
-    TerminalComponent
+    TerminalComponent,
+    WindowPlaceDirective
   ],
   imports: [
     RouterModule.forRoot(routes),

src/app/app.module.ts

@@ -4,7 +4,6 @@
                       [style.top.px]="window.position.maximized ? 0 : window.position.y"
                       [style.z-index]="window.position.zIndex"
                       style="position: fixed;">
-      <ng-container [ngComponentOutlet]="window.type"></ng-container>
     </app-window-frame>
   </div>
 </div>

src/app/desktop/window-manager/window-manager.component.html

@@ -3,7 +3,9 @@ import { Type } from '@angular/core';
 export abstract class WindowDelegate {
   title: string;
   icon: string;
-  type: Type<any>;
+  type: Type<WindowComponent>;
+
+  component: WindowComponent;
 
   position: WindowPosition = {
     x: 0,
@@ -27,3 +29,7 @@ export interface WindowPosition {
   maximized: boolean;
   minimized: boolean;
 }
+
+export abstract class WindowComponent {
+  delegate: WindowDelegate;
+}

src/app/desktop/window/window-delegate.ts

@@ -22,6 +22,6 @@
   </div>
 
   <div class="window-content">
-    <ng-content></ng-content>
+    <ng-template appWindowPlace></ng-template>
   </div>
 </div>

src/app/desktop/window/window-frame.component.html

@@ -2,14 +2,18 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { WindowFrameComponent } from './window-frame.component';
 import { WindowDelegate } from './window-delegate';
+import { TestWindowComponent } from '../windows/test-window/test-window.component';
+import { NgModule } from '@angular/core';
+import { WindowPlaceDirective } from './window-place.directive';
 
 describe('WindowFrameComponent', () => {
   let component: WindowFrameComponent;
   let fixture: ComponentFixture<WindowFrameComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [WindowFrameComponent]
+      imports: [EntryComponentsTestModule],
+      declarations: [WindowFrameComponent, WindowPlaceDirective]
     })
       .compileComponents();
   }));
@@ -19,6 +23,7 @@ describe('WindowFrameComponent', () => {
     component = fixture.componentInstance;
     component.delegate = new class extends WindowDelegate {
       title = 'Test';
+      type = TestWindowComponent;
       icon = '';
     };
     fixture.detectChanges();
@@ -28,3 +33,11 @@ describe('WindowFrameComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+
+
+@NgModule({
+  declarations: [TestWindowComponent],
+  entryComponents: [TestWindowComponent]
+})
+class EntryComponentsTestModule {
+}

src/app/desktop/window/window-frame.component.spec.ts

@@ -1,6 +1,7 @@
-import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { Component, ComponentFactoryResolver, HostListener, Input, OnInit, ViewChild } from '@angular/core';
 import { WindowManagerService } from '../window-manager/window-manager.service';
 import { WindowDelegate } from './window-delegate';
+import { WindowPlaceDirective } from './window-place.directive';
 
 @Component({
   selector: 'app-window-frame',
@@ -11,6 +12,8 @@ export class WindowFrameComponent implements OnInit {
   static minWidth = 300;
   static minHeight = 150;
 
+  @ViewChild(WindowPlaceDirective, { static: true }) windowPlace: WindowPlaceDirective;
+
   @Input() delegate: WindowDelegate;
   dragging = false;
   dragStartWindowPos: [number, number] = [0, 0];
@@ -19,10 +22,18 @@ export class WindowFrameComponent implements OnInit {
   resizeDirection = 0;
   resizeStartSize: [number, number] = [0, 0];
 
-  constructor(public windowManager: WindowManagerService) {
+  constructor(public windowManager: WindowManagerService, private componentFactoryResolver: ComponentFactoryResolver) {
   }
 
   ngOnInit() {
+    this.loadWindowContent();
+  }
+
+  loadWindowContent() {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.delegate.type);
+    const componentRef = this.windowPlace.viewContainerRef.createComponent(componentFactory);
+    componentRef.instance.delegate = this.delegate;
+    this.delegate.component = componentRef.instance;
   }
 
   close() {

src/app/desktop/window/window-frame.component.ts

@@ -0,0 +1,11 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appWindowPlace]'
+})
+export class WindowPlaceDirective {
+
+  constructor(public viewContainerRef: ViewContainerRef) {
+  }
+
+}

src/app/desktop/window/window-place.directive.ts

@@ -167,6 +167,8 @@ export class DefaultTerminalState extends CommandTerminalState {
           if (this.activeDevice['uuid'] === JSON.parse(sessionStorage.getItem('activeDevice'))['uuid']) {
             sessionStorage.setItem('activeDevice', JSON.stringify(newDevice));
           }
+        } else {
+          this.terminal.outputText('The hostname couldn\'t be changed');
         }
       });
     } else {

src/app/desktop/windows/terminal/terminal-states.ts

@@ -1,26 +1,23 @@
 import { Component, ElementRef, OnInit, SecurityContext, Type, ViewChild } from '@angular/core';
-import { WindowDelegate } from '../../window/window-delegate';
+import { WindowComponent, WindowDelegate } from '../../window/window-delegate';
 import { TerminalAPI, TerminalState } from './terminal-api';
 import { WindowManagerService } from '../../window-manager/window-manager.service';
 import { DefaultTerminalState } from './terminal-states';
 import { WebsocketService } from '../../../websocket.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
+// noinspection AngularMissingOrInvalidDeclarationInModule
 @Component({
   selector: 'app-terminal',
   templateUrl: './terminal.component.html',
   styleUrls: ['./terminal.component.scss']
 })
-export class TerminalComponent extends WindowDelegate
+export class TerminalComponent extends WindowComponent
   implements OnInit, TerminalAPI {
   @ViewChild('history', { static: true }) history: ElementRef;
   @ViewChild('prompt', { static: true }) prompt: ElementRef;
   @ViewChild('cmdLine', { static: true }) cmdLine: ElementRef;
 
-  title = 'Terminal';
-  icon = 'assets/desktop/img/terminal.svg';
-  type: Type<any> = TerminalComponent;
-
   currentState: TerminalState[] = [];
   promptHtml: SafeHtml;
 
@@ -146,11 +143,17 @@ export class TerminalComponent extends WindowDelegate
   }
 
   closeTerminal() {
-    this.windowManager.closeWindow(this);
+    this.windowManager.closeWindow(this.delegate);
   }
 
   clear() {
     this.history.nativeElement.value = '';
   }
 
 }
+
+export class TerminalWindowDelegate extends WindowDelegate {
+  title = 'Terminal';
+  icon = 'assets/desktop/img/terminal.svg';
+  type: Type<any> = TerminalComponent;
+}

src/app/desktop/windows/terminal/terminal.component.ts

@@ -1,16 +1,13 @@
 import { Component, OnInit, Type } from '@angular/core';
-import { WindowDelegate } from '../../window/window-delegate';
+import { WindowComponent, WindowDelegate } from '../../window/window-delegate';
 
+// noinspection AngularMissingOrInvalidDeclarationInModule
 @Component({
   selector: 'app-test-window',
   templateUrl: './test-window.component.html',
   styleUrls: ['./test-window.component.scss']
 })
-export class TestWindowComponent extends WindowDelegate implements OnInit {
-
-  title = 'Testfenster';
-  icon = 'assets/desktop/img/filemanager.svg';
-  type: Type<any> = TestWindowComponent;
+export class TestWindowComponent extends WindowComponent implements OnInit {
 
   constructor() {
     super();
@@ -20,3 +17,9 @@ export class TestWindowComponent extends WindowDelegate implements OnInit {
   }
 
 }
+
+export class TestWindowDelegate extends WindowDelegate {
+  title = 'Testfenster';
+  icon = 'assets/desktop/img/filemanager.svg';
+  type: Type<any> = TestWindowComponent;
+}

src/app/desktop/windows/test-window/test-window.component.ts

@@ -1,12 +1,12 @@
 import { Program } from '../../dataclasses/program';
 import { Position } from '../../dataclasses/position';
-import { TestWindowComponent } from '../../app/desktop/windows/test-window/test-window.component';
-import { TerminalComponent } from '../../app/desktop/windows/terminal/terminal.component';
+import { TestWindowDelegate } from '../../app/desktop/windows/test-window/test-window.component';
+import { TerminalWindowDelegate } from '../../app/desktop/windows/terminal/terminal.component';
 
 export const programWindows = {
-  'browser': TestWindowComponent,
-  'fileManager': TestWindowComponent,
-  'terminal': TerminalComponent
+  'browser': TestWindowDelegate,
+  'fileManager': TestWindowDelegate,
+  'terminal': TerminalWindowDelegate
 };
 
 export const desktopDefinition = {