@aurigma/design-atoms/Services/FrontEndLogger.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

export class FrontEndLogger {
    static set debug(value) {
        this._debug = value;
        if (!value || document.getElementById("deLogger") != null)
            return;
        const loggerElement = document.createElement("div");
        loggerElement.id = "deLogger";
        loggerElement.style.position = "fixed";
        loggerElement.style.border = "solid 1px black";
        loggerElement.style.width = "800px";
        loggerElement.style.height = "100px";
        loggerElement.style.top = "calc(100% - 200px)";
        loggerElement.style.left = "0";
        loggerElement.style.display = "flex";
        loggerElement.style.zIndex = "100";
        loggerElement.style.flexDirection = "column";
        loggerElement.style.userSelect = "none";
        const loggerWindow = document.createElement("div");
        loggerWindow.id = "deLoggerWindow";
        loggerWindow.style.flex = "1";
        loggerWindow.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
        loggerWindow.style.border = "solid 1px black";
        loggerWindow.style.overflow = "auto";
        loggerWindow.style.display = "flex";
        loggerWindow.style.fontSize = "14px";
        loggerWindow.style.fontWeight = "500";
        loggerWindow.style.flexDirection = "column";
        const header = document.createElement("div");
        header.id = "loggerHeader";
        header.style.height = "40px";
        header.style.width = "100%";
        header.style.backgroundColor = "white";
        header.style.height = "auto";
        header.style.padding = "4px";
        const clearButton = document.createElement("input");
        clearButton.type = "button";
        clearButton.value = "Clear";
        clearButton.onclick = () => {
            loggerWindow.innerHTML = "";
        };
        header.appendChild(clearButton);
        loggerElement.appendChild(header);
        loggerElement.appendChild(loggerWindow);
        document.documentElement.appendChild(loggerElement);
        this._debugTimeStart = Date.now();
    }
    static debugLog(message, source, level = LogLevel.Log) {
        if (!this._debug)
            return;
        if (FrontEndLogger.sources != null && source != null && !FrontEndLogger.sources.includes(source))
            return;
        const logMessage = `<span style="color: rgb(255, 0, 255)">${Date.now() - this._debugTimeStart}:</span> ${message}`;
        const logElement = document.createElement("span");
        logElement.innerHTML = logMessage;
        logElement.style.color = FrontEndLogger._getMessageColor(level);
        const debugWindow = document.getElementById("deLoggerWindow");
        debugWindow.appendChild(logElement);
        debugWindow.scrollTop = debugWindow.scrollHeight;
    }
    static extendNativeLog(method) {
        const oldMethod = console[method];
        console[method] = (...args) => {
            const message = args.join(" ");
            oldMethod(message);
            FrontEndLogger.debugLog(message, LogSource.System, method);
        };
    }
    static _getMessageColor(level) {
        if (level === LogLevel.Error)
            return "#dc3545";
        if (level === LogLevel.Warning)
            return "#ffc107";
        if (level === LogLevel.Trace)
            return "#17a2b8";
        return "black";
    }
}
FrontEndLogger._debug = false;
FrontEndLogger.init = (enabled, logLevels = null, sources = null) => {
    FrontEndLogger.debug = enabled;
    FrontEndLogger.sources = sources;
    if (enabled && (logLevels === null || logLevels === void 0 ? void 0 : logLevels.length) > 0) {
        logLevels.forEach(level => {
            FrontEndLogger.extendNativeLog(level);
        });
    }
};
window["___$setDaLoggerEnabled"] = FrontEndLogger.init;
export var LogLevel;
(function (LogLevel) {
    LogLevel["Trace"] = "trace";
    LogLevel["Log"] = "log";
    LogLevel["Warning"] = "warn";
    LogLevel["Error"] = "error";
})(LogLevel || (LogLevel = {}));
export var LogSource;
(function (LogSource) {
    LogSource["ViolationService"] = "ViolationService";
    LogSource["InputManager"] = "InputManager";
    LogSource["System"] = "System";
    LogSource["Common"] = "Common";
    LogSource["SelectionHandler"] = "SelectionHandler";
    LogSource["CommandManager"] = "CommandManager";
})(LogSource || (LogSource = {}));
export var LogClr;
(function (LogClr) {
    function red(str) {
        return `<span style="color: rgb(255, 0, 0)">${str}</span>`;
    }
    LogClr.red = red;
    function green(str) {
        return `<span style="color: rgb(0, 255, 0)">${str}</span>`;
    }
    LogClr.green = green;
    function blue(str) {
        return `<span style="color: rgb(0, 0, 255)">${str}</span>`;
    }
    LogClr.blue = blue;
    function white(str) {
        return `<span style="color: rgb(255, 255, 255)">${str}</span>`;
    }
    LogClr.white = white;
    function cyan(str) {
        return `<span style="color: rgb(0, 255, 255)">${str}</span>`;
    }
    LogClr.cyan = cyan;
    function magenta(str) {
        return `<span style="color: rgb(255, 0, 255)">${str}</span>`;
    }
    LogClr.magenta = magenta;
    function yellow(str) {
        return `<span style="color: rgb(0, 255, 255)">${str}</span>`;
    }
    LogClr.yellow = yellow;
})(LogClr || (LogClr = {}));
//# sourceMappingURL=FrontEndLogger.js.map