-
-
Notifications
You must be signed in to change notification settings - Fork 9
Open
Description
Describe the bug
Thank you for your work and documentation on this project!
OnResize Infinite height loop with addon-fit.
To Reproduce
Steps to reproduce the behavior:
- Use the OnResize Function to trigger resizing with addon-fit.
Expected behavior
The terminal should resize once then stop.
Desktop (please complete the following information):
- OS: Tested on Windows
- Browser: Chrome
- Version 2.1.1
Additional context
I was able to get consistently good resizing by locking a container to 100vh somewhere outside the Xterm component. and added the below code snippets. I haven't explored yet if this is the appropriate way to change the OnResize method or not, but something is triggering infinite OnResize calls even if you check if the terminal is resizing in the OnResize method. I think it is possile the OnRender fit and the OnResize cause an infinite callback loop.
<MudContainer style="max-width: 100% !important; background: #141414; padding: 16px; border-radius: 0 0 10px 10px;" Class="overflow-hidden">
<MudItem xs="12" Style="height: calc(100vh - 250px);">
@* Adjust for header/footer size *@
<Xterm
Addons="Addons"
@ref="Term"
Options="_options"
OnFirstRender="@OnFirstRender"
Style="padding: 10px; background-color: #282a36; height: 100%; width: 100%;"
Class="rounded-lg"
OnRender="FitTerminal"
OnKey="OnTerminalKey" />
</MudItem>
</MudContainer>
let resizeCallback;
window.registerViewportChangeCallback = (dotnetHelper) => {
// Save the callback to remove it later
resizeCallback = () => {
dotnetHelper.invokeMethodAsync('OnResize', window.innerWidth, window.innerHeight);
};
// Attach event listeners
window.addEventListener('load', resizeCallback);
window.addEventListener('resize', resizeCallback);
};
window.unregisterViewportChangeCallback = () => {
if (resizeCallback) {
// Remove event listeners
window.removeEventListener('load', resizeCallback);
window.removeEventListener('resize', resizeCallback);
// Clear the saved reference
resizeCallback = null;
}
};
/// <summary>
/// Method called from the javascript watcher for user initiated resizing
/// </summary>
/// <param name="width"></param>
/// <param name="height"></param>
/// <returns></returns>
[JSInvokable]
public async Task OnResize(int width, int height)
{
if (ViewportWidth == width && ViewportHeight == height)
return;
ViewportWidth = width;
ViewportHeight = height;
await FitTerminal();
StateHasChanged();
}
Metadata
Metadata
Assignees
Labels
No labels