start from scratch, some progress

This commit is contained in:
meganrogge
2021-08-11 11:18:47 -07:00
parent ee759e245d
commit 12980fbe0c
3 changed files with 250 additions and 74 deletions
+72 -59
View File
@@ -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;
}