malwoden/dist/lib/terminal/retro-terminal.js

   

"use strict";
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.RetroTerminal = void 0;
var terminal_1 = require("./terminal");
var display_1 = require("./display");
var unicodemap_1 = require("./unicodemap");
var char_code_1 = require("./char-code");
var RetroTerminal = /** @class */ (function (_super) {
    __extends(RetroTerminal, _super);
    function RetroTerminal(config) {
        var _this = _super.call(this, config) || this;
        // A cache of the tinted font images. Each key is a color, and the image is the font in that color.
        _this._fontColorCache = new Map();
        _this._imageLoaded = false;
        _this._display = new display_1.Display(config.width, config.height);
        _this._charWidth = config.charWidth;
        _this._charHeight = config.charHeight;
        _this._scale = window.devicePixelRatio;
        // Font
        _this._font = new Image();
        _this._font.src = config.imageURL;
        // Create canvas
        var canvas = window.document.createElement("canvas");
        var canvasWidth = config.charWidth * config.width;
        var canvasHeight = config.charHeight * config.height;
        canvas.width = canvasWidth * _this._scale;
        canvas.height = canvasHeight * _this._scale;
        canvas.style.width = canvasWidth + "px";
        canvas.style.height = canvasHeight + "px";
        if (config.mountNode) {
            config.mountNode.appendChild(canvas);
        }
        else {
            document.body.appendChild(canvas);
        }
        _this._canvas = canvas;
        _this._context = canvas.getContext("2d");
        _this._font.onload = function () {
            _this._imageLoaded = true;
            _this.render();
        };
        return _this;
    }
    RetroTerminal.prototype.drawGlyph = function (pos, glyph) {
        this._display.setGlyph(pos, glyph);
    };
    RetroTerminal.prototype.getWidthInTiles = function () {
        return this._font.width / this._charWidth;
    };
    RetroTerminal.prototype.render = function () {
        var _this = this;
        if (!this._imageLoaded)
            return;
        this._display.render(function (pos, glyph) {
            var char = glyph.char;
            // Remap it if it's a Unicode character
            if (unicodemap_1.unicodeMap[char] !== undefined) {
                char = unicodemap_1.unicodeMap[char];
            }
            var sx = (char % _this.getWidthInTiles()) * _this._charWidth;
            var sy = Math.floor(char / _this.getWidthInTiles()) * _this._charHeight;
            // Fill the background
            _this._context.fillStyle = glyph.back.cssColor();
            _this._context.fillRect(pos.x * _this._charWidth * _this._scale, pos.y * _this._charHeight * _this._scale, _this._charWidth * _this._scale, _this._charHeight * _this._scale);
            // Dont bother with empty characters
            if (char == 0 || char == char_code_1.CharCode.space)
                return;
            var color = _this.getColorFont(glyph.fore);
            _this._context.imageSmoothingEnabled = false;
            _this._context.drawImage(color, sx, sy, _this._charWidth, _this._charHeight, pos.x * _this._charWidth * _this._scale, pos.y * _this._charHeight * _this._scale, _this._charWidth * _this._scale, _this._charHeight * _this._scale);
        });
    };
    RetroTerminal.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._charHeight),
        };
    };
    RetroTerminal.prototype.getColorFont = function (color) {
        // If cached return
        var colorName = color.cssColor();
        var cached = this._fontColorCache.get(colorName);
        if (cached)
            return cached;
        // Create a font using the given color.
        var tint = window.document.createElement("canvas");
        tint.width = this._font.width;
        tint.height = this._font.height;
        var context = tint.getContext("2d");
        // Draw the font
        context.drawImage(this._font, 0, 0);
        // Tint it by filling in the existing alpha with the color
        context.globalCompositeOperation = "source-atop";
        context.fillStyle = color.cssColor();
        context.fillRect(0, 0, this._font.width, this._font.height);
        this._fontColorCache.set(colorName, tint);
        return tint;
    };
    /** Deletes the terminal, removing the canvas. */
    RetroTerminal.prototype.delete = function () {
        var _a;
        (_a = this._canvas.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this._canvas);
    };
    return RetroTerminal;
}(terminal_1.BaseTerminal));
exports.RetroTerminal = RetroTerminal;
//# sourceMappingURL=retro-terminal.js.map