feat: add zoom in/out with gesture + keybindings

Author: bajrangCoder

src/components/terminal/terminal.js

@@ -265,6 +265,7 @@ export default class TerminalComponent {
 						terminalSettings.touchSelectionHapticFeedback !== false,
 					showContextMenu:
 						terminalSettings.touchSelectionShowContextMenu !== false,
+					onFontSizeChange: (fontSize) => this.updateFontSize(fontSize),
 				},
 			);
 		}
@@ -340,6 +341,20 @@ export default class TerminalComponent {
 				return false;
 			}
 
+			// Check for Ctrl+= or Ctrl++ (increase font size)
+			if (event.ctrlKey && (event.key === "+" || event.key === "=")) {
+				event.preventDefault();
+				this.increaseFontSize();
+				return false;
+			}
+
+			// Check for Ctrl+- (decrease font size)
+			if (event.ctrlKey && event.key === "-") {
+				event.preventDefault();
+				this.decreaseFontSize();
+				return false;
+			}
+
 			// Only intercept specific app-wide keybindings, let terminal handle the rest
 			if (event.ctrlKey || event.altKey || event.metaKey) {
 				// Skip modifier-only keys
@@ -803,6 +818,56 @@ export default class TerminalComponent {
 		}
 	}
 
+	/**
+	 * Increase terminal font size
+	 */
+	increaseFontSize() {
+		const currentSize = this.terminal.options.fontSize;
+		const newSize = Math.min(currentSize + 1, 24); // Max font size 24
+		this.updateFontSize(newSize);
+	}
+
+	/**
+	 * Decrease terminal font size
+	 */
+	decreaseFontSize() {
+		const currentSize = this.terminal.options.fontSize;
+		const newSize = Math.max(currentSize - 1, 8); // Min font size 8
+		this.updateFontSize(newSize);
+	}
+
+	/**
+	 * Update terminal font size and refresh display
+	 */
+	updateFontSize(fontSize) {
+		if (fontSize === this.terminal.options.fontSize) return;
+
+		this.terminal.options.fontSize = fontSize;
+		this.options.fontSize = fontSize;
+
+		// Update terminal settings properly
+		const currentSettings = appSettings.value.terminalSettings || {};
+		const updatedSettings = { ...currentSettings, fontSize };
+		appSettings.update({ terminalSettings: updatedSettings }, false);
+
+		// Refresh terminal display
+		this.terminal.refresh(0, this.terminal.rows - 1);
+
+		// Fit terminal to container after font size change to prevent empty space
+		setTimeout(() => {
+			if (this.fitAddon) {
+				this.fitAddon.fit();
+			}
+		}, 50);
+
+		// Update touch selection cell dimensions if it exists
+		if (this.touchSelection) {
+			setTimeout(() => {
+				this.touchSelection.updateCellDimensions();
+			}, 100);
+		}
+	}
+
 	/**
 	 * Terminate terminal session
 	 */

src/components/terminal/terminalTouchSelection.js

@@ -31,6 +31,14 @@ export default class TerminalTouchSelection {
 		this.tapHoldTimeout = null;
 		this.dragHandle = null;
 
+		// Zoom tracking
+		this.pinchStartDistance = 0;
+		this.lastPinchDistance = 0;
+		this.isPinching = false;
+		this.initialFontSize = 0;
+		this.lastZoomTime = 0;
+		this.zoomThrottle = 50; // ms
+
 		// DOM elements
 		this.selectionOverlay = null;
 		this.startHandle = null;
@@ -208,7 +216,14 @@ export default class TerminalTouchSelection {
 	}
 
 	onTerminalTouchStart(event) {
-		// Only handle single touch
+		// Handle pinch zoom
+		if (event.touches.length === 2) {
+			event.preventDefault();
+			this.startPinchZoom(event);
+			return;
+		}
+
+		// Only handle single touch for selection
 		if (event.touches.length !== 1) return;
 
 		const touch = event.touches[0];
@@ -228,15 +243,25 @@ export default class TerminalTouchSelection {
 
 		// Start tap-hold timer
 		this.tapHoldTimeout = setTimeout(() => {
-			if (!this.isSelecting) {
+			if (!this.isSelecting && !this.isPinching) {
 				this.startSelection(touch);
 			}
 		}, this.options.tapHoldDuration);
 	}
 
 	onTerminalTouchMove(event) {
+		// Handle pinch zoom
+		if (event.touches.length === 2) {
+			event.preventDefault();
+			this.handlePinchZoom(event);
+			return;
+		}
+
 		if (event.touches.length !== 1) return;
 
+		// Don't handle single touch if we're pinching
+		if (this.isPinching) return;
+
 		const touch = event.touches[0];
 		const deltaX = Math.abs(touch.clientX - this.touchStartPos.x);
 		const deltaY = Math.abs(touch.clientY - this.touchStartPos.y);
@@ -260,6 +285,12 @@ export default class TerminalTouchSelection {
 	}
 
 	onTerminalTouchEnd(event) {
+		// Handle end of pinch zoom
+		if (this.isPinching) {
+			this.endPinchZoom();
+			return;
+		}
+
 		if (this.tapHoldTimeout) {
 			clearTimeout(this.tapHoldTimeout);
 			this.tapHoldTimeout = null;
@@ -916,6 +947,77 @@ export default class TerminalTouchSelection {
 		}
 	}
 
+	/**
+	 * Start pinch zoom gesture
+	 */
+	startPinchZoom(event) {
+		if (event.touches.length !== 2) return;
+
+		this.isPinching = true;
+		this.initialFontSize = this.terminal.options.fontSize;
+
+		const touch1 = event.touches[0];
+		const touch2 = event.touches[1];
+
+		this.pinchStartDistance = this.getDistance(touch1, touch2);
+		this.lastPinchDistance = this.pinchStartDistance;
+
+		// Clear any selection timeouts
+		if (this.tapHoldTimeout) {
+			clearTimeout(this.tapHoldTimeout);
+			this.tapHoldTimeout = null;
+		}
+	}
+
+	/**
+	 * Handle pinch zoom gesture
+	 */
+	handlePinchZoom(event) {
+		if (!this.isPinching || event.touches.length !== 2) return;
+
+		const now = Date.now();
+		if (now - this.lastZoomTime < this.zoomThrottle) return;
+		this.lastZoomTime = now;
+
+		const touch1 = event.touches[0];
+		const touch2 = event.touches[1];
+		const currentDistance = this.getDistance(touch1, touch2);
+
+		const scale = currentDistance / this.pinchStartDistance;
+		const newFontSize = Math.round(this.initialFontSize * scale);
+
+		// Clamp font size between reasonable limits
+		const minFontSize = 8;
+		const maxFontSize = 24;
+		const clampedFontSize = Math.max(
+			minFontSize,
+			Math.min(maxFontSize, newFontSize),
+		);
+
+		if (clampedFontSize !== this.terminal.options.fontSize) {
+			this.options.onFontSizeChange(clampedFontSize);
+		}
+	}
+
+	/**
+	 * End pinch zoom gesture
+	 */
+	endPinchZoom() {
+		this.isPinching = false;
+		this.pinchStartDistance = 0;
+		this.lastPinchDistance = 0;
+		this.initialFontSize = 0;
+	}
+
+	/**
+	 * Get distance between two touch points
+	 */
+	getDistance(touch1, touch2) {
+		const dx = touch2.clientX - touch1.clientX;
+		const dy = touch2.clientY - touch1.clientY;
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
 	destroy() {
 		// Clear selection
 		this.clearSelection();