v-regexp/lib/visualize/index.js

JavaScript Regular Expression Parser and Visualizer.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var raphael_1 = tslib_1.__importDefault(require("raphael"));
var themes_1 = tslib_1.__importDefault(require("../themes"));
var common_1 = require("./common");
var highlight_1 = require("./highlight");
var plot_1 = require("./plot");
// 同一个containerId的图形，需使用同一paper
var paperChache = {};
function getPaper(containerId) {
    var paper = paperChache[containerId];
    if (!paper) {
        paper = raphael_1.default(containerId, 0, 0);
        paperChache[containerId] = paper;
    }
    return paper;
}
function visualize(_a) {
    var regexpParse = _a.regexpParse, flags = _a.flags, _b = _a.themeOption, themeOption = _b === void 0 ? 'normal' : _b, containerId = _a.containerId;
    var theme = typeof themeOption === 'string' ? themes_1.default[themeOption] : themeOption;
    var paper = getPaper(containerId);
    paper.clear();
    paper.setSize(0, 0);
    var bg = paper.rect(0, 0, 0, 0);
    bg.attr('fill', theme.bgColor);
    bg.attr('stroke', theme.bgColor);
    if (!theme.global) {
        theme.global = {};
    }
    theme.global.templateText = common_1.getTemplateText(paper, theme);
    theme.global.multiLine = !!~flags.indexOf('m');
    var texts = highlight_1.highlight(regexpParse.tree, theme);
    texts.unshift(common_1.getHighlightText({
        str: '/',
        color: theme.highlightColor.delimiter,
        theme: theme,
    }));
    texts.unshift(common_1.getHighlightText({
        str: 'RegExp: ',
        theme: theme,
    }));
    texts.push(common_1.getHighlightText({
        str: '/',
        color: theme.highlightColor.delimiter,
        theme: theme,
    }));
    if (flags) {
        texts.push(common_1.getHighlightText({
            str: flags,
            color: theme.highlightColor.flags,
            theme: theme,
        }));
    }
    var charSize = common_1.getCharSize({
        fontSize: theme.nodeFontSize,
        fontBold: 'bold',
        templateText: theme.global.templateText,
    });
    var startX = theme.paperMargin;
    var startY = charSize.height / 2 + theme.paperMargin;
    var width = 0;
    var height = 0;
    width = texts.reduce(function (x, t) {
        t.x = x;
        t.y = startY;
        var text = Number.isInteger(t.text) ? t.text.toString() : t.text;
        var length = text ? text.length : 0;
        var w = length * charSize.width;
        return x + w;
    }, startX);
    width += theme.paperMargin;
    height = charSize.height + theme.paperMargin * 2;
    // @ts-ignore 图形顶部，显示正则表达式，字符串高亮语法
    texts = paper.add(texts);
    paper.setSize(width, charSize.height + theme.paperMargin * 2);
    var ret = plot_1.plot({
        tree: regexpParse.tree,
        x: 0,
        y: 0,
        theme: theme,
    });
    height = Math.max(ret.height + 3 * theme.paperMargin + charSize.height, height);
    width = Math.max(ret.width + 2 * theme.paperMargin, width);
    paper.setSize(width, height);
    bg.attr('width', width);
    bg.attr('height', height);
    common_1.translate(ret.items, theme.paperMargin, theme.paperMargin * 2 + charSize.height - ret.y);
    // @ts-ignore
    paper.add(ret.items);
    return paper;
}
exports.default = visualize;
//# sourceMappingURL=index.js.map