filip mertens
1 year ago
parent
731aecd556
commit
12c0894079
@ -0,0 +1,95 @@ |
||||
/** |
||||
* Copyright (c) 2017 The xterm.js authors. All rights reserved. |
||||
* @license MIT |
||||
*/ |
||||
|
||||
import { Terminal, ITerminalAddon } from 'xterm'; |
||||
|
||||
|
||||
interface ITerminalDimensions { |
||||
/** |
||||
* The number of rows in the terminal. |
||||
*/ |
||||
rows: number; |
||||
|
||||
/** |
||||
* The number of columns in the terminal. |
||||
*/ |
||||
cols: number; |
||||
} |
||||
|
||||
const MINIMUM_COLS = 2; |
||||
const MINIMUM_ROWS = 1; |
||||
|
||||
export class FitAddon implements ITerminalAddon { |
||||
private _terminal: Terminal | undefined; |
||||
|
||||
constructor() {} |
||||
|
||||
public activate(terminal: Terminal): void { |
||||
console.log('FitAddon activate') |
||||
this._terminal = terminal; |
||||
} |
||||
|
||||
public dispose(): void {} |
||||
|
||||
public fit(): void { |
||||
const dims = this.proposeDimensions(); |
||||
console.log('FitAddon fit', dims) |
||||
if (!dims || !this._terminal || isNaN(dims.cols) || isNaN(dims.rows)) { |
||||
return; |
||||
} |
||||
|
||||
// TODO: Remove reliance on private API
|
||||
const core = (this._terminal as any)._core; |
||||
|
||||
// Force a full render
|
||||
if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) { |
||||
core._renderService.clear(); |
||||
this._terminal.resize(dims.cols, dims.rows); |
||||
} |
||||
} |
||||
|
||||
public proposeDimensions(): ITerminalDimensions | undefined { |
||||
if (!this._terminal) { |
||||
return undefined; |
||||
} |
||||
|
||||
if (!this._terminal.element || !this._terminal.element.parentElement) { |
||||
return undefined; |
||||
} |
||||
|
||||
// TODO: Remove reliance on private API
|
||||
const core = (this._terminal as any)._core; |
||||
const dims = core._renderService.dimensions; |
||||
|
||||
if (dims.css.cell.width === 0 || dims.css.cell.height === 0) { |
||||
return undefined; |
||||
} |
||||
|
||||
const scrollbarWidth = this._terminal.options.scrollback === 0 ? |
||||
0 : core.viewport.scrollBarWidth; |
||||
|
||||
console.log('parentElementStyle', this._terminal.element.parentElement) |
||||
|
||||
const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement); |
||||
const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')); |
||||
const parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width'))); |
||||
const elementStyle = window.getComputedStyle(this._terminal.element); |
||||
const 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')) |
||||
}; |
||||
const elementPaddingVer = elementPadding.top + elementPadding.bottom; |
||||
const elementPaddingHor = elementPadding.right + elementPadding.left; |
||||
const availableHeight = parentElementHeight - elementPaddingVer; |
||||
const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth; |
||||
const geometry = { |
||||
cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)), |
||||
rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)) |
||||
}; |
||||
return geometry; |
||||
} |
||||
} |
||||
@ -0,0 +1,240 @@ |
||||
import * as React from 'react' |
||||
import PropTypes from 'prop-types' |
||||
|
||||
import 'xterm/css/xterm.css' |
||||
|
||||
// We are using these as types.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { Terminal, ITerminalOptions, ITerminalAddon } from 'xterm' |
||||
|
||||
interface IProps { |
||||
/** |
||||
* Class name to add to the terminal container. |
||||
*/ |
||||
className?: string |
||||
|
||||
/** |
||||
* Options to initialize the terminal with. |
||||
*/ |
||||
options?: ITerminalOptions |
||||
|
||||
/** |
||||
* An array of XTerm addons to load along with the terminal. |
||||
*/ |
||||
addons?: Array<ITerminalAddon> |
||||
|
||||
/** |
||||
* Adds an event listener for when a binary event fires. This is used to |
||||
* enable non UTF-8 conformant binary messages to be sent to the backend. |
||||
* Currently this is only used for a certain type of mouse reports that |
||||
* happen to be not UTF-8 compatible. |
||||
* The event value is a JS string, pass it to the underlying pty as |
||||
* binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`. |
||||
*/ |
||||
onBinary?(data: string): void |
||||
|
||||
/** |
||||
* Adds an event listener for the cursor moves. |
||||
*/ |
||||
onCursorMove?(): void |
||||
|
||||
/** |
||||
* Adds an event listener for when a data event fires. This happens for |
||||
* example when the user types or pastes into the terminal. The event value |
||||
* is whatever `string` results, in a typical setup, this should be passed |
||||
* on to the backing pty. |
||||
*/ |
||||
onData?(data: string): void |
||||
|
||||
/** |
||||
* Adds an event listener for when a key is pressed. The event value contains the |
||||
* string that will be sent in the data event as well as the DOM event that |
||||
* triggered it. |
||||
*/ |
||||
onKey?(event: { key: string; domEvent: KeyboardEvent }): void |
||||
|
||||
/** |
||||
* Adds an event listener for when a line feed is added. |
||||
*/ |
||||
onLineFeed?(): void |
||||
|
||||
/** |
||||
* Adds an event listener for when a scroll occurs. The event value is the |
||||
* new position of the viewport. |
||||
* @returns an `IDisposable` to stop listening. |
||||
*/ |
||||
onScroll?(newPosition: number): void |
||||
|
||||
/** |
||||
* Adds an event listener for when a selection change occurs. |
||||
*/ |
||||
onSelectionChange?(): void |
||||
|
||||
/** |
||||
* Adds an event listener for when rows are rendered. The event value |
||||
* contains the start row and end rows of the rendered area (ranges from `0` |
||||
* to `Terminal.rows - 1`). |
||||
*/ |
||||
onRender?(event: { start: number; end: number }): void |
||||
|
||||
/** |
||||
* Adds an event listener for when the terminal is resized. The event value |
||||
* contains the new size. |
||||
*/ |
||||
onResize?(event: { cols: number; rows: number }): void |
||||
|
||||
/** |
||||
* Adds an event listener for when an OSC 0 or OSC 2 title change occurs. |
||||
* The event value is the new title. |
||||
*/ |
||||
onTitleChange?(newTitle: string): void |
||||
|
||||
/** |
||||
* Attaches a custom key event handler which is run before keys are |
||||
* processed, giving consumers of xterm.js ultimate control as to what keys |
||||
* should be processed by the terminal and what keys should not. |
||||
* |
||||
* @param event The custom KeyboardEvent handler to attach. |
||||
* This is a function that takes a KeyboardEvent, allowing consumers to stop |
||||
* propagation and/or prevent the default action. The function returns |
||||
* whether the event should be processed by xterm.js. |
||||
*/ |
||||
customKeyEventHandler?(event: KeyboardEvent): boolean |
||||
} |
||||
|
||||
export class Xterm extends React.Component<IProps> { |
||||
/** |
||||
* The ref for the containing element. |
||||
*/ |
||||
terminalRef: React.RefObject<HTMLDivElement> |
||||
|
||||
/** |
||||
* XTerm.js Terminal object. |
||||
*/ |
||||
terminal!: Terminal // This is assigned in the setupTerminal() which is called from the constructor
|
||||
|
||||
static propTypes = { |
||||
className: PropTypes.string, |
||||
options: PropTypes.object, |
||||
addons: PropTypes.array, |
||||
onBinary: PropTypes.func, |
||||
onCursorMove: PropTypes.func, |
||||
onData: PropTypes.func, |
||||
onKey: PropTypes.func, |
||||
onLineFeed: PropTypes.func, |
||||
onScroll: PropTypes.func, |
||||
onSelectionChange: PropTypes.func, |
||||
onRender: PropTypes.func, |
||||
onResize: PropTypes.func, |
||||
onTitleChange: PropTypes.func, |
||||
customKeyEventHandler: PropTypes.func, |
||||
} |
||||
|
||||
constructor(props: IProps) { |
||||
super(props) |
||||
|
||||
console.log('Xterm constructor') |
||||
|
||||
this.terminalRef = React.createRef() |
||||
|
||||
// Bind Methods
|
||||
this.onData = this.onData.bind(this) |
||||
this.onCursorMove = this.onCursorMove.bind(this) |
||||
this.onKey = this.onKey.bind(this) |
||||
this.onBinary = this.onBinary.bind(this) |
||||
this.onLineFeed = this.onLineFeed.bind(this) |
||||
this.onScroll = this.onScroll.bind(this) |
||||
this.onSelectionChange = this.onSelectionChange.bind(this) |
||||
this.onRender = this.onRender.bind(this) |
||||
this.onResize = this.onResize.bind(this) |
||||
this.onTitleChange = this.onTitleChange.bind(this) |
||||
|
||||
this.setupTerminal() |
||||
} |
||||
|
||||
setupTerminal() { |
||||
// Setup the XTerm terminal.
|
||||
this.terminal = new Terminal(this.props.options) |
||||
|
||||
// Load addons if the prop exists.
|
||||
if (this.props.addons) { |
||||
this.props.addons.forEach((addon) => { |
||||
console.log('addon', addon) |
||||
this.terminal.loadAddon(addon) |
||||
}) |
||||
} |
||||
|
||||
// Create Listeners
|
||||
this.terminal.onBinary(this.onBinary) |
||||
this.terminal.onCursorMove(this.onCursorMove) |
||||
this.terminal.onData(this.onData) |
||||
this.terminal.onKey(this.onKey) |
||||
this.terminal.onLineFeed(this.onLineFeed) |
||||
this.terminal.onScroll(this.onScroll) |
||||
this.terminal.onSelectionChange(this.onSelectionChange) |
||||
this.terminal.onRender(this.onRender) |
||||
this.terminal.onResize(this.onResize) |
||||
this.terminal.onTitleChange(this.onTitleChange) |
||||
|
||||
// Add Custom Key Event Handler
|
||||
if (this.props.customKeyEventHandler) { |
||||
this.terminal.attachCustomKeyEventHandler(this.props.customKeyEventHandler) |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
if (this.terminalRef.current) { |
||||
// Creates the terminal within the container element.
|
||||
this.terminal.open(this.terminalRef.current) |
||||
} |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
// When the component unmounts dispose of the terminal and all of its listeners.
|
||||
this.terminal.dispose() |
||||
} |
||||
|
||||
private onBinary(data: string) { |
||||
if (this.props.onBinary) this.props.onBinary(data) |
||||
} |
||||
|
||||
private onCursorMove() { |
||||
if (this.props.onCursorMove) this.props.onCursorMove() |
||||
} |
||||
|
||||
private onData(data: string) { |
||||
if (this.props.onData) this.props.onData(data) |
||||
} |
||||
|
||||
private onKey(event: { key: string; domEvent: KeyboardEvent }) { |
||||
if (this.props.onKey) this.props.onKey(event) |
||||
} |
||||
|
||||
private onLineFeed() { |
||||
if (this.props.onLineFeed) this.props.onLineFeed() |
||||
} |
||||
|
||||
private onScroll(newPosition: number) { |
||||
if (this.props.onScroll) this.props.onScroll(newPosition) |
||||
} |
||||
|
||||
private onSelectionChange() { |
||||
if (this.props.onSelectionChange) this.props.onSelectionChange() |
||||
} |
||||
|
||||
private onRender(event: { start: number; end: number }) { |
||||
if (this.props.onRender) this.props.onRender(event) |
||||
} |
||||
|
||||
private onResize(event: { cols: number; rows: number }) { |
||||
if (this.props.onResize) this.props.onResize(event) |
||||
} |
||||
|
||||
private onTitleChange(newTitle: string) { |
||||
if (this.props.onTitleChange) this.props.onTitleChange(newTitle) |
||||
} |
||||
|
||||
render() { |
||||
return <div className={this.props.className} ref={this.terminalRef} /> |
||||
} |
||||
} |
||||
Loading…
Reference in new issue