Readline in NodeJS is drawing unwanted lines

Question

I have the following issue, where I draw an ASCII character in the terminal window, and move the cursor to another position and repeat the process with the following code.

const readline = require('readline');

//
//  Set the direction of the cursor
//
let dirrection_y = true;
let dirrection_x = true;

//
//  Set the initial position of the cursor
//
let position_x = 0;
let position_y = 0;

//
//  Get the terminal window size
//
let window_x = process.stdout.columns;
let window_y = process.stdout.rows;

//
//  Set the cursor to the top left corner of the terminal window so we can clear
//  the terminal screen
//
readline.cursorTo(process.stdout, position_x, position_y)

//
//  Clear everything on the screen so we have a clean template to draw on.
//
readline.clearScreenDown(process.stdout)

//
//  Create the interface so we can use it to for example write on the console.
//
let rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

//
//  React to CTR+C so we can close the app, and potentially do something before
//  closing the app.
//
rl.on('close', function() {

    process.exit(0);

});

//
//  Start the main loop
//
draw();

//
//  The main loop that moves the cursor around the screen.
//
function draw()
{
    setTimeout(function() {

        //
        //  1.  Move the cursor up or down
        //
        dirrection_y ? position_y++ : position_y--

        //
        //  2.  When we reach the bottom of the terminal window, we switch
        //      direction from down, to up.
        //
        if(position_y == window_y)
        {
            //
            //  1.  Switch the direction to go up
            //
            dirrection_y = false

            //
            //  2.  Move the next column or previous one depending on the
            //      direction.
            //
            dirrection_x ? position_x++ : position_x--
        }

        //
        //  3.  When we reach the top of the terminal screen, switch direction
        //      again
        //
        if(position_y < 0)
        {
            //
            //  1.  Switch the direction to go down
            //
            dirrection_y = true

            //
            //  2.  Move the next column or previous one depending on the
            //      direction.
            //
            dirrection_x ? position_x++ : position_x--
        }

        //
        //  4.  When we reach the far right of the terminal screen we switch
        //      direction from 'to right', to 'to left'
        //
        if(position_x == window_x) { dirrection_x = false }

        //
        //  5.  When we reach the far left (beginning) of the terminal window
        //      we switch direction again.
        //
        if(position_x == 0) { dirrection_x = true }

        //
        //  6.  Write on char on the terminal screen.
        //
        rl.write('█');

        //
        //  7. Move the cursor to the next position
        //
        readline.cursorTo(process.stdout, position_x, position_y)

        //
        //  8.  Restart the loop.
        //
        draw();

    }, 100)
}

Everything goes well until I reach to a point where there will be a full line showing on the screen that I didn't draw as the image bellow shows

If I keep the app going eventually the whole screen will fill up with lines covering what I'm drawing.

Questions

I don't believe I'm drawing those lines, if this is true what is happening with the terminal window?

Tech Sec

• macOS
• Terminal and iTerm have the same issue
• NodeJS v6.40

Answer 1

In looking at the sourcecode for readline, I believe an old hack they added to correct some tab behavior is still causing problems for this current line. Whenever the cursor position cols are detected at 0 (probably another bug in the source), it issues a refreshLine --- which throws a prompt. The docs say that "The rl.write() method will write the data to the readline Interface's input as if it were provided by the user.", so the prompt outputs all of your input back to you.

I couldn't find an in-source workaround, but you can modify the Interface's source code. Add this snippet after your const readline = require('readline'); to fix the problem.

readline.Interface.prototype._insertString = function(c) {
  if (this.cursor < this.line.length) {
    var beg = this.line.slice(0, this.cursor);
    var end = this.line.slice(this.cursor, this.line.length);
    this.line = beg + c + end;
    this.cursor += c.length;
    this._refreshLine();
  } else {
    this.line += c;
    this.cursor += c.length;
    this.output.write(c);
    this._moveCursor(0);
  }
};