node.js readline(keypress事件)在渲染的文本前面插入“>”

时间:2018-07-26 11:41:52

标签: node.js readline

我已经使用readline API已有一段时间了,我遇到了一个非常奇怪的错误,我发现自己无法修复它。

我的代码中有一些主要功能

  • moveBack将光标向后移动一个刻度(或多个,如果已指定)。
  • moveForward将光标向前移动一个刻度(或多个,如果已指定)。
  • addChar在当前光标位置添加一个字符。
  • backspace删除当前光标位置的字符。
  • render呈现当前数据。

代码中有一些错误,但我们不要专注于这些错误。编写代码时,它确实执行了预期的操作,但是在退格键方法中,它删除了字符,但还在行首添加了>。字符(>并没有添加到代码中的任何地方。

如前所述,渲染中存在一些错误,但除此之外,还可以。

屏幕截图

下面是写几个字符时的屏幕截图,您会看到背面的H带有错误,这只是渲染错误,没什么好担心的:

before backspace

这是按下退格键时的屏幕快照,注释,我已经按下过几次退格键,但是>出现在第一次退格键之后。同样,“ Hello”的渲染问题也消失了,但是再次不用担心。

after backspace

谢谢。

代码的主要部分;

按键监听器

process.stdin.on("keypress", (char, key) => {
    // console.log(key);
    if (key.name === "c" && key.ctrl === true)
    {
        process.stdin.setRawMode(true);
        process.stdin.resume();
        process.exit();
        return;
    }

    if (key.name === "return") return send(); // Don't worry about this.
    if (key.name === "backspace") return backspace();

    addChar(char);
    render();
});

moveBack(number i)

function moveBack (i = 1)
{
    data.cursor -= i;
    if (data.cursor < 1) data.cursor = 0;
    // Figure out where the relative cursor is supposed to be.
    for (var l = 0; l < i; l++)
    {
        if (data.rcursor === 0) data.pg--;
        else data.rcursor--;
        if (data.rcursor < 0)
        {
            data.pg += data.rcursor;
            data.rcursor = 0;
        }
        if (data.pg < 0) data.pg = 0;
    }
}

moveForward(number i)

function moveForward (i = 1)
{
    data.cursor += i;
    if (data.cursor > width + 1) data.cursor = width + 1;
    for (var l = 0; l < i; l++)
    {
        if (data.rcursor >= width + 1)
        {
            data.rcursor = width + 1;
            data.pg++;
        } else
        {
            data.rcursor++;
        }
        if (data.pg >= data.value.length - width) data.pg = data.value.length - width;
    }
}

backspace()

function backspace ()
{
    let oldArr = data.value;
    let newArr = [ ];
    for (let i = 0; i < oldArr.length; i++)
    {
        if (i !== data.cursor - 1) newArr.push(oldArr[i]);
    }
    data.value = newArr
    moveBack();
}

addChar(string c)

function addChar (c)
{
    let oldArr = data.value;
    let newArr = [ ];
    for (var i = 0; i < data.cursor - 1; i++) newArr.push(oldArr.shift());
    newArr.push(c);
    for (var i of oldArr) newArr.push(oldArr.shift());
    data.value = newArr;
    moveForward();
}

render()

function render ()
{
    let txt = "\r";
    const pieces = data.value.slice(data.pg, width);
    if (pieces.length === 0) pieces.push("");
    if (data.rcursor === width + 1) pieces.push("");
    pieces[data.rcursor] = chalk.bgBlue.black(!!pieces[data.rcursor] ? pieces[data.rcursor] : " ");
    txt += pieces.join("");
    process.stdout.write(txt);
}

0 个答案:

没有答案