+++ /dev/null
-/**
- * Copyright (c) 2018 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
-import { ITerminal } from '../../Types';
-import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
-import { Disposable } from 'common/Lifecycle';
-import { IColorSet, ILinkifierEvent } from 'browser/Types';
-import { ICharSizeService } from 'browser/services/Services';
-import { IOptionsService } from 'common/services/Services';
-
-const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
-const ROW_CONTAINER_CLASS = 'xterm-rows';
-const FG_CLASS_PREFIX = 'xterm-fg-';
-const BG_CLASS_PREFIX = 'xterm-bg-';
-const FOCUS_CLASS = 'xterm-focus';
-const SELECTION_CLASS = 'xterm-selection';
-
-let nextTerminalId = 1;
-
-/**
- * A fallback renderer for when canvas is slow. This is not meant to be
- * particularly fast or feature complete, more just stable and usable for when
- * canvas is not an option.
- */
-export class DomRenderer extends Disposable implements IRenderer {
- private _rowFactory: DomRendererRowFactory;
- private _terminalClass: number = nextTerminalId++;
-
- private _themeStyleElement: HTMLStyleElement;
- private _dimensionsStyleElement: HTMLStyleElement;
- private _rowContainer: HTMLElement;
- private _rowElements: HTMLElement[] = [];
- private _selectionContainer: HTMLElement;
-
- public dimensions: IRenderDimensions;
-
- constructor(
- private _terminal: ITerminal,
- private _colors: IColorSet,
- private _charSizeService: ICharSizeService,
- private _optionsService: IOptionsService
- ) {
- super();
-
- this._rowContainer = document.createElement('div');
- this._rowContainer.classList.add(ROW_CONTAINER_CLASS);
- this._rowContainer.style.lineHeight = 'normal';
- this._rowContainer.setAttribute('aria-hidden', 'true');
- this._refreshRowElements(this._terminal.cols, this._terminal.rows);
- this._selectionContainer = document.createElement('div');
- this._selectionContainer.classList.add(SELECTION_CLASS);
- this._selectionContainer.setAttribute('aria-hidden', 'true');
-
- this.dimensions = {
- scaledCharWidth: null,
- scaledCharHeight: null,
- scaledCellWidth: null,
- scaledCellHeight: null,
- scaledCharLeft: null,
- scaledCharTop: null,
- scaledCanvasWidth: null,
- scaledCanvasHeight: null,
- canvasWidth: null,
- canvasHeight: null,
- actualCellWidth: null,
- actualCellHeight: null
- };
- this._updateDimensions();
- this._injectCss();
-
- this._rowFactory = new DomRendererRowFactory(document, this._optionsService);
-
- this._terminal.element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
- this._terminal.screenElement.appendChild(this._rowContainer);
- this._terminal.screenElement.appendChild(this._selectionContainer);
-
- this._terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
- this._terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
- }
-
- public dispose(): void {
- this._terminal.element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
- this._terminal.screenElement.removeChild(this._rowContainer);
- this._terminal.screenElement.removeChild(this._selectionContainer);
- this._terminal.screenElement.removeChild(this._themeStyleElement);
- this._terminal.screenElement.removeChild(this._dimensionsStyleElement);
- super.dispose();
- }
-
- private _updateDimensions(): void {
- this.dimensions.scaledCharWidth = this._charSizeService.width * window.devicePixelRatio;
- this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * window.devicePixelRatio);
- this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing);
- this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight);
- this.dimensions.scaledCharLeft = 0;
- this.dimensions.scaledCharTop = 0;
- this.dimensions.scaledCanvasWidth = this.dimensions.scaledCellWidth * this._terminal.cols;
- this.dimensions.scaledCanvasHeight = this.dimensions.scaledCellHeight * this._terminal.rows;
- this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
- this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
- this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
- this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
-
- this._rowElements.forEach(element => {
- element.style.width = `${this.dimensions.canvasWidth}px`;
- element.style.height = `${this.dimensions.actualCellHeight}px`;
- element.style.lineHeight = `${this.dimensions.actualCellHeight}px`;
- // Make sure rows don't overflow onto following row
- element.style.overflow = 'hidden';
- });
-
- if (!this._dimensionsStyleElement) {
- this._dimensionsStyleElement = document.createElement('style');
- this._terminal.screenElement.appendChild(this._dimensionsStyleElement);
- }
-
- const styles =
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` +
- ` display: inline-block;` +
- ` height: 100%;` +
- ` vertical-align: top;` +
- ` width: ${this.dimensions.actualCellWidth}px` +
- `}`;
-
- this._dimensionsStyleElement.innerHTML = styles;
-
- this._selectionContainer.style.height = (<any>this._terminal)._viewportElement.style.height;
- this._terminal.screenElement.style.width = `${this.dimensions.canvasWidth}px`;
- this._terminal.screenElement.style.height = `${this.dimensions.canvasHeight}px`;
- }
-
- public setColors(colors: IColorSet): void {
- this._colors = colors;
- this._injectCss();
- }
-
- private _injectCss(): void {
- if (!this._themeStyleElement) {
- this._themeStyleElement = document.createElement('style');
- this._terminal.screenElement.appendChild(this._themeStyleElement);
- }
-
- // Base CSS
- let styles =
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
- ` color: ${this._colors.foreground.css};` +
- ` background-color: ${this._colors.background.css};` +
- ` font-family: ${this._terminal.options.fontFamily};` +
- ` font-size: ${this._terminal.options.fontSize}px;` +
- `}`;
- // Text styles
- styles +=
- `${this._terminalSelector} span:not(.${BOLD_CLASS}) {` +
- ` font-weight: ${this._terminal.options.fontWeight};` +
- `}` +
- `${this._terminalSelector} span.${BOLD_CLASS} {` +
- ` font-weight: ${this._terminal.options.fontWeightBold};` +
- `}` +
- `${this._terminalSelector} span.${ITALIC_CLASS} {` +
- ` font-style: italic;` +
- `}`;
- // Blink animation
- styles +=
- `@keyframes blink_box_shadow {` +
- ` 50% {` +
- ` box-shadow: none;` +
- ` }` +
- `}`;
- styles +=
- `@keyframes blink_block {` +
- ` 0% {` +
- ` background-color: ${this._colors.cursor.css};` +
- ` color: ${this._colors.cursorAccent.css};` +
- ` }` +
- ` 50% {` +
- ` background-color: ${this._colors.cursorAccent.css};` +
- ` color: ${this._colors.cursor.css};` +
- ` }` +
- `}`;
- // Cursor
- styles +=
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
- ` outline: 1px solid ${this._colors.cursor.css};` +
- ` outline-offset: -1px;` +
- `}` +
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` +
- ` animation: blink_box_shadow 1s step-end infinite;` +
- `}` +
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
- ` animation: blink_block 1s step-end infinite;` +
- `}` +
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
- ` background-color: ${this._colors.cursor.css};` +
- ` color: ${this._colors.cursorAccent.css};` +
- `}` +
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
- ` box-shadow: 1px 0 0 ${this._colors.cursor.css} inset;` +
- `}` +
- `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
- ` box-shadow: 0 -1px 0 ${this._colors.cursor.css} inset;` +
- `}`;
- // Selection
- styles +=
- `${this._terminalSelector} .${SELECTION_CLASS} {` +
- ` position: absolute;` +
- ` top: 0;` +
- ` left: 0;` +
- ` z-index: 1;` +
- ` pointer-events: none;` +
- `}` +
- `${this._terminalSelector} .${SELECTION_CLASS} div {` +
- ` position: absolute;` +
- ` background-color: ${this._colors.selection.css};` +
- `}`;
- // Colors
- this._colors.ansi.forEach((c, i) => {
- styles +=
- `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
- `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
- });
- styles +=
- `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${this._colors.background.css}; }` +
- `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this._colors.foreground.css}; }`;
-
- this._themeStyleElement.innerHTML = styles;
- }
-
- public onDevicePixelRatioChange(): void {
- this._updateDimensions();
- }
-
- private _refreshRowElements(cols: number, rows: number): void {
- // Add missing elements
- for (let i = this._rowElements.length; i <= rows; i++) {
- const row = document.createElement('div');
- this._rowContainer.appendChild(row);
- this._rowElements.push(row);
- }
- // Remove excess elements
- while (this._rowElements.length > rows) {
- this._rowContainer.removeChild(this._rowElements.pop());
- }
- }
-
- public onResize(cols: number, rows: number): void {
- this._refreshRowElements(cols, rows);
- this._updateDimensions();
- }
-
- public onCharSizeChanged(): void {
- this._updateDimensions();
- }
-
- public onBlur(): void {
- this._rowContainer.classList.remove(FOCUS_CLASS);
- }
-
- public onFocus(): void {
- this._rowContainer.classList.add(FOCUS_CLASS);
- }
-
- public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean): void {
- // Remove all selections
- while (this._selectionContainer.children.length) {
- this._selectionContainer.removeChild(this._selectionContainer.children[0]);
- }
-
- // Selection does not exist
- if (!start || !end) {
- return;
- }
-
- // Translate from buffer position to viewport position
- const viewportStartRow = start[1] - this._terminal.buffer.ydisp;
- const viewportEndRow = end[1] - this._terminal.buffer.ydisp;
- const viewportCappedStartRow = Math.max(viewportStartRow, 0);
- const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
-
- // No need to draw the selection
- if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
- return;
- }
-
- // Create the selections
- const documentFragment = document.createDocumentFragment();
-
- if (columnSelectMode) {
- documentFragment.appendChild(
- this._createSelectionElement(viewportCappedStartRow, start[0], end[0], viewportCappedEndRow - viewportCappedStartRow + 1)
- );
- } else {
- // Draw first row
- const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
- const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
- documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
- // Draw middle rows
- const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
- documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount));
- // Draw final row
- if (viewportCappedStartRow !== viewportCappedEndRow) {
- // Only draw viewportEndRow if it's not the same as viewporttartRow
- const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
- documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
- }
- }
- this._selectionContainer.appendChild(documentFragment);
- }
-
- /**
- * Creates a selection element at the specified position.
- * @param row The row of the selection.
- * @param colStart The start column.
- * @param colEnd The end columns.
- */
- private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
- const element = document.createElement('div');
- element.style.height = `${rowCount * this.dimensions.actualCellHeight}px`;
- element.style.top = `${row * this.dimensions.actualCellHeight}px`;
- element.style.left = `${colStart * this.dimensions.actualCellWidth}px`;
- element.style.width = `${this.dimensions.actualCellWidth * (colEnd - colStart)}px`;
- return element;
- }
-
- public onCursorMove(): void {
- // No-op, the cursor is drawn when rows are drawn
- }
-
- public onOptionsChanged(): void {
- // Force a refresh
- this._updateDimensions();
- this._injectCss();
- this._terminal.refresh(0, this._terminal.rows - 1);
- }
-
- public clear(): void {
- this._rowElements.forEach(e => e.innerHTML = '');
- }
-
- public renderRows(start: number, end: number): void {
- const terminal = this._terminal;
-
- const cursorAbsoluteY = terminal.buffer.ybase + terminal.buffer.y;
- const cursorX = this._terminal.buffer.x;
- const cursorBlink = this._terminal.options.cursorBlink;
-
- for (let y = start; y <= end; y++) {
- const rowElement = this._rowElements[y];
- rowElement.innerHTML = '';
-
- const row = y + terminal.buffer.ydisp;
- const lineData = terminal.buffer.lines.get(row);
- const cursorStyle = terminal.options.cursorStyle;
- rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, terminal.cols));
- }
- }
-
- private get _terminalSelector(): string {
- return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
- }
-
- public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; }
- public deregisterCharacterJoiner(joinerId: number): boolean { return false; }
-
- private _onLinkHover(e: ILinkifierEvent): void {
- this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
- }
-
- private _onLinkLeave(e: ILinkifierEvent): void {
- this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, false);
- }
-
- private _setCellUnderline(x: number, x2: number, y: number, y2: number, cols: number, enabled: boolean): void {
- while (x !== x2 || y !== y2) {
- const row = this._rowElements[y];
- if (!row) {
- return;
- }
- const span = <HTMLElement>row.children[x];
- if (span) {
- span.style.textDecoration = enabled ? 'underline' : 'none';
- }
- if (++x >= cols) {
- x = 0;
- y++;
- }
- }
- }
-}
projects / VSoRC / .git / blobdiff