Алгоритм генерации смежных границ таблиц в эмуляторах терминала

const updateElement = (element, attributes) => {
    for (const key in attributes) {
        element.setAttribute(key, attributes[key]);
    }
};

const createElement = (parent_, tag, attributes) => {
    const element = document.createElement(tag);
    updateElement(element, attributes);
    parent_.appendChild(element);
    return element;
};

const createTextNode = (parent_, text) => {
    const node = document.createTextNode(text);
    parent_.appendChild(node);
    return node;
};

const makeKeyboard = () => {
    const makeCell = () => {
        let char_ = ' ';
        const pseudographics =
            ' ╷╻╴┐┒╸┑┓' +
            '╵│╽┘┤┧┙┥┪' +
            '╹╿┃┚┦┨┛┩┫' +
            '╶┌┎─┬┰╾┭┱' +
            '└├┟┴┼╁┵┽╅' +
            '┖┞┠┸╀╂┹╃╉' +
            '╺┍┏╼┮┲━┯┳' +
            '┕┝┢┝┾╆┷┿╈' +
            '┗┡┣┺╄╇┻╇╋'
        ;

        const weights = [0, 0, 0, 0];
        const style = () =>
            weights.reduce((a, b) => 3 * a  + Math.min(b, 2), 0);
        const dirs = {'r': 0, 'u': 1, 'l': 2, 'd': 3};

        return {
            'setChar': c => char_ = c,
            'getChar': () => char_,
            'setLine': dir => {
                weights[dirs[dir]] = 1;
                char_ = pseudographics[style()];
            },
            'changeWeight': (dir, w) => {
                weights[dirs[dir]] += w;
                char_ = pseudographics[style()];
            }
        };
    };

    const cells = [];
    let screen = {
        'clear': () => {},
        'putc': () => {}
    };

    const getCell = (i, j) => {
        while (cells.length <= i) {
            cells.push([]);
        }
        const row = cells[i];
        while (row.length <= j) {
            row.push(makeCell());
        }
        return row[j];
    };

    const makeButton = (labels, border) => {
        for (const [i, j, text] of labels) {
            for (let k = 0; k < text.length; ++k) {
                getCell(i, j + k).setChar(text.charAt(k));
            }
        };

        const processBorder = cb => {
            let [pi, pj] = border[border.length - 1];
            for (let k = 0; k < border.length; ++k) {
                const [ni, nj] = border[k];
                if (pi == ni) {
                    const j1 = Math.min(pj, nj);
                    const j2 = Math.max(pj, nj);
                    for (let j = j1; j < j2; ++j) {
                        cb(pi, j, 'r');
                    }
                    for (let j = j1 + 1; j < j2 + 1; ++j) {
                        cb(pi, j, 'l');
                    }
                } else if (pj == nj) {
                    const i1 = Math.min(pi, ni);
                    const i2 = Math.max(pi, ni);
                    for (let i = i1; i < i2; ++i) {
                        cb(i, pj, 'd');
                    }
                    for (let i = i1 + 1; i < i2 + 1; ++i) {
                        cb(i, pj, 'u');
                    }
                }
                [pi, pj] = [ni, nj];
            }
        };

        processBorder((i, j, dir) => {
            const cell = getCell(i, j);
            cell.setLine(dir);
            screen.putc(i, j, cell.getChar());
        });

        const changeWeight = w => {
            processBorder((i, j, dir) => {
                const cell = getCell(i, j);
                cell.changeWeight(dir, w);
                screen.putc(i, j, cell.getChar());
            });
        };
        let down = false;
        const press = () => {
            if (!down) {
                changeWeight(1);
                down = true;
            }
        };
        const release = () => {
            if (down) {
                changeWeight(-1);
                down = false;
            }
        };

        return {
            'press': press,
            'release': release
        };
    };

    const paintKeyboard = () => {
        screen.clear();
        for (let i = 0; i < cells.length; ++i) {
            const row = cells[i];
            for (let j = 0; j < row.length; ++j) {
                const cell = row[j];
                if (cell !== undefined) {
                    screen.putc(i, j, cell.getChar());
                }
            }
        }
    };

    return {
        'makeButton': makeButton,
        'h': () => cells.length,
        'w': () => cells.reduce((a, b) => Math.max(a, b.length), 0),
        'attachScreen': screen_ => {
            screen = screen_;
            paintKeyboard();
        }
    };
};

