fix: scroll, selection

Author: bajrangCoder

src/components/terminal/terminal.js

@@ -73,6 +73,7 @@ export default class TerminalComponent {
 		this.parsedAppKeybindings = [];
 		this.parsedAppKeybindingsVersion = -1;
 		this.boundNativeSelectionMenuHandler = null;
+		this.visibleScrollbarWidth = undefined;
 
 		this.init();
 	}
@@ -1006,10 +1007,33 @@ export default class TerminalComponent {
 	 * @param {boolean} visible Whether the scrollbar should be shown
 	 */
 	updateScrollbarVisibility(visible) {
-		this.terminal?.element?.classList.toggle(
+		if (!this.terminal) return;
+
+		const overviewRuler = { ...this.terminal.options.overviewRuler };
+		if (visible === false) {
+			if (
+				!this.terminal.element?.classList.contains("terminal-scrollbar-hidden")
+			) {
+				this.visibleScrollbarWidth = overviewRuler.width;
+			}
+			// xterm 6 and FitAddon fall back to 14px when width is zero. A tiny,
+			// truthy width removes the gutter while CSS hides the remaining fraction.
+			overviewRuler.width = 0.001;
+		} else if (this.visibleScrollbarWidth === undefined) {
+			delete overviewRuler.width;
+		} else {
+			overviewRuler.width = this.visibleScrollbarWidth;
+		}
+		this.terminal.options.overviewRuler = overviewRuler;
+		this.terminal.element?.classList.toggle(
 			"terminal-scrollbar-hidden",
 			visible === false,
 		);
+
+		requestAnimationFrame(() => {
+			if (!this.terminal) return;
+			this.fitAddon?.fit();
+		});
 	}
 
 	/**

src/components/terminal/terminalTouchScrolling.js

@@ -17,18 +17,19 @@ export default class TerminalTouchScrolling {
 		this.element = null;
 
 		this.touchStartY = 0;
+		this.lastTouchX = 0;
 		this.lastTouchY = 0;
 		this.lastTouchTime = 0;
 		this.isTouching = false;
 		this.didScroll = false;
+		this.totalMovement = 0;
 
 		this.velocitySamples = [];
 		this.velocity = 0;
 		this.scrollRemainder = 0;
-		this.maxVelocity = 35;
-		this.friction = 0.95;
-		this.minVelocity = 0.1;
-		this.velocityThreshold = 1;
+		this.friction = 0.92;
+		this.minVelocity = 0.5;
+		this.scrollConfirmPixels = 6;
 
 		this.animationId = null;
 		this.boundHandlers = {};
@@ -58,7 +59,23 @@ export default class TerminalTouchScrolling {
 					(this.terminal.options.lineHeight || 1);
 	}
 
-	scrollByPixels(deltaY) {
+	scrollByPixels(deltaY, clientX = this.lastTouchX, clientY = this.lastTouchY) {
+		if (this.terminal.buffer.active.type === "alternate") {
+			const target =
+				this.element?.querySelector(".xterm-screen") || this.element;
+			target?.dispatchEvent(
+				new WheelEvent("wheel", {
+					bubbles: true,
+					cancelable: true,
+					clientX,
+					clientY,
+					deltaY,
+					deltaMode: WheelEvent.DOM_DELTA_PIXEL,
+				}),
+			);
+			return;
+		}
+
 		const cellHeight = this.getCellHeight();
 		if (!Number.isFinite(cellHeight) || cellHeight <= 0) return;
 
@@ -76,7 +93,7 @@ export default class TerminalTouchScrolling {
 		this.boundHandlers.touchStart = this.onTouchStart.bind(this);
 		this.boundHandlers.touchMove = this.onTouchMove.bind(this);
 		this.boundHandlers.touchEnd = this.onTouchEnd.bind(this);
-		this.boundHandlers.touchCancel = this.onTouchEnd.bind(this);
+		this.boundHandlers.touchCancel = this.onTouchCancel.bind(this);
 
 		this.element.addEventListener("touchstart", this.boundHandlers.touchStart, {
 			passive: false,
@@ -110,10 +127,12 @@ export default class TerminalTouchScrolling {
 
 		const touch = event.touches[0];
 		this.touchStartY = touch.clientY;
+		this.lastTouchX = touch.clientX;
 		this.lastTouchY = touch.clientY;
 		this.lastTouchTime = performance.now();
 		this.isTouching = true;
 		this.didScroll = false;
+		this.totalMovement = 0;
 		this.velocity = 0;
 		this.velocitySamples = [];
 		this.scrollRemainder = 0;
@@ -135,22 +154,25 @@ export default class TerminalTouchScrolling {
 		const touch = event.touches[0];
 		const deltaY = this.lastTouchY - touch.clientY;
 		const deltaTime = performance.now() - this.lastTouchTime;
+		this.totalMovement += Math.abs(deltaY);
 
 		if (deltaTime > 0) {
 			const instantVelocity = (deltaY / deltaTime) * 16.67;
 			this.velocitySamples.push(instantVelocity);
-			if (this.velocitySamples.length > 6) {
+			if (this.velocitySamples.length > 5) {
 				this.velocitySamples.shift();
 			}
 		}
 
 		if (Math.abs(deltaY) > 0.5) {
-			event.preventDefault();
-			this.didScroll = true;
-
-			this.scrollByPixels(deltaY);
+			this.scrollByPixels(deltaY, touch.clientX, touch.clientY);
+			if (this.totalMovement > this.scrollConfirmPixels) {
+				event.preventDefault();
+				this.didScroll = true;
+			}
 		}
 
+		this.lastTouchX = touch.clientX;
 		this.lastTouchY = touch.clientY;
 		this.lastTouchTime = performance.now();
 	}
@@ -171,22 +193,26 @@ export default class TerminalTouchScrolling {
 
 		if (this.velocitySamples.length > 0) {
 			this.velocity =
-				this.velocitySamples.reduce((a, b) => a + b, 0) /
-				this.velocitySamples.length;
-
-			this.velocity = Math.max(
-				-this.maxVelocity,
-				Math.min(this.maxVelocity, this.velocity),
-			);
+				(this.velocitySamples.reduce((a, b) => a + b, 0) /
+					this.velocitySamples.length) *
+				1.1;
 		}
 
-		if (Math.abs(this.velocity) > this.velocityThreshold) {
+		if (Math.abs(this.velocity) >= this.minVelocity) {
 			this.startMomentum();
 		}
 
 		this.velocitySamples = [];
 	}
 
+	onTouchCancel() {
+		this.isTouching = false;
+		this.didScroll = false;
+		this.velocitySamples = [];
+		this.scrollRemainder = 0;
+		this.stopMomentum();
+	}
+
 	startMomentum() {
 		const animate = () => {
 			if (this.isTouching) {
@@ -199,8 +225,8 @@ export default class TerminalTouchScrolling {
 				return;
 			}
 
-			this.scrollByPixels(this.velocity);
 			this.velocity *= this.friction;
+			this.scrollByPixels(this.velocity);
 
 			this.animationId = requestAnimationFrame(animate);
 		};

src/components/terminal/terminalTouchSelection.js

@@ -194,6 +194,8 @@ export default class TerminalTouchSelection {
 		this.isTerminalScrolling = false;
 		this.scrollEndTimeout = null;
 		this.scrollEndDelay = 100;
+		this.selectionRenderFrame = null;
+		this.selectionResizeTimeout = null;
 
 		this.init();
 	}
@@ -466,6 +468,13 @@ export default class TerminalTouchSelection {
 			return;
 		}
 
+		// A long press can otherwise produce a compatibility mouse/click event
+		// after touchend. xterm 6 handles that event as a new selection gesture,
+		// which clears the range created by startSelection.
+		if (this.isSelecting && event.cancelable) {
+			event.preventDefault();
+		}
+
 		if (this.tapHoldTimeout) {
 			clearTimeout(this.tapHoldTimeout);
 			this.tapHoldTimeout = null;
@@ -687,42 +696,42 @@ export default class TerminalTouchSelection {
 		}
 	}
 
-	onTerminalResize(size) {
-		// Handle terminal resize (keyboard open/close on Android)
-		setTimeout(() => {
+	onTerminalResize() {
+		// xterm 6 clears its selection on vertical resize. Debounce the keyboard's
+		// intermediate sizes, then restore our range using absolute buffer rows.
+		if (this.selectionResizeTimeout) {
+			clearTimeout(this.selectionResizeTimeout);
+		}
+		this.selectionResizeTimeout = setTimeout(() => {
+			this.selectionResizeTimeout = null;
 			this.updateCellDimensions();
-			if (this.isSelecting) {
-				// Don't clear selection if it's protected (during keyboard events)
-				if (this.selectionProtected) {
-					// Just update handle positions during protected period
-					this.updateHandlePositions();
-					return;
-				}
+			if (!this.isSelecting) return;
 
-				// Only clear selection if it becomes invalid due to actual content resize
-				// Don't clear selection for keyboard-related resizes
-				if (
-					this.selectionStart &&
-					this.selectionEnd &&
-					(this.selectionStart.row >= size.rows ||
-						this.selectionEnd.row >= size.rows)
-				) {
-					this.clearSelection();
-				} else if (this.isSelecting) {
-					// Maintain selection and update handle positions
-					this.updateHandlePositions();
-					// Temporarily hide context menu during resize but keep selection
-					if (this.contextMenu && this.contextMenu.style.display === "flex") {
-						this.hideContextMenu(true);
-					}
-					// Re-show context menu after resize if selection is still active
-					setTimeout(() => {
-						if (this.isSelecting && this.options.showContextMenu) {
-							this.showContextMenu();
-						}
-					}, 100);
-				}
+			const start = this.selectionStart;
+			const end = this.selectionEnd;
+			const buffer = this.terminal.buffer.active;
+			if (
+				!start ||
+				!end ||
+				start.row < 0 ||
+				end.row < 0 ||
+				start.row >= buffer.length ||
+				end.row >= buffer.length ||
+				!buffer.getLine(start.row) ||
+				!buffer.getLine(end.row)
+			) {
+				// Invalid buffer coordinates must also remove our overlay handles,
+				// even while the selection is protected from keyboard side effects.
+				this.forceClearSelection();
+				return;
 			}
+
+			const lastColumn = Math.max(0, this.terminal.cols - 1);
+			start.col = Math.min(start.col, lastColumn);
+			end.col = Math.min(end.col, lastColumn);
+
+			this.hideContextMenu(true);
+			this.finalizeSelection();
 		}, 50);
 	}
 
@@ -847,9 +856,25 @@ export default class TerminalTouchSelection {
 	}
 
 	finalizeSelection() {
-		if (this.options.showContextMenu && this.currentSelection) {
-			this.showContextMenu();
+		if (!this.isSelecting) return;
+
+		this.updateSelection();
+		this.currentSelection = this.terminal.getSelection();
+
+		if (this.selectionRenderFrame) {
+			cancelAnimationFrame(this.selectionRenderFrame);
 		}
+		this.selectionRenderFrame = requestAnimationFrame(() => {
+			this.selectionRenderFrame = null;
+			if (!this.isSelecting || !this.terminal) return;
+
+			// Reapply after any compatibility mouse events dispatched by WebView.
+			this.updateSelection();
+			this.currentSelection = this.terminal.getSelection();
+			if (this.options.showContextMenu && this.currentSelection) {
+				this.showContextMenu();
+			}
+		});
 	}
 
 	showHandles() {
@@ -1255,6 +1280,14 @@ export default class TerminalTouchSelection {
 			clearTimeout(this.scrollEndTimeout);
 			this.scrollEndTimeout = null;
 		}
+		if (this.selectionRenderFrame) {
+			cancelAnimationFrame(this.selectionRenderFrame);
+			this.selectionRenderFrame = null;
+		}
+		if (this.selectionResizeTimeout) {
+			clearTimeout(this.selectionResizeTimeout);
+			this.selectionResizeTimeout = null;
+		}
 
 		// Clear protection timeout
 		if (this.protectionTimeout) {