add resizing logic
This commit is contained in:
@ -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" />
|
||||
|
@ -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]);
|
||||
|
||||
|
Reference in New Issue
Block a user