add resizing logic

This commit is contained in:
Ishaan Dey
2024-05-09 22:16:56 -07:00
parent 1500e84724
commit e86e86dbe2
8 changed files with 150 additions and 50 deletions

View File

@ -50,6 +50,7 @@ export default function Terminals({
{terminals.map((term) => (
<Tab
key={term.id}
creating={creatingTerminal}
onClick={() => setActiveTerminalId(term.id)}
onClose={() =>
closeTerminal({
@ -85,7 +86,7 @@ export default function Terminals({
}}
size="smIcon"
variant={"secondary"}
className={`font-normal shrink-0 select-none text-muted-foreground`}
className={`font-normal shrink-0 select-none text-muted-foreground disabled:opacity-50`}
>
{creatingTerminal ? (
<Loader2 className="animate-spin w-4 h-4" />

View File

@ -48,19 +48,29 @@ export default function EditorTerminal({
useEffect(() => {
if (!term) return;
if (terminalRef.current) {
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(terminalRef.current);
fitAddon.fit();
}
const disposable = term.onData((data) => {
if (!terminalRef.current) return;
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(terminalRef.current);
fitAddon.fit();
const disposableOnData = term.onData((data) => {
console.log("terminalData", id, data);
socket.emit("terminalData", id, data);
});
const disposableOnResize = term.onResize((dimensions) => {
// const terminal_size = {
// width: dimensions.cols,
// height: dimensions.rows,
// };
fitAddon.fit();
socket.emit("terminalResize", dimensions);
});
return () => {
disposable.dispose();
disposableOnData.dispose();
disposableOnResize.dispose();
};
}, [term, terminalRef.current]);