dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Final preparations for release. Fixed auto resizing bug when smaller terminal size.

Browse Source
This commit is contained in:
Karmaa
2025-03-06 18:43:27 -06:00
parent 0d464cdf56
commit 9ff199ea96
4 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Terminal.jsx
View File

@@ -18,26 +18,20 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
if (!parentContainer || !isVisible) return;
// Force a reflow to ensure the container's dimensions are up-to-date
void parentContainer.offsetHeight;
// Use a small delay to ensure the DOM has fully updated
setTimeout(() => {
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight - 16;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
// Fit the terminal to the container
fitAddon.current.fit();
fitAddon.current.fit();
// Notify the backend of the new terminal size
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
}, 10); // Small delay to ensure proper DOM updates
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
};
useImperativeHandle(ref, () => ({
@@ -61,7 +55,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
});
terminalInstance.current.loadAddon(fitAddon.current);
terminalInstance.current.open(terminalRef.current);
setTimeout(() => {
@@ -119,6 +112,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}
}, [isVisible]);
useEffect(() => {
const terminalContainer = terminalRef.current;
if (!terminalContainer) return;
const observer = new ResizeObserver(() => {
resizeTerminal();
});
observer.observe(terminalContainer);
return () => {
observer.disconnect();
};
}, []);
return (
<div
ref={terminalRef}