start from scratch, some progress
This commit is contained in:
meganrogge
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
+16
-15
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user