Merge pull request #255 from parallaxinc/scroll-bottom

Terminal Receive pane scrolling improvements and buffer increase

Author: phated

src/creators/receive.js

@@ -4,11 +4,12 @@ const {
   RECEIVE
 } = require('../constants/action-types');
 
-function receive(output){
+function receive(output, offset){
   return {
     type: RECEIVE,
     payload: {
-      output
+      output,
+      offset
     }
   };
 }

src/lib/scroller.js

@@ -1,71 +1,80 @@
 'use strict';
 
-var _ = require('lodash');
-
-function generateContent(lines, start, end, minLength) {
-  return _(lines)
-    .slice(start, end)
-    .thru(function(array){
-      if(array.length < minLength){
-        // pad whitespace at top of array
-        return _(new Array(minLength - array.length))
-          .fill('\u2009')
-          .concat(array)
-          .value();
-      }else{
-        return array;
-      }
-    })
-    .map(function(line){
-      if(line.length === 0){
-        // insert a blank space to prevent pre omitting a trailing newline,
-        // even though pre/pre-nowrap/pre-line are specified.
-        return '\u2009';
-      }
-      return line;
-    })
-    .join('\n');
-}
+const _ = require('lodash');
 
 function Scroller(consoleElement) {
   this.lines = [];
-  this.minVisible = 30;
+  this.lineOffset = 0;
+  this.visibleCount = 50;
   this.startPosition = 0;
+  this.endPosition = 0;
   this.animateRequest = null;
   this.sticky = true;
   this.jumpToBottom = true;
   this.dirty = false;
   this.console = consoleElement;
+  this.expandDistance = 200;
 
   //pre-bind functions and throttle expansion
   this.refresh = this._renderVisible.bind(this);
   this.scroll = this._onScroll.bind(this);
-  this.expand = _.throttle(this._expand.bind(this), 150, {
+  this.expandTop = _.throttle(this._expandTop.bind(this), 150, {
+    leading: true,
+    trailing: true
+  });
+  this.expandBottom = _.throttle(this._expandBottom.bind(this), 150, {
     leading: true,
     trailing: true
   });
 }
 
-Scroller.prototype.setLines = function(newLines) {
-  var len = newLines.length;
+Scroller.prototype._generateContent = function(){
+  return _(this.lines)
+    .slice(this.startPosition - this.lineOffset, this.endPosition - this.lineOffset)
+    .map(function(line){
+      if(line.length === 0){
+        // insert a blank space to prevent pre omitting a trailing newline,
+        // even though pre/pre-nowrap/pre-line are specified.
+        return '\u2009';
+      }
+      return line;
+    })
+    .join('\n');
+};
+
+Scroller.prototype.setLines = function(newLines, offset) {
   this.lines = newLines;
+  this.lineOffset = offset;
   if(this.sticky){
-    this.startPosition = Math.max(0, len - this.minVisible);
-  }else if(len === 1 && newLines[0].length === 0){
+    this.endPosition = this.lineCount();
+    this.startPosition = Math.max(this.lineOffset, this.endPosition - this.visibleCount);
+    if(this.endPosition <= this.visibleCount){
+      // follow text during initial 50 lines
+      this.jumpToBottom = true;
+    }
+  }else if(newLines.length === 1 && newLines[0].length === 0){
     // ^^ `lines` is reset to an array with one empty line. ugh.
 
     // handle the reset case when lines is replaced with an empty array
     // we don't have a direct event that can call this
     this.reset();
-  }else if(len < this.startPosition){
-    // handle buffer rollover, where number of lines will go from 2048 to ~1900
-    this.startPosition = Math.max(0, len - this.minVisible);
+  }else if(this.lineOffset > this.startPosition){
+    // when buffer trims and we are now below the trimmed area, move up by difference
+    const lineDiff = this.lineOffset - this.startPosition;
+    this.startPosition += lineDiff;
+    this.endPosition += lineDiff;
   }
   this.dirty = true;
 };
 
+Scroller.prototype.lineCount = function(){
+  return this.lines.length + this.lineOffset;
+};
+
 Scroller.prototype.reset = function(){
-  this.startPosition = Math.max(0, this.lines.length - this.minVisible);
+  this.endPosition = Math.max(0, this.lineCount());
+  this.startPosition = Math.max(0, this.endPosition - this.visibleCount);
+  this.lineOffset = 0;
   this.jumpToBottom = true;
   this.sticky = true;
   this.dirty = true;
@@ -80,34 +89,61 @@ Scroller.prototype.requestRefresh = function(){
 Scroller.prototype._renderVisible = function(){
   this.animateRequest = null;
   if(this.dirty && this.console){
-    var top = this.console.scrollTop;
+    const top = this.console.scrollTop;
     if(this.sticky){
-      this.startPosition = Math.max(0, this.lines.length - this.minVisible);
+      this.endPosition = this.lineCount();
+      this.startPosition = Math.max(this.lineOffset, this.endPosition - this.visibleCount);
     }
-    this.console.innerHTML = generateContent(this.lines, this.startPosition, this.lines.length, this.minVisible);
+    this.console.innerHTML = this._generateContent();
     if(this.jumpToBottom){
-      this.console.scrollTop = 2000;
+      this.console.scrollTop = 4000;
       this.jumpToBottom = false;
-    }else if(!this.sticky && this.startPosition > 0 && top === 0){
+    }else if(!this.sticky && this.startPosition > this.lineOffset && top === this.lineOffset){
       //cover the situation where the window was fully scrolled faster than expand could keep up and locked to the top
-      requestAnimationFrame(this.expand);
+      requestAnimationFrame(this.expandTop);
     }
     this.dirty = false;
   }
 };
 
-Scroller.prototype._expand = function(){
-  this.startPosition = Math.max(0, this.startPosition - this.minVisible);
-  this.sticky = false;
+Scroller.prototype._expandTop = function(){
+  this.startPosition = Math.max(this.lineOffset, this.startPosition - this.visibleCount);
   if(this.console){
-    var scrollHeight = this.console.scrollHeight;
-    var scrollTop = this.console.scrollTop;
+    this.sticky = false;
+    const scrollHeight = this.console.scrollHeight;
+    const scrollTop = this.console.scrollTop;
 
     // do an inline scroll to avoid potential scroll interleaving
-    this.console.innerHTML = generateContent(this.lines, this.startPosition, this.lines.length, this.minVisible);
-    var newScrollHeight = this.console.scrollHeight;
+    this.console.innerHTML = this._generateContent();
+    const newScrollHeight = this.console.scrollHeight;
     this.console.scrollTop = scrollTop + newScrollHeight - scrollHeight;
 
+    const oldEndPos = this.endPosition;
+    this.endPosition = Math.min(this.endPosition, this.startPosition + (this.visibleCount * 2));
+
+    this.dirty = oldEndPos !== this.endPosition;
+    if(this.dirty && !this.animateRequest){
+      this.animateRequest = requestAnimationFrame(this.refresh);
+    }
+  }
+};
+
+Scroller.prototype._expandBottom = function(){
+  this.endPosition = Math.min(this.lineCount(), this.endPosition + this.visibleCount);
+  if(this.console){
+    // add the new content to the bottom, then get scroll position to remove content
+    this.console.innerHTML = this._generateContent();
+    const scrollHeight = this.console.scrollHeight;
+    const scrollTop = this.console.scrollTop;
+
+    // update start position and render
+    this.startPosition = Math.max(this.lineOffset, Math.min(this.lineCount() - (this.visibleCount * 2), this.endPosition - (this.visibleCount * 2)));
+    this.console.innerHTML = this._generateContent();
+
+    // use difference to scroll offset
+    const newScrollHeight = this.console.scrollHeight;
+    this.console.scrollTop = scrollTop - (scrollHeight - newScrollHeight);
+
     this.dirty = false;
   }
 };
@@ -117,23 +153,33 @@ Scroller.prototype._onScroll = function(){
     // do nothing, prepare to jump
     return;
   }
-  var height = this.console.offsetHeight;
-  var scrollHeight = this.console.scrollHeight;
-  var scrollTop = this.console.scrollTop;
+  const height = this.console.offsetHeight;
+  const scrollHeight = this.console.scrollHeight;
+  const scrollTop = this.console.scrollTop;
+  const nearTop = scrollTop < this.expandDistance;
+  const nearBottom = scrollTop + height > scrollHeight - this.expandDistance;
+  const nearSticky = scrollTop + height > scrollHeight - 10;
+
   if(this.sticky){
-    if(scrollTop + height < scrollHeight - 30){
+    if(!nearSticky){
       this.sticky = false;
     }
   }else{
-    if(scrollTop < 15 && this.startPosition > 0){
-      this.expand();
-    }else if(scrollTop + height > scrollHeight - 30){
-      this.jumpToBottom = true;
-      this.sticky = true;
-      this.dirty = true;
+    if(nearTop && this.startPosition > this.lineOffset){
+      this.expandTop();
+    }else if(nearBottom){
+      if(this.endPosition < this.lineCount() - 2){
+        this.expandBottom();
+      }else if(nearSticky){
+        this.jumpToBottom = true;
+        this.sticky = true;
+        this.dirty = true;
+      }
     }
   }
 
+  
+
   if(this.dirty && !this.animateRequest){
     this.animateRequest = requestAnimationFrame(this.refresh);
   }

src/lib/terminal.js

@@ -10,7 +10,8 @@ class Terminal {
       lastRefresh: 0,
       lines: [''],
       lineWrap: 256,
-      maxLines: 2048,
+      lineOffset: 0,
+      maxLines: 10000,
       pointerLine: 0,
       pointerColumn: 0,
       refreshDelayMillis: 64,
@@ -31,6 +32,7 @@ class Terminal {
     const { refreshQueued } = this.state;
 
     this.state.lines = [''];
+    this.state.lineOffset = 0;
     this.state.pointerLine = 0;
     this.state.pointerColumn = 0;
 
@@ -68,7 +70,7 @@ class Terminal {
 
   setCursorPosition(line, col){
     const { lines } = this.state;
-    for(var ix = lines.length; ix <= line; ix++){
+    for(let ix = lines.length; ix <= line; ix++){
       lines[ix] = '';
     }
     this.state.pointerLine = Math.max(0, line);
@@ -195,6 +197,7 @@ class Terminal {
     if(lines.length > maxLines){
       const newLines = lines.slice(trimCount);
       this.state.lines = newLines;
+      this.state.lineOffset = this.state.lineOffset + trimCount;
       this.state.pointerLine = Math.max(0, pointerLine - trimCount);
       this.state.pointerColumn = pointerColumn;
     } else {
@@ -207,6 +210,10 @@ class Terminal {
     return this.state.lines;
   }
 
+  getOffset(){
+    return this.state.lineOffset;
+  }
+
 }
 
 module.exports = Terminal;

src/plugins/handlers.js

@@ -403,7 +403,8 @@ function handlers(app, opts, done){
   function updateTerminal(msg){
     terminal.refreshBuffer(msg, function(){
       const output = terminal.getLines();
-      store.dispatch(creators.receive(output));
+      const offset = terminal.getOffset();
+      store.dispatch(creators.receive(output, offset));
     });
   }
 

src/reducers/transmission.js

@@ -12,15 +12,17 @@ const {
 const initial = {
   input: '',
   // output is an array of lines
-  output: []
+  output: [],
+  // offset is number of lines cleared from console buffer
+  offset: 0
 };
 
 function transmission(state = initial, { type, payload }){
   switch(type){
     case CONNECT:
       return _.assign({}, state, { input: '' });
     case RECEIVE:
-      return _.assign({}, state, { output: payload.output });
+      return _.assign({}, state, { output: payload.output, offset: payload.offset });
     case TRANSMIT:
       return _.assign({}, state, { input: payload.input });
     case CLEAR_TRANSMISSION:

src/views/terminal.js

@@ -22,8 +22,8 @@ const styles = {
 class TermnialView extends React.Component {
 
   componentWillReceiveProps(nextProps){
-    const { output } = nextProps;
-    this.scroller.setLines(output);
+    const { output, offset } = nextProps;
+    this.scroller.setLines(output, offset);
     this.scroller.requestRefresh();
   }
 
@@ -72,13 +72,14 @@ module.exports = createContainer(TermnialView, {
 
   getPropsFromStores({ store }){
     const { transmission, device } = store.getState();
-    const { input, output } = transmission;
+    const { input, output, offset } = transmission;
     const { connected } = device;
 
     return {
       connected,
       input,
-      output
+      output,
+      offset
     };
   }
 });