From 8dd80566d056ee74a4541e4b28ffe491f784ec98 Mon Sep 17 00:00:00 2001 From: paris Date: Mon, 17 Nov 2014 17:08:14 +0200 Subject: [PATCH 1/2] Fix #9 - Calculate character width by using the cursor instead of custom hack in fit addon - Increment character width by 1 in Firefox, since it seems to have a bug in calculating width of specific elements --- addons/fit/fit.js | 28 ++++++++++++++-------------- bower.json | 2 +- docs/conf.py | 4 ++-- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/addons/fit/fit.js b/addons/fit/fit.js index da57644d..9da39b25 100644 --- a/addons/fit/fit.js +++ b/addons/fit/fit.js @@ -27,23 +27,25 @@ Xterm.prototype.proposeGeometry = function () { var container = this.rowContainer, subjectRow = this.rowContainer.firstElementChild, + cursor = this.element.querySelector('.terminal-cursor'), rows, - contentBuffer, characterWidth, cols; - subjectRow.style.display = 'inline'; + characterWidth = Math.ceil(cursor.offsetWidth); + + /* + * The following hack takes place in order to get "fit" work properly + * in Mozilla Firefox. + * Most probably, because of a dimension calculation bug, Firefox + * calculates the width to be 1px less than it is actually drawn on + * screen. + */ + if (navigator.userAgent.match(/Gecko/)) { + characterWidth++; + } - contentBuffer = subjectRow.innerHTML; - - subjectRow.innerHTML = ' '; /* Arbitrary character to calculate its dimensions */ - characterWidth = parseInt(subjectRow.offsetWidth); - characterHeight = parseInt(subjectRow.offsetHeight); - - subjectRow.style.display = ''; - - cols = container.offsetWidth / characterWidth; - cols = parseInt(cols); + cols = parseInt(container.offsetWidth / characterWidth); var parentElementStyle = window.getComputedStyle(this.element.parentElement), parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')), @@ -54,8 +56,6 @@ rows = parseInt(availableHeight / rowHeight); - subjectRow.innerHTML = contentBuffer; /* Replace original content */ - var geometry = { 'cols': cols, 'rows': rows diff --git a/bower.json b/bower.json index 3658d46e..2ef9f1e0 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { "name": "xterm.js", - "version": "0.25", + "version": "0.26", "ignore": ["demo", "docs", "test", ".gitignore"] } diff --git a/docs/conf.py b/docs/conf.py index 877829c3..66d62b7f 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -51,9 +51,9 @@ copyright = u'2014, SourceLair Limited' # built documents. # # The short X.Y version. -version = '0.25' +version = '0.26' # The full version, including alpha/beta/rc tags. -release = '0.25 Alpha' +release = '0.26 Alpha' # The language for content autogenerated by Sphinx. Refer to documentation # for a list of supported languages. From 37be8e0f3481ebd2d64444ae5f0642cdc1b127b7 Mon Sep 17 00:00:00 2001 From: akalipetis Date: Mon, 24 Nov 2014 17:24:21 +0200 Subject: [PATCH 2/2] Fixed correct fitting of Terminal --- addons/fit/fit.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/addons/fit/fit.js b/addons/fit/fit.js index 9da39b25..3ad264b0 100644 --- a/addons/fit/fit.js +++ b/addons/fit/fit.js @@ -25,15 +25,31 @@ } })(function (Xterm) { Xterm.prototype.proposeGeometry = function () { - var container = this.rowContainer, + var parentElementStyle = window.getComputedStyle(this.element.parentElement), + parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')), + parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')), + elementStyle = window.getComputedStyle(this.element), + elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')), + elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')), + availableHeight = parentElementHeight - elementPaddingVer, + availableWidth = parentElementWidth - elementPaddingHor, + container = this.rowContainer, subjectRow = this.rowContainer.firstElementChild, - cursor = this.element.querySelector('.terminal-cursor'), + contentBuffer = subjectRow.innerHTML, + characterHeight, rows, characterWidth, - cols; + cols, + geometry; - characterWidth = Math.ceil(cursor.offsetWidth); - + subjectRow.style.display = 'inline'; + subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace + characterWidth = parseInt(subjectRow.offsetWidth); + subjectRow.style.display = ''; // Revert style before calculating height, since they differ. + characterHeight = parseInt(subjectRow.offsetHeight); + subjectRow.innerHTML = contentBuffer; + + rows = parseInt(availableHeight / characterHeight); /* * The following hack takes place in order to get "fit" work properly * in Mozilla Firefox. @@ -41,26 +57,12 @@ * calculates the width to be 1px less than it is actually drawn on * screen. */ - if (navigator.userAgent.match(/Gecko/)) { + if (navigator.userAgent.match(/Firefox/)) { characterWidth++; } + cols = parseInt(availableWidth / characterWidth); - cols = parseInt(container.offsetWidth / characterWidth); - - var parentElementStyle = window.getComputedStyle(this.element.parentElement), - parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')), - elementStyle = window.getComputedStyle(this.element), - elementPadding = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')), - availableHeight = parentElementHeight - elementPadding, - rowHeight = this.rowContainer.firstElementChild.offsetHeight; - - rows = parseInt(availableHeight / rowHeight); - - var geometry = { - 'cols': cols, - 'rows': rows - }; - + geometry = {cols: cols, rows: rows}; return geometry; };