diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index 0fbd94551..39819353e 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -422,7 +422,8 @@ export abstract class BaseRenderLayer implements IRenderLayer { // increase # of pixels when font size incremented by 10 this._ctx.lineWidth = Math.max(Math.floor(this._optionsService.options.fontSize / 10), 1); const horizontalCenter = Math.round(this._scaledCellWidth / 2); - draw(this._ctx, char, xOffset, yOffset - verticalCenter, this._scaledCellWidth, this._scaledCellHeight); + // yOffset - verticalCenter + draw(this._ctx, char, xOffset, y * this._scaledCellHeight + this._scaledCharTop, this._scaledCellWidth, this._scaledCellHeight); return true; diff --git a/src/browser/renderer/BoxAndBlockCharacters.ts b/src/browser/renderer/BoxAndBlockCharacters.ts index eda537258..de8a349ca 100644 --- a/src/browser/renderer/BoxAndBlockCharacters.ts +++ b/src/browser/renderer/BoxAndBlockCharacters.ts @@ -212,152 +212,173 @@ export const boxDrawingBoxes: { [index: string]: any } = { '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }] }; +export const enum CENTER { + BOTTOM ='.5,1', + TOP = '.5,0', + MIDDLE = '.5,.5' +} + +export const enum LEFT { + BOTTOM = '0,1', + TOP = '0,0', + MIDDLE = '0,.5' +} + +export const enum RIGHT { + BOTTOM = '1,1', + TOP = '1,0', + MIDDLE = '1,.5' +} + +const MOVE = 'M'; +const TO = 'L'; +const BOLD = '!'; + export const chars: { [index: string]: string } = { - '━': 'M0,.5, L1,.5 z', - '│': 'M0,0, L0,2 z', - '┃': 'M0,0, L0,2 z!', - '┌': 'M , L , z', - '┍': 'M , L , z', - '┎': 'M , L , z', - '┏': 'M , L , z', - '┐': 'M , L , z', - '┑': 'M , L , z', - '┒': 'M , L , z', - '┓': 'M , L , z', - '└': 'M , L , z', - '┕': 'M , L , z', - '┖': 'M , L , z', - '┗': 'M , L , z', - '┘': 'M , L , z', - '┙': 'M , L , z', - '┚': 'M , L , z', - '┛': 'M , L , z', - '├': 'M , L , z', - '┝': 'M , L , z', - '┞': 'M , L , z', - '┟': 'M , L , z', - '┠': 'M , L , z', - '┡': 'M , L , z', - '┢': 'M , L , z', - '┣': 'M , L , z', - '┤': 'M , L , z', - '┥': 'M , L , z', - '┦': 'M , L , z', - '┧': 'M , L , z', - '┨': 'M , L , z', - '┩': 'M , L , z', - '┪': 'M , L , z', - '┫': 'M , L , z', - '┬': 'M , L , z', - '┭': 'M , L , z', - '┮': 'M , L , z', - '┯': 'M , L , z', - '┰': 'M , L , z', - '┱': 'M , L , z', - '┲': 'M , L , z', - '┳': 'M , L , z', - '┴': 'M , L , z', - '┵': 'M , L , z', - '┶': 'M , L , z', - '┷': 'M , L , z', - '┸': 'M , L , z', - '┹': 'M , L , z', - '┺': 'M , L , z', - '┻': 'M , L , z', - '┼': 'M , L , z', - '┽': 'M , L , z', - '┾': 'M , L , z', - '┿': 'M , L , z', - '╀': 'M , L , z', - '╁': 'M , L , z', - '╂': 'M , L , z', - '╃': 'M , L , z', - '╄': 'M , L , z', - '╅': 'M , L , z', - '╆': 'M , L , z', - '╇': 'M , L , z', - '╈': 'M , L , z', - '╉': 'M , L , z', - '╊': 'M , L , z', - '╋': 'M , L , z', - '╌': 'M , L , z', - '╍': 'M , L , z', - '╎': 'M , L , z', - '╏': 'M , L , z', - '═': 'M , L , z', - '║': 'M , L , z', - '╒': 'M , L , z', - '╓': 'M , L , z', - '╔': 'M , L , z', - '╕': 'M , L , z', - '╖': 'M , L , z', - '╗': 'M , L , z', - '╘': 'M , L , z', - '╙': 'M , L , z', - '╚': 'M , L , z', - '╛': 'M , L , z', - '╜': 'M , L , z', - '╝': 'M , L , z', - '╞': 'M , L , z', - '╟': 'M , L , z', - '╠': 'M , L , z', - '╡': 'M , L , z', - '╢': 'M , L , z', - '╣': 'M , L , z', - '╤': 'M , L , z', - '╥': 'M , L , z', - '╦': 'M , L , z', - '╧': 'M , L , z', - '╨': 'M , L , z', - '╩': 'M , L , z', - '╪': 'M , L , z', - '╫': 'M , L , z', - '╬': 'M , L , z', - '╭': 'M , L , z', - '╮': 'M , L , z', - '╯': 'M , L , z', - '╰': 'M , L , z', - '╱': 'M , L , z', - '╲': 'M , L , z', - '╳': 'M , L , z', - '╴': 'M , L , z', - '╵': 'M , L , z', - '╶': 'M , L , z', - '╷': 'M , L , z', - '╸': 'M , L , z', - '╹': 'M , L , z', - '╺': 'M , L , z', - '╻': 'M , L , z', - '╼': 'M , L , z', - '╽': 'M , L , z', - '╾': 'M , L , z', - '╿': 'M0,0, L0,10 z' + '━': `${MOVE}${LEFT.MIDDLE} ${TO}${RIGHT.MIDDLE}`, + '│': `${MOVE}${CENTER.TOP} ${TO}${CENTER.BOTTOM}`, + '┃': `${MOVE}${CENTER.TOP} ${TO}${CENTER.BOTTOM}${BOLD}`, + '┌': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE} ${TO}${RIGHT.MIDDLE}`, + '┍': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE} ${TO}${RIGHT.MIDDLE}${BOLD}`, + '┎': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE}${BOLD} ${TO}${RIGHT.MIDDLE}`, + '┏': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE}${BOLD} ${TO}${RIGHT.MIDDLE}${BOLD}`, + '┐': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE} ${TO}${LEFT.MIDDLE}`, + '┑': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE} ${TO}${LEFT.MIDDLE}${BOLD}`, + '┒': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE}${BOLD} ${TO}${LEFT.MIDDLE}`, + '┓': `${MOVE}${CENTER.BOTTOM} ${TO}${CENTER.MIDDLE}${BOLD} ${TO}${LEFT.MIDDLE}${BOLD}` + // '└': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┕': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┖': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┗': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┘': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┙': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┚': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┛': `${MOVE}${} ${TO}${} ${TO}${}`, + // '├': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┝': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┞': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┟': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┠': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┡': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┢': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┣': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┤': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┥': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┦': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┧': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┨': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┩': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┪': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┫': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┬': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┭': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┮': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┯': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┰': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┱': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┲': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┳': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┴': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┵': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┶': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┷': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┸': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┹': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┺': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┻': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┼': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┽': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┾': `${MOVE}${} ${TO}${} ${TO}${}`, + // '┿': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╀': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╁': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╂': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╃': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╄': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╅': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╆': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╇': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╈': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╉': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╊': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╋': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╌': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╍': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╎': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╏': `${MOVE}${} ${TO}${} ${TO}${}`, + // '═': `${MOVE}${} ${TO}${} ${TO}${}`, + // '║': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╒': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╓': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╔': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╕': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╖': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╗': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╘': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╙': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╚': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╛': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╜': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╝': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╞': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╟': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╠': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╡': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╢': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╣': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╤': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╥': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╦': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╧': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╨': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╩': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╪': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╫': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╬': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╭': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╮': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╯': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╰': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╱': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╲': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╳': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╴': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╵': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╶': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╷': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╸': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╹': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╺': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╻': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╼': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╽': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╾': `${MOVE}${} ${TO}${} ${TO}${}`, + // '╿': `${MOVE}${} ${TO}${} ${TO}${}` }; export function draw(ctx: CanvasRenderingContext2D, c: string, xOffset: number, yOffset: number, cellWidth: number, cellHeight: number): void { const entry = chars[c]; - console.log(c); if (!entry) { return; } + const lineWidth = ctx.lineWidth; const instructions = entry.split(' '); for (const instruction of instructions) { - if (instruction.endsWith('!')) { - ctx.lineWidth = ctx.lineWidth * 2; - } const type = instruction[0]; const spec = instructionMap[type]; const coords: string[] = instruction.substring(1).split(','); if (!coords[0] || !coords[1]) { continue; } - - const numX = Number.parseFloat(coords[0].toString()) || Number.parseInt(coords[0].toString()); const numY = Number.parseFloat(coords[1].toString()) || Number.parseInt(coords[1].toString()); - spec(ctx, xOffset + Math.round((numX)*cellWidth), yOffset + ((numY))*cellHeight); + if (instruction.endsWith(BOLD)) { + ctx.lineWidth = lineWidth * 2; + } else { + ctx.lineWidth = lineWidth; + } + spec(ctx, xOffset + Math.round((numX) * cellWidth), yOffset + ((numY)) * cellHeight); } - ctx.stroke(); } const instructionMap: { [index: string]: any } = { @@ -367,9 +388,8 @@ const instructionMap: { [index: string]: any } = { }, 'L': (ctx: CanvasRenderingContext2D, x: number, y: number) => { ctx.lineTo(x, y); - }, - 'z': (ctx: CanvasRenderingContext2D) => { - ctx.closePath(); - console.log('closing path'); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y); } }; diff --git a/src/common/CoreTerminal.ts b/src/common/CoreTerminal.ts index 710f61648..32341d8d8 100644 --- a/src/common/CoreTerminal.ts +++ b/src/common/CoreTerminal.ts @@ -147,7 +147,9 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { // this.write(' ║ ║ ║ │ ║ │\r\n'); // this.write(' ║ ║ ║ │ ║ │\r\n'); // this.write('▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇'); - this.write('━│┃'); + this.write('━━│┃\r\n'); + this.write(' ━━│┃┌┍┎┏\r\n'); + this.write(' ━━│┃┌┐┍┑┎┒┏┓'); }, 1000); }