const makeScreen = (parent_, h, w) => {
    const pre = createElement(parent_, 'pre');
    const spans = new Array(h);
    for (let i = 0; i < h; ++i) {
        spans[i] = new Array(w);
        for (let j = 0; j < w; ++j) {
            const span = createElement(pre, 'span');
            createTextNode(span, ' ');
            spans[i][j] = span;
        }
        createTextNode(pre, '\n');
    }

    return {
        'clear': () => {
            for (const row of spans) {
                for (const span of row) {
                    span.textContent = ' ';
                }
            }
        },
        'putc': (i, j, c) => {
            if (0 <= i && i < spans.length && 0 <= j && j < spans[i].length) {
                spans[i][j].textContent = c;
            }
        }
    };
};

const makeKeyboardBuilder = () => {
    const keyboard = makeKeyboard();

    const buttons = {};

    let i = 0;
    let j = 0;

    const add = label => {
        const tag = label.trim();
        const jj = j + label.length + 1;
        const button = keyboard.makeButton(
            [[i + 1, j + 1, label]], 
            [[i, j], [i, jj], [i + 2, jj], [i + 2, j]]
        );
        if (!(tag in buttons)) {
            buttons[tag] = [];
        }
        buttons[tag].push(button);
        j = jj;
    };

    return {
        'row': labels => labels.forEach(add),
        'crlf': () => { i += 2; j = 0; },
        'space': j_ => j += j_,
        'keyboard': () => keyboard,
        'press': tag => buttons[tag].forEach(b => b.press()),
        'release': tag => buttons[tag].forEach(b => b.release())
    };
};

const main = () => {
    const builder = makeKeyboardBuilder();
    builder.row([
        ' Esc ', 'F1 ', 'F2 ', 'F3 ', 'F4 ', 'F5 ', 'F6 ', 'F7 ', 'F8 ', 'F9 ',
        'F10', 'F11', 'F12', 'Ins ', 'PrSc', ' Del '
    ]);
    builder.crlf();
    builder.row([
        '`~ ', ' 1! ', ' 2@ ', ' 3# ', ' 4$ ', ' 5% ', ' 6^ ', ' 7& ', ' 8* ',
        ' 9( ', ' 0) ', ' -_ ', ' =+ ', ' BkSp'
    ]);
    builder.crlf();
    builder.row([
        'Tab ', ' Q  ', ' W  ', ' E  ', ' R  ', ' T  ', ' Y  ', ' U  ', ' I  ',
        ' O  ', ' P  ', ' [  ', ' ]  ', ' \\| '
    ]);
    builder.crlf();
    builder.row([
        'CpsLck', ' A  ', ' S  ', ' D  ', ' F  ', ' G  ', ' H  ', ' J  ',
        ' K  ', ' L  ', ' ;: ', ' \'" ', ' Enter '
    ]);
    builder.crlf();
    builder.row([
        'Shift   ', ' Z  ', ' X  ', ' C  ', ' V  ', ' B  ', ' N  ', ' M  ',
        ' ,< ', ' .> ', ' /? ', ' Shift    '
    ]);
    builder.crlf();
    builder.row([
        'Ctrl ', ' Fn ', 'Win ', 'Alt ', '                ', 'Alt  ', 'Ctrl  '
    ]);
    builder.space(1);
    builder.row(['PgUp ', ' Up  ', 'PgDn ']);
    builder.crlf();
    builder.space(37);
    builder.row(['Home ', ' End ']);
    builder.space(3);
    builder.row(['Left ', 'Down ', 'Right']);

    const keyboard = builder.keyboard();

    const body = document.getElementsByTagName('body')[0];
    const screen = makeScreen(body, keyboard.h(), keyboard.w());
    keyboard.attachScreen(screen);

    const input = {
        'Control': 'Ctrl',
        'Escape': 'Esc',
        'OS': 'Win',
        'Backspace': 'BkSp',
        'Delete': 'Del',
        '`': '`~',
        '1': '1!',
        '2': '2@',
        '3': '3#',
        '4': '4$',
        '5': '5%',
        '6': '6^',
        '7': '7&',
        '8': '8*',
        '9': '9(',
        '0': '0)',
        '-': '-_',
        '=': '=+',
        '\\': '\\|',
        ';': ';:',
        "'": '\'"',
        ',': ',<',
        '.': '.>',
        '/': '/?',
        ' ': '',
        'PageUp': 'PgUp',
        'ArrowUp': 'Up',
        'PageDown': 'PgDn',
        'ArrowLeft': 'Left',
        'ArrowDown': 'Down',
        'ArrowRight': 'Right'
    };
    for (const c of 'abcdefghijklmnopqrstuvwxyz') {
        input[c] = c.toUpperCase();
        input[c.toUpperCase()] = c.toUpperCase();
    }
    for (const w of ['Shift', 'Alt', 'Tab', '[', ']', 'Enter', 'Home', 'End']) {
        input[w] = w;
    }
    for (let i = 1; i <= 12; ++i) {
        input['F' + i] = 'F' + i;
    }

    body.addEventListener('keydown', event => {
        const key = event.key;
        if (key in input) {
            builder.press(input[key]);
        }
        event.preventDefault();
    });

    body.addEventListener('keyup', event => {
        const key = event.key;
        if (key in input) {
            builder.release(input[key]);
        }
        event.preventDefault();
    });
};

