From f4293a6dfaed21512e90e978ddba42f60cc60f44 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Fri, 20 Jan 2017 16:47:34 +0200 Subject: [PATCH 1/3] Fix #488: Implement configurable tab width --- demo/index.html | 7 +++++-- demo/main.js | 12 +++++++++--- src/xterm.js | 5 +++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/demo/index.html b/demo/index.html index 764c8442ef..c3721a2886 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,10 +17,13 @@

xterm.js: xterm, in the browser

Options

- +

- + +

+

+

Size

diff --git a/demo/main.js b/demo/main.js index 078b5c8d66..a5f8460ee9 100644 --- a/demo/main.js +++ b/demo/main.js @@ -9,7 +9,8 @@ var term, var terminalContainer = document.getElementById('terminal-container'), optionElements = { cursorBlink: document.querySelector('#option-cursor-blink'), - scrollback: document.querySelector('#option-scrollback') + scrollback: document.querySelector('#option-scrollback'), + tabstopwidth: document.querySelector('#option-tabstopwidth') }, colsElement = document.getElementById('cols'), rowsElement = document.getElementById('rows'); @@ -32,7 +33,11 @@ optionElements.cursorBlink.addEventListener('change', function () { term.setOption('cursorBlink', optionElements.cursorBlink.checked); }); optionElements.scrollback.addEventListener('change', function () { - terminal.setOption('scrollback', parseInt(optionElements.scrollback.value, 10)); + term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10)); +}); +optionElements.tabstopwidth.addEventListener('change', function () { + term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value)); + term.setupStops(); }); createTerminal(); @@ -44,7 +49,8 @@ function createTerminal() { } term = new Terminal({ cursorBlink: optionElements.cursorBlink.checked, - scrollback: parseInt(optionElements.scrollback.value, 10) + scrollback: parseInt(optionElements.scrollback.value, 10), + tabStopWidth: parseInt(optionElements.tabstopwidth.value) }); term.on('resize', function (size) { if (!pid) { diff --git a/src/xterm.js b/src/xterm.js index 7f50295fc5..3c205adbce 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -360,7 +360,8 @@ Terminal.defaults = { screenKeys: false, debug: false, cancelEvents: false, - disableStdin: false + disableStdin: false, + tabStopWidth: 8 // programFeatures: false, // focusKeys: false, }; @@ -2118,7 +2119,7 @@ Terminal.prototype.setupStops = function(i) { i = 0; } - for (; i < this.cols; i += 8) { + for (; i < this.cols; i += this.getOption('tabStopWidth')) { this.tabs[i] = true; } }; From 8cb46f272605e8f7720435d0c7b4d5a14cc49280 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Fri, 20 Jan 2017 18:16:50 +0200 Subject: [PATCH 2/3] Move `tabStopWidth` option callback into `setOption` --- demo/main.js | 1 - src/xterm.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/main.js b/demo/main.js index a5f8460ee9..fda6c8099c 100644 --- a/demo/main.js +++ b/demo/main.js @@ -37,7 +37,6 @@ optionElements.scrollback.addEventListener('change', function () { }); optionElements.tabstopwidth.addEventListener('change', function () { term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value)); - term.setupStops(); }); createTerminal(); diff --git a/src/xterm.js b/src/xterm.js index 3c205adbce..9e44f24fb6 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -434,6 +434,7 @@ Terminal.prototype.setOption = function(key, value) { this.element.classList.toggle(`xterm-cursor-style-underline`, value === 'underline'); this.element.classList.toggle(`xterm-cursor-style-bar`, value === 'bar'); break; + case 'tabStopWidth': this.setupStops(); break; } }; From 6e1628bc3b83896fbe3a63e068b01ce3a42484e3 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Sat, 21 Jan 2017 00:32:39 +0200 Subject: [PATCH 3/3] Fixes on demo based on configurable `tabStopWidth` --- demo/index.html | 4 ++-- demo/main.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/demo/index.html b/demo/index.html index c3721a2886..0d8efac39e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,13 +17,13 @@

xterm.js: xterm, in the browser

Options

- +

- +

Size

diff --git a/demo/main.js b/demo/main.js index fda6c8099c..b262ce537a 100644 --- a/demo/main.js +++ b/demo/main.js @@ -16,8 +16,8 @@ var terminalContainer = document.getElementById('terminal-container'), rowsElement = document.getElementById('rows'); function setTerminalSize () { - var cols = parseInt(colsElement.value), - rows = parseInt(rowsElement.value), + var cols = parseInt(colsElement.value, 10), + rows = parseInt(rowsElement.value, 10), width = (cols * charWidth).toString() + 'px', height = (rows * charHeight).toString() + 'px'; @@ -36,7 +36,7 @@ optionElements.scrollback.addEventListener('change', function () { term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10)); }); optionElements.tabstopwidth.addEventListener('change', function () { - term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value)); + term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10)); }); createTerminal(); @@ -49,7 +49,7 @@ function createTerminal() { term = new Terminal({ cursorBlink: optionElements.cursorBlink.checked, scrollback: parseInt(optionElements.scrollback.value, 10), - tabStopWidth: parseInt(optionElements.tabstopwidth.value) + tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10) }); term.on('resize', function (size) { if (!pid) {