Use variants for underline dotted.
webgl
This commit is contained in:
tisilent
@@ -11,7 +11,7 @@ import { color, NULL_COLOR, rgba } from 'common/Color';
|
||||
import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
|
||||
import { excludeFromContrastRatioDemands, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
|
||||
import { IUnicodeService } from 'common/services/Services';
|
||||
import { FourKeyMap } from 'common/MultiKeyMap';
|
||||
import { FiveKeyMap } from 'common/MultiKeyMap';
|
||||
import { IdleTaskQueue } from 'common/TaskQueue';
|
||||
import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
|
||||
import { EventEmitter } from 'common/EventEmitter';
|
||||
@@ -58,8 +58,8 @@ let $glyph = undefined;
|
||||
export class TextureAtlas implements ITextureAtlas {
|
||||
private _didWarmUp: boolean = false;
|
||||
|
||||
private _cacheMap: FourKeyMap<number, number, number, number, IRasterizedGlyph> = new FourKeyMap();
|
||||
private _cacheMapCombined: FourKeyMap<string, number, number, number, IRasterizedGlyph> = new FourKeyMap();
|
||||
private _cacheMap: FiveKeyMap<number, number, number, number, number, IRasterizedGlyph> = new FiveKeyMap();
|
||||
private _cacheMapCombined: FiveKeyMap<string, number, number, number, number, IRasterizedGlyph> = new FiveKeyMap();
|
||||
|
||||
// The texture that the atlas is drawn to
|
||||
private _pages: AtlasPage[] = [];
|
||||
@@ -121,9 +121,9 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
const queue = new IdleTaskQueue();
|
||||
for (let i = 33; i < 126; i++) {
|
||||
queue.enqueue(() => {
|
||||
if (!this._cacheMap.get(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT)) {
|
||||
const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT);
|
||||
this._cacheMap.set(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, rasterizedGlyph);
|
||||
if (!this._cacheMap.get(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, 1)) {
|
||||
const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, 0);
|
||||
this._cacheMap.set(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT, 1, rasterizedGlyph);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -244,29 +244,30 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
}
|
||||
|
||||
public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
|
||||
return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, restrictToCellHeight);
|
||||
public getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, variantOffset: number, restrictToCellHeight: boolean): IRasterizedGlyph {
|
||||
return this._getFromCacheMap(this._cacheMapCombined, chars, bg, fg, ext, variantOffset, restrictToCellHeight);
|
||||
}
|
||||
|
||||
public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph {
|
||||
return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, restrictToCellHeight);
|
||||
public getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, variantOffset: number, restrictToCellHeight: boolean): IRasterizedGlyph {
|
||||
return this._getFromCacheMap(this._cacheMap, code, bg, fg, ext, variantOffset, restrictToCellHeight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the glyphs texture coords, drawing the texture if it's not already
|
||||
*/
|
||||
private _getFromCacheMap(
|
||||
cacheMap: FourKeyMap<string | number, number, number, number, IRasterizedGlyph>,
|
||||
cacheMap: FiveKeyMap<string | number, number, number, number, number, IRasterizedGlyph>,
|
||||
key: string | number,
|
||||
bg: number,
|
||||
fg: number,
|
||||
ext: number,
|
||||
variantOffset: number,
|
||||
restrictToCellHeight: boolean = false
|
||||
): IRasterizedGlyph {
|
||||
$glyph = cacheMap.get(key, bg, fg, ext);
|
||||
$glyph = cacheMap.get(key, bg, fg, ext, variantOffset);
|
||||
if (!$glyph) {
|
||||
$glyph = this._drawToCache(key, bg, fg, ext, restrictToCellHeight);
|
||||
cacheMap.set(key, bg, fg, ext, $glyph);
|
||||
$glyph = this._drawToCache(key, bg, fg, ext, variantOffset, restrictToCellHeight);
|
||||
cacheMap.set(key, bg, fg, ext, variantOffset, $glyph);
|
||||
}
|
||||
return $glyph;
|
||||
}
|
||||
@@ -427,7 +428,7 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
|
||||
@traceCall
|
||||
private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean = false): IRasterizedGlyph {
|
||||
private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number,variantOffset: number = 0, restrictToCellHeight: boolean = false): IRasterizedGlyph {
|
||||
const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars;
|
||||
|
||||
// Uncomment for debugging
|
||||
@@ -547,6 +548,7 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
const yTop = Math.ceil(padding + this._config.deviceCharHeight) - yOffset - (restrictToCellHeight ? lineWidth * 2 : 0);
|
||||
const yMid = yTop + lineWidth;
|
||||
const yBot = yTop + lineWidth * 2;
|
||||
let nextOffset = variantOffset;
|
||||
|
||||
for (let i = 0; i < chWidth; i++) {
|
||||
this._tmpCtx.save();
|
||||
@@ -596,9 +598,26 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
);
|
||||
break;
|
||||
case UnderlineStyle.DOTTED:
|
||||
this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
|
||||
this._tmpCtx.moveTo(xChLeft, yTop);
|
||||
this._tmpCtx.lineTo(xChRight, yTop);
|
||||
const offsetWidth = nextOffset >= lineWidth ? lineWidth * 2 - nextOffset : lineWidth - nextOffset;
|
||||
if (offsetWidth === 0) {
|
||||
this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
|
||||
this._tmpCtx.moveTo(xChLeft, yTop);
|
||||
this._tmpCtx.lineTo(xChRight, yTop);
|
||||
} else {
|
||||
const isFull = nextOffset >= lineWidth ? false : true;
|
||||
if (isFull === false) {
|
||||
this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
|
||||
this._tmpCtx.moveTo(xChLeft + offsetWidth, yTop);
|
||||
this._tmpCtx.lineTo(xChRight, yTop);
|
||||
} else {
|
||||
this._tmpCtx.setLineDash([Math.round(lineWidth), Math.round(lineWidth)]);
|
||||
this._tmpCtx.moveTo(xChLeft, yTop);
|
||||
this._tmpCtx.lineTo(xChLeft + offsetWidth, yTop);
|
||||
this._tmpCtx.moveTo(xChLeft + offsetWidth + lineWidth, yTop);
|
||||
this._tmpCtx.lineTo(xChRight, yTop);
|
||||
}
|
||||
}
|
||||
nextOffset = (xChRight - xChLeft - ((lineWidth * 2) - nextOffset)) % (Math.round(lineWidth) * 2);
|
||||
break;
|
||||
case UnderlineStyle.DASHED:
|
||||
this._tmpCtx.setLineDash([this._config.devicePixelRatio * 4, this._config.devicePixelRatio * 3]);
|
||||
@@ -940,6 +959,10 @@ export class TextureAtlas implements ITextureAtlas {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
public getDeviceCellWidth(): number {
|
||||
return this._config.deviceCellWidth;
|
||||
}
|
||||
}
|
||||
|
||||
class AtlasPage {
|
||||
|
||||
+4
-2
@@ -103,12 +103,14 @@ export interface ITextureAtlas extends IDisposable {
|
||||
*/
|
||||
beginFrame(): boolean;
|
||||
|
||||
getDeviceCellWidth(): number;
|
||||
|
||||
/**
|
||||
* Clear all glyphs from the texture atlas.
|
||||
*/
|
||||
clearTexture(): void;
|
||||
getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
|
||||
getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean): IRasterizedGlyph;
|
||||
getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, variantOffset: number, restrictToCellHeight: boolean): IRasterizedGlyph;
|
||||
getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, variantOffset: number, restrictToCellHeight: boolean): IRasterizedGlyph;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -40,3 +40,22 @@ export class FourKeyMap<TFirst extends string | number, TSecond extends string |
|
||||
this._data.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export class FiveKeyMap<TFirst extends string | number, TSecond extends string | number, TThird extends string | number, TFourth extends string | number, TFive extends string | number, TValue> {
|
||||
private _data: { [bg: string | number]: FourKeyMap<TSecond, TThird, TFourth, TFive, TValue> | undefined } = {};
|
||||
|
||||
public set(first: TFirst, second: TSecond, third: TThird, fourth: TFourth, five: TFive, value: TValue): void {
|
||||
if (!this._data[first]) {
|
||||
this._data[first] = new FourKeyMap();
|
||||
}
|
||||
this._data[first as string | number]!.set(second, third, fourth, five, value);
|
||||
}
|
||||
|
||||
public get(first: TFirst, second: TSecond, third: TThird, fourth: TFourth, five: TFive): TValue | undefined {
|
||||
return this._data[first as string | number] ? this._data[first as string | number]?.get(second, third, fourth, five) : undefined;
|
||||
}
|
||||
|
||||
public clear(): void {
|
||||
this._data = {};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,9 +134,14 @@ export const enum BgFlags {
|
||||
|
||||
export const enum ExtFlags {
|
||||
/**
|
||||
* bit 27..32 (upper 3 unused)
|
||||
* bit 27..29
|
||||
*/
|
||||
UNDERLINE_STYLE = 0x1C000000
|
||||
UNDERLINE_STYLE = 0x1C000000,
|
||||
|
||||
/**
|
||||
* bit 30..32
|
||||
*/
|
||||
VARIANT_OFFSET = 0xE0000000
|
||||
}
|
||||
|
||||
export const enum UnderlineStyle {
|
||||
|
||||
Reference in New Issue
Block a user