quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-12 20:18:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use xterm.js's fit addon when calling fitResize (#2594)

Browse source 
xterm.js doesn't use `this.term.charMeasure.width` when rendering. It
actually uses:

`Math.floor(this._terminal.charMeasure.width * window.devicePixelRatio)`

This is important, because character widths may be non-integer values,
which means that we can end up with an empty space on the right side of
the terminal window.

Instead of trying to match xterm's behavior, it's probably better if we
just use xterm's `fit` addon. This seems to behave better for me.

We might not want to land this as-is, becuase this addon forces an
annoying hard-coded 17px margin on the right side to compensate for a
scrollbar (see xtermjs/xterm.js#400), but at least for my use-cases,
this is still better than it was.
This commit is contained in:
Benjamin Woodruff 2018-01-15 09:36:02 -08:00 committed by CHaBou
parent 09dc38a41e
commit ac5c14adca
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
lib/components/term.js
View file

@ -1,12 +1,15 @@
/* global Blob,URL,requestAnimationFrame */
import React from 'react';
import {Terminal} from 'xterm';
import * as fit from 'xterm/lib/addons/fit/fit';
import {clipboard} from 'electron';
import * as Color from 'color';
import {PureComponent} from '../base-components';
import terms from '../terms';
import processClipboard from '../utils/paste';
Terminal.applyAddon(fit);
// map old hterm constants to xterm.js
const CURSOR_STYLES = {
BEAM: 'bar',
@ -195,10 +198,7 @@ export default class Term extends PureComponent {
if (!this.termWrapperRef) {
return;
}
const termRect = this.termWrapperRef.getBoundingClientRect();
const cols = Math.floor(termRect.width / this.term.charMeasure.width);
const rows = Math.floor(termRect.height / this.term.charMeasure.height);
this.resize(cols, rows);
this.term.fit();
}
keyboardHandler(e) {
@ -286,7 +286,7 @@ export default class Term extends PureComponent {
>
{this.props.customChildrenBefore}
<div ref={this.onTermWrapperRef} className={css('fit', 'wrapper')}>
<div ref={this.onTermRef} className={css('term')} />
<div ref={this.onTermRef} className={css('fit', 'term')} />
</div>
{this.props.customChildren}
</div>