document.addEventListener('DOMContentLoaded', main); 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Screen keyboard</title>
    <script type="module" src="main.js"></script>
  </head>
  <body>
      Click on keyboard. Press Shift-A.
  </body>
</html>

const container = document.getElementById("container");

    const rows = [
        ['Tab    ', ' Q', ' W', ' E', ' R', ' T', ' Y', ' U', ' I', ' O', ' P', ' [', ' ]', '    |'],
        ['CapsLock', ' A', ' S', ' D', ' F', ' G', ' H', ' J', ' K', ' L', ' ;:', ` '"`, ' Enter'],
        ['Shift    ', ' Z', ' X', ' C', ' V', ' B', ' N', ' M', ' ,<', ' .>', ' /?', '   Shift']
    ];

    /**
     * @var Unicode Box Draw Map
     * @usedBy draw()
     */
    const boxDraw = new Map([
        [  1, 116],[  2, 120],[  4, 119],[  5,  16],[  6,  17],[  7,  85],
        [  8, 123],[  9,  18],[ 10,  19],[ 13,  86],[ 15,  87],[ 16, 118],
        [ 17,   0],[ 18, 126],[ 20,  12],[ 21,  44],[ 22,  45],[ 24,  14],
        [ 25,  48],[ 26,  49],[ 28,  83],[ 29, 101],[ 32, 122],[ 33, 124],
        [ 34,   1],[ 36,  13],[ 37,  46],[ 38,  47],[ 40,  15],[ 41,  50],
        [ 42,  51],[ 51,  80],[ 52,  82],[ 55, 100],[ 60,  84],[ 63, 102],
        [ 64, 117],[ 65,  24],[ 66,  25],[ 67,  91],[ 68,   2],[ 69,  36],
        [ 70,  37],[ 71,  97],[ 72, 125],[ 73,  39],[ 74,  42],[ 80,  20],
        [ 81,  52],[ 82,  53],[ 84,  28],[ 85,  60],[ 86,  61],[ 88,  31],
        [ 89,  65],[ 90,  69],[ 96,  21],[ 97,  54],[ 98,  55],[100,  29],
        [101,  62],[102,  63],[104,  34],[105,  70],[106,  72],[112,  88],
        [115, 103],[116,  94],[119, 106],[128, 121],[129,  26],[130,  27],
        [132, 127],[133,  38],[134,  41],[136,   3],[137,  40],[138,  43],
        [144,  22],[145,  56],[146,  57],[148,  30],[149,  64],[150,  67],
        [152,  32],[153,  66],[154,  73],[160,  23],[161,  58],[162,  59],
        [164,  33],[165,  68],[166,  71],[168,  35],[169,  74],[170,  75],
        [193,  92],[195,  93],[204,  81],[205,  98],[207,  99],[208,  89],
        [209, 104],[220,  95],[221, 107],[240,  90],[243, 105],[252,  96],
        [255, 108],
    ]);

    /**
     * @function getSymbolByCode
     * @param {Number} code Must be integer in range [0-255]
     * @returns {String}
     */
    function getSymbolByCode(code) {
        return !code ? ' ' : boxDraw.has(code) ? String.fromCharCode(boxDraw.get(code) + 0x2500) : null;
    }

    const getDefaultDash = () => ({draw: false, bold: false});
    const getDefaultSymbolInfo = () => ({
        top: getDefaultDash(),
        right: getDefaultDash(),
        bottom: getDefaultDash(),
        left: getDefaultDash()
    });

    const getSymbolByInfo = info => {
        let code = 0;
        const directions = ['left', 'bottom', 'right', 'top'];
        for (let i = 0; i < directions.length; i++) {
            const {draw, bold} = info[directions[i]];
            code |= (draw ? 1 + bold : 0) << (i * 2);
        }
        return getSymbolByCode(code);
    }

    const getRowSum = row => {
        return row.reduce((sum, {length}) => sum + length + 2, 0);
    }

    const findKeyByPosition = (row, position) => {
        for (let i = 0, sum = 0; i < row.length; i++) {
            let left = sum;
            sum += row[i].length + 2;
            if (position >= left && position <= sum) {
                const result = {
                    value: null,
                    next: null,
                    isDelimiter: false,
                    left,
                    right: sum
                };
                if (position !== 0) {
                    result.value = row[i];
                } else {
                    result.next = row[i];
                }
                if (position === sum) {
                    result.next = row[i + 1];
                }
                result.isDelimiter = position === left || position === sum;
                return result;
            }
        }
        throw "Position is out of bounds";
    }

    const active = new Set();
    const isActive = key => {
        if (!key) {
            return false;
        }
        key = key.trim();
        for (let a of active.keys()) {
            if (key === a || key === a.toUpperCase() || (key.length === 2 && key.includes(a))) {
                return true;
            }
        }
        return false;
    };

    const getSymbolBetweenRows = (topRow, bottomRow, position) => {
        const info = getDefaultSymbolInfo();

        const checkHorizontal = key => {
            if (key.value) {
                info.left.draw = true;
            }
            if (isActive(key.value)) {
                info.left.bold = true;
            }
            if (key.isDelimiter) {
                if (key.next || position === 0) {
                    info.right.draw = true;
                }
                if (isActive(key.next)) {
                    info.right.bold = true;
                }
            } else {
                info.right.draw = true;
                if (isActive(key.value) || isActive(key.next)) {
                    info.right.bold = true;
                }
            }
        }

        if (topRow) {
            const top = findKeyByPosition(topRow, position);
            info.top.draw = top.isDelimiter;
            info.top.bold = isActive(top.value) || isActive(top.next);
            checkHorizontal(top);
        }
        if (bottomRow) {
            const bottom = findKeyByPosition(bottomRow, position);
            info.bottom.draw = bottom.isDelimiter;
            info.bottom.bold = isActive(bottom.value) || isActive(bottom.next);
            checkHorizontal(bottom);
        }

        return getSymbolByInfo(info);
    }

    const renderTop = (row, prevRow) => {
        let line = '';
        const sum = getRowSum(row);
        for (let i = 0; i <= sum; i++) {
            line += getSymbolBetweenRows(prevRow, row, i);
        }
        return line;
    }

    const renderCenter = (row) => {
        let line = '';
        const sum = getRowSum(row);
        for (let i = 0; i <= sum; i++) {
            const current = findKeyByPosition(row, i);
            const info = getDefaultSymbolInfo();
            if (current.isDelimiter) {
                info.top.draw = info.bottom.draw = true;
                info.top.bold = info.bottom.bold = isActive(current.value) || isActive(current.next);
                line += getSymbolByInfo(info);
            } else {
                let value = ' ' + current.value + ' ';
                line += value[i - current.left];
            }
        }
        return line;
    }

    const renderBottom = (row, nextRow) => {
        let line = '';
        const sum = getRowSum(row);
        for (let i = 0; i <= sum; i++) {
            line += getSymbolBetweenRows(row, nextRow, i);
        }
        return line;
    }

    const render = (rows) => {
        const lines = [];
        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const prevRow = i > 0 ? rows[i - 1] : null;
            lines.push(renderTop(row, prevRow));
            lines.push(renderCenter(row));
        }
        lines.push(renderBottom(rows[rows.length - 1]));
        container.innerHTML = lines.join('\n');
    }

    render(rows);

    document.addEventListener('keydown', event => {
        active.add(event.key);
        render(rows);
    });

    document.addEventListener('keyup', event => {
        active.delete(event.key);
        render(rows);
    });

<pre id="container"></pre>