include xterm webgl renderer as a separate frontend

terminus-terminal/src/components/appearanceSettingsTab.component.pug

@@ -12,6 +12,7 @@ h3.mb-3 Appearance
             )
                 option(value='hterm') hterm
                 option(value='xterm') xterm
+                option(value='xterm-webgl') xterm (WebGL)
                         
         .form-line
             .header

terminus-terminal/src/frontends/xtermFrontend.ts

@@ -11,6 +11,7 @@ export class XTermFrontend extends Frontend {
     enableResizing = true
     xterm: Terminal
     xtermCore: any
+    enableWebGL = false
     private configuredFontSize = 0
     private zoom = 0
     private resizeHandler: () => void
@@ -89,7 +90,11 @@ export class XTermFrontend extends Frontend {
     attach (host: HTMLElement): void {
         this.xterm.open(host)
         this.opened = true
-        ;(this.xterm as any).loadWebgl(false)
+
+        if (this.enableWebGL) {
+            (this.xterm as any).loadWebgl(false)
+        }
+
         if (this.configService.store.terminal.ligatures) {
             enableLigatures(this.xterm)
         }
@@ -220,3 +225,8 @@ export class XTermFrontend extends Frontend {
         this.xterm.setOption('fontSize', this.configuredFontSize * Math.pow(1.1, this.zoom))
     }
 }
+
+/** @hidden */
+export class XTermWebGLFrontend extends XTermFrontend {
+    enableWebGL = true
+}

terminus-terminal/src/index.ts

@@ -52,7 +52,7 @@ import { WSLShellProvider } from './shells/wsl'
 import { hterm } from './frontends/hterm'
 import { Frontend } from './frontends/frontend'
 import { HTermFrontend } from './frontends/htermFrontend'
-import { XTermFrontend } from './frontends/xtermFrontend'
+import { XTermFrontend, XTermWebGLFrontend } from './frontends/xtermFrontend'
 
 /** @hidden */
 @NgModule({
@@ -217,5 +217,5 @@ export default class TerminalModule {
 }
 
 export { TerminalService, BaseSession, TerminalTabComponent, TerminalFrontendService, BaseTerminalTabComponent }
-export { Frontend, XTermFrontend, HTermFrontend }
+export { Frontend, XTermFrontend, XTermWebGLFrontend, HTermFrontend }
 export * from './api'

terminus-terminal/src/services/sessions.service.ts

@@ -321,7 +321,7 @@ export class SessionsService {
     constructor (
         log: LogService,
     ) {
-        //require('../bufferizedPTY')(nodePTY)
+        require('../bufferizedPTY')(nodePTY)
         this.logger = log.create('sessions')
     }
 

terminus-terminal/src/services/terminalFrontend.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { ConfigService, ThemesService, HotkeysService } from 'terminus-core'
 import { Frontend } from '../frontends/frontend'
 import { HTermFrontend } from '../frontends/htermFrontend'
-import { XTermFrontend } from '../frontends/xtermFrontend'
+import { XTermFrontend, XTermWebGLFrontend } from '../frontends/xtermFrontend'
 import { BaseSession } from '../services/sessions.service'
 
 @Injectable({ providedIn: 'root' })
@@ -18,9 +18,11 @@ export class TerminalFrontendService {
 
     getFrontend (session?: BaseSession): Frontend {
         if (!session) {
-            let frontend: Frontend = (this.config.store.terminal.frontend === 'xterm')
-                ? new XTermFrontend()
-                : new HTermFrontend()
+            let frontend: Frontend = new ({
+                'xterm': XTermFrontend,
+                'xterm-webgl': XTermWebGLFrontend,
+                'hterm': HTermFrontend,
+            }[this.config.store.terminal.frontend])()
             frontend.configService = this.config
             frontend.themesService = this.themes
             frontend.hotkeysService = this.hotkeys