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

switch disposing logic (not working)

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

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

@ -77,6 +77,7 @@ export default function CodeEditor({
>([]); >([]);
const [activeTerminalId, setActiveTerminalId] = useState(""); const [activeTerminalId, setActiveTerminalId] = useState("");
const [creatingTerminal, setCreatingTerminal] = useState(false); const [creatingTerminal, setCreatingTerminal] = useState(false);
const [closingTerminal, setClosingTerminal] = useState("");
const [provider, setProvider] = useState<TypedLiveblocksProvider>(); const [provider, setProvider] = useState<TypedLiveblocksProvider>();
const [ai, setAi] = useState(false); const [ai, setAi] = useState(false);
const [disableAccess, setDisableAccess] = useState({ const [disableAccess, setDisableAccess] = useState({
@ -350,8 +351,13 @@ export default function CodeEditor({
return () => { return () => {
socket.disconnect(); socket.disconnect();
resizeObserver.disconnect(); resizeObserver.disconnect();
terminals.forEach((term) => {
if (term.terminal) {
term.terminal.dispose();
}
});
}; };
}, []); }, []);
@ -375,14 +381,10 @@ export default function CodeEditor({
}; };
const onTerminalResponse = (response: { id: string; data: string }) => { const onTerminalResponse = (response: { id: string; data: string }) => {
console.log("terminal response:", response); const term = terminals.find((t) => t.id === response.id);
// console.log("activeId:", activeTerminalId); if (term && term.terminal) {
term.terminal.write(response.data);
// const term = terminals.find((t) => t.id === response.id); }
// if (term && term.terminal) {
// console.log("writing to terminal, id:", response.id);
// term.terminal.write(response.data);
// }
}; };
const onDisableAccess = (message: string) => { const onDisableAccess = (message: string) => {
@ -407,7 +409,8 @@ export default function CodeEditor({
socket.off("terminalResponse", onTerminalResponse); socket.off("terminalResponse", onTerminalResponse);
socket.off("disableAccess", onDisableAccess); socket.off("disableAccess", onDisableAccess);
}; };
}, []); // }, []);
}, [terminals]);
// Helper functions: // Helper functions:
@ -415,10 +418,12 @@ export default function CodeEditor({
setCreatingTerminal(true); setCreatingTerminal(true);
const id = createId(); const id = createId();
console.log("creating terminal, id:", id); console.log("creating terminal, id:", id);
setTerminals((prev) => [...prev, { id, terminal: null }]);
setActiveTerminalId(id);
setTimeout(() => { setTimeout(() => {
socket.emit("createTerminal", id, () => { socket.emit("createTerminal", id, () => {
setTerminals((prev) => [...prev, { id, terminal: null }]);
setActiveTerminalId(id);
setCreatingTerminal(false); setCreatingTerminal(false);
}); });
}, 1000); }, 1000);
@ -475,7 +480,11 @@ export default function CodeEditor({
const index = terminals.findIndex((t) => t.id === term.id); const index = terminals.findIndex((t) => t.id === term.id);
if (index === -1) return; if (index === -1) return;
setClosingTerminal(term.id);
socket.emit("closeTerminal", term.id, () => { socket.emit("closeTerminal", term.id, () => {
setClosingTerminal("");
const nextId = const nextId =
activeTerminalId === term.id activeTerminalId === term.id
? numTerminals === 1 ? numTerminals === 1
@ -485,6 +494,8 @@ export default function CodeEditor({
: terminals[index - 1].id : terminals[index - 1].id
: activeTerminalId; : activeTerminalId;
if (activeTerminal && activeTerminal.terminal)
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) {

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

@ -23,6 +23,9 @@ export default function EditorTerminal({
useEffect(() => { useEffect(() => {
if (!terminalRef.current) return; if (!terminalRef.current) return;
console.log("new terminal", id, term ? "reusing" : "creating");
if (term) return;
const terminal = new Terminal({ const terminal = new Terminal({
cursorBlink: true, cursorBlink: true,
@ -31,32 +34,34 @@ export default function EditorTerminal({
}, },
fontFamily: "var(--font-geist-mono)", fontFamily: "var(--font-geist-mono)",
fontSize: 14, fontSize: 14,
lineHeight: 1.5,
letterSpacing: 0,
}); });
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); // setTerm(term);
} }
const disposable = term.onData((data) => { const disposable = term.onData((data) => {
console.log("terminalData", id, data); console.log("terminalData", id, data);
socket.emit("terminalData", id, data); socket.emit("terminalData", id, data);
}); });
// socket.emit("terminalData", "\n");
return () => { return () => {
disposable.dispose(); disposable.dispose();
}; };