feat(simulation): aspect resolution support

* #13 * #4 Signed-off-by: Richard Lea <[email protected]>
chigix · Jun 29, 2019 · f3260f4 · f3260f4
1 parent c290cfb
commit f3260f4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 28 deletions.
diff --git a/src/app/modules/simulation/resolutions.ts b/src/app/modules/simulation/resolutions.ts
diff --git a/src/app/modules/simulation/simulation-outlet.component.html b/src/app/modules/simulation/simulation-outlet.component.html
@@ -1,3 +1,4 @@
-<div class="main-layout game-classroom" [style.height.px]="resolution.height">
+<div class="main-layout game-classroom" [style.height]="resolution.height"
+  [style.width]="resolution.width">
   <ng-template scene-host></ng-template>
 </div>
diff --git a/src/app/modules/simulation/simulation-outlet.component.scss b/src/app/modules/simulation/simulation-outlet.component.scss
@@ -1,3 +1,12 @@
+:host {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.9);
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
 div.main-layout {
   width: 100%;
   position: relative;

diff --git a/src/app/modules/simulation/simulation-outlet.component.ts b/src/app/modules/simulation/simulation-outlet.component.ts
@@ -1,16 +1,11 @@
-import {
-  Component, OnInit, ComponentFactoryResolver,
-  ViewChild, ComponentRef,
-} from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { filter } from 'rxjs/operators';
+import { Component, OnInit, ViewChild, ComponentRef, HostListener } from '@angular/core';
+import { first, filter, map } from 'rxjs/operators';
 import {
   SimulationServiceBase, StaticSessionService,
 } from 'app/renpi/services';
 
 import { SimulationService } from './simulation.service';
 import { SceneHostDirective } from './scene-host.directive';
-import { Resolution } from './resolutions';
 
 @Component({
   selector: 'ren-simulation',
@@ -22,31 +17,54 @@ export class SimulationOutletComponent implements OnInit {
 
   @ViewChild(SceneHostDirective) sceneHost: SceneHostDirective;
 
-  private currentScene: ComponentRef<any>;
-
-  resolution: Resolution;
+  resolution = { width: '100vw', height: '100vh' };
 
   constructor(
-    private breakpointObserver: BreakpointObserver,
     private simulationService: SimulationServiceBase,
     public staticSessionService: StaticSessionService,
-  ) {
-    this.breakpointObserver.observe([
-      Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium])
-      .pipe(filter(result => result.matches))
-      .subscribe(result => this.resolution = { width: 1066, height: 600 });
-    this.breakpointObserver.observe(Breakpoints.Large)
-      .pipe(filter(result => result.matches))
-      .subscribe(result => this.resolution = { width: 1280, height: 720 });
-    this.breakpointObserver.observe(Breakpoints.XLarge)
-      .pipe(filter(result => result.matches))
-      .subscribe(result => this.resolution = { width: 1920, height: 1080 });
-  }
+  ) { }
 
   ngOnInit() {
     if (this.simulationService instanceof SimulationService) {
       this.simulationService.setOutlet(this);
     }
+    this.onResize({ currentTarget: window });
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event?: { currentTarget: { innerWidth: number, innerHeight: number } }) {
+    this.simulationService.initObserve.pipe(
+      first(), map(init => init.screenAspect), filter(aspect => !!aspect)
+    ).subscribe(aspect => {
+      if (aspect.height === aspect.width) {
+        if (event.currentTarget.innerHeight > event.currentTarget.innerWidth) {
+          this.resolution.height = '100vw';
+          this.resolution.width = '100vw';
+        } else {
+          this.resolution.height = '100vh';
+          this.resolution.width = '100vh';
+        }
+      } else if ((aspect.height - aspect.width) *
+        (event.currentTarget.innerHeight - event.currentTarget.innerWidth) < 0) {
+        if (event.currentTarget.innerHeight > event.currentTarget.innerWidth) {
+          this.resolution.height = (aspect.height * event.currentTarget.innerWidth / aspect.width) + 'px';
+          this.resolution.width = '100vw';
+        } else {
+          this.resolution.height = '100vh';
+          this.resolution.width = (aspect.width * event.currentTarget.innerHeight / aspect.height) + 'px';
+        }
+      } else {
+        const widthRate = event.currentTarget.innerWidth / aspect.width;
+        const heightRate = event.currentTarget.innerHeight / aspect.height;
+        if (widthRate < heightRate) {
+          this.resolution.height = (aspect.height * widthRate) + 'px';
+          this.resolution.width = '100vw';
+        } else {
+          this.resolution.height = '100vh';
+          this.resolution.width = (aspect.width * heightRate) + 'px';
+        }
+      }
+    });
   }
 
 }
diff --git a/src/app/modules/simulation/simulation.service.ts b/src/app/modules/simulation/simulation.service.ts
@@ -110,6 +110,9 @@ export class SimulationService implements OnDestroy, SimulationServiceBase {
           name: 'ren:contextName',
           title: 'ren:contextTitle',
           entryScene: 'ren:nextScene',
+          screenAspect: 'ren:screenAspect',
+          width: 'ren:screenAspectWidth',
+          height: 'ren:screenAspectHeight',
           version: 'http://schema.org/version',
           interfaceVersion: 'http://schema.org/schemaVersion',
         });