malwoden
Version:
   
120 lines • 5.06 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.CanvasTerminal = exports.Font = void 0;
var terminal_1 = require("./terminal");
var display_1 = require("./display");
var Font = /** @class */ (function () {
function Font(family, size) {
this.family = family;
this.size = size;
}
return Font;
}());
exports.Font = Font;
/**
* Renders a display by writing fonts to a canvas.
*/
var CanvasTerminal = /** @class */ (function (_super) {
__extends(CanvasTerminal, _super);
/**
* Creates a new CanvasTerminal.
*
* @param config - The config for the CanvasTerminal
* @param config.width - The width of the terminal in characters.
* @param config.height - The height of the terminal in characters.
* @param config.font Font - A font object
* @param config.mountNode - Will mount the canvas as a child of this node if provided.
*/
function CanvasTerminal(config) {
var _this = _super.call(this, config) || this;
_this.scale = window.devicePixelRatio;
_this.display = new display_1.Display(config.width, config.height);
_this.font = config.font;
_this.canvas = window.document.createElement("canvas");
_this.context = _this.canvas.getContext("2d");
// Setup font
_this.context.font = _this.font.size * _this.scale + "px " + _this.font.family + ", monospace";
_this.context.textAlign = "center";
_this.context.textBaseline = "middle";
_this.lineHeight = Math.ceil(_this.font.size) * _this.scale;
_this.charWidth =
Math.ceil(_this.context.measureText("W").width) * _this.scale;
// Setup canvas
var canvasWidth = _this.charWidth * _this.display.width;
var canvasHeight = _this.lineHeight * _this.display.height;
_this.canvas.width = canvasWidth * _this.scale;
_this.canvas.height = canvasHeight * _this.scale;
_this.canvas.style.width = canvasWidth + "px";
_this.canvas.style.height = canvasHeight + "px";
// Mount the canvas
if (config.mountNode) {
config.mountNode.appendChild(_this.canvas);
}
else {
window.document.body.appendChild(_this.canvas);
}
return _this;
}
/**
* Draws a glyph on the display.
*
* @param pos Vector2 - Position of the Glyph
* @param glyph Glyph - The Glyph to render
*/
CanvasTerminal.prototype.drawGlyph = function (pos, glyph) {
this.display.setGlyph(pos, glyph);
};
/**
* Renders the display to the canvas.
* Usually drawn once per animation frame.
*/
CanvasTerminal.prototype.render = function () {
var _this = this;
// Setup font
this.context.font = this.font.size * this.scale + "px " + this.font.family + ", monospace";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.display.render(function (pos, glyph) {
// Fill the background
_this.context.fillStyle = glyph.back.cssColor();
_this.context.fillRect(pos.x * _this.charWidth * _this.scale, pos.y * _this.lineHeight * _this.scale, _this.charWidth * _this.scale, _this.lineHeight * _this.scale);
// Dont bother drawing empty characters
if (glyph.char === 0 || " ".charCodeAt(0) === glyph.char) {
return;
}
// Fill the char
_this.context.fillStyle = glyph.fore.cssColor();
_this.context.fillText(String.fromCharCode(glyph.char), (pos.x * _this.charWidth + _this.charWidth / 2) * _this.scale, (pos.y * _this.lineHeight + _this.lineHeight / 2) * _this.scale);
});
};
CanvasTerminal.prototype.windowToTilePoint = function (pixel) {
var rect = this.canvas.getBoundingClientRect();
return {
x: Math.floor((pixel.x - rect.left) / this.charWidth),
y: Math.floor((pixel.y - rect.top) / this.lineHeight),
};
};
/**
* Deletes the terminal, removing the canvas.
*/
CanvasTerminal.prototype.delete = function () {
var _a;
(_a = this.canvas.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.canvas);
};
return CanvasTerminal;
}(terminal_1.BaseTerminal));
exports.CanvasTerminal = CanvasTerminal;
//# sourceMappingURL=canvas-terminal.js.map