diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index aefc0369d..0fbd94551 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -17,7 +17,7 @@ import { IBufferService, IOptionsService } from 'common/services/Services'; import { throwIfFalsy } from 'browser/renderer/RendererUtils'; import { channels, color, rgba } from 'browser/Color'; import { removeElementFromParent } from 'browser/Dom'; -import { boxDrawingBoxes, boxDrawingLineSegments } from 'browser/renderer/BoxAndBlockCharacters'; +import { boxDrawingBoxes, boxDrawingLineSegments, draw } from 'browser/renderer/BoxAndBlockCharacters'; export abstract class BaseRenderLayer implements IRenderLayer { private _canvas: HTMLCanvasElement; @@ -412,71 +412,84 @@ export abstract class BaseRenderLayer implements IRenderLayer { if (!lineSegments) { return false; } + const xOffset = x * this._scaledCellWidth + this._scaledCharLeft; + const verticalCenter = Math.round(this._scaledCellHeight / 2); - // TODO: Clean below - const scale = window.devicePixelRatio; + const yOffset = y * this._scaledCellHeight + this._scaledCharTop + verticalCenter; + // const scale = window.devicePixelRatio; this._ctx.strokeStyle = this._ctx.fillStyle; // increase # of pixels when font size incremented by 10 this._ctx.lineWidth = Math.max(Math.floor(this._optionsService.options.fontSize / 10), 1); - - const xOffset = x * this._scaledCellWidth + this._scaledCharLeft; - const yOffset = y * this._scaledCellHeight + this._scaledCharTop; const horizontalCenter = Math.round(this._scaledCellWidth / 2); - const verticalCenter = Math.round(this._scaledCellHeight / 2); - const xPoints = [ - xOffset, - xOffset + horizontalCenter - scale * 2, - xOffset + horizontalCenter - scale, - xOffset + horizontalCenter, - xOffset + horizontalCenter + scale, - xOffset + horizontalCenter + scale * 2, - xOffset + this._scaledCellWidth - ]; - const yPoints = [ - yOffset - 1, - yOffset + verticalCenter - scale * 2, - yOffset + verticalCenter - scale, - yOffset + verticalCenter, - yOffset + verticalCenter + scale, - yOffset + verticalCenter + scale * 2, - yOffset + this._scaledCellHeight - ]; - - for (let i = 0; i < lineSegments.length; i++) { - const line = lineSegments[i]; - - if (i === 0 || (line.x1 !== lineSegments[i - 1].x2 || line.y1 !== lineSegments[i - 1].y2)) { - this._ctx.beginPath(); - if (this._ctx.lineWidth % 2 === 1) { - this._ctx.moveTo(line.x1 === 0 ? xPoints[line.x1] : xPoints[line.x1] + .5, yPoints[line.y1] + .5); - } else { - this._ctx.moveTo(xPoints[line.x1], yPoints[line.y1]); - } - } - - if (typeof line.cx1 !== 'undefined') { - // Draw curve - this._ctx.bezierCurveTo( - xPoints[line.cx1], - yPoints[line.cy1], - xPoints[line.cx2], - yPoints[line.cy2], - xPoints[line.x2], - yPoints[line.y2]); - } else { - // Draw line - if (this._ctx.lineWidth % 2 === 1) { - this._ctx.lineTo(line.x2 === 0 ? xPoints[line.x2] : xPoints[line.x2] + .5, yPoints[line.y2] + .5); - } else { - this._ctx.lineTo(xPoints[line.x2], yPoints[line.y2]); - } - } - - this._ctx.stroke(); - } - + draw(this._ctx, char, xOffset, yOffset - verticalCenter, this._scaledCellWidth, this._scaledCellHeight); return true; + + + // // TODO: Clean below + // const scale = window.devicePixelRatio; + // this._ctx.strokeStyle = this._ctx.fillStyle; + + // // increase # of pixels when font size incremented by 10 + // this._ctx.lineWidth = Math.max(Math.floor(this._optionsService.options.fontSize / 10), 1); + + // const xOffset = x * this._scaledCellWidth + this._scaledCharLeft; + // const yOffset = y * this._scaledCellHeight + this._scaledCharTop; + // const horizontalCenter = Math.round(this._scaledCellWidth / 2); + // const verticalCenter = Math.round(this._scaledCellHeight / 2); + // const xPoints = [ + // xOffset, + // xOffset + horizontalCenter - scale * 2, + // xOffset + horizontalCenter - scale, + // xOffset + horizontalCenter, + // xOffset + horizontalCenter + scale, + // xOffset + horizontalCenter + scale * 2, + // xOffset + this._scaledCellWidth + // ]; + // const yPoints = [ + // yOffset - 1, + // yOffset + verticalCenter - scale * 2, + // yOffset + verticalCenter - scale, + // yOffset + verticalCenter, + // yOffset + verticalCenter + scale, + // yOffset + verticalCenter + scale * 2, + // yOffset + this._scaledCellHeight + // ]; + + // for (let i = 0; i < lineSegments.length; i++) { + // const line = lineSegments[i]; + + // if (i === 0 || (line.x1 !== lineSegments[i - 1].x2 || line.y1 !== lineSegments[i - 1].y2)) { + // this._ctx.beginPath(); + // if (this._ctx.lineWidth % 2 === 1) { + // this._ctx.moveTo(line.x1 === 0 ? xPoints[line.x1] : xPoints[line.x1] + .5, yPoints[line.y1] + .5); + // } else { + // this._ctx.moveTo(xPoints[line.x1], yPoints[line.y1]); + // } + // } + + // if (typeof line.cx1 !== 'undefined') { + // // Draw curve + // this._ctx.bezierCurveTo( + // xPoints[line.cx1], + // yPoints[line.cy1], + // xPoints[line.cx2], + // yPoints[line.cy2], + // xPoints[line.x2], + // yPoints[line.y2]); + // } else { + // // Draw line + // if (this._ctx.lineWidth % 2 === 1) { + // this._ctx.lineTo(line.x2 === 0 ? xPoints[line.x2] : xPoints[line.x2] + .5, yPoints[line.y2] + .5); + // } else { + // this._ctx.lineTo(xPoints[line.x2], yPoints[line.y2]); + // } + // } + + // this._ctx.stroke(); + // } + + // return true; } diff --git a/src/browser/renderer/BoxAndBlockCharacters.ts b/src/browser/renderer/BoxAndBlockCharacters.ts index 221a0e4f9..eda537258 100644 --- a/src/browser/renderer/BoxAndBlockCharacters.ts +++ b/src/browser/renderer/BoxAndBlockCharacters.ts @@ -211,3 +211,165 @@ export const boxDrawingBoxes: { [index: string]: any } = { // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block) '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }] }; + +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' +}; + +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 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); + } + ctx.stroke(); +} + +const instructionMap: { [index: string]: any } = { + 'M': (ctx: CanvasRenderingContext2D, x: number, y: number) => { + ctx.beginPath(); + ctx.moveTo(x, y); + }, + 'L': (ctx: CanvasRenderingContext2D, x: number, y: number) => { + ctx.lineTo(x, y); + }, + 'z': (ctx: CanvasRenderingContext2D) => { + ctx.closePath(); + console.log('closing path'); + } +}; diff --git a/src/common/CoreTerminal.ts b/src/common/CoreTerminal.ts index 5758957e1..710f61648 100644 --- a/src/common/CoreTerminal.ts +++ b/src/common/CoreTerminal.ts @@ -133,21 +133,22 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { // Setup WriteBuffer this._writeBuffer = new WriteBuffer((data, promiseResult) => this._inputHandler.parse(data, promiseResult)); setTimeout(() => { - this.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\r\n'); - this.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\r\n'); - this.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\r\n'); - this.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\r\n'); - this.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\r\n'); - this.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\r\n'); - this.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\r\n'); - this.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\r\n'); - this.write('▇▇▇▇▇▇▇▇▇'); - this.write(' ╔═════════════════════════════════════════════════════════╕\r\n'); - this.write(' ║ │\r\n'); - this.write(' ║ ╔═══════════════╦════════╤════════╗ │\r\n'); - this.write(' ║ ║ ║ │ ║ │\r\n'); - this.write(' ║ ║ ║ │ ║ │\r\n'); - }, 1500); + // this.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\r\n'); + // this.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\r\n'); + // this.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\r\n'); + // this.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\r\n'); + // this.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\r\n'); + // this.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\r\n'); + // this.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\r\n'); + // this.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\r\n'); + // this.write(' ╔═════════════════════════════════════════════════════════╕\r\n'); + // this.write(' ║ │\r\n'); + // this.write(' ║ ╔═══════════════╦════════╤════════╗ │\r\n'); + // this.write(' ║ ║ ║ │ ║ │\r\n'); + // this.write(' ║ ║ ║ │ ║ │\r\n'); + // this.write('▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇'); + this.write('━│┃'); + }, 1000); } public dispose(): void {