Single window resize fires many resize events

[z0rb]

Hi,

I have an issue where the resize of the terminal is taking long and firing off many onResize events until it arrives at the final size.

How to reproduce:

• Resize the browser window to half of the screen width.
• Full screen it by double clicking the browser title bar. -> The resize is fast.
• Double click the browser title bar to return to half of the screen width. The terminal starts resizing with its parent component slowly until it arrives at the target width.

During the resize there are a lot of console logs like the following:
changeList: {"rowChanged":false,"columnChanged":false,"hostResized":{"width":"1395px","height":"1245px"}} The parent element and its parent element are all sized with flexbox.

Is there a way to configure this behavior? Is it as designed?
Can the resize happen only in one onResize event in the scenario where the resize isn't happening while dragging the window?
If it is not reproducible I will keep debugging if there is something somewhere causing it.

Thanks

[z0rb]

I have an ugly workaround for this, for the time being:

    window.onresize = () => {
      this.terminal.underlying.element.hidden = true;
      setTimeout(() => {
        this.terminal.underlying.element.hidden = false;
        setTimeout(() => this.fitAddon.fit(), 10);
      }, 80);
    }

Would be interesting if there is a proper way of embedding it into flexbox. Without the workaround it looks like the flex layout attempts to resize the terminal, it gets resized one column, then another attempt, resize one column, etc. until it arrives to the correct size.

[qwefgh90]

Hi,

Thanks to your report, I've found out that when the flex-box (which is the parent of the host <ng-terminal>) is flex-box and its width is smaller than that of .resize-box (that is a child of <ng-terminal>), the width of the host element is adjusted to match the width of .resize-box because that .resize-box is bigger than flex-box and smaller than that of host element.

Finally, the host element and .resize-box both decrease through several iterations until the host element doesn't need to adjust the width to match that of .resize-box.

I really appreciate the workaround you provided. I will write some codes to address this bug and update the project as soon as possible.

Here are the reproducible code snippets I'm using.

    <div style="display: flex">
      <div style="flex: 1">
        <ng-terminal
          #term
          [dataSource]="writeSubject"
          (data)="onKeyInput($event)"
          [rows]="_rows"
          [cols]="_cols"
          [minWidth]="200"
          [minHeight]="200"
          [draggable]="_draggable"
          class="ng-terminal"
        >
        </ng-terminal>
      </div>
    </div>