node-red/packages/node_modules/@node-red/editor-api/lib/editor/theme.js

/**
 * Copyright JS Foundation and other contributors, http://js.foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/

var express = require("express");
var util = require("util");
var path = require("path");
var fs = require("fs");
var clone = require("clone");

var defaultContext = {
    page: {
        title: "Node-RED",
        favicon: "favicon.ico",
        tabicon: {
            icon: "red/images/node-red-icon-black.svg",
            colour: "#8f0000"
        },
        version: require(path.join(__dirname,"../../package.json")).version
    },
    header: {
        title: "Node-RED",
        image: "red/images/node-red.svg"
    },
    asset: {
        red: "red/red.min.js",
        main: "red/main.min.js",
        vendorMonaco: ""
    }
};

var theme = null;
var themeContext = clone(defaultContext);
var themeSettings = null;

var activeTheme = null;
var activeThemeInitialised = false;

var runtimeAPI;
var themeApp;

function serveFile(app,baseUrl,file) {
    try {
        var stats = fs.statSync(file);
        var url = baseUrl+path.basename(file);
        //console.log(url,"->",file);
        app.get(url,function(req, res) {
            res.sendFile(file);
        });
        return "theme"+url;
    } catch(err) {
        //TODO: log filenotfound
        return null;
    }
}

function serveFilesFromTheme(themeValue, themeApp, directory, baseDirectory) {
    var result = [];
    if (themeValue) {
        var array = themeValue;
        if (!util.isArray(array)) {
            array = [array];
        }

        for (var i=0;i<array.length;i++) {
            let fullPath = array[i];
            if (baseDirectory) {
                fullPath = path.resolve(baseDirectory,array[i]);
                if (fullPath.indexOf(path.resolve(baseDirectory)) !== 0) {
                    continue;
                }
            }
            var url = serveFile(themeApp,directory,fullPath);
            if (url) {
                result.push(url);
            }
        }
    }
    return result
}

module.exports = {
    init: function(settings, _runtimeAPI) {
        runtimeAPI = _runtimeAPI;
        themeContext = clone(defaultContext);
        if (process.env.NODE_ENV == "development") {
            themeContext.asset.red = "red/red.js";
            themeContext.asset.main = "red/main.js";
        }
        themeSettings = null;
        theme = settings.editorTheme || {};
        themeContext.asset.vendorMonaco = "vendor/monaco/monaco-bootstrap.js"
        if (theme.codeEditor && theme.codeEditor.lib === 'ace') {
            themeContext.asset.vendorMonaco = ''
        }
        activeTheme = theme.theme;
    },

    app: function() {
        var i;
        var url;
        themeSettings = {};

        themeApp = express();

        if (theme.page) {

            themeContext.page.css = serveFilesFromTheme(
                theme.page.css,
                themeApp,
                "/css/")
            themeContext.page.scripts = serveFilesFromTheme(
                theme.page.scripts,
                themeApp,
                "/scripts/")

            if (theme.page.favicon) {
                url = serveFile(themeApp,"/favicon/",theme.page.favicon)
                if (url) {
                    themeContext.page.favicon = url;
                }
            }

            if (theme.page.tabicon) {
                let icon = theme.page.tabicon.icon || theme.page.tabicon
                url = serveFile(themeApp,"/tabicon/", icon)
                if (url) {
                    themeContext.page.tabicon.icon = url;
                }
                if (theme.page.tabicon.colour) {
                    themeContext.page.tabicon.colour = theme.page.tabicon.colour
                }
            }

            themeContext.page.title = theme.page.title || themeContext.page.title;

            // Store the resolved urls to these resources so nodes (such as Debug)
            // can access them
            theme.page._ = {
                css: themeContext.page.css,
                scripts: themeContext.page.scripts,
                favicon: themeContext.page.favicon
            }
        }

        if (theme.header) {

            themeContext.header.title = theme.header.title || themeContext.header.title;

            if (theme.header.hasOwnProperty("url")) {
                themeContext.header.url = theme.header.url;
            }

            if (theme.header.hasOwnProperty("image")) {
                if (theme.header.image) {
                    url = serveFile(themeApp,"/header/",theme.header.image);
                    if (url) {
                        themeContext.header.image = url;
                    }
                } else {
                    themeContext.header.image = null;
                }
            }
        }

        if (theme.deployButton) {
            if (theme.deployButton.type == "simple") {
                themeSettings.deployButton = {
                    type: "simple"
                }
                if (theme.deployButton.label) {
                    themeSettings.deployButton.label = theme.deployButton.label;
                }
                if (theme.deployButton.icon) {
                    url = serveFile(themeApp,"/deploy/",theme.deployButton.icon);
                    if (url) {
                        themeSettings.deployButton.icon = url;
                    }
                }
            }
        }

        if (theme.hasOwnProperty("userMenu")) {
            themeSettings.userMenu = theme.userMenu;
        }

        if (theme.login) {
            if (theme.login.image) {
                url = serveFile(themeApp,"/login/",theme.login.image);
                if (url) {
                    themeContext.login = {
                        image: url
                    }
                }
            }
        }
        themeApp.get("/", async function(req,res) {
            const themePluginList = await runtimeAPI.plugins.getPluginsByType({type:"node-red-theme"});
            themeContext.themes = themePluginList.map(theme => theme.id);
            res.json(themeContext);
        })

        if (theme.hasOwnProperty("menu")) {
            themeSettings.menu = theme.menu;
        }

        if (theme.hasOwnProperty("palette")) {
            themeSettings.palette = theme.palette;
        }

        if (theme.hasOwnProperty("projects")) {
            themeSettings.projects = theme.projects;
        }

        if (theme.hasOwnProperty("keymap")) {
            themeSettings.keymap = theme.keymap;
        }

        if (theme.theme) {
            themeSettings.theme = theme.theme;
        }

        if (theme.hasOwnProperty("tours")) {
            themeSettings.tours = theme.tours;
        }

        return themeApp;
    },
    context: async function() {
        if (activeTheme && !activeThemeInitialised) {
            const themePlugin = await runtimeAPI.plugins.getPlugin({
                id:activeTheme
            });
            if (themePlugin) {
                if (themePlugin.css) {
                    const cssFiles = serveFilesFromTheme(
                        themePlugin.css,
                        themeApp,
                        "/css/",
                        themePlugin.path
                    );
                    themeContext.page.css = cssFiles.concat(themeContext.page.css || [])
                    theme.page = theme.page || {_:{}}
                    theme.page._.css = cssFiles.concat(theme.page._.css || [])
                }
                if (themePlugin.scripts) {
                    const scriptFiles = serveFilesFromTheme(
                        themePlugin.scripts,
                        themeApp,
                        "/scripts/",
                        themePlugin.path
                    )
                    themeContext.page.scripts = scriptFiles.concat(themeContext.page.scripts || [])
                    theme.page = theme.page || {_:{}}
                    theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || [])
                }
                // check and load page settings from theme
                if (themePlugin.page) {
                    if (themePlugin.page.favicon  && !theme.page.favicon) {
                        const result = serveFilesFromTheme(
                            [themePlugin.page.favicon],
                            themeApp,
                            "/",
                            themePlugin.path
                        )
                        if(result && result.length > 0) {
                            // update themeContext page favicon
                            themeContext.page.favicon = result[0]
                            theme.page = theme.page || {_:{}}
                            theme.page._.favicon = result[0]
                        }
                    }
                    if (themePlugin.page.tabicon && themePlugin.page.tabicon.icon && !theme.page.tabicon) {
                        const result = serveFilesFromTheme(
                            [themePlugin.page.tabicon.icon],
                            themeApp,
                            "/page/",
                            themePlugin.path
                        )
                        if(result && result.length > 0) {
                            // update themeContext page tabicon
                            themeContext.page.tabicon.icon = result[0]
                            themeContext.page.tabicon.colour = themeContext.page.tabicon.colour || themeContext.page.tabicon.colour
                            theme.page = theme.page || {_:{}}
                            theme.page._.tabicon = theme.page._.tabicon || {}
                            theme.page._.tabicon.icon = themeContext.page.tabicon.icon 
                            theme.page._.tabicon.colour = themeContext.page.tabicon.colour
                        }
                    }
                    // if the plugin has a title AND the users settings.js does NOT
                    if (themePlugin.page.title && !theme.page.title) {
                        themeContext.page.title = themePlugin.page.title || themeContext.page.title
                    }
                }
                // check and load header settings from theme
                if (themePlugin.header) {
                    if (themePlugin.header.image && !theme.header.image) {
                        const result = serveFilesFromTheme(
                            [themePlugin.header.image],
                            themeApp,
                            "/header/",
                            themePlugin.path
                        )
                        if(result && result.length > 0) {
                            // update themeContext header image
                            themeContext.header.image = result[0]
                        }
                    }
                    // if the plugin has a title AND the users settings.js does NOT have a title
                    if (themePlugin.header.title && !theme.header.title) {
                        themeContext.header.title = themePlugin.header.title || themeContext.header.title
                    }
                    // if the plugin has a header url AND the users settings.js does NOT
                    if (themePlugin.header.url && !theme.header.url) {
                        themeContext.header.url = themePlugin.header.url || themeContext.header.url
                    }
                }
                theme.codeEditor = theme.codeEditor || {}
                theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
            }
            activeThemeInitialised = true;
        }
        return themeContext;
    },
    settings: function() {
        return themeSettings;
    },
    serveFile: function(baseUrl,file) {
        return serveFile(themeApp,baseUrl,file);
    }
}