Insert lines from top

[Thoumar]

Hi!

I'm using xterm.js in a React app and would like to implement the following behavior:

• When the user scrolls to the top of the terminal, a fixed number of new lines should be added above the existing ones.

I've attempted this by manipulating the buffer with the following approach:

1. Copy the current buffer lines.
2. Create a new array of lines.
3. Append the new lines to the terminal.

However, this feels more like a workaround, and I'm having difficulty achieving a smooth experience, for example when the lines are added the selection is resetting. Is there a better or recommended way to handle this ?

[jerch]

Sorry, I'm a slowpoke:

When the user scrolls to the top of the terminal, a fixed number of new lines should be added above the existing ones.

I dont understand that interaction pattern. If a user scrolls to the top, then you want to insert empty lines above? Doesnt that negate the "scrolling to the top" idea by introduction empty space? Care to show a gif/screencast that can show that idea?

In general major manipulations on the terminal buffer are possible, but there are no predefined mass actions on the API. You basically have to do the buffer(line) shifts yourself (what you prolly already do).

[Thoumar]

Thanks for your answer !

I dont understand that interaction pattern. If a user scrolls to the top, then you want to insert empty lines above? Doesn't that negate the "scrolling to the top" idea by introduction empty space? Care to show a gif/screencast that can show that idea?

When the user scrolls up we want the terminal to load previous lines (not empty ones but like a history, so lines are filled with content) from the "past", the same way a Facebook feed loads from the bottom, we want the terminal to load from the top, the more you scrolls the more content is loaded. This way we allow users to see the past lines.

Here is our current implementation, we are using fake data for now:

const pushLinesToTop = () => {
	      const numberOfLines = 20;
	      const lines = [];
	      const buffer = terminalRef.current.buffer.active;
      
	      for (let i = 0; i < buffer.length; i++) {
		      const line = buffer.getLine(i);
		      if (line) {
			      lines.push(line.translateToString(true));
		      }
	      }
      
	      terminalRef.current.reset();
      
	      for (let i = 0; i < numberOfLines; i++) {
		      terminalRef.current.writeln(`New line ${i + 1}`);
	      }
      
	      for (const line of lines) {
		      terminalRef.current.writeln(line);
	      }
};

The issue with this implementation is that we loose selection as soon as new lines are added with the previous lines from the buffer. And I also feel like this is not a proper way to manage the lines that live in the terminal. Is there any way to CRUD the buffer maybe ?

[jerch]

Ah I understand what you are trying to achieve - and nope, thats not possible in an APIfied convenient way. The terminal's scrollbuffer is meant as an automatic view history of older cmdline content. Since the cmdline has no way to alter older content (beside the cursor addressable area, which is the viewport itself), there is no way to alter the scrollbuffer directly either.

What you are looking for is a pager like less or more.