chrome-plugin/lib/zlExpressEditor/js/ExpressEditor.js

/* eslint-disable*/
/**
 * 可以确定本文件仅被表达式编辑器引用，并且编辑器永远只可能作为iframe弹窗出来，所以不会对全局造成干扰
 * 编辑器主体所需的js代码
 * @author hjh
 */

//编辑器实体
let editor;

/**
 * 资源信息
 * */
let AllReourceInfo = [];

/**
 * 所有的叶子节点
 * */
let allLeafNodes = [];

/**
 * 表达式执行器
 * */
let expressExecutor;

/**
 * 函数资源树的ztree对象
 */
let zlExpressEditor_FunctionTree;

/**
 * 枚举选项的所有配置信息
 * key:name
 * value:setting
 */
let enumSettings = {};


/**
 * 选中项取值模式
 *  * 例："value" 或"display"
 */
let selItemMode = "display";
let showMode = "表达式编辑";

/**左侧资源树的配置信息 */
let setting = {
    data: {
        key: {
            title: "title"
        }
    },
    view: {
        fontCss: (treeId, treeNode) => {
            if (treeNode.title) {
                if (treeNode.title.toLowerCase().indexOf('@deprecated') > 0) {
                    return { color: "silver" };
                }
            }
        }
    },
    callback: {
        //结构树单击事件
        onDblClick: function () {
            let selectid = $("#myTab").find(".active")[0].id;

            //获取当前焦点所在的树
            let ztree;
            if (selectid === "first-tab") {
                ztree = this.getZTreeObj("resource-tree");
            }
            else if (selectid === "second-tab") {
                ztree = this.getZTreeObj("function-tree");
            } else {
                ztree = this.getZTreeObj("parameter-tree");
            }

            //获取选中的节点
            let selectedNodes = ztree.getSelectedNodes();
            if (selectedNodes.length > 0) {
                let node = selectedNodes[0];
                //仅叶子节点可以插入
                if (node.children == null) {
                    //判断是否枚举
                    if (node.propertyType == EnvironmentHelper.PropertyType.Enum) {
                        layer.open({
                            title: `选项编辑器-${node._path}`,
                            btn: ["确定", "取消"],
                            //area: ['400px', '520px'],//宽高
                            type: 2,
                            moveOut: true,
                            content: './subview/enum_editor.html',
                            success: function (layero, index) {                                
                                //获取表达式编辑器窗体对象
                                let iframeWin = window[layero.find('iframe')[0]['name']];
                                
                                //初始化编辑器
                                iframeWin.Init({
                                    name: node.name,
                                    propertyId: node.id,
                                    options: node.propertyValue,
                                    selItemMode: node.selItemMode,
                                    showMode: node.showMode
                                }, window.enumSettings);                                
                                this.iframeAuto(layero, index)
                            },
                            yes: function (index, layero) {
                                let iframeWin = window[layero.find('iframe')[0]['name']];
                                var enumSetting = iframeWin.GetEnumSetting();
                                if (enumSetting) {
                                    //todo:考虑名字重复
                                    enumSettings[enumSetting.name] = enumSetting;

                                    var newRange = InsertValue(` 选项内容_` + enumSetting.name + " ");
                                    newRange.startColumn += 1;
                                    newRange.endColumn -= 1
                                    var decoration = EnvironmentHelper.lightingRange(editor, newRange, enumSetting.name);
                                    enumSettings[enumSetting.name].decoration = decoration;
                                    layer.close(index);
                                }
                            },
                            iframeAuto: function (layero, idnex) {                                
                                let iframe_h = layer.getChildFrame("html", idnex).outerHeight()
                                    , n = $("#layui-layer" + idnex)
                                    , title_h = n.find(".layui-layer-title").outerHeight() || 0
                                    , btn_h = n.find(".layui-layer-btn").outerHeight() || 0;

                                //外层layer高度等于容器高度加上头尾
                                let layer_h = iframe_h + title_h + btn_h;
                                let max_h = $(document).height();
                                //如果高度超过max_h就设置为max_h，容器高度因为有头和尾，需要减去
                                if (layer_h > max_h) {
                                    iframe_h = `calc(95vh - ${title_h + btn_h}px)`;
                                    layer_h = '95vh'
                                }
                                n.css({
                                    height: layer_h
                                });
                                n.find("iframe").css({
                                    height: iframe_h
                                });
                                this.reset(layero);
                            },

                            //重置layer的位置
                            reset: function (layero) {
                                var e = {};
                                e.config = this;
                                e.layero = layero;
                                var g = $(window);
                                var t = e.config,
                                    i = e.layero,
                                    n = [i.outerWidth(), i.outerHeight()],
                                    a = "object" == typeof t.offset;
                                e.offsetTop = (g.height() - n[1]) / 2,
                                    e.offsetLeft = (g.width() - n[0]) / 2,
                                    a ? (e.offsetTop = t.offset[0], e.offsetLeft = t.offset[1] || e.offsetLeft) : "auto" !== t.offset && ("t" === t.offset ? e.offsetTop = 0 : "r" === t.offset ? e.offsetLeft = g.width() - n[0] : "b" === t.offset ? e.offsetTop = g.height() - n[1] : "l" === t.offset ? e.offsetLeft = 0 : "lt" === t.offset ? (e.offsetTop = 0, e.offsetLeft = 0) : "lb" === t.offset ? (e.offsetTop = g.height() - n[1], e.offsetLeft = 0) : "rt" === t.offset ? (e.offsetTop = 0, e.offsetLeft = g.width() - n[0]) : "rb" === t.offset ? (e.offsetTop = g.height() - n[1], e.offsetLeft = g.width() - n[0]) : e.offsetTop = t.offset),
                                    t.fixed || (e.offsetTop = /%$/.test(e.offsetTop) ? g.height() * parseFloat(e.offsetTop) / 100 : parseFloat(e.offsetTop), e.offsetLeft = /%$/.test(e.offsetLeft) ? g.width() * parseFloat(e.offsetLeft) / 100 : parseFloat(e.offsetLeft), e.offsetTop += g.scrollTop(), e.offsetLeft += g.scrollLeft()),
                                    "min" === i.data("maxminStatus") && (e.offsetTop = g.height() - (i.find(u[1]).outerHeight() || 0), e.offsetLeft = i.css("left")),
                                    i.css({
                                        top: e.offsetTop,
                                        left: e.offsetLeft
                                    });
                            }
                        });
                    } else {
                        //如果是方法的话需要加入括号
                        if (node.nodetype === EnvironmentHelper.ResourceNodeType.Method) {
                            InsertValue(node._path + "()");
                        } else {
                            InsertValue(node._path);
                        }
                    }
                }
            }
        }
    }
};

/**
 * 加载左侧资源树
 * @param {any} $node
 * @param {any} json
 * @returns
 */
function LoadTree($node, json) {
    let $tree = $.fn.zTree.init($node, setting, json);

    //默认展开第一个节点【当前组件】
    if ($tree.getNodes().length > 0) {
        $tree.expandNode($tree.getNodes()[0], true, true);
    }

    return $tree;
}

/**
 * 设置值到指定位置
 * @param {any} text 待插入的文本
 * @param {any} selection 要插入的位置，当selection为null的时候，插在光标处
 * @returns 返回插入内容的range
 */
function InsertValue(text, selection = null) {

    if (selection == null) {
        //外部不指定位置，则插入到光标位置
        selection = editor.getSelection();
    }

    editor.pushUndoStop();
    editor.executeEdits('name-of-edit', [
        {
            range: selection,
            text: text
        },
    ]);

    editor.pushUndoStop();

    return editor.getSelection();
}

/**
 * 设置Js值
 * @param {any} jscode
 */
function SetJsCode(jscode) {
    editor.getModel().setValue(EnvironmentHelper.ChangeCodeToDisplay(jscode, allLeafNodes, enumSettings));
}

/**
 * 获取编辑器代码
 * */
function GetJsCode() {
    let jsCode = editor.getModel().getValue();
    //返回的表达式是ID串
    return EnvironmentHelper.ChangeDisplayToCode(jsCode, allLeafNodes, enumSettings);

    //return editor.getModel().getValue();
}

/**
 * 获取完成的js表达式代码
 * 返回一个JSON，有两个
 */
function GetFullJsCode() {
    return {
        display: editor.getModel().getValue(),
        code: GetJsCode(),
        enumSettings: enumSettings
    };
}

/**
 * 写入输出的调试信息
 * @param {any} content 写入的内容
 * @param {any} level 写入的类型[警告/信息/错误]
 */
function WriteDebugInfo(content, level = null) {
    $("#debug-message").text(content);
}

/**
 * 初始化编辑器
 * @param {any} node 原生HTML节点
 * @param {JSON} setting 配置信息
 */
function InitEditor(setting) {
    //解析资源信息
    AllReourceInfo = EnvironmentHelper.ParseResource(setting.resource);

    //当不显示左侧资源树，或者三个资源列表一个都不是true的时候，则直接隐藏
    if (setting.showResource == false || !(setting.showPartResource != false || setting.showFunctionResource != false || setting.showParameterResource != false)) {
        $(".zl-side").hide();
        //隐藏展开按钮
        $(".zl-side-splitter").hide();

        $(".zl-main").css("width", "100%");
    } else {
        //显示部件资源树
        if (setting.showPartResource != false) {
            //绑定资源树
            LoadTree($("#resource-tree"), AllReourceInfo);
            //显示指定的页卡名称
            if (setting.partResourceTabName != null && setting.partResourceTabName != "") {
                $("#tabPartName").text(setting.partResourceTabName)
            }

            $("#myTab > li:nth-child(1)").show();
        } else {
            $("#myTab > li:nth-child(1)").hide();
        }

        //显示函数资源树
        if (setting.showFunctionResource != false) {
            zlExpressEditor_FunctionTree = LoadTree($("#function-tree"), null);
        } else {
            $("#myTab > li:nth-child(2)").hide()
        }

        //显示常量资源树
        if (setting.showParameterResource != false) {
            LoadTree($("#parameter-tree"), null);
        } else {
            $("#myTab > li:nth-child(3)").hide()
        }

        //选中第一个页卡
        $('#myTab a:visible:first').trigger("click");
    }

    //判断是否显示校验按钮
    if (setting.showCheckButton == false) {
        //隐藏校验按钮
        $(".editor-test-button").hide();
        $(".lay-message").hide();
    }

    //提取叶子节点
    for (let info of AllReourceInfo) {
        allLeafNodes.push(...EnvironmentHelper.ExtractLeafNodes(info));
    }
    //将所有的叶子节点按照文本的长度进行排序
    allLeafNodes = allLeafNodes.sort((a, b) => b._path.length - a._path.length);

    //todo: 理论上不应该不为空，忘了何时加的这个代码
    //将原可能的editor销毁
    if (editor != null) {
        try {
            editor.dispose();
        } catch (e) {

        }
    }
    //初始化资源树
    editor = monaco.editor.create(document.getElementById("editor"), {
        minimap: {
            enabled: false
        },
        language: setting.language ?? "javascript",
        readOnly: setting.readonly ?? false
    });

    if (setting.readonly != true) {
        //启用选项编辑插件
        EnvironmentHelper.EnableEnumInputPlugin(editor);
    }

    if (setting.promptWords) {
        // 注册自定义的智能提示词
        monaco.languages.registerCompletionItemProvider(setting.language ?? "javascript", {
            provideCompletionItems: function () {
                // 根据数组，创建提示
                const suggestions = setting.promptWords.map(word => ({
                    label: word,
                    kind: monaco.languages.CompletionItemKind.Text,
                    insertText: word
                }));

                return { suggestions };
            },
        });
    }

    //设置默认值
    if (setting.value != null && setting.value !== "") {
        SetJsCode(setting.value);
    }

    //将资源转为JS代码
    let jscode = EnvironmentHelper.ChangeToJsLib(AllReourceInfo);
    //将JS代码添加库到monaco
    monaco.languages.typescript.javascriptDefaults.addExtraLib(jscode, 'resource.js');

    //初始化执行器
    expressExecutor = new ExpressExecutor(jscode, setting.returnType);


    if (setting.useCommonFunctions != false) {

        //启用基础函数库
        let resourceJson = EnvironmentHelper.LoadExtraJsSource("./extra/commonFunctions.js", "公共函数");

        if (zlExpressEditor_FunctionTree != null) {
            let commonFunctionsNode = zlExpressEditor_FunctionTree.addNodes(null, {
                id: "zlExpress_CommonFunctions",
                name: "通用函数"
            })[0];

            zlExpressEditor_FunctionTree.addNodes(commonFunctionsNode, resourceJson);
        }
    }

    //扩展文件
    if (setting.extension && setting.extension.length > 0) {
        if (zlExpressEditor_FunctionTree != null) {
            zlExpressEditor_FunctionTree.addNodes(null, {
                id: "zlExpress_extension",
                name: "扩展函数"
            });
        }

        //获取资源树中，扩展函数的节点
        let extionsionNode = zlExpressEditor_FunctionTree?.getNodeByParam("id", "zlExpress_extension", null);
        
        for (let extend of setting.extension) {

            if (extend.type === "code") {
                //直接通过代码进行装载
                monaco.languages.typescript.javascriptDefaults.addExtraLib(extend.jsCode, extend.name);
            } else if (extend.type === "instance") {
                if (setting.showFunctionResource != false) {

                    var resource = EnvironmentHelper.GetMethedsAndPropertiesWithInstance(extend.jsCode);

                    if (resource != null) {
                        var resourceJson = { id: extend.name, name: extend.name, children: [], iconSkin: "class_icon" };                        
                        for (var prop of resource.properties) {
                            //解析变量
                            resourceJson.children.push({
                                id: prop,
                                name: prop,
                                _path: extend.name + "." + prop,
                                title: prop,
                                iconSkin: "property_icon",
                                nodetype: EnvironmentHelper.ResourceNodeType.Property
                            });
                        }
                        for (var prop of resource.methods) {
                            resourceJson.children.push({
                                id: prop,
                                name: prop,
                                _path: extend.name + "." + prop,
                                title: prop,
                                iconSkin: "method_icon",
                                nodetype: EnvironmentHelper.ResourceNodeType.Method
                            });
                        }
                        zlExpressEditor_FunctionTree?.addNodes(extionsionNode, resourceJson);
                    }
                }
            } else {
                //通过文件进行装载
                if (!extend.filePath.startsWith("/")) {
                    extend.filePath = "/" + extend.filePath;
                }
                //localhostPaht全局变量在EnvironmentHelper已被定义
                let path = window.top.localhostPaht + extend.filePath;

                //加载扩展JavaScript，并返回分析后的资源JSON
                let resourceJson = EnvironmentHelper.LoadExtraJsSource(path, extend.name, extend.addInResource == null ? true : extend.addInResource);
                if (resourceJson != null) {
                    /*
                    //当命名空间下只有一个class，并且这个Class的名字与命名空间相同，则隐藏命名空间
                    if (resourceJson.children.length == 1 && resourceJson.children[0].name == resourceJson.name) {
                        resourceJson = resourceJson.children[0];
                    }
                    */

                    //将资源JSON放入资源树进行展示
                    resourceJson.children.forEach((nitem) => {
                        zlExpressEditor_FunctionTree?.addNodes(extionsionNode, nitem);
                    });

                }
            }
        }
    }

    //校验按钮单击事件
    $("#editor-test").click(function () {
        let jsCode = editor.getModel().getValue();
        let result = expressExecutor.Test(jsCode, setting.returnType);

        let debugInfo;
        if (result.success) {
            debugInfo = `执行结果:${JSON.stringify(result.value)}`;
        } else {
            debugInfo = "执行出错:" + result.info;
        }

        WriteDebugInfo(debugInfo);
    });

    /**
     * 绑定搜索过滤
     */
    $(".search").keyup(function (e) {
        let searchText = $(this).val();

        //获取ztree树对象
        let ztreeObj = $.fn.zTree.getZTreeObj($(this).parents(".tab-pane").find(".ztree").attr("id"));

        if (searchText != null && searchText != "") {
            //隐藏所有节点
            ztreeObj.hideNodes(ztreeObj.transformToArray(ztreeObj.getNodes()));

            var pattern = new RegExp(searchText, "i");

            //需要显示的报表节点
            showNodes = ztreeObj.getNodesByFilter(p => (p.type != 0 && pattern.test(p.name)));
            if (showNodes && showNodes.length > 0) {
                ztreeObj.showNodes(showNodes);
                ztreeObj.showNodes(GetAllParentShowAbleNodes(showNodes));
            }
        } else {
            ztreeObj.showNodes(ztreeObj.transformToArray(ztreeObj.getNodes()));
        }
    });

    /**
     * 获取所有应该显示的父级节点
     * @param {any} nodes
     * @returns
     */
    function GetAllParentShowAbleNodes(nodes) {
        let Nodes = [];
        for (var i = nodes.length - 1; i >= 0; i--) {
            let node = nodes[i];
            Nodes.push(...GetParentNodes(node));
        }
        return Nodes;
    }

    /**
     * 获取父级节点
     * @param {any} node
     * @returns
     */
    function GetParentNodes(node) {
        let Nodes = [];
        let pNode = node.getParentNode();
        if (pNode != null) {
            Nodes.push(pNode);
            Nodes.push(...GetParentNodes(pNode));
        }
        return Nodes;
    }
}


// 使用.on()方法给每个tab绑定点击事件
$(document).on('click', '#myTab a.nav-link', function (e) {
    e.preventDefault();

    // 移除所有tab的激活状态
    $('#myTab a').removeClass('active');

    // 给被点击的tab添加激活状态
    $(this).addClass('active');

    // 获取被点击的tab对应的内容的id
    var tabContentId = $(this).attr('href');

    // 隐藏所有的tab内容
    $('.tab-pane').removeClass('show active');

    // 显示被点击的tab对应的内容
    $(tabContentId).addClass('show active');
});