Skip to content

OnResize Infinite height loop with addon-fit #70

@freeman412

Description

@freeman412

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();
    }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions