@minofrk/xelto-diagram-canvas/lib/xelto-diagram-canvas/index.js

An implementation of <xelto-diagram> in TypeScript.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const private_map_1 = __importDefault(require("./private-map"));
const lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
const render_diagram_1 = require("../render-diagram");
const default_font_family_1 = __importDefault(require("../default-font-family"));
const render_template_1 = __importDefault(require("./render-template"));
const try_to_parse_1 = __importDefault(require("./try-to-parse"));
const _ = new private_map_1.default();
class XeltoDiagramCanvas extends HTMLElement {
    constructor() {
        super();
        const maybeState = try_to_parse_1.default(this.textContent);
        const shadow = this.attachShadow({ mode: 'open' });
        render_template_1.default(shadow, this.tagName.toLowerCase());
        const canvas = shadow.querySelector('canvas');
        if (!canvas)
            throw new Error();
        _.init(this, {
            canvas,
        });
        if (maybeState) {
            this.setState(maybeState);
        }
    }
    get reversed() {
        return this.hasAttribute('reversed');
    }
    set reversed(value) {
        if (value) {
            this.setAttribute('reversed', '');
        }
        else {
            this.removeAttribute('reversed');
        }
    }
    setState(state) {
        _.of(this).state = lodash_clonedeep_1.default(state);
    }
    refresh() {
        const { canvas, state } = _.of(this);
        canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio);
        canvas.height = Math.ceil(canvas.clientHeight * devicePixelRatio);
        const options = {
            reversed: this.reversed,
            fontFamily: getComputedStyle(this).fontFamily || default_font_family_1.default,
        };
        if (state) {
            render_diagram_1.renderDiagram(state, canvas, options);
        }
        else {
            render_diagram_1.renderErrorDiagram(canvas, options);
        }
    }
}
exports.default = XeltoDiagramCanvas;
//# sourceMappingURL=index.js.map