Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nvim and tmux dont resize with fitaddon, but normal terminal does (electron)

See original GitHub issue

Resizing my xterm window makes the content grow and shrink, as expected, but when i run vim or tmux, and then resize, it doesnt work at all.

Details

Browser and electron version: ^19.0.4
OS version: macOS 13
xterm.js version: ^4.18.0

Steps to reproduce

Use xterm addon fit.
run tmux or vim and then resize window

https://user-images.githubusercontent.com/90651091/175765816-0662d0c2-3511-4511-bf11-950f3e1bddd5.mov

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kaiium</title>
    <link rel="stylesheet" href="xterm/css/xterm.css" />
    <script src="xterm/lib/xterm.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
  </head>
  <body>
    <!--<div
      id="DragBar"
      style="-webkit-app-region: drag; width: 100%; height: 20px"
    ></div>-->
    <div id="terminal"></div>

    <script src="index.js"></script>
  </body>
</html>

index.js

const { WebglAddon } = require("xterm-addon-webgl");
const { getSettings } = require("./settings");

const ipc = require("electron").ipcRenderer;

const { bgColor, cols, rows, CursorBlink, FontFamily, FontSize } =
  getSettings();

//const FitAddon = require("xterm-addon-fit");
var term = new Terminal({
  fontSize: FontSize,
  fontFamily: FontFamily,
  cursorBlink: CursorBlink,
  termProgram: "Kaiium",
});
term.setOption("theme", {
  background: bgColor,
});
var webgl = new WebglAddon();
var fitAddon = new FitAddon.FitAddon();

/*term.onData(function (data) {
  term.write(data);
});*/
document.body.style.backgroundColor = bgColor;
term.open(document.getElementById("terminal"));
term.loadAddon(fitAddon);
term.loadAddon(webgl);
fitAddon.fit();

function log() {
  console.log(
    term.cols,
    term.rows,
    viewport.style.lineHeight,
    viewport.style.height
  );
}

var viewport = document.querySelector(".xterm-viewport");
log();

term.onRender = function () {
  fitAddon.fit();
};

window.onresize = function () {
  log();
  fitAddon.fit();
};

ipc.on("terminal.incomingData", (event, data) => {
  term.write(data);
});

term.onData((e) => {
  ipc.send("terminal.keystroke", e);
});
console.log(bgColor);

main.js

const {
  app,
  BrowserWindow,
  ipcMain,
  globalShortcut,
  Menu,
  MenuItem,
} = require("electron");

const pty = require("node-pty");
const os = require("os");
const { getSettings } = require("./settings");
const username = process.env["LOGNAME"];

const { autoUpdater } = require("electron-updater");

const { bgColor, cols, rows, shellSettings } = getSettings();

console.log(getSettings());

var shell =
  os.platform() === "win32"
    ? "powershell.exe"
    : shellSettings; /* "/opt/homebrew/bin/fish"*/

autoUpdater.checkForUpdatesAndNotify();

let mainWindow;
function createWindow() {
  mainWindow = new BrowserWindow({
    height: 1080,
    width: 1920,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      allowRunningInsecureContent: true,
    },
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", function () {
    mainWindow = null;
  });

  //ipcing

  var ptyProcess = pty.spawn(shell, [], {
    name: "xterm-color",
    cols: cols,
    rows: rows,
    cwd: process.env.HOME,
    env: process.env,
  });

  ptyProcess.on("data", function (data) {
    mainWindow.webContents.send("terminal.incomingData", data);
    console.log("Sent data to terminal");
  });
  ipcMain.on("terminal.keystroke", (event, key) => {
    ptyProcess.write(key);
  });
}

app.on("ready", createWindow);

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", function () {
  if (mainWindow === null) {
    createWindow();
  }
});

This is most of my source code, if you wonder why some variables seem to come from nothing, like the shell settings, i have a configuration system. In the configuration i also set initial rows and columns, and vim and tmux use that, instead of the newly updated ones.

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:13 (5 by maintainers)

Top GitHub Comments

2reactions

FormalSnakecommented, Jun 30, 2022

ipcMain.on("terminal.resize", (event, size) => {
  ptyProcess.resize(size.cols, size.rows);
});

YOU FIXED IT!! thanks a lot.

For anyone doing this in javascript, change

term.onResize((size: { cols: number, rows: number }) => {
  ipc.send("terminal.resize", size);
});

term.onResize(function (size) {
  ipc.send("terminal.resize", size);
});

0reactions

FormalSnakecommented, Jun 30, 2022

I dont have a server side terminal, it is a custom terminal application for your own computer, but ill try it out.

You have a client-server application, your main.js runs as server part and index.js as client part. Thats the reason why have to use ipc messaging between (separate processes).

How do i convert this to javascript?

Thats almost javascript, just remove the type annotations of the client part.

and where do i get the cols and rows from

From the terminal onResize event as shown above.

oooh ok, ill try it out

Top Results From Across the Web

Nvim render bugs when resize using tmux - Stack Overflow

I'm having some really annoying issues with nvim, when I resize my terminal using nvim on tmux the statusline kind of duplicate itself, ......

sourcelair/xterm.js - Gitter

Hi everyone, I just started to use xterm and integrated it into my Electron application. i was able to run commands/show result in...

Nvim not getting correct terminal size opening session in tmux

This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be ......

Neovim terminal: one week without tmux - Reddit

it was brutal to get relativelinenumber in "normal" vim buffers and not in terminal splits. Yes, this will be alleviated by opening terminals...

pty and xterm - I VIAGGI DI REMO

VTerm: Extensible terminal emulator based on Electron and React. ... process when the terminal is resized, but Emscripten does not support signals yet....