How to use xterm-addon-fit - 10 common examples

private _createXTerm() {
        if (this._xterm !== undefined) {
            return;
        }
        if (this._ng_xtermholder === null || this._ng_xtermholder === undefined) {
            return null;
        }
        this._fitAddon = new FitAddon();
        this._xterm = new Terminal();
        this._xterm.loadAddon(this._fitAddon);
        this._xterm.open(this._ng_xtermholder.nativeElement);
        this._fitAddon.fit();
        this._setTheme(this._xterm);
        this._xterm.onData((data) => {
            this.api.getIPC().requestToHost({
                session: this.session,
                command: EHostCommands.write,
                data: data
            }, this.session).then((response) => {
                // TODO: feedback based on response
            });
        });
        // Send command to host to create instance of pty
        this.api.getIPC().requestToHost({

constructor(session) {
    this.disposables = new CompositeDisposable();
    this.session = session;

    // Load the Fit Addon
    this.fitAddon = new FitAddon();
    this.session.xterm.loadAddon(this.fitAddon);
    this.disposables.add(this.fitAddon);

    //
    // Observe the Session to know when it is destroyed so that we can
    // clean up our state (i.e. remove event observers).
    //
    this.session.onDidDestroy(this.destroy.bind(this));

    // TODO: Documentation says this should be set for Atom... Research!
    etch.setScheduler(atom.views);
    etch.initialize(this);

    this.observeResizeEvents();
  }

// Clean terminal
  while (terminalContainer.children.length) {
      terminalContainer.removeChild(terminalContainer.children[0]);
  }

  term = new Terminal({
      cursorBlink: true,
      scrollback: 10000,
      tabStopWidth: 10,
      windowsMode: isWindows
      });

  term.loadAddon(new WebLinksAddon());
  searchAddon = new SearchAddon();
  term.loadAddon(searchAddon);
  fitAddon = new FitAddon();
  term.loadAddon(fitAddon);

  term.onResize((size) => {
      if (!pid) {
          return;
      }
      const cols = size.cols;
      const rows = size.rows;
      const url = '/api/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;

      fetch(url, {method: 'POST', headers: myHeaders});
      term.setOption('theme', curTheme);
      term.setOption('fontFamily', curFont);
  });

  protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';

import { FitAddon } from "xterm-addon-fit"
import { WebglAddon } from "xterm-addon-webgl"
import Terminal from "components/Terminal/Terminal"
import ResizeObserver from "components/ResizeObserver/ResizeObserver"
import { useDebounce } from "lib/hooks/useDebounce"
import { ITheme } from "application/themes"

interface TabProps {
    source: AsyncIterableIterator
    theme?: ITheme
    onInput: (msg: string) => void
    onResize: (data: { cols: number; rows: number }) => void
}

const fit = new FitAddon()
const webgl = new WebglAddon()
const addons = [fit, webgl]

const setDocumentTitle = (title: string): void => {
    document.title = title
}

const Tab: FunctionComponent = ({
    source,
    theme,
    onInput,
    onResize,
}) => {
    const debounceFit = useDebounce((): void => fit.fit(), 200)

    return (

didInsertElement() {
    let fitAddon = new FitAddon();
    this.fitAddon = fitAddon;
    this.terminal.loadAddon(fitAddon);

    this.terminal.open(this.element.querySelector('.terminal'));

    fitAddon.fit();
  }

init() {
      const fitAddon = new FitAddon();
      const ligaturesAddon = new LigaturesAddon();
      xterm = new Terminal({
        cursorStyle: "bar",
        fontSize: 12,
        experimentalCharAtlas: 'dynamic',
        fontFamily: "Monaco,Mono,Consolas,Liberation Mono,Menlo,monospace"
      });

      xterm.open(this.$refs.xterm);
      xterm.loadAddon(fitAddon);
      xterm.loadAddon(ligaturesAddon);
      fitAddon.fit();
      const ptyProcess = pty.spawn(shell, [], {
        name: "xterm-color",
        cols: xterm.cols || 80,
        rows: xterm.rows || 30,

const useTerminal = ({ terminal, ref: container }) => {
  const fitAddon = new FitAddon();
  useEffect(
    () => {
      if (!container) {
        return;
      }
      terminal.loadAddon(fitAddon);
      terminal.open(container);
      fitAddon.fit();
    },
    [container],
  );
  return {
    fitAddon,
  };
};

constructor(private appInitService: AppInitService,
              private k8sService: K8sService,
              private messageService: MessageService,
              private changeRef: ChangeDetectorRef,
              private translateService: TranslateService) {
    this.fitAddon = new FitAddon();
    this.searchAddon = new SearchAddon();
    this.webLinkAddon = new WebLinksAddon(this.webLinksHandle);
    this.serviceDetailInfo = new ServiceDetailInfo();
    this.actionIsEnabledEvent = new EventEmitter();
    this.updateProgressEvent = new EventEmitter();
    this.isActionInWIPChange = new EventEmitter();
  }

yellow: window.theme.colors.yellow || colorify("#c4a000", themeColor),
                    blue: window.theme.colors.blue || colorify("#3465a4", themeColor),
                    magenta: window.theme.colors.magenta || colorify("#75507b", themeColor),
                    cyan: window.theme.colors.cyan || colorify("#06989a", themeColor),
                    white: window.theme.colors.white || colorify("#d3d7cf", themeColor),
                    brightBlack: window.theme.colors.brightBlack || colorify("#555753", themeColor),
                    brightRed: window.theme.colors.brightRed || colorify("#ef2929", themeColor),
                    brightGreen: window.theme.colors.brightGreen || colorify("#8ae234", themeColor),
                    brightYellow: window.theme.colors.brightYellow || colorify("#fce94f", themeColor),
                    brightBlue: window.theme.colors.brightBlue || colorify("#729fcf", themeColor),
                    brightMagenta: window.theme.colors.brightMagenta || colorify("#ad7fa8", themeColor),
                    brightCyan: window.theme.colors.brightCyan || colorify("#34e2e2", themeColor),
                    brightWhite: window.theme.colors.brightWhite || colorify("#eeeeec", themeColor)
                }
            });
            let fitAddon = new FitAddon();
            this.term.loadAddon(fitAddon);
            this.term.open(document.getElementById(opts.parentId));
            let ligaturesAddon = new LigaturesAddon();
            this.term.loadAddon(ligaturesAddon);
            this.term.attachCustomKeyEventHandler(e => {
                window.keyboard.keydownHandler(e);
                return true;
            });
            this.term.focus();

            this.Ipc.send("terminal_channel-"+this.port, "Renderer startup");
            this.Ipc.on("terminal_channel-"+this.port, (e, ...args) => {
                switch(args[0]) {
                    case "New cwd":
                        this.cwd = args[1];
                        this.oncwdchange(this.cwd);

constructor(type, branch) {
    this.branch = branch
    this.currentProfile = new CurrentProfile()
    this.id = Math.random()
    this.subscriptions = new CompositeDisposable()
    this.title = ''
    this.ptyId = ipc.callMain('pty-create', {sessionId: this.id, sessionWindowId: activeWindow().id})
    this.type = type || 'default'
    this.fitAddon = new FitAddon()
    this.searchAddon = new SearchAddon()
    this.webglAddon = new WebglAddon()
    this.xterm = new Terminal(this.settings())
    this.xterm.loadAddon(this.fitAddon)
    this.xterm.loadAddon(this.searchAddon)

    this.resetKeymaps()
    autoBind(this)

    this.bindListeners()
  }