added zoom hotkeys & mouse handler (fixes #24)

terminus-core/src/components/appRoot.component.ts

@@ -50,8 +50,8 @@ export class AppRootComponent {
         private docking: DockingService,
         private electron: ElectronService,
         private tabRecovery: TabRecoveryService,
+        private hotkeys: HotkeysService,
         public hostApp: HostAppService,
-        public hotkeys: HotkeysService,
         public config: ConfigService,
         public app: AppService,
         @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],

terminus-core/src/services/hotkeys.service.ts

@@ -178,10 +178,6 @@ export class AppHotkeyProvider extends HotkeyProvider {
             id: 'toggle-window',
             name: 'Toggle terminal window',
         },
-        {
-            id: 'new-tab',
-            name: 'New tab',
-        },
         {
             id: 'close-tab',
             name: 'Close tab',

terminus-terminal/src/components/terminalTab.component.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, Subject, Subscription } from 'rxjs'
 import 'rxjs/add/operator/bufferTime'
 import { Component, NgZone, Inject, Optional, ViewChild, HostBinding, Input } from '@angular/core'
-import { AppService, ConfigService, BaseTabComponent, ThemesService, HostAppService, Platform } from 'terminus-core'
+import { AppService, ConfigService, BaseTabComponent, ThemesService, HostAppService, HotkeysService, Platform } from 'terminus-core'
 
 import { Session, SessionsService } from '../services/sessions.service'
 
@@ -16,11 +16,13 @@ import { hterm, preferenceManager } from '../hterm'
 export class TerminalTabComponent extends BaseTabComponent {
     session: Session
     @Input() sessionOptions: SessionOptions
+    @Input() zoom = 0
     @ViewChild('content') content
     @HostBinding('style.background-color') backgroundColor: string
     hterm: any
     configSubscription: Subscription
     sessionCloseSubscription: Subscription
+    hotkeysSubscription: Subscription
     bell$ = new Subject()
     size: ResizeEvent
     resize$ = new Subject<ResizeEvent>()
@@ -37,6 +39,7 @@ export class TerminalTabComponent extends BaseTabComponent {
         private app: AppService,
         private themes: ThemesService,
         private hostApp: HostAppService,
+        private hotkeys: HotkeysService,
         private sessions: SessionsService,
         public config: ConfigService,
         @Optional() @Inject(TerminalDecorator) private decorators: TerminalDecorator[],
@@ -64,6 +67,17 @@ export class TerminalTabComponent extends BaseTabComponent {
             })
             this.session.releaseInitialDataBuffer()
         })
+        this.hotkeysSubscription = this.hotkeys.matchedHotkey.subscribe(hotkey => {
+            if (hotkey === 'zoom-in') {
+                this.zoomIn()
+            }
+            if (hotkey === 'zoom-out') {
+                this.zoomOut()
+            }
+            if (hotkey === 'reset-zoom') {
+                this.resetZoom()
+            }
+        })
     }
 
     getRecoveryToken (): any {
@@ -150,10 +164,18 @@ export class TerminalTabComponent extends BaseTabComponent {
         const _onMouse = hterm.onMouse_.bind(hterm)
         hterm.onMouse_ = (event) => {
             this.mouseEvent$.next(event)
-            if ((event.ctrlKey || event.metaKey) && event.type === 'mousewheel') {
+            if (event.type === 'mousewheel') {
-                event.preventDefault()
+                if (event.ctrlKey || event.metaKey) {
-                let delta = Math.round(event.wheelDeltaY / 50)
+                    if (event.wheelDeltaY < 0) {
-                this.sendInput(((delta > 0) ? '\u001bOA' : '\u001bOB').repeat(Math.abs(delta)))
+                        this.zoomIn()
+                    } else {
+                        this.zoomOut()
+                    }
+                } else if (event.altKey) {
+                    event.preventDefault()
+                    let delta = Math.round(event.wheelDeltaY / 50)
+                    this.sendInput(((delta > 0) ? '\u001bOA' : '\u001bOB').repeat(Math.abs(delta)))
+                }
             }
             _onMouse(event)
         }
@@ -208,7 +230,7 @@ export class TerminalTabComponent extends BaseTabComponent {
     async configure (): Promise<void> {
         let config = this.config.store
         preferenceManager.set('font-family', config.terminal.font)
-        preferenceManager.set('font-size', config.terminal.fontSize)
+        this.setFontSize()
         preferenceManager.set('enable-bold', true)
         preferenceManager.set('audible-bell-sound', '')
         preferenceManager.set('desktop-notification-bell', config.terminal.bell === 'notification')
@@ -242,12 +264,28 @@ export class TerminalTabComponent extends BaseTabComponent {
         this.hterm.setBracketedPaste(config.terminal.bracketedPaste)
     }
 
+    zoomIn () {
+        this.zoom++
+        this.setFontSize()
+    }
+
+    zoomOut () {
+        this.zoom--
+        this.setFontSize()
+    }
+
+    resetZoom () {
+        this.zoom = 0
+        this.setFontSize()
+    }
+
     ngOnDestroy () {
-        this.decorators.forEach((decorator) => {
+        this.decorators.forEach(decorator => {
             decorator.detach(this)
         })
         this.configSubscription.unsubscribe()
         this.sessionCloseSubscription.unsubscribe()
+        this.hotkeysSubscription.unsubscribe()
         this.resize$.complete()
         this.input$.complete()
         this.output$.complete()
@@ -261,4 +299,8 @@ export class TerminalTabComponent extends BaseTabComponent {
         super.destroy()
         await this.session.destroy()
     }
+
+    private setFontSize () {
+        preferenceManager.set('font-size', this.config.store.terminal.fontSize * Math.pow(1.1, this.zoom))
+    }
 }

terminus-terminal/src/config.ts

@@ -43,6 +43,14 @@ export class TerminalConfigProvider extends ConfigProvider {
                 shell: '~default-shell~',
             },
             hotkeys: {
+                'zoom-in': [
+                    '⌘-=',
+                    '⌘-Shift-+',
+                ],
+                'zoom-out': [
+                    '⌘--',
+                    '⌘-Shift-_',
+                ],
                 'new-tab': [
                     ['Ctrl-A', 'C'],
                     ['Ctrl-A', 'Ctrl-C'],
@@ -57,6 +65,14 @@ export class TerminalConfigProvider extends ConfigProvider {
                 shell: '~clink~',
             },
             hotkeys: {
+                'zoom-in': [
+                    'Ctrl-=',
+                    'Ctrl-Shift-+',
+                ],
+                'zoom-out': [
+                    'Ctrl--',
+                    'Ctrl-Shift-_',
+                ],
                 'new-tab': [
                     ['Ctrl-A', 'C'],
                     ['Ctrl-A', 'Ctrl-C'],
@@ -70,6 +86,14 @@ export class TerminalConfigProvider extends ConfigProvider {
                 shell: '~default-shell~',
             },
             hotkeys: {
+                'zoom-in': [
+                    'Ctrl-=',
+                    'Ctrl-Shift-+',
+                ],
+                'zoom-out': [
+                    'Ctrl--',
+                    'Ctrl-Shift-_',
+                ],
                 'new-tab': [
                     ['Ctrl-A', 'C'],
                     ['Ctrl-A', 'Ctrl-C'],

terminus-terminal/src/hotkeys.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core'
+import { IHotkeyDescription, HotkeyProvider } from 'terminus-core'
+
+@Injectable()
+export class TerminalHotkeyProvider extends HotkeyProvider {
+    hotkeys: IHotkeyDescription[] = [
+        {
+            id: 'zoom-in',
+            name: 'Zoom in',
+        },
+        {
+            id: 'zoom-out',
+            name: 'Zoom out',
+        },
+        {
+            id: 'reset-zoom',
+            name: 'Reset zoom',
+        },
+        {
+            id: 'new-tab',
+            name: 'New tab',
+        },
+    ]
+}

terminus-terminal/src/index.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
-import { HostAppService, Platform, ToolbarButtonProvider, TabRecoveryProvider, ConfigProvider, HotkeysService } from 'terminus-core'
+import { HostAppService, Platform, ToolbarButtonProvider, TabRecoveryProvider, ConfigProvider, HotkeysService, HotkeyProvider } from 'terminus-core'
 import { SettingsTabProvider } from 'terminus-settings'
 
 import { TerminalTabComponent } from './components/terminalTab.component'
@@ -19,6 +19,7 @@ import { SessionPersistenceProvider, TerminalColorSchemeProvider, TerminalDecora
 import { TerminalSettingsTabProvider } from './settings'
 import { PathDropDecorator } from './pathDrop'
 import { TerminalConfigProvider } from './config'
+import { TerminalHotkeyProvider } from './hotkeys'
 import { HyperColorSchemes } from './colorSchemes'
 import { hterm } from './hterm'
 
@@ -46,6 +47,7 @@ import { hterm } from './hterm'
         },
         { provide: SettingsTabProvider, useClass: TerminalSettingsTabProvider, multi: true },
         { provide: ConfigProvider, useClass: TerminalConfigProvider, multi: true },
+        { provide: HotkeyProvider, useClass: TerminalHotkeyProvider, multi: true },
         { provide: TerminalColorSchemeProvider, useClass: HyperColorSchemes, multi: true },
         { provide: TerminalDecorator, useClass: PathDropDecorator, multi: true },
     ],