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

Dev 1.1 (#18)

Browse Source 
* Update server.cjs (#17)

Redact only sensitive info for logging

* Changes to README.md for clear support paths.

* Switched to UTF-8 fixing non-english character bugs, revamped console logging system, fixed misc console errors, and fixed copy/paste. Warning: the terminal sizing in this version is very buggy so be warned.

* Fixed multi-line command issues with switching between split and not split.

* Shifted terminal down and to the right so its not squished up in the top left corner. Fix scroll wheel sizing and looks. Prepared for this bug update release.

---------

Co-authored-by: Dale Driver <firestrife23@users.noreply.github.com>
This commit was merged in pull request #18.
This commit is contained in:
Karmaa
2025-03-09 18:46:09 -05:00
committed by GitHub
parent 09677caa26
commit b0062343c7
7 changed files with 128 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/Terminal.jsx
View File

@@ -16,22 +16,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
const terminalContainer = terminalRef.current;
const parentContainer = terminalContainer?.parentElement;
if (!parentContainer || !isVisible) return;
if (!parentContainer || parentContainer.clientWidth === 0) return;
void parentContainer.offsetHeight;
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
const parentWidth = parentContainer.clientWidth - 10;
const parentHeight = parentContainer.clientHeight - 10;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
fitAddon.current.fit();
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
requestAnimationFrame(() => {
fitAddon.current.fit();
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
});
};
useImperativeHandle(ref, () => ({
@@ -50,8 +49,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
},
fontSize: 14,
scrollback: 1000,
rendererType: "canvas",
allowTransparency: true,
ignoreBracketedPasteMode: true,
});
terminalInstance.current.loadAddon(fitAddon.current);
@@ -63,8 +61,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
terminalInstance.current.focus();
}, 50);
terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
const socket = io(
window.location.hostname === "localhost"
? "http://localhost:8081"
@@ -81,23 +77,52 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
resizeTerminal();
const { cols, rows } = terminalInstance.current;
socket.emit("connectToHost", cols, rows, hostConfig);
terminalInstance.current.write("\r\n*** Connected to backend ***\r\n");
});
socket.on("data", (data) => {
terminalInstance.current.write(data);
const decoder = new TextDecoder("utf-8");
terminalInstance.current.write(decoder.decode(new Uint8Array(data)));
});
socket.on("disconnect", () => {
terminalInstance.current.write("\r\n*** Disconnected from backend ***\r\n");
let isPasting = false;
terminalInstance.current.onData((data) => {
socketRef.current.emit("data", data);
});
terminalInstance.current.onKey(({ key }) => {
socket.emit("data", key);
terminalInstance.current.attachCustomKeyEventHandler((event) => {
console.log("Event caled");
if (isPasting) return;
isPasting = true;
setTimeout(() => {
isPasting = false;
}, 200);
if ((event.ctrlKey || event.metaKey) && event.key === "v") {
event.preventDefault();
navigator.clipboard.readText().then((text) => {
socketRef.current.emit("data", text);
}).catch((err) => {
console.error("Failed to read clipboard contents:", err);
});
return false;
}
return true;
});
socket.on("connect_error", (err) => {
terminalInstance.current.write(`\r\n*** Error: ${err.message} ***\r\n`);
terminalInstance.current.onKey(({ domEvent }) => {
if (domEvent.key === "c" && (domEvent.ctrlKey || domEvent.metaKey)) {
const selection = terminalInstance.current.getSelection();
if (selection) {
navigator.clipboard.writeText(selection);
}
}
});
socket.on("error", (err) => {
terminalInstance.current.write(`\r\n*** Error: ${err} ***\r\n`);
});
return () => {
@@ -107,20 +132,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}, [hostConfig]);
useEffect(() => {
if (isVisible) {
resizeTerminal();
}
resizeTerminal();
}, [isVisible]);
useEffect(() => {
const terminalContainer = terminalRef.current;
if (!terminalContainer) return;
const parentContainer = terminalContainer.parentElement;
if (!parentContainer) return;
const observer = new ResizeObserver(() => {
resizeTerminal();
});
observer.observe(terminalContainer);
observer.observe(parentContainer);
return () => {
observer.disconnect();
@@ -131,7 +157,13 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
<div
ref={terminalRef}
className="w-full h-full overflow-hidden text-left"
style={{ display: isVisible ? "block" : "none" }}
style={{
visibility: isVisible ? 'visible' : 'hidden',
position: 'absolute',
width: '100%',
height: '100%',
transform: 'translateY(5px) translateX(5px)',
}}
/>
);
});
@@ -146,4 +178,4 @@ NewTerminal.propTypes = {
port: PropTypes.string.isRequired,
}).isRequired,
isVisible: PropTypes.bool.isRequired,
};
};