Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OnResize Infinite height loop with addon-fit #70

Open
freeman412 opened this issue Jan 13, 2025 · 0 comments
Open

OnResize Infinite height loop with addon-fit #70

freeman412 opened this issue Jan 13, 2025 · 0 comments

Comments

@freeman412
Copy link

freeman412 commented Jan 13, 2025

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:

  1. 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();
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant