refactor(ui): remove text source

Removes the text source assigned to the text property for the terminal text field. Any changes to the text property are now done by setting the property directly, which should prevent the `onTextChange` callback from being called more than necessary.
paradoxuum · Aug 16, 2024 · 842a25f · 842a25f
1 parent d64d6ec
commit 842a25f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 143 deletions.
diff --git a/packages/ui/src/components/suggestions/util.ts b/packages/ui/src/components/suggestions/util.ts
@@ -1,15 +1,3 @@
-import { TextService } from "@rbxts/services";
-import { InterfaceOptions, Suggestion } from "../../types";
-import { SuggestionTextBounds } from "./types";
-
-const TEXT_BOUNDS_PARAMS = new Instance("GetTextBoundsParams");
-TEXT_BOUNDS_PARAMS.RichText = true;
-
-const DEFAULT_BOUNDS = new Vector2();
-
-let prevColor: Color3 | undefined;
-let prevColorHex: string | undefined;
-
 export function highlightMatching(
 	color: Color3,
 	text?: string,
@@ -23,59 +11,6 @@ export function highlightMatching(
 		return text;
 	}
 
-	if (prevColor !== color) {
-		prevColor = color;
-		prevColorHex = color.ToHex();
-	}
-
 	const unhighlightedText = text.sub(terminalText.size() + 1);
-	return `<font color="#${prevColorHex}">${subText}</font>${unhighlightedText}`;
-}
-
-export function getSuggestionTextBounds(
-	options: InterfaceOptions,
-	suggestion: Suggestion,
-	titleTextSize: number,
-	textSize: number,
-	maxWidth: number,
-	maxBadgeWidth: number,
-): SuggestionTextBounds {
-	// Get title text bounds
-	TEXT_BOUNDS_PARAMS.Text = suggestion.title;
-	TEXT_BOUNDS_PARAMS.Size = titleTextSize;
-	TEXT_BOUNDS_PARAMS.Font = options.font.bold;
-	const titleBounds = TextService.GetTextBoundsAsync(TEXT_BOUNDS_PARAMS);
-
-	// Get description text bounds
-	TEXT_BOUNDS_PARAMS.Width = maxWidth;
-	TEXT_BOUNDS_PARAMS.Size = textSize;
-	TEXT_BOUNDS_PARAMS.Font = options.font.regular;
-
-	let descriptionBounds = DEFAULT_BOUNDS;
-	if (suggestion.description !== undefined) {
-		TEXT_BOUNDS_PARAMS.Text = suggestion.description;
-		descriptionBounds = TextService.GetTextBoundsAsync(TEXT_BOUNDS_PARAMS);
-	}
-
-	let errorTextHeight = 0;
-	let typeBadgeWidth = 0;
-	if (suggestion.type === "argument") {
-		// Get error text bounds
-		if (suggestion.error !== undefined) {
-			TEXT_BOUNDS_PARAMS.Text = suggestion.error ?? "";
-			errorTextHeight = TextService.GetTextBoundsAsync(TEXT_BOUNDS_PARAMS).Y;
-		}
-
-		// Get type badge bounds
-		TEXT_BOUNDS_PARAMS.Text = suggestion.dataType;
-		TEXT_BOUNDS_PARAMS.Width = maxBadgeWidth;
-		typeBadgeWidth = TextService.GetTextBoundsAsync(TEXT_BOUNDS_PARAMS).X;
-	}
-
-	return {
-		title: UDim2.fromOffset(titleBounds.X, titleBounds.Y),
-		description: UDim2.fromOffset(descriptionBounds.X, descriptionBounds.Y),
-		errorTextHeight,
-		typeBadgeWidth,
-	};
+	return `<font color="#${color.ToHex()}">${subText}</font>${unhighlightedText}`;
 }
