diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fb3876..ddfd834 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## Unreleased +* Updated to Xterm 4.2.0. * Switched to node-pty-prebuilt-multiarch (thanks @the-j0k3r, @ozno). * Updated CircleCI configuration for CircleCI 2.0. diff --git a/lib/terminal-session.js b/lib/terminal-session.js index 56df733..a34299f 100644 --- a/lib/terminal-session.js +++ b/lib/terminal-session.js @@ -25,19 +25,17 @@ export default class TerminalSession { handleEvents() { // Process Terminal Input Events - this.xterm.on('data', (data) => { - return this.pty.write(data); - }); + this.xterm.onData(data => this.pty.write(data)); // Process Terminal Output Events - this.pty.on('data', (data) => { + this.pty.onData((data) => { if (this.xterm.element) { return this.xterm.write(data); } }); // Process Terminal Exit Events - this.pty.on('exit', this.destroy.bind(this)); + this.pty.onExit(this.destroy.bind(this)); } @@ -94,7 +92,7 @@ export default class TerminalSession { if (this.pty) this.pty.kill(); // Destroy the Terminal Instance - if (this.xterm) this.xterm.destroy(); + if (this.xterm) this.xterm.dispose(); // Notify any observers that this session is being destroyed. this.emitter.emit('did-destroy', this); diff --git a/lib/terminal-view.js b/lib/terminal-view.js index 17649ff..af041ec 100644 --- a/lib/terminal-view.js +++ b/lib/terminal-view.js @@ -2,7 +2,7 @@ /** @jsx etch.dom */ import { CompositeDisposable } from 'atom'; -import * as fit from 'xterm/lib/addons/fit/fit'; +import { FitAddon } from 'xterm-addon-fit'; import etch from 'etch'; import ThemeMatcher from './theme-matcher'; @@ -14,6 +14,11 @@ export default class TerminalView { 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). @@ -21,7 +26,7 @@ export default class TerminalView { this.session.onDidDestroy(this.destroy.bind(this)); // TODO: Documentation says this should be set for Atom... Research! - // etch.setScheduler(atom.views); + etch.setScheduler(atom.views); etch.initialize(this); this.observeResizeEvents(); @@ -66,6 +71,33 @@ export default class TerminalView { this.resizeObserver.observe(this.element); } + resizeTerminalToFitContainer() { + if (!this.session && !this.session.pty && !this.session.xterm) { + return; + } + + // Set padding and resize the terminal to fit its container (as best as possible) + this.session.xterm.element.style.padding = `${TERMINAL_PADDING}px`; + try { this.fitAddon.fit()} catch(error) { } // TODO: Yuck + + // Check the new size and add additional padding to the top of the + // terminal so that it fills all available space. + // TODO: Extract this into a new calculatePadding() or something... + const elementStyles = getComputedStyle(this.element); + const xtermElementStyles = getComputedStyle(this.session.xterm.element); + const elementHeight = parseInt(elementStyles.height, 10); + const xtermHeight = parseInt(xtermElementStyles.height, 10); + const newHeight = elementHeight - xtermHeight + TERMINAL_PADDING; + + if (!isNaN(newHeight)) { + this.fitAddon.fit(); + this.session.xterm.element.style.paddingBottom = `${newHeight}px`; + } + + // Update Pseudoterminal Process w/New Dimensions + this.session.pty.resize(this.session.xterm.cols, this.session.xterm.rows); + } + // // Resizes the terminal instance to fit its parent container. Once the new // dimensions are established, the calculated columns and rows are passed to @@ -76,28 +108,7 @@ export default class TerminalView { this.openTerminal(); } - // TODO: Move this to resizeTerminalToFitContainer() - if (this.session && this.session.pty && this.session.xterm) { - - // Set padding and resize the terminal to fit its container (as best as possible) - this.session.xterm.element.style.padding = `${TERMINAL_PADDING}px`; - fit.fit(this.session.xterm); - - // Check the new size and add additional padding to the top of the - // terminal so that it fills all available space. - // TODO: Extract this into a new calculatePadding() or something... - const elementStyles = getComputedStyle(this.element); - const xtermElementStyles = getComputedStyle(this.session.xterm.element); - const elementHeight = parseInt(elementStyles.height, 10); - const xtermHeight = parseInt(xtermElementStyles.height, 10); - const newHeight = elementHeight - xtermHeight + TERMINAL_PADDING; - this.session.xterm.element.style.paddingTop = `${newHeight}px`; - fit.fit(this.session.xterm); - - // Update Pseudoterminal Process w/New Dimensions - this.session.pty.resize(this.session.xterm.cols, this.session.xterm.rows); - - } + this.resizeTerminalToFitContainer(); } // diff --git a/package.json b/package.json index 19ffd91..2a33831 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "etch": "^0.14.0", "node-pty-prebuilt-multiarch": "^0.9.0", "rgb-hex": "^3.0.0", - "xterm": "^3.14.5" + "xterm": "^4.2.0", + "xterm-addon-fit": "^0.3.0" }, "deserializers": { "TerminalSession": "deserializeTerminalSession" diff --git a/styles/terminal.less b/styles/terminal.less index 1706d46..6ed391e 100644 --- a/styles/terminal.less +++ b/styles/terminal.less @@ -3,7 +3,7 @@ @import "syntax-variables"; // Import Styles from Xterm -@import (inline) "../node_modules/xterm/dist/xterm.css"; +@import (inline) "../node_modules/xterm/css/xterm.css"; .ui-syntax-color() { @syntax-background-color: hsl(198, 24%, 20%); } .ui-syntax-color(); // fallback color @ui-syntax-color: @syntax-background-color;