fix(terminal): Use fit xtermjs addon (#746)

nrwl · Jul 16, 2019 · 4bdfcf1 · 4bdfcf1
1 parent d2840ea
commit 4bdfcf1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 52 deletions.
diff --git a/apps/vscode/src/package.json b/apps/vscode/src/package.json
@@ -2,7 +2,7 @@
   "name": "angular-console",
   "displayName": "Angular Console",
   "description": "Angular Console for Visual Studio Code. The user interface app for the Angular CLI",
-  "version": "8.0.8",
+  "version": "8.0.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/angular-console"

diff --git a/libs/ui/src/lib/terminal/terminal.component.html b/libs/ui/src/lib/terminal/terminal.component.html
@@ -1 +1 @@
-<div class="terminal-container"><div #code></div></div>
+<div class="terminal-container" #code></div>
diff --git a/libs/ui/src/lib/terminal/terminal.component.scss b/libs/ui/src/lib/terminal/terminal.component.scss
@@ -2,20 +2,14 @@ ui-terminal {
   display: block;
   height: 100%;
   overflow: hidden;
-  padding-top: 8px;
-  padding-bottom: 4px;
+  position: relative;
 
   .terminal-container {
-    max-width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    > div {
-      box-sizing: border-box;
-      padding: 0 12px;
-      padding-right: 0;
-      height: 100%;
-    }
+    position: absolute;
+    top: 8px;
+    bottom: 0;
+    left: 12px;
+    right: 0;
   }
 
   .xterm-viewport {

diff --git a/libs/ui/src/lib/terminal/terminal.component.ts b/libs/ui/src/lib/terminal/terminal.component.ts
@@ -15,11 +15,10 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { Terminal } from 'xterm';
+import { fit } from 'xterm/lib/addons/fit/fit';
 
 import { TerminalFactory } from './terminal.factory';
 
-const SCROLL_BAR_WIDTH = 36;
-const MIN_TERMINAL_WIDTH = 80;
 const TERMINAL_CONFIG = {
   disableStdin: true,
   fontSize: 14,
@@ -45,7 +44,7 @@ export class TerminalComponent implements AfterViewInit, OnDestroy {
   private readonly term = new ReplaySubject<Terminal>();
   private resizeObserver?: ResizeObserver;
 
-  @ViewChild('code', { read: ElementRef, static: false })
+  @ViewChild('code', { read: ElementRef, static: true })
   private readonly code: ElementRef;
 
   currentCols = new BehaviorSubject<number>(80);
@@ -69,7 +68,6 @@ export class TerminalComponent implements AfterViewInit, OnDestroy {
 
   constructor(
     private readonly terminalFactory: TerminalFactory,
-    private readonly elementRef: ElementRef,
     private readonly settings: Settings,
     private readonly ngZone: NgZone
   ) {
@@ -99,21 +97,14 @@ export class TerminalComponent implements AfterViewInit, OnDestroy {
   parentElement: HTMLElement;
   ngAfterViewInit(): void {
     this.ngZone.runOutsideAngular(() => {
-      const nativeElement = this.elementRef.nativeElement as HTMLElement;
-      this.parentElement = nativeElement.parentElement || nativeElement;
       this.term.pipe(first()).subscribe(term => {
-        this.resizeTerminalSubject.asObservable().subscribe(() => {
-          this.resizeTerminal(term);
-        });
-        this.resizeTerminalSubject.next();
-
         term.open(this.code.nativeElement);
 
         this.resizeObserver = new ResizeObserver(() => {
-          this.resizeTerminalSubject.next();
+          fit(term);
         });
 
-        this.resizeObserver.observe(this.parentElement);
+        this.resizeObserver.observe(this.code.nativeElement);
       });
     });
   }
@@ -142,26 +133,4 @@ export class TerminalComponent implements AfterViewInit, OnDestroy {
       term.reset();
     });
   }
-
-  private resizeTerminal(term: Terminal) {
-    const renderer = (term as any)._core.renderer;
-    if (!renderer) {
-      return;
-    }
-
-    const height = this.parentElement.clientHeight;
-    const width = this.parentElement.clientWidth - SCROLL_BAR_WIDTH;
-
-    const cols = Math.max(
-      MIN_TERMINAL_WIDTH,
-      Math.floor(width / renderer.dimensions.actualCellWidth)
-    );
-    const rows = Math.floor(height / renderer.dimensions.actualCellHeight);
-
-    // If dimensions did not change, no need to reset.
-    if (term.cols !== cols || term.rows !== rows) {
-      term.resize(cols, rows);
-      this.currentCols.next(cols);
-    }
-  }
 }
diff --git a/package-scripts.js b/package-scripts.js
@@ -99,7 +99,7 @@ module.exports = {
       server: {
         default: nps.series(
           'nps dev.gen-graphql',
-          'ng build electron --maxWorkers=6 --noSourceMap',
+          'ng build electron --maxWorkers=2 --noSourceMap',
           'nps dev.copy-assets.electron',
           'nps dev.server.start'
         ),
@@ -222,7 +222,7 @@ module.exports = {
         nps.series(
           'nps dev.gen-graphql',
           nps.concurrent({
-            server: 'ng build APPLICATION --prod --maxWorkers=6 --noSourceMap',
+            server: 'ng build APPLICATION --prod --maxWorkers=2 --noSourceMap',
             client: 'ng build angular-console --configuration=APPLICATION'
           })
         )
@@ -232,7 +232,7 @@ module.exports = {
           nps.series(
             'nps dev.gen-graphql',
             nps.concurrent({
-              server: 'ng build APPLICATION --maxWorkers=6',
+              server: 'ng build APPLICATION --maxWorkers=2',
               client: 'ng build angular-console --configuration=APPLICATION'
             })
           )
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="terminal-container"><div #code></div></div>
		<div class="terminal-container" #code></div>