diff --git a/packages/ui/src/components/terminal/terminal-text-field.tsx b/packages/ui/src/components/terminal/terminal-text-field.tsx
@@ -50,7 +50,6 @@ export function TerminalTextField({
 	const ref = source<TextBox>();
 	const commandHistory = source<string[]>([]);
 	const commandHistoryIndex = source<number | undefined>(undefined);
-	const text = source("");
 	const suggestionText = source("");
 
 	// Focus text field when terminal becomes visible
@@ -69,9 +68,12 @@ export function TerminalTextField({
 		const historyIndex = commandHistoryIndex();
 		if (!up && historyIndex === undefined) return;
 
+		const textBox = ref();
+		if (textBox === undefined) return;
+
 		const lastIndex = history.size() - 1;
 		if (!up && historyIndex === lastIndex) {
-			text("");
+			textBox.Text = "";
 			suggestionText("");
 			commandHistoryIndex(undefined);
 			return;
@@ -84,14 +86,10 @@ export function TerminalTextField({
 		);
 
 		const newText = history[newIndex];
-		text(newText);
+		textBox.Text = newText;
+		textBox.CursorPosition = newText.size() + 1;
 		suggestionText("");
 		commandHistoryIndex(newIndex);
-
-		const textBox = ref();
-		if (textBox !== undefined) {
-			textBox.CursorPosition = newText.size() + 1;
-		}
 	};
 
 	const suggestionConnection = subscribe(currentSuggestion, (suggestion) => {
@@ -107,11 +105,14 @@ export function TerminalTextField({
 			return;
 		}
 
+		const currentText = ref()?.Text;
+		if (currentText === undefined) return;
+
 		// Command suggestions
 		if (suggestion.type === "command") {
 			const suggestionStartIndex =
 				(!atNextPart ? textParts[textParts.size() - 1].size() : 0) + 1;
-			suggestionText(text() + suggestion.title.sub(suggestionStartIndex));
+			suggestionText(currentText + suggestion.title.sub(suggestionStartIndex));
 			return;
 		}
 
@@ -126,7 +127,7 @@ export function TerminalTextField({
 			return;
 		}
 
-		let newText = text();
+		let newText = currentText;
 		if (atNextPart && argIndex === commandArgIndex()) {
 			newText += suggestion.title;
 		} else if (!suggestion.others.isEmpty()) {
@@ -159,7 +160,7 @@ export function TerminalTextField({
 		const suggestion = currentSuggestion();
 		if (suggestion === undefined) return;
 
-		const currentText = text();
+		const currentText = textBox.Text;
 		const atNextPart = currentText.sub(-1) === " ";
 
 		if (commandPath === undefined) {
@@ -193,7 +194,7 @@ export function TerminalTextField({
 			}
 
 			suggestionText("");
-			text(newText);
+			textBox.Text = newText;
 			textBox.CursorPosition = newText.size() + 1;
 			return;
 		}
@@ -209,7 +210,7 @@ export function TerminalTextField({
 			suggestionText("");
 
 			const newText = `${currentText} `;
-			text(newText);
+			textBox.Text = newText;
 			textBox.CursorPosition = newText.size() + 1;
 			return;
 		}
@@ -220,7 +221,7 @@ export function TerminalTextField({
 		const argIndex = terminalArgIndex();
 		if (argIndex === undefined || commandArgs === undefined) return;
 
-		let newText = text();
+		let newText = currentText;
 		const otherSuggestion = suggestion.others[0];
 		newText = newText.sub(0, newText.size() - (currentTextPart()?.size() ?? 0));
 		newText += otherSuggestion.match("%s").isEmpty()
@@ -232,7 +233,7 @@ export function TerminalTextField({
 		}
 
 		suggestionText("");
-		text(newText);
+		textBox.Text = newText;
 		textBox.CursorPosition = newText.size() + 1;
 	});
 
@@ -250,22 +251,6 @@ export function TerminalTextField({
 			<TextField
 				action={ref}
 				size={UDim2.fromScale(1, 1)}
-				text={() => {
-					let value = text();
-
-					// Remove line breaks
-					if (value.match("[\n\r]")[0] !== undefined) {
-						value = value.gsub("[\n\r]", "")[0];
-					}
-
-					// Remove all tabs from text input - we use these for autocompletion
-					if (value.match("\t")[0] !== undefined) {
-						value = value.gsub("\t", "")[0];
-					}
-
-					onTextChange?.(value);
-					return value;
-				}}
 				textSize={() => px(TEXT_SIZE)}
 				textColor={() => {
 					return valid() ? options().palette.success : options().palette.error;
@@ -292,10 +277,13 @@ export function TerminalTextField({
 						}
 						commandHistoryIndex(undefined);
 						onSubmit?.(currentText);
+						textBox.Text = "";
 						textBox.CaptureFocus();
-						text("");
 					},
 					TextChanged: (currentText) => {
+						const textBox = ref();
+						if (textBox === undefined) return;
+
 						const historyIndex = commandHistoryIndex();
 						if (
 							historyIndex !== undefined &&
@@ -304,7 +292,19 @@ export function TerminalTextField({
 							commandHistoryIndex(undefined);
 						}
 
-						text(currentText);
+						// Remove line breaks
+						let value = currentText;
+						if (value.match("[\n\r]")[0] !== undefined) {
+							value = value.gsub("[\n\r]", "")[0];
+						}
+
+						// Remove all tabs from text input - we use these for autocompletion
+						if (value.match("\t")[0] !== undefined) {
+							value = value.gsub("\t", "")[0];
+						}
+
+						textBox.Text = value;
+						onTextChange?.(value);
 					},
 				}}
 				zIndex={2}

diff --git a/packages/ui/src/hooks/use-debounce-source.ts b/packages/ui/src/hooks/use-debounce-source.ts
diff --git a/packages/ui/src/hooks/use-motion.ts b/packages/ui/src/hooks/use-motion.ts