Support padding on the .xterm element

Author: mofux

Diff for: demo/index.html

@@ -61,6 +61,10 @@ <h3>Size</h3>
                 <label for="rows">Rows</label>
                 <input type="number" id="rows" />
               </div>
+              <div style="display: inline-block; margin-right: 16px;">
+                <label for="padding">Padding</label>
+                <input type="number" id="padding" />
+              </div>
             </div>
           </div>
         </div>

Diff for: demo/main.js

@@ -32,23 +32,27 @@ var terminalContainer = document.getElementById('terminal-container'),
       bellStyle: document.querySelector('#option-bell-style')
     },
     colsElement = document.getElementById('cols'),
-    rowsElement = document.getElementById('rows');
+    rowsElement = document.getElementById('rows'),
+    paddingElement = document.getElementById('padding');
 
 function setTerminalSize() {
   var cols = parseInt(colsElement.value, 10);
   var rows = parseInt(rowsElement.value, 10);
-  var viewportElement = document.querySelector('.xterm-viewport');
-  var scrollBarWidth = viewportElement.offsetWidth - viewportElement.clientWidth;
-  var width = (cols * term.renderer.dimensions.actualCellWidth + 20 /*room for scrollbar*/).toString() + 'px';
+  var width = (cols * term.renderer.dimensions.actualCellWidth + term.viewport.scrollBarWidth).toString() + 'px';
   var height = (rows * term.renderer.dimensions.actualCellHeight).toString() + 'px';
-
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
-  term.resize(cols, rows);
+  term.fit();
+}
+
+function setPadding() {
+  term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
+  term.fit();
 }
 
 colsElement.addEventListener('change', setTerminalSize);
 rowsElement.addEventListener('change', setTerminalSize);
