Resize issue with fitAddon #4788

legend-sabbir · 2023-09-02T11:48:40Z

legend-sabbir
Sep 2, 2023

Details

SVID_20230902_173830_1.mp4

This only happens while commands are running , for example ping -i 0.2 localhost . Once i click any key the screen fits again to normal,

Browser and browser version: chrome latest android
OS version:
xterm.js version: 5.2.1

Steps to reproduce

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/xterm.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-attach.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-webgl.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html,
    body,
    #terminal { height: 100%; }
    
    
  </style>
</head>

<body>
  
  <div id="terminal"></div>
  
  <script>
    
    const terminalEl = document.getElementById('terminal')
    const term = new Terminal({
			cursorBlink: true,
      fontSize: 10,
      allowProposedApi: true
    });
    
    const ws = new WebSocket('ws://localhost:9999');
    const fitAddon = new FitAddon.FitAddon();
    const webglAddon = new WebglAddon.WebglAddon();
    const attachAddon = new AttachAddon.AttachAddon(ws);
    term.open(terminalEl);
    
    term.loadAddon(fitAddon)
    term.loadAddon(webglAddon)
    term.loadAddon(unicodeAddon)
    term.loadAddon(attachAddon)
    
    function sendRowsAndCols() {
      const dimensions = {
        rows: term.rows,
        cols: term.cols
      }
      ws.send(JSON.stringify(dimensions))
    }
    
    fitAddon.fit();
    setTimeout(sendRowsAndCols, 500);
    
    window.onresize = function () {
      fitAddon.fit();
      sendRowsAndCols();
    }
    
    // This doesn't work also
    /*term.onResize(e => {
      ws.send(JSON.stringify(e))
    })
    
    new ResizeObserver(function (entries) => {
      fitAddon.fit()
    }).observe(terminalEl)*/
    
  </script>
  
</body>

</html>

/// server

const WebSocket = require('ws');
const pty = require('node-pty');


const wss = new WebSocket.Server({ port: 9999 });

wss.on("connection", (ws) => {
  console.log("connected")
  const term = pty.spawn('bash', [], {
    name: 'xterm',
    cols: 57,
    rows: 60,
    cwd: process.env.HOME,
    env: process.env,
  });

  term.onData((data) => {
    ws.send(data);
  });

  ws.on('message', (message) => {
    if (message.indexOf("rows") > -1) {
      try {
        const dimensions = JSON.parse(message)
        term.resize(dimensions.cols, dimensions.rows)
      } catch (err) {
        ws.send(err)
      }
    } else {
      term.write(message);
    }
  });

  ws.on('close', () => {
    console.log("closed")
    term.kill();
  });
})

Tyriar · 2023-09-11T14:06:48Z

Tyriar
Sep 11, 2023
Maintainer

This looks like an issue on your end. Note that we don't have particularly good support for mobile right now so you might have to handle resize without the fit addon.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resize issue with fitAddon #4788

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Resize issue with fitAddon #4788

legend-sabbir Sep 2, 2023

Details

Steps to reproduce

Replies: 1 comment

Tyriar Sep 11, 2023 Maintainer

legend-sabbir
Sep 2, 2023

Tyriar
Sep 11, 2023
Maintainer