TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TERMINALS WORK!!!!

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-08 01:09:01 -07:00
parent 116cd20441
commit 2ef5f85099
2 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/components/editor/index.tsx
View File

@ -353,11 +353,11 @@ export default function CodeEditor({
socket.disconnect(); socket.disconnect();
resizeObserver.disconnect(); resizeObserver.disconnect();
terminals.forEach((term) => { // terminals.forEach((term) => {
if (term.terminal) { // if (term.terminal) {
term.terminal.dispose(); // term.terminal.dispose();
} // }
}); // });
}; };
}, []); }, []);
@ -494,8 +494,8 @@ export default function CodeEditor({
: terminals[index - 1].id : terminals[index - 1].id
: activeTerminalId; : activeTerminalId;
if (activeTerminal && activeTerminal.terminal) // if (activeTerminal && activeTerminal.terminal)
activeTerminal.terminal.dispose(); // activeTerminal.terminal.dispose();
setTerminals((prev) => prev.filter((t) => t.id !== term.id)); setTerminals((prev) => prev.filter((t) => t.id !== term.id));
if (!nextId) { if (!nextId) {
@ -784,16 +784,18 @@ export default function CodeEditor({
</div> </div>
{socket && activeTerminal ? ( {socket && activeTerminal ? (
<div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary"> <div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
{terminals.map((term) => (
<EditorTerminal <EditorTerminal
key={term.id}
socket={socket} socket={socket}
id={activeTerminal.id} id={term.id}
term={activeTerminal.terminal} term={term.terminal}
setTerm={(t: Terminal) => { setTerm={(t: Terminal) => {
console.log( // console.log(
"setting terminal", // "setting terminal",
activeTerminalId, // activeTerminalId,
t.options // t.options
); // );
setTerminals((prev) => setTerminals((prev) =>
prev.map((term) => prev.map((term) =>
term.id === activeTerminalId term.id === activeTerminalId
@ -802,7 +804,9 @@ export default function CodeEditor({
) )
); );
}} }}
visible={activeTerminalId === term.id}
/> />
))}
</div> </div>
) : ( ) : (
<div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none"> <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">

23
frontend/components/editor/terminal/index.tsx
View File

@ -13,19 +13,19 @@ export default function EditorTerminal({
id, id,
term, term,
setTerm, setTerm,
visible,
}: { }: {
socket: Socket; socket: Socket;
id: string; id: string;
term: Terminal | null; term: Terminal | null;
setTerm: (term: Terminal) => void; setTerm: (term: Terminal) => void;
visible: boolean;
}) { }) {
const terminalRef = useRef(null); const terminalRef = useRef(null);
useEffect(() => { useEffect(() => {
if (!terminalRef.current) return; if (!terminalRef.current) return;
console.log("new terminal", id, term ? "reusing" : "creating"); // console.log("new terminal", id, term ? "reusing" : "creating");
if (term) return;
const terminal = new Terminal({ const terminal = new Terminal({
cursorBlink: true, cursorBlink: true,
@ -40,22 +40,19 @@ export default function EditorTerminal({
setTerm(terminal); setTerm(terminal);
// return () => { return () => {
// if (terminal) terminal.dispose(); if (terminal) terminal.dispose();
// }; };
}, [id]); }, []);
useEffect(() => { useEffect(() => {
if (!term) return; if (!term) return;
console.log("A");
if (terminalRef.current) { if (terminalRef.current) {
const fitAddon = new FitAddon(); const fitAddon = new FitAddon();
term.loadAddon(fitAddon); term.loadAddon(fitAddon);
term.open(terminalRef.current); term.open(terminalRef.current);
console.log("B");
fitAddon.fit(); fitAddon.fit();
// setTerm(term);
} }
const disposable = term.onData((data) => { const disposable = term.onData((data) => {
console.log("terminalData", id, data); console.log("terminalData", id, data);
@ -69,7 +66,11 @@ export default function EditorTerminal({
return ( return (
<> <>
<div ref={terminalRef} className="w-full h-full text-left"> <div
ref={terminalRef}
style={{ display: visible ? "block" : "none" }}
className="w-full h-full text-left"
>
{term === null ? ( {term === null ? (
<div className="flex items-center text-muted-foreground p-2"> <div className="flex items-center text-muted-foreground p-2">
<Loader2 className="animate-spin mr-2 h-4 w-4" /> <Loader2 className="animate-spin mr-2 h-4 w-4" />