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

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

@ -353,11 +353,11 @@ export default function CodeEditor({
socket.disconnect();
resizeObserver.disconnect();
terminals.forEach((term) => {
if (term.terminal) {
term.terminal.dispose();
}
});
// terminals.forEach((term) => {
// if (term.terminal) {
// term.terminal.dispose();
// }
// });
};
}, []);
@ -494,8 +494,8 @@ export default function CodeEditor({
: terminals[index - 1].id
: activeTerminalId;
if (activeTerminal && activeTerminal.terminal)
activeTerminal.terminal.dispose();
// if (activeTerminal && activeTerminal.terminal)
// activeTerminal.terminal.dispose();
setTerminals((prev) => prev.filter((t) => t.id !== term.id));
if (!nextId) {
@ -784,25 +784,29 @@ export default function CodeEditor({
</div>
{socket && activeTerminal ? (
<div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
<EditorTerminal
socket={socket}
id={activeTerminal.id}
term={activeTerminal.terminal}
setTerm={(t: Terminal) => {
console.log(
"setting terminal",
activeTerminalId,
t.options
);
setTerminals((prev) =>
prev.map((term) =>
term.id === activeTerminalId
? { ...term, terminal: t }
: term
)
);
}}
/>
{terminals.map((term) => (
<EditorTerminal
key={term.id}
socket={socket}
id={term.id}
term={term.terminal}
setTerm={(t: Terminal) => {
// console.log(
// "setting terminal",
// activeTerminalId,
// t.options
// );
setTerminals((prev) =>
prev.map((term) =>
term.id === activeTerminalId
? { ...term, terminal: t }
: term
)
);
}}
visible={activeTerminalId === term.id}
/>
))}
</div>
) : (
<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,
term,
setTerm,
visible,
}: {
socket: Socket;
id: string;
term: Terminal | null;
setTerm: (term: Terminal) => void;
visible: boolean;
}) {
const terminalRef = useRef(null);
useEffect(() => {
if (!terminalRef.current) return;
console.log("new terminal", id, term ? "reusing" : "creating");
if (term) return;
// console.log("new terminal", id, term ? "reusing" : "creating");
const terminal = new Terminal({
cursorBlink: true,
@ -40,22 +40,19 @@ export default function EditorTerminal({
setTerm(terminal);
// return () => {
// if (terminal) terminal.dispose();
// };
}, [id]);
return () => {
if (terminal) terminal.dispose();
};
}, []);
useEffect(() => {
if (!term) return;
console.log("A");
if (terminalRef.current) {
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(terminalRef.current);
console.log("B");
fitAddon.fit();
// setTerm(term);
}
const disposable = term.onData((data) => {
console.log("terminalData", id, data);
@ -69,7 +66,11 @@ export default function EditorTerminal({
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 ? (
<div className="flex items-center text-muted-foreground p-2">
<Loader2 className="animate-spin mr-2 h-4 w-4" />