From 4cf9eda55fa1755c4aaeda364c36d413d8686140 Mon Sep 17 00:00:00 2001 From: christianbingman Date: Mon, 11 Apr 2022 19:44:24 -0500 Subject: [PATCH] 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 --- .../src/components/splitTab.component.ts | 90 +++++++++++++++++++ tabby-core/src/configDefaults.linux.yaml | 4 + tabby-core/src/configDefaults.macos.yaml | 4 + tabby-core/src/configDefaults.windows.yaml | 4 + tabby-core/src/configDefaults.yaml | 1 + tabby-core/src/hotkeys.ts | 16 ++++ .../windowSettingsTab.component.pug | 12 +++ 7 files changed, 131 insertions(+) diff --git a/tabby-core/src/components/splitTab.component.ts b/tabby-core/src/components/splitTab.component.ts index a6dd5fbc..d8407a66 100644 --- a/tabby-core/src/components/splitTab.component.ts +++ b/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 */ diff --git a/tabby-core/src/configDefaults.linux.yaml b/tabby-core/src/configDefaults.linux.yaml index a112199a..1cd5ef7b 100644 --- a/tabby-core/src/configDefaults.linux.yaml +++ b/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' diff --git a/tabby-core/src/configDefaults.macos.yaml b/tabby-core/src/configDefaults.macos.yaml index 5db9b8f3..c4bf2867 100644 --- a/tabby-core/src/configDefaults.macos.yaml +++ b/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: diff --git a/tabby-core/src/configDefaults.windows.yaml b/tabby-core/src/configDefaults.windows.yaml index 609b4536..15a006b3 100644 --- a/tabby-core/src/configDefaults.windows.yaml +++ b/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: diff --git a/tabby-core/src/configDefaults.yaml b/tabby-core/src/configDefaults.yaml index a9b6ce96..24ff5d5b 100644 --- a/tabby-core/src/configDefaults.yaml +++ b/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: diff --git a/tabby-core/src/hotkeys.ts b/tabby-core/src/hotkeys.ts index 5f008b55..9d73272b 100644 --- a/tabby-core/src/hotkeys.ts +++ b/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 ( diff --git a/tabby-settings/src/components/windowSettingsTab.component.pug b/tabby-settings/src/components/windowSettingsTab.component.pug index c62b8814..0528340d 100644 --- a/tabby-settings/src/components/windowSettingsTab.component.pug +++ b/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