From cfe936a0b486c32735fbc6edd50d7b80b88102d4 Mon Sep 17 00:00:00 2001 From: Benjamin Woodruff Date: Wed, 7 Mar 2018 23:15:37 -0800 Subject: [PATCH 1/2] Merge ICharAtlasRequest with ICharAtlasConfig ICharAtlasRequest and ICharAtlasConfig need almost exactly the same set of information, so it's simpler if we just merge the two types. As an added bonus, this also adds devicePixelRatio to the config, which helps guarantee that we won't ever accidentally end up with an atlas using a different pixel ratio than we need. --- src/renderer/Types.ts | 11 ++---- src/renderer/atlas/CharAtlas.ts | 20 ++--------- src/renderer/atlas/CharAtlasUtils.ts | 6 ++-- src/renderer/atlas/Types.ts | 14 -------- src/shared/Types.ts | 13 +++++++ src/shared/atlas/CharAtlasGenerator.ts | 48 +++++++++----------------- src/shared/atlas/Types.ts | 15 ++++++++ 7 files changed, 55 insertions(+), 72 deletions(-) create mode 100644 src/shared/Types.ts diff --git a/src/renderer/Types.ts b/src/renderer/Types.ts index 1885d059..8c464bec 100644 --- a/src/renderer/Types.ts +++ b/src/renderer/Types.ts @@ -5,6 +5,7 @@ import { ITerminal } from '../Types'; import { IEventEmitter, ITheme } from 'xterm'; +import { IColorSet } from '../shared/Types'; /** * Flags used to render terminal text properly. @@ -39,14 +40,8 @@ export interface IColorManager { colors: IColorSet; } -export interface IColorSet { - foreground: string; - background: string; - cursor: string; - cursorAccent: string; - selection: string; - ansi: string[]; -} +// TODO: We should probably rewrite the imports for IColorSet, but there's a lot of them +export { IColorSet }; export interface IRenderDimensions { scaledCharWidth: number; diff --git a/src/renderer/atlas/CharAtlas.ts b/src/renderer/atlas/CharAtlas.ts index d688d328..2ad6c6fc 100644 --- a/src/renderer/atlas/CharAtlas.ts +++ b/src/renderer/atlas/CharAtlas.ts @@ -5,9 +5,9 @@ import { ITerminal } from '../../Types'; import { IColorSet } from '../Types'; -import { ICharAtlasConfig } from './Types'; +import { ICharAtlasConfig } from '../../shared/atlas/Types'; import { isFirefox } from '../../shared/utils/Browser'; -import { generateCharAtlas, ICharAtlasRequest } from '../../shared/atlas/CharAtlasGenerator'; +import { generateCharAtlas } from '../../shared/atlas/CharAtlasGenerator'; import { generateConfig, configEquals } from './CharAtlasUtils'; interface ICharAtlasCacheEntry { @@ -63,22 +63,8 @@ export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledC return canvas; }; - const charAtlasConfig: ICharAtlasRequest = { - scaledCharWidth, - scaledCharHeight, - fontSize: terminal.options.fontSize, - fontFamily: terminal.options.fontFamily, - fontWeight: terminal.options.fontWeight, - fontWeightBold: terminal.options.fontWeightBold, - background: colors.background, - foreground: colors.foreground, - ansiColors: colors.ansi, - devicePixelRatio: window.devicePixelRatio, - allowTransparency: terminal.options.allowTransparency - }; - const newEntry: ICharAtlasCacheEntry = { - bitmap: generateCharAtlas(window, canvasFactory, charAtlasConfig), + bitmap: generateCharAtlas(window, canvasFactory, newConfig), config: newConfig, ownedBy: [terminal] }; diff --git a/src/renderer/atlas/CharAtlasUtils.ts b/src/renderer/atlas/CharAtlasUtils.ts index 57e362af..5b9a2838 100644 --- a/src/renderer/atlas/CharAtlasUtils.ts +++ b/src/renderer/atlas/CharAtlasUtils.ts @@ -6,7 +6,7 @@ import { ITerminal } from '../../Types'; import { ITheme } from 'xterm'; import { IColorSet } from '../Types'; -import { ICharAtlasConfig } from './Types'; +import { ICharAtlasConfig } from '../../shared/atlas/Types'; export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: ITerminal, colors: IColorSet): ICharAtlasConfig { const clonedColors = { @@ -18,6 +18,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number ansi: colors.ansi.slice(0, 16) }; return { + devicePixelRatio: window.devicePixelRatio, scaledCharWidth, scaledCharHeight, fontFamily: terminal.options.fontFamily, @@ -35,7 +36,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean return false; } } - return a.fontFamily === b.fontFamily && + return a.devicePixelRatio === b.devicePixelRatio && + a.fontFamily === b.fontFamily && a.fontSize === b.fontSize && a.fontWeight === b.fontWeight && a.fontWeightBold === b.fontWeightBold && diff --git a/src/renderer/atlas/Types.ts b/src/renderer/atlas/Types.ts index a79cb327..34f01d39 100644 --- a/src/renderer/atlas/Types.ts +++ b/src/renderer/atlas/Types.ts @@ -3,19 +3,5 @@ * @license MIT */ -import { FontWeight } from 'xterm'; -import { IColorSet } from '../Types'; - export const INVERTED_DEFAULT_COLOR = -1; export const DIM_OPACITY = 0.5; - -export interface ICharAtlasConfig { - fontSize: number; - fontFamily: string; - fontWeight: FontWeight; - fontWeightBold: FontWeight; - scaledCharWidth: number; - scaledCharHeight: number; - allowTransparency: boolean; - colors: IColorSet; -} diff --git a/src/shared/Types.ts b/src/shared/Types.ts new file mode 100644 index 00000000..0407c2ef --- /dev/null +++ b/src/shared/Types.ts @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2017 The xterm.js authors. All rights reserved. + * @license MIT + */ + +export interface IColorSet { + foreground: string; + background: string; + cursor: string; + cursorAccent: string; + selection: string; + ansi: string[]; +} diff --git a/src/shared/atlas/CharAtlasGenerator.ts b/src/shared/atlas/CharAtlasGenerator.ts index cf17bbb8..10112efa 100644 --- a/src/shared/atlas/CharAtlasGenerator.ts +++ b/src/shared/atlas/CharAtlasGenerator.ts @@ -4,7 +4,7 @@ */ import { FontWeight } from 'xterm'; -import { CHAR_ATLAS_CELL_SPACING } from './Types'; +import { CHAR_ATLAS_CELL_SPACING, ICharAtlasConfig } from './Types'; import { isFirefox } from '../utils/Browser'; declare const Promise: any; @@ -16,41 +16,27 @@ export interface IOffscreenCanvas { transferToImageBitmap(): ImageBitmap; } -export interface ICharAtlasRequest { - scaledCharWidth: number; - scaledCharHeight: number; - fontSize: number; - fontFamily: string; - fontWeight: FontWeight; - fontWeightBold: FontWeight; - background: string; - foreground: string; - ansiColors: string[]; - devicePixelRatio: number; - allowTransparency: boolean; -} - /** * Generates a char atlas. * @param context The window or worker context. * @param canvasFactory A function to generate a canvas with a width or height. * @param request The config for the new char atlas. */ -export function generateCharAtlas(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, request: ICharAtlasRequest): HTMLCanvasElement | Promise { - const cellWidth = request.scaledCharWidth + CHAR_ATLAS_CELL_SPACING; - const cellHeight = request.scaledCharHeight + CHAR_ATLAS_CELL_SPACING; +export function generateCharAtlas(context: Window, canvasFactory: (width: number, height: number) => HTMLCanvasElement | IOffscreenCanvas, config: ICharAtlasConfig): HTMLCanvasElement | Promise { + const cellWidth = config.scaledCharWidth + CHAR_ATLAS_CELL_SPACING; + const cellHeight = config.scaledCharHeight + CHAR_ATLAS_CELL_SPACING; const canvas = canvasFactory( /*255 ascii chars*/255 * cellWidth, (/*default+default bold*/2 + /*0-15*/16) * cellHeight ); - const ctx = canvas.getContext('2d', {alpha: request.allowTransparency}); + const ctx = canvas.getContext('2d', {alpha: config.allowTransparency}); - ctx.fillStyle = request.background; + ctx.fillStyle = config.colors.background; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.save(); - ctx.fillStyle = request.foreground; - ctx.font = getFont(request.fontWeight, request); + ctx.fillStyle = config.colors.foreground; + ctx.font = getFont(config.fontWeight, config); ctx.textBaseline = 'top'; // Default color @@ -64,7 +50,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number } // Default color bold ctx.save(); - ctx.font = getFont(request.fontWeightBold, request); + ctx.font = getFont(config.fontWeightBold, config); for (let i = 0; i < 256; i++) { ctx.save(); ctx.beginPath(); @@ -76,11 +62,11 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number ctx.restore(); // Colors 0-15 - ctx.font = getFont(request.fontWeight, request); + ctx.font = getFont(config.fontWeight, config); for (let colorIndex = 0; colorIndex < 16; colorIndex++) { // colors 8-15 are bold if (colorIndex === 8) { - ctx.font = getFont(request.fontWeightBold, request); + ctx.font = getFont(config.fontWeightBold, config); } const y = (colorIndex + 2) * cellHeight; // Draw ascii characters @@ -89,7 +75,7 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number ctx.beginPath(); ctx.rect(i * cellWidth, y, cellWidth, cellHeight); ctx.clip(); - ctx.fillStyle = request.ansiColors[colorIndex]; + ctx.fillStyle = config.colors.ansi[colorIndex]; ctx.fillText(String.fromCharCode(i), i * cellWidth, y); ctx.restore(); } @@ -114,9 +100,9 @@ export function generateCharAtlas(context: Window, canvasFactory: (width: number const charAtlasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Remove the background color from the image so characters may overlap - const r = parseInt(request.background.substr(1, 2), 16); - const g = parseInt(request.background.substr(3, 2), 16); - const b = parseInt(request.background.substr(5, 2), 16); + const r = parseInt(config.colors.background.substr(1, 2), 16); + const g = parseInt(config.colors.background.substr(3, 2), 16); + const b = parseInt(config.colors.background.substr(5, 2), 16); clearColor(charAtlasImageData, r, g, b); return context.createImageBitmap(charAtlasImageData); @@ -135,6 +121,6 @@ function clearColor(imageData: ImageData, r: number, g: number, b: number): void } } -function getFont(fontWeight: FontWeight, request: ICharAtlasRequest): string { - return `${fontWeight} ${request.fontSize * request.devicePixelRatio}px ${request.fontFamily}`; +function getFont(fontWeight: FontWeight, config: ICharAtlasConfig): string { + return `${fontWeight} ${config.fontSize * config.devicePixelRatio}px ${config.fontFamily}`; } diff --git a/src/shared/atlas/Types.ts b/src/shared/atlas/Types.ts index e8bb6b0a..4a66d554 100644 --- a/src/shared/atlas/Types.ts +++ b/src/shared/atlas/Types.ts @@ -3,4 +3,19 @@ * @license MIT */ +import { FontWeight } from 'xterm'; +import { IColorSet } from '../Types'; + export const CHAR_ATLAS_CELL_SPACING = 1; + +export interface ICharAtlasConfig { + devicePixelRatio: number; + fontSize: number; + fontFamily: string; + fontWeight: FontWeight; + fontWeightBold: FontWeight; + scaledCharWidth: number; + scaledCharHeight: number; + allowTransparency: boolean; + colors: IColorSet; +} From efb67edc36d4f3baa2bc5bd6901dba745a555dc7 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 9 Mar 2018 07:11:53 -0800 Subject: [PATCH 2/2] Remove unused CSS rule With #1316, this will resolve Microsoft/vscode#45145 --- src/xterm.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/xterm.css b/src/xterm.css index 16eb283e..3d2e9b62 100644 --- a/src/xterm.css +++ b/src/xterm.css @@ -144,10 +144,6 @@ color: transparent; } -.xterm .xterm-accessibility-tree:focus [id^="xterm-active-item-"] { - outline: 1px solid #F80; -} - .xterm .live-region { position: absolute; left: -9999px;