svg-term/lib/svg-term.js

Share terminal sessions via SVG and CSS

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const Background_1 = require("./Background");
const Document_1 = require("./Document");
const Frame_1 = require("./Frame");
const Reel_1 = require("./Reel");
const Registry_1 = require("./Registry");
const Window_1 = require("./Window");
const Word_1 = require("./Word");
const to_view_model_1 = require("./to-view-model");
const util_1 = require("./util");
const StyledContainer = styled_1.default.g `
  font-family: ${(props) => props.fontFamily};
`;
exports.SvgTerm = props => {
    const bound = { from: props.from, to: props.to, at: props.at, cast: props.cast };
    const data = to_view_model_1.toViewModel({
        cast: props.cast,
        cursor: props.cursor,
        height: props.height,
        theme: props.theme,
        from: util_1.from(bound),
        to: util_1.to(bound)
    });
    return (React.createElement(Window_1.Window, { decorations: props.decorations, width: data.width, height: data.displayHeight, background: props.theme.background, paddingX: props.paddingX, paddingY: props.paddingY },
        React.createElement(Document_1.Document, { width: data.width, height: data.displayHeight, x: props.decorations ? 15 + props.paddingX : props.paddingX, y: props.decorations ? 50 + props.paddingY : props.paddingY },
            React.createElement(StyledContainer, { fontFamily: props.theme.fontFamily, fontSize: props.theme.fontSize },
                React.createElement(Registry_1.Registry, { frameHeight: props.cast.height, frameWidth: props.cast.width, hasCursors: data.frames.some((frame) => frame.cursor.visible), hasFrames: data.frames.length > 0, items: data.registry, theme: props.theme }),
                React.createElement(Background_1.Background, { width: data.width, height: data.displayHeight, fill: props.theme.background }),
                React.createElement(Reel_1.Reel, { duration: data.duration, frameWidth: props.cast.width, stamps: data.stamps, width: data.frames.length * props.cast.width }, data.frames.map((frame, index) => {
                    return (React.createElement(Frame_1.Frame, { key: frame.stamp, offset: index, width: data.width },
                        frame.cursor.visible && (React.createElement("use", { xlinkHref: "#b", x: frame.cursor.x - props.theme.fontSize * 1.2, y: frame.cursor.y === 0
                                ? 0
                                : frame.cursor.y + props.theme.lineHeight * 0.75 })),
                        frame.lines.map((line, index) => {
                            if (typeof line.id === "number") {
                                return (React.createElement("use", { key: `${line.id}-${index}`, xlinkHref: `#${line.id}`, y: line.y }));
                            }
                            return line.words.map((word) => {
                                return (React.createElement(Word_1.Word, { bg: word.attr.bg, bold: word.attr.bold, fg: word.attr.fg, inverse: word.attr.inverse, theme: props.theme, underline: word.attr.underline, x: word.x, y: line.y + props.theme.fontSize }, word.children));
                            });
                        })));
                }))))));
};
//# sourceMappingURL=svg-term.js.map