Xterm.js: [Question/Need help] How to make the content of the terminal reactive ?

[JeromeVi]

Hi,
I use xterm and I figured out that the term.fit() is a single call. I mean it's not reactive as our computer terminal.

So I guess I'm doing something wrong because it's would be bad if the reactive part isn't existing...

I create my terminal like this:

collection["term_" + _idContainer] = new Terminal({
                cursorBlink: true,
                termName: _idContainer
            }); 

//then I open it
 collection["term_" + _idContainer].open(document.getElementById(_idContainer));

//and I fit it
 collection["term_" + _idContainer].fit();

Now my problem is the following one, when I reduce the window size it deletes some chars:

I have tried to do term.fit when I modify the window size but it doesn't affect the text that is already written in the terminal.

I hope you'll understand my problem and that we will find a solution

Details

• Browser and browser version: Chrome latest one
• OS version: macOS Sierra
• xterm.js version: 2.3.2

[mofux]

Try to update to the latest version of xterm.js (2.5.0). This should resolve your problem (you still have to call term.fit() when your window is resized to make xterm.js aware of the size change).

Previously, off-screen characters were removed from the line buffer, which caused the issue you are seeing when minimizing and maximizing the terminal.

[JeromeVi]

@mofux so you were right for the last part, after the upgrade the characters are just hidden. But for the fit it doesn't works as I though.

I make this :

Template.container.onRendered(function containerOnRendered(){
  window.onresize = function(event) {

    var x = $.map(collection, function(value, index) {
    return [value];
    });

console.log(x);
    x.forEach(function(term){
      console.log(term);
      setTimeout(function(){
        term.fit();
      },100);
    })
  };

});

To convert my object in an array and then the content is the following one:

but it still doesn't fit the chars that were already written in the term

[mofux]

Try to add a console.log(term.rows, term.cols); after the term.fit() and do some resizing. It should log different values when you resize the window. If not, make sure that the terminal container is actually changing its size when you resize the window by inspecting the dom. Also, make sure that the terminal container is visible in the dom during the resize operation, because otherwise the fit addon cannot calculate the new cols / rows value.

[JeromeVi]

@mofux so the term.rows and term.cols value change when I resize my window.
To be sure, the expected behaviour of my term is to fit the text even the one who is already written as if you resize your computer terminal, it's right for you ?

I'll keep looking on that

[mofux]

Oh I see, this is currently being worked on but not yet finalised. Take a look at #609 for more detail.

[JeromeVi]

@mofux thank you for the thread, I'll read but as I understand I need to wait that the changes requested are done right ?

[mofux]

@JeromeVi Yes, this is quite a challenging feature and we all look forward to have this finally implemented. I will open up a 🍺 and happily praise @LucianBuzzo once it's done 😅

[JeromeVi]

@mofux héhé, so yeah poke me when it's done (I'll keep an eye on the #609 ) thank you for the informations

[Tyriar]

Closing as duplicate of https://github.com/sourcelair/xterm.js/issues/622