Allows the user to resize panes using hotkeys

Changes:
- Adds 4 hotkeys for resizing panes horizontally and vertically
- Updates the config files (default not set)
- Updates the window settings to allow the user to modify the pane
  resize increments

tabby-core/src/components/splitTab.component.ts

@@ -5,9 +5,11 @@ import { TabRecoveryProvider, RecoveryToken } from '../api/tabRecovery'
 import { TabsService, NewTabParameters } from '../services/tabs.service'
 import { HotkeysService } from '../services/hotkeys.service'
 import { TabRecoveryService } from '../services/tabRecovery.service'
+import { ConfigService } from '../api'
 
 export type SplitOrientation = 'v' | 'h'
 export type SplitDirection = 'r' | 't' | 'b' | 'l'
+export type ResizeDirection = 'v' | 'h' | 'dv' | 'dh'
 
 /**
  * Describes a horizontal or vertical split row or column
@@ -250,6 +252,7 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         private hotkeys: HotkeysService,
         private tabsService: TabsService,
         private tabRecovery: TabRecoveryService,
+        private config: ConfigService,
     ) {
         super()
         this.root = new SplitContainer()
@@ -313,6 +316,18 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
                 case 'close-pane':
                     this.removeTab(this.focusedTab)
                     break
+                case 'pane-increase-vertical':
+                    this.resizePane('v')
+                    break
+                case 'pane-decrease-vertical':
+                    this.resizePane('dv')
+                    break
+                case 'pane-increase-horizontal':
+                    this.resizePane('h')
+                    break
+                case 'pane-decrease-horizontal':
+                    this.resizePane('dh')
+                    break
             }
         })
     }
@@ -504,6 +519,81 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         this.updateTitle()
     }
 
+    /**
+      * Changes the size of the focused pane in the given direction
+      */
+    resizePane (direction: ResizeDirection): void {
+        const resizeIncrement = this.config.store.appearance.paneResize
+
+        // The direction of the resize pane, vertically or horizontally
+        let directionvh: SplitOrientation = 'h'
+
+        const isDecreasing: boolean = direction === 'dv' || direction === 'dh'
+
+        if (direction === 'dh') {
+            directionvh = 'h'
+        }
+        if (direction === 'dv') {
+            directionvh = 'v'
+        }
+        if (direction === 'h') {
+            directionvh = 'h'
+        }
+        if (direction === 'v') {
+            directionvh = 'v'
+        }
+        if (!this.focusedTab) {
+            console.debug('No currently focused tab')
+            return
+        }
+
+        let cur: BaseTabComponent | SplitContainer = this.focusedTab
+        let child: BaseTabComponent | SplitContainer | null = this.focusedTab
+        let curSplitOrientation: SplitOrientation | null = null
+
+        // Find the first split that is in the orientations that the user chooses to change
+        while (curSplitOrientation !== directionvh) {
+            const par = this.getParentOf(cur)
+            if (par == null) {
+                return
+            }
+            child = cur
+            cur = par
+            if (cur instanceof SplitContainer) {
+                curSplitOrientation = cur.orientation
+            }
+        }
+        const curSplit: SplitContainer = cur as SplitContainer
+
+        // Determine which index in the ratios refers to the child that will be modified
+        const currentChildIndex = (cur as SplitContainer).children.indexOf(child)
+
+        let updatedRatio = 0
+        if (isDecreasing) {
+            updatedRatio = curSplit.ratios[currentChildIndex] - resizeIncrement
+            if (updatedRatio < 0) {
+                return
+            }
+        } else {
+            updatedRatio = curSplit.ratios[currentChildIndex] + resizeIncrement
+            if (updatedRatio > 1) {
+                return
+            }
+        }
+        const ratioModifier = resizeIncrement / curSplit.ratios.length
+
+        // Modify all the ratios evenly to normalize the pane sizes
+        curSplit.ratios.forEach((ratio) => {
+            if (isDecreasing) {
+                curSplit.ratios[ratio] += ratioModifier
+            } else {
+                curSplit.ratios[ratio] -= ratioModifier
+            }
+        })
+        curSplit.ratios[currentChildIndex] = updatedRatio
+        this.layout()
+    }
+
     /**
      * Moves focus in the given direction
      */

tabby-core/src/configDefaults.linux.yaml

@@ -75,6 +75,10 @@ hotkeys:
     - 'Ctrl-Alt-]'
   pane-maximize:
     - 'Ctrl-Alt-Enter'
+  pane-increase-vertical: []
+  pane-decrease-vertical: []
+  pane-increase-horizontal: []
+  pane-decrease-horizontal: []
   close-pane: []
   switch-profile:
     - 'Ctrl-Alt-T'

tabby-core/src/configDefaults.macos.yaml

@@ -75,6 +75,10 @@ hotkeys:
     - '⌘-⌥-Enter'
   close-pane:
     - '⌘-Shift-W'
+  pane-increase-vertical: []
+  pane-decrease-vertical: []
+  pane-increase-horizontal: []
+  pane-decrease-horizontal: []
   profile-selector:
     - '⌘-E'
   switch-profile:

tabby-core/src/configDefaults.windows.yaml

@@ -77,6 +77,10 @@ hotkeys:
   pane-maximize:
     - 'Ctrl-Alt-Enter'
   close-pane: []
+  pane-increase-vertical: []
+  pane-decrease-vertical: []
+  pane-increase-horizontal: []
+  pane-decrease-horizontal: []
   switch-profile:
     - 'Ctrl-Alt-T'
   profile-selector:

tabby-core/src/configDefaults.yaml

@@ -12,6 +12,7 @@ appearance:
   frame: thin
   css: '/* * { color: blue !important; } */'
   opacity: 1.0
+  paneResize: 0.1
   vibrancy: false
   vibrancyType: 'blur'
 terminal:

tabby-core/src/hotkeys.ts

@@ -196,6 +196,22 @@ export class AppHotkeyProvider extends HotkeyProvider {
             id: 'close-pane',
             name: this.translate.instant('Close focused pane'),
         },
+        {
+            id: 'pane-increase-vertical',
+            name: this.translate.instant('Increase vertical split size'),
+        },
+        {
+            id: 'pane-decrease-vertical',
+            name: this.translate.instant('Decrease vertical split size'),
+        },
+        {
+            id: 'pane-increase-horizontal',
+            name: this.translate.instant('Increase horizontal split size'),
+        },
+        {
+            id: 'pane-decrease-horizontal',
+            name: this.translate.instant('Decrease horizontal split size'),
+        },
     ]
 
     constructor (

tabby-settings/src/components/windowSettingsTab.component.pug

@@ -66,6 +66,18 @@ h3.mb-3(translate) Window
         step='0.01'
     )
 
+.form-line()
+     .header
+         .title(translate) Pane Resize Increment
+     input(
+         type='range',
+         [(ngModel)]='config.store.appearance.paneResize',
+         (ngModelChange)='saveConfiguration();',
+         min='0.1',
+         max='0.9',
+         step='0.05'
+     )
+
 .form-line(*ngIf='platform.supportsWindowControls')
     .header
         .title(translate) Window frame