javascript - How to get Xterm.js resize properly? - Stack Overflow

IT技术

更新时间：2025-03-120

admin管理员组
文章数量:1303551

tl;dr I've created a React wrapper to render an array of log messages into a terminal but resizing is giving a weird output (see screenshot). (There is a React-Wrapper on NPM but that wasn't working for my use-case - caused screen flickering)

I'm working on a feature for Guppy where I'm adding Xterm.js for the terminal output. The PR can be found here.

I've added xterm because of hyperlink scanning/parsing and that is working.

But I'm stuck with getting resize to work. If I'm starting the devServer in the app and wait for some text it will display with correct letter width. If I reduce the size I'm getting an output with an incorrect letter width. Like in the following screenshot:

It is always looking correct in the not resized state but after resize it will get the wrong display - so this will happen for enlarging & shrinking the screen width.

The output should look similar to the following screenshot (maybe with some wrapped lines):

I think this is caused by Fit addon or the way I'm handling resizing with the resize observer but I'm not sure.

The span style of xterm letter are getting a width of NaNpx like in the following screenshot: Is this caused by a media query I'm using? I haven't seen that yet maybe I have to temporarily disable all media queries to see if that's causing the behaviour.

What I have tried so far:

Wrapped this.xterm.fit() into a setTimeout(func, 0) but with-out an effect
Modified some of the styles I'm using but I haven't found the cause.

Code

The code I'm using can be found on Github branch feature-terminal-links but here I'd like to extract the parts I've added to get Xterm to work with React:

I created a styled-ponent XtermContainer as a div so I can add Xterm styles and own styling. The following code is inside render and will be our xterm.js container (innerRef will be used later in ComponentDidMount to intialize Xterm with that container):

<XtermContainer
    width={width}
    height={height}
    innerRef={node => (this.node = node)}
/>

Init xterm in ponentDidMount with the container above:

ponentDidMount() {
    Terminal.applyAddon(webLinks);
    Terminal.applyAddon(localLinks);
    Terminal.applyAddon(fit);

    this.xterm = new Terminal({
      convertEol: true,
      fontFamily: `'Fira Mono', monospace`,
      fontSize: 15,
      rendererType: 'dom', // default is canvas
    });

    this.xterm.setOption('theme', {
      background: COLORS.blue[900],
      foreground: COLORS.white,
    });

    this.xterm.open(this.node);
    this.xterm.fit();

    /* ... some addon setup code here (not relevant for the problem) ... */
}

Added react-resize-observer inside of the wrapper that is also containing the terminal container so I can trigger this.xterm.fit() if the size changes (in the repo there is a setTimeout wrapper around for testing).

<ResizeObserver onResize={() => this.xterm && this.xterm.fit()} />

Using ponentDidUpdate(prevProps, prevState) to update the terminal and scroll the terminal to the bottom if the ponent is getting new logs:

ponentDidUpdate(prevProps, prevState) {
    if (prevProps.task.logs !== this.state.logs) {
      if (this.state.logs.length === 0) {
        this.xterm.clear();
      }
      for (const log of this.state.logs) {
        /*
        We need to track what we have added to xterm - feels hacky but it's working.
        `this.xterm.clear()` and re-render everything caused screen flicker that's why I decided to not use it.
        Todo: Check if there is a react-xterm wrapper that is not using xterm.clear or 
              create a wrapper ponent that can render the logs array (with-out flicker).
        */
        if (!this.renderedLogs[log.id]) {
          this.writeln(log.text);
          this.xterm.scrollToBottom();
          this.renderedLogs[log.id] = true;
        }
      }
    }
}

Ideas I have to find the cause:

~~Check ResizeObserver code.~~ (see update below)
Try to find why xterm css is getting a NaN width. Is Xterm.js using the style width of the container? If yes, maybe that's not correctly set.

Update

OK, the resize obeserver is probably not needed as I'm getting the same behaviour after menting out the <ResizeObserver/> in render. So I think it's caused by xterm.js or the css in Guppy.