From 1b78427fb97f22c55b91c69914a9179994c8d70c Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 18 Oct 2016 15:47:28 +0200 Subject: [PATCH 1/3] Keep scroll position if we scroll away from the bottom of the term aka, scroll locking. Allows you to scroll back through logs without new log data dragging the scroll back down to the next entries as they come in. --- client/app/scripts/components/terminal.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index d1989f28d..92d9172ef 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -142,7 +142,12 @@ class Terminal extends React.Component { socket.onmessage = (event) => { log('pipe data', event.data.size); const input = ab2str(event.data); + const scrolledToBottom = term.ydisp === term.ybase; + const savedScrollPosition = term.ydisp; term.write(input); + if (!scrolledToBottom) { + this.scrollTo(savedScrollPosition); + } }; this.socket = socket; @@ -154,6 +159,18 @@ class Terminal extends React.Component { } } + scrollToBottom() { + this.scrollTo(this.term.ybase); + } + + scrollTo(y) { + if (!this.term) { + return; + } + this.term.ydisp = y; + this.term.refresh(0, this.term.rows - 1); + } + componentDidMount() { this._isMounted = true; if (this.props.connect) { @@ -173,6 +190,7 @@ class Terminal extends React.Component { const innerNode = ReactDOM.findDOMNode(component.innerFlex); this.term.open(innerNode); this.term.on('data', (data) => { + this.scrollToBottom(); if (this.socket) { this.socket.send(data); } From 0fcd7d3a2c5ede09ffa77cea72cd8a6d67830bff Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Wed, 19 Oct 2016 09:42:13 +0200 Subject: [PATCH 2/3] Increase terminal scrollback to hold onto more logs --- client/app/scripts/components/terminal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 92d9172ef..f71fa6d68 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -184,7 +184,8 @@ class Terminal extends React.Component { cols: this.state.cols, rows: this.state.rows, convertEol: !this.props.raw, - cursorBlink: true + cursorBlink: true, + scrollback: 10000, }); const innerNode = ReactDOM.findDOMNode(component.innerFlex); From a381e3c06b291637e64681c3442db19c91e018e6 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 1 Nov 2016 15:46:22 +0100 Subject: [PATCH 3/3] Fixes scroll locking on xterm.js --- client/app/scripts/components/terminal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index f71fa6d68..486edd62e 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -168,6 +168,7 @@ class Terminal extends React.Component { return; } this.term.ydisp = y; + this.term.emit('scroll', y); this.term.refresh(0, this.term.rows - 1); }