Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-22 02:41:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove ref dependencies on term (#25)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-06-06 15:08:39 -07:00 committed by GitHub
parent 2866862253
commit 2b456f9725
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 68 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/app/view/term.tsx
View File

@ -66,52 +66,78 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
const [term, setTerm] = React.useState<Terminal>(null);
React.useEffect(() => {
if (connectElemRef.current && !term) {
console.log("terminal created");
const newTerm = new Terminal({
theme: getThemeFromCSSVars(connectElemRef.current),
fontSize: 12,
fontFamily: "Hack",
drawBoldTextInBrightColors: false,
fontWeight: "normal",
fontWeightBold: "bold",
});
termRef.current = newTerm;
const newFitAddon = new FitAddon();
newTerm.loadAddon(newFitAddon);
newTerm.open(connectElemRef.current);
newFitAddon.fit();
BlockService.SendCommand(blockId, {
command: "controller:input",
termsize: { rows: newTerm.rows, cols: newTerm.cols },
});
newTerm.onData((data) => {
const b64data = btoa(data);
const inputCmd = { command: "controller:input", blockid: blockId, inputdata64: b64data };
BlockService.SendCommand(blockId, inputCmd);
});
console.log("terminal created");
const newTerm = new Terminal({
theme: getThemeFromCSSVars(connectElemRef.current),
fontSize: 12,
fontFamily: "Hack",
drawBoldTextInBrightColors: false,
fontWeight: "normal",
fontWeightBold: "bold",
});
termRef.current = newTerm;
const newFitAddon = new FitAddon();
newTerm.loadAddon(newFitAddon);
newTerm.open(connectElemRef.current);
newFitAddon.fit();
BlockService.SendCommand(blockId, {
command: "controller:input",
termsize: { rows: newTerm.rows, cols: newTerm.cols },
});
newTerm.onData((data) => {
const b64data = btoa(data);
const inputCmd = { command: "controller:input", blockid: blockId, inputdata64: b64data };
BlockService.SendCommand(blockId, inputCmd);
});
// block subject
const blockSubject = getBlockSubject(blockId);
blockSubject.subscribe((data) => {
// base64 decode
const decodedData = base64ToArray(data.ptydata);
if (initialLoadRef.current.loaded) {
newTerm.write(decodedData);
} else {
initialLoadRef.current.heldData.push(decodedData);
// block subject
const blockSubject = getBlockSubject(blockId);
blockSubject.subscribe((data) => {
// base64 decode
const decodedData = base64ToArray(data.ptydata);
if (initialLoadRef.current.loaded) {
newTerm.write(decodedData);
} else {
initialLoadRef.current.heldData.push(decodedData);
}
});
setTerm(newTerm);
setFitAddon(newFitAddon);
// load data from filestore
const startTs = Date.now();
let loadedBytes = 0;
const localTerm = termRef.current; // avoids devmode double effect running issue (terminal gets created twice)
const usp = new URLSearchParams();
usp.set("zoneid", blockId);
usp.set("name", "main");
fetch("/wave/file?" + usp.toString())
.then((resp) => {
if (resp.ok) {
return resp.arrayBuffer();
}
console.log("error loading file", resp.status, resp.statusText);
})
.then((data: ArrayBuffer) => {
const uint8View = new Uint8Array(data);
localTerm.write(uint8View);
loadedBytes = uint8View.byteLength;
})
.finally(() => {
initialLoadRef.current.heldData.forEach((data) => {
localTerm.write(data);
});
initialLoadRef.current.loaded = true;
initialLoadRef.current.heldData = [];
console.log(`terminal loaded file ${loadedBytes} bytes, ${Date.now() - startTs}ms`);
});
setTerm(newTerm);
setFitAddon(newFitAddon);
return () => {
newTerm.dispose();
blockSubject.release();
};
}
}, [connectElemRef]);
return () => {
newTerm.dispose();
blockSubject.release();
};
}, []);
const handleResizeCallback = React.useCallback(() => {
debounce(50, () => handleResize(fitAddon, blockId, term));
@ -119,38 +145,6 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
useResizeObserver(connectElemRef, handleResizeCallback);
React.useEffect(() => {
if (termRef.current) {
// load data from filestore
const startTs = Date.now();
let loadedBytes = 0;
const localTerm = termRef.current; // avoids devmode double effect running issue (terminal gets created twice)
const usp = new URLSearchParams();
usp.set("zoneid", blockId);
usp.set("name", "main");
fetch("/wave/file?" + usp.toString())
.then((resp) => {
if (resp.ok) {
return resp.arrayBuffer();
}
console.log("error loading file", resp.status, resp.statusText);
})
.then((data: ArrayBuffer) => {
const uint8View = new Uint8Array(data);
localTerm.write(uint8View);
loadedBytes = uint8View.byteLength;
})
.finally(() => {
initialLoadRef.current.heldData.forEach((data) => {
localTerm.write(data);
});
initialLoadRef.current.loaded = true;
initialLoadRef.current.heldData = [];
console.log(`terminal loaded file ${loadedBytes} bytes, ${Date.now() - startTs}ms`);
});
}
}, [termRef]);
return (
<div className="view-term">
<div key="conntectElem" className="term-connectelem" ref={connectElemRef}></div>