+paddingElement.addEventListener('change', setPadding);
 
 actionElements.findNext.addEventListener('keypress', function (e) {
   if (e.key === "Enter") {
@@ -114,6 +118,7 @@ function createTerminal() {
   setTimeout(function () {
     colsElement.value = term.cols;
     rowsElement.value = term.rows;
+    paddingElement.value = 0;
 
     // Set terminal size again to set the specific dimensions on the demo
     setTerminalSize();

Diff for: src/Interfaces.ts

@@ -33,6 +33,7 @@ export interface ILinkifierAccessor {
 }
 
 export interface ITerminal extends ILinkifierAccessor, IBufferAccessor, IElementAccessor, IEventEmitter {
+  screenElement: HTMLElement;
   selectionManager: ISelectionManager;
   charMeasure: ICharMeasure;
   textarea: HTMLTextAreaElement;
@@ -48,6 +49,7 @@ export interface ITerminal extends ILinkifierAccessor, IBufferAccessor, IElement
   buffers: IBufferSet;
   isFocused: boolean;
   mouseHelper: IMouseHelper;
+  viewport: IViewport;
   bracketedPasteMode: boolean;
 
   /**
@@ -184,6 +186,7 @@ export interface IMouseHelper {
 }
 
 export interface IViewport {
+  scrollBarWidth: number;
   syncScrollArea(): void;
   onWheel(ev: WheelEvent): void;
   onTouchStart(ev: TouchEvent): void;

Diff for: src/SelectionManager.ts

@@ -274,7 +274,7 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    * @param event The mouse event.
    */
   private _getMouseBufferCoords(event: MouseEvent): [number, number] {
-    const coords = this._terminal.mouseHelper.getCoords(event, this._terminal.element, this._charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows, true);
+    const coords = this._terminal.mouseHelper.getCoords(event, this._terminal.screenElement, this._charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows, true);
     if (!coords) {
       return null;
     }
@@ -294,7 +294,7 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
    * @param event The mouse event.
    */
   private _getMouseEventScrollAmount(event: MouseEvent): number {
-    let offset = MouseHelper.getCoordsRelativeToElement(event, this._terminal.element)[1];
+    let offset = MouseHelper.getCoordsRelativeToElement(event, this._terminal.screenElement)[1];
     const terminalHeight = this._terminal.rows * Math.ceil(this._charMeasure.height * this._terminal.options.lineHeight);
     if (offset >= 0 && offset <= terminalHeight) {
       return 0;

Diff for: src/Terminal.ts

@@ -92,6 +92,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
 export class Terminal extends EventEmitter implements ITerminal, IInputHandlingTerminal {
   public textarea: HTMLTextAreaElement;
   public element: HTMLElement;
+  public screenElement: HTMLElement;
 
   /**
    * The HTMLElement that the terminal is created in, set by Terminal.open.
@@ -593,6 +594,10 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.viewportScrollArea.classList.add('xterm-scroll-area');
     this.viewportElement.appendChild(this.viewportScrollArea);
 
+    this.screenElement = document.createElement('div');
+    this.screenElement.classList.add('xterm-screen');
+    fragment.appendChild(this.screenElement);
+
     this._mouseZoneManager = new MouseZoneManager(this);
     this.on('scroll', () => this._mouseZoneManager.clearAll());
     this.linkifier.attachToDom(this._mouseZoneManager);
@@ -719,7 +724,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
       button = getButton(ev);
 
       // get mouse coordinates
-      pos = self.mouseHelper.getRawByteCoords(ev, self.element, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
+      pos = self.mouseHelper.getRawByteCoords(ev, self.screenElement, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
       if (!pos) return;
 
       sendEvent(button, pos);
@@ -745,7 +750,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     // ^[[M 3<^[[M@4<^[[M@5<^[[M@6<^[[M@7<^[[M#7<
     function sendMove(ev: MouseEvent): void {
       let button = pressed;
-      let pos = self.mouseHelper.getRawByteCoords(ev, self.element, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
+      let pos = self.mouseHelper.getRawByteCoords(ev, self.screenElement, self.charMeasure, self.options.lineHeight, self.cols, self.rows);
       if (!pos) return;
 
       // buttons marked as motions

Diff for: src/Viewport.ts

@@ -12,6 +12,7 @@ import { IColorSet } from './renderer/Interfaces';
  * Logic for the virtual scroll bar is included in this object.
  */
 export class Viewport implements IViewport {
+  public scrollBarWidth: number = 0;
   private currentRowHeight: number = 0;
   private lastRecordedBufferLength: number = 0;
   private lastRecordedViewportHeight: number = 0;
@@ -31,6 +32,10 @@ export class Viewport implements IViewport {
     private scrollArea: HTMLElement,
     private charMeasure: CharMeasure
   ) {
+    // Measure the width of the scrollbar. If it is 0 we can assume it's an OSX overlay scrollbar.
+    // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that case,
+    // therefore we account 15px to make it visible
+    this.scrollBarWidth = (this.viewportElement.offsetWidth - this.scrollArea.offsetWidth) || 15;
     this.viewportElement.addEventListener('scroll', this.onScroll.bind(this));
 
     // Perform this async to ensure the CharMeasure is ready.
@@ -48,13 +53,8 @@ export class Viewport implements IViewport {
   private refresh(): void {
     if (this.charMeasure.height > 0) {
       this.currentRowHeight = this.terminal.renderer.dimensions.scaledCellHeight / window.devicePixelRatio;
-
-      if (this.lastRecordedViewportHeight !== this.terminal.renderer.dimensions.canvasHeight) {
-        this.lastRecordedViewportHeight = this.terminal.renderer.dimensions.canvasHeight;
-        this.viewportElement.style.height = this.lastRecordedViewportHeight + 'px';
-      }
-
-      const newBufferHeight = Math.round(this.currentRowHeight * this.lastRecordedBufferLength);
+      this.lastRecordedViewportHeight = this.viewportElement.offsetHeight;
+      const newBufferHeight = Math.round(this.currentRowHeight * this.lastRecordedBufferLength) + (this.lastRecordedViewportHeight - this.terminal.renderer.dimensions.canvasHeight);
       if (this.lastRecordedBufferHeight !== newBufferHeight) {
         this.lastRecordedBufferHeight = newBufferHeight;
         this.scrollArea.style.height = this.lastRecordedBufferHeight + 'px';

Diff for: src/addons/fit/fit.ts

@@ -21,10 +21,16 @@ export function proposeGeometry(term) {
   var parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
   var parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')) - 17);
   var elementStyle = window.getComputedStyle(term.element);
-  var elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom'));
-  var elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left'));
+  var elementPadding = {
+    top: parseInt(elementStyle.getPropertyValue('padding-top')),
+    bottom: parseInt(elementStyle.getPropertyValue('padding-bottom')),
+    right: parseInt(elementStyle.getPropertyValue('padding-right')),
+    left: parseInt(elementStyle.getPropertyValue('padding-left'))
+  }
+  var elementPaddingVer = elementPadding.top + elementPadding.bottom;
+  var elementPaddingHor = elementPadding.right + elementPadding.left;
   var availableHeight = parentElementHeight - elementPaddingVer;
-  var availableWidth = parentElementWidth - elementPaddingHor;
+  var availableWidth = parentElementWidth - elementPaddingHor - term.viewport.scrollBarWidth;
   var geometry = {
     cols: Math.floor(availableWidth / term.renderer.dimensions.actualCellWidth),
     rows: Math.floor(availableHeight / term.renderer.dimensions.actualCellHeight)

Diff for: src/input/MouseZoneManager.ts

@@ -169,7 +169,7 @@ export class MouseZoneManager implements IMouseZoneManager {
   }
 
   private _findZoneEventAt(e: MouseEvent): IMouseZone {
-    const coords = this._terminal.mouseHelper.getCoords(e, this._terminal.element, this._terminal.charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows);
+    const coords = this._terminal.mouseHelper.getCoords(e, this._terminal.screenElement, this._terminal.charMeasure, this._terminal.options.lineHeight, this._terminal.cols, this._terminal.rows);
     if (!coords) {
       return null;
     }

Diff for: src/renderer/Renderer.ts

@@ -36,10 +36,10 @@ export class Renderer extends EventEmitter implements IRenderer {
       this.colorManager.setTheme(theme);
     }
     this._renderLayers = [
-      new TextRenderLayer(this._terminal.element, 0, this.colorManager.colors),
-      new SelectionRenderLayer(this._terminal.element, 1, this.colorManager.colors),
-      new LinkRenderLayer(this._terminal.element, 2, this.colorManager.colors, this._terminal),
-      new CursorRenderLayer(this._terminal.element, 3, this.colorManager.colors)
+      new TextRenderLayer(this._terminal.screenElement, 0, this.colorManager.colors),
+      new SelectionRenderLayer(this._terminal.screenElement, 1, this.colorManager.colors),
+      new LinkRenderLayer(this._terminal.screenElement, 2, this.colorManager.colors, this._terminal),
+      new CursorRenderLayer(this._terminal.screenElement, 3, this.colorManager.colors)
     ];
     this.dimensions = {
       scaledCharWidth: null,
@@ -117,6 +117,10 @@ export class Renderer extends EventEmitter implements IRenderer {
       this._terminal.refresh(0, this._terminal.rows - 1);
     }
 
+    // Resize the screen
+    this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth + this._terminal.viewport.scrollBarWidth}px`;
+    this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
+
     this.emit('resize', {
       width: this.dimensions.canvasWidth,
       height: this.dimensions.canvasHeight

Diff for: src/utils/TestUtils.test.ts

@@ -17,6 +17,7 @@ export class MockTerminal implements ITerminal {
   isFocused: boolean;
   options: ITerminalOptions = {};
   element: HTMLElement;
+  screenElement: HTMLElement;
   rowContainer: HTMLElement;
   selectionContainer: HTMLElement;
   selectionManager: ISelectionManager;
@@ -33,6 +34,7 @@ export class MockTerminal implements ITerminal {
   scrollback: number;
   buffers: IBufferSet;
   buffer: IBuffer;
+  viewport: IViewport;
   handler(data: string): void {
     throw new Error('Method not implemented.');
   }
@@ -244,6 +246,7 @@ export class MockRenderer implements IRenderer {
 }
 
 export class MockViewport implements IViewport {
+  scrollBarWidth: number = 0;
   onThemeChanged(colors: IColorSet): void {
     throw new Error('Method not implemented.');
   }

Diff for: src/xterm.css

@@ -96,9 +96,19 @@
     background-color: #000;
     overflow-y: scroll;
     cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+    pointer-events: none;
 }
 
-.xterm canvas {
+.xterm .xterm-screen canvas {
     position: absolute;
     left: 0;
     top: 0;

Diff for: typings/xterm.d.ts

@@ -180,6 +180,11 @@ declare module 'xterm' {
      * The element containing the terminal.
      */
     element: HTMLElement;
+    
+    /**
+     * The element containing the rendered screen content.
+     */
+    screenElement: HTMLElement;
 
     /**
      * The textarea that accepts input for the terminal.