fix: add window resize listener and refresh on font size change
- Add window resize listener to complement ResizeObserver - Clear window resize timeout on cleanup - Force term.refresh() after font size changes - Send resize message after font size change
This commit is contained in:
@@ -284,6 +284,16 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
});
|
});
|
||||||
resizeObserver.observe(container);
|
resizeObserver.observe(container);
|
||||||
|
|
||||||
|
// Also handle window resize (ResizeObserver might miss viewport-only changes)
|
||||||
|
let windowResizeTimeout: ReturnType<typeof setTimeout>;
|
||||||
|
const handleWindowResize = () => {
|
||||||
|
clearTimeout(windowResizeTimeout);
|
||||||
|
windowResizeTimeout = setTimeout(() => {
|
||||||
|
requestAnimationFrame(() => fitTerminal());
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
window.addEventListener("resize", handleWindowResize);
|
||||||
|
|
||||||
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
|
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
|
||||||
const headerHideTimeout = setTimeout(() => {
|
const headerHideTimeout = setTimeout(() => {
|
||||||
fitTerminal();
|
fitTerminal();
|
||||||
@@ -316,8 +326,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(resizeTimeout);
|
clearTimeout(resizeTimeout);
|
||||||
|
clearTimeout(windowResizeTimeout);
|
||||||
clearTimeout(headerHideTimeout);
|
clearTimeout(headerHideTimeout);
|
||||||
resizeObserver.disconnect();
|
resizeObserver.disconnect();
|
||||||
|
window.removeEventListener("resize", handleWindowResize);
|
||||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||||
if (ws) {
|
if (ws) {
|
||||||
ws.close();
|
ws.close();
|
||||||
@@ -356,6 +368,8 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
try {
|
try {
|
||||||
fitAddonRef.current.fit();
|
fitAddonRef.current.fit();
|
||||||
const { cols, rows } = termRef.current;
|
const { cols, rows } = termRef.current;
|
||||||
|
// Force refresh after font size change
|
||||||
|
termRef.current.refresh(0, rows - 1);
|
||||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||||
wsRef.current.send(
|
wsRef.current.send(
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
|
|||||||
Reference in New Issue
Block a user