echart节点编辑图

var style_ul = "padding:0px;margin:0px;border: 1px solid #ccc;background-color: #fff;position: absolute;left: 0px;top: 0px;z-index: 2;display: none;";
var style_li = "list-style:none;padding: 5px; cursor: pointer; padding: 5px 20px;margin:0px;";
var style_li_hover = style_li + "background-color: #00A0E9; color: #fff;";
var refreshGirdData;
//右键菜单容器
var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>").appendTo($(document.body));
// 指定图表的配置项和数据
var option = {
    title: {
        text: '流程示例'
    },
    //tooltip: {},
    series: [{
        type: 'graph',
        layout: 'none',

        label: {
            show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        symbolSize: (value, params) => {
            if (params.data.check) {
                return 80;
            } else {
                return 50;
            }
        },
        edgeLabel: {
            fontSize: 20
        },
        data: [{
            id: "start",
            name: '工艺开始',
            value: 30,
            check: false,
            x: 50,
            y: 100
        }],
        links: [],
        lineStyle: {
            opacity: 0.9,
            width: 3,
            curveness: 0
        }
    }]
};
var myChart = echarts.init(document.getElementById('main'));
var bootstrap = function ($, learun) {
    "use strict";
    var page = {
        bind: function () {

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.on("mousedown", function (e) {
                if (e.event.event.button === 0) { //左键单击事件
                    if (e.dataType == "node") { //点击节点 显示人员角色信息  						 
                        var id = e.data.id;
                        var nodesOption = option.series[0].data; //获得所有节点数组
                        var linksOption = option.series[0].links; //获得所有连接的数组
                        for (let index in nodesOption) {
                            if (nodesOption[index].id == id) {
                                if (nodesOption[index].check) {
                                    nodesOption[index].check = false;
                                } else {
                                    nodesOption[index].check = true;
                                }

                            }
                        };
                        myChart.setOption({
                            series: [{
                                data: nodesOption,
                                links: linksOption
                            }]
                        });

                    }
                }
                if (e.event.event.button === 2 && e.dataType == "node") { //右键node点击事件
                    if (e.data.check) {

                        var state = 0;
                        var id = e.data.id;
                        var tag_id;
                        var nodesOption = option.series[0].data; //获得所有节点数组
                        for (let index in nodesOption) {
                            if (nodesOption[index].id != id && nodesOption[index].check) {
                                state++;
                                tag_id = nodesOption[index].id;

                            }
                        };
                        if (state == 1) {
                            page.showMenu(e, [{
                                "name": "删除节点",
                                "fn": function () {
                                    var id = e.data.id;
                                    page.deleteNode(id);

                                }
                            }, {
                                "name": "添加节点",
                                "fn": function () {
                                    page.addNodenew(e);
                                }
                            }, {
                                "name": "合并节点",
                                "fn": function () {
                                    var linkobj = {
                                        source: tag_id,
                                        target: id,
                                        symbolSize: [5, 20]
                                    }
                                    var nodesOption = option.series[0].data; //获得所有节点数组
                                    var linksOption = option.series[0].links; //获得所有连接的数组
                                    for (let index in nodesOption) {
                                        if (nodesOption[index].check) {
                                            nodesOption[index].check = false;
                                        }
                                    };
                                    linksOption.push(linkobj);
                                    refreshGirdData(nodesOption, linksOption);
                                    //myChart.setOption({
                                    //    series: [{
                                    //        data: nodesOption,
                                    //        links: linksOption
                                    //    }]
                                    //});
                                }
                            }, {
                                "name": "编辑节点",
                                "fn": function () {
                                    var id = e.data.id;
                                    page.editNode(id);

                                }
                            }]);
                        } else {
                            if (e.dataIndex === 0) {
                                //e中有当前节点信息
                                page.showMenu(e, [{
                                    "name": "添加节点",
                                    "fn": function () {
                                        page.addNodenew(e);
                                    }
                                }, {
                                    "name": "编辑节点",
                                    "fn": function () {
                                        var id = e.data.id;
                                        page.editNode(id);

                                    }
                                }
                                ]);
                            } else {
                                //e中有当前节点信息
                                page.showMenu(e, [{
                                    "name": "删除节点",
                                    "fn": function () {
                                        var id = e.data.id;
                                        page.deleteNode(id);

                                    }
                                }, {
                                    "name": "添加节点",
                                    "fn": function () {
                                        page.addNodenew(e);
                                    }
                                }, {
                                    "name": "编辑节点",
                                    "fn": function () {
                                        var id = e.data.id;
                                        page.editNode(id);

                                    }
                                }]);
                            }
                        }
                    } else {
                        if (e.dataIndex === 0) {
                            //e中有当前节点信息
                            page.showMenu(e, [{
                                "name": "添加节点",
                                "fn": function () {
                                    page.addNodenew(e);
                                }
                            }, {
                                "name": "编辑节点",
                                "fn": function () {
                                    var id = e.data.id;
                                    page.editNode(id);

                                }
                            }]);
                        } else {
                            //e中有当前节点信息
                            page.showMenu(e, [{
                                "name": "删除节点",
                                "fn": function () {
                                    var id = e.data.id;
                                    page.deleteNode(id);

                                }
                            }, {
                                "name": "添加节点",
                                "fn": function () {
                                    page.addNodenew(e);
                                }
                            }, {
                                "name": "编辑节点",
                                "fn": function () {
                                    var id = e.data.id;
                                    page.editNode(id);

                                }
                            }]);
                        }
                    }

                }
            })
            //移除浏览器右键菜单
            myChart.getDom().oncontextmenu = menubox[0].oncontextmenu = function () {
                return false;
            }
            //点击其他位置隐藏菜单
            $(document).click(function () {
                menubox.hide()
            });
        },
         addNodenew: function (e) {
            //console.log(e)
            var X = e.data.x;
            var Y = e.data.y;
            var start_id = e.data.id;
            var end_id = page.newGuid();
            var nodesOption = option.series[0].data; //获得所有节点数组
            var linksOption = option.series[0].links; //获得所有连接的数组

            while (true) {
                var ishave = false;
                for (var i = 0; i < nodesOption.length; i++) {
                    if (nodesOption[i].value.x == (X + 50) && Y == nodesOption[i].value.y) {
                        ishave = true; 
                    }
                }
                if (ishave) {
                    Y = Y + 25;
                } else {
                    break;
                }
            }
            //var Max_Y=null;
            //for (var i = 0; i < nodesOption.length; i++) {
            //    if (nodesOption[i].value.x == (X + 50) ) {
            //        Max_Y = nodesOption[i].value.y; 
            //    }
            //}
            //if (Max_Y != null) {
            //    Y = Max_Y+25 ;
            //}
            var nodeobj = {
                id: end_id,
                name: '工艺',
                value: { name: "工艺", x: X + 50, y: Y },
                check: false,
                x: X + 50,
                y: Y
            }



            //var state = false; //判断是否并行
            //for (var i = 0; i < linksOption.length; i++) {

            //    if (linksOption[i].source == start_id) {
            //        for (var j = 0; j < nodesOption.length; j++) {
            //            if (nodesOption[j].id == linksOption[i].target) {
            //                if (Y < nodesOption[j].y) {
            //                    Y = nodesOption[j].y;
            //                }
            //            }
            //        }
            //        state = true;
            //    }

            //}


            //if (!state) {
            //    var ishave = false;
            //    for (var i = 0; i < nodesOption.length; i++) {
            //        if (nodesOption[i].value.x == (X + 50) && nodesOption[i].value.y == Y) {
            //            ishave = true;
            //        }
            //    }
            //    if (ishave) {
            //        var nodeobj = {
            //            id: end_id,
            //            name: '工艺',
            //            value: { name: "工艺", x: X + 50, y: Y+12 },
            //            check: false,
            //            x: X + 50,
            //            y: Y+12
            //        }
            //    } else {
            //        var nodeobj = {
            //            id: end_id,
            //            name: '工艺',
            //            value: { name: "工艺", x: X + 50, y: Y },
            //            check: false,
            //            x: X + 50,
            //            y: Y
            //        }
            //    }


                
            //} else {
            //    debugger;
            //    var ishave = false;
            //    console.log("Node");
            //    console.log(nodesOption);
            //    for (var i = 0; i < nodesOption.length; i++) {
            //        console.log(nodesOption[i].value.x)
            //        console.log(X + 50)
            //        if (nodesOption[i].value.x == (X + 50) && nodesOption[i].value.y == (Y + 25)) {
            //            ishave = true;
            //        }
            //    }
              
            //    if (ishave) {
            //        var nodeobj = {
            //            id: end_id,
            //            name: '工艺',
            //            value: { name: "工艺", x: X + 50, y: Y + 12 },
            //            check: false,
            //            x: X + 50,
            //            y: Y + 12
            //        }
            //    } else {
            //        var nodeobj = {
            //            id: end_id,
            //            name: '工艺',
            //            value: { name: "工艺", x: X + 50, y: Y + 25 },
            //            check: false,
            //            x: X + 50,
            //            y: Y+25
            //        }
            //    }
                
            //}

            var linkobj = {
                source: start_id,
                target: end_id,
                symbolSize: [5, 20],
            }
            nodesOption.push(nodeobj);
            linksOption.push(linkobj);
            refreshGirdData(nodesOption, linksOption);
            //myChart.setOption({
            //    series: [{
            //        data: nodesOption,
            //        links: linksOption
            //    }]
            //});

        },
        deleteNode: function (id) {
            var nodesOption = option.series[0].data; //获得所有节点数组
            var linksOption = option.series[0].links; //获得所有连接的数组
            var curNode = nodesOption.find(t => t.id == id);
            var curLines = linksOption.filter(t => t.source == id);
            for (let index in linksOption) {
                if (linksOption[index].target == id) {
                    linksOption.splice(index, 1);
                }
            };
            for (let index in nodesOption) {
                if (nodesOption[index].id == id) {
                    nodesOption.splice(index, 1);
                }
            };
            for (let line of curLines) {
                page.deleteNode(line.target)
            };
            refreshGirdData(nodesOption, linksOption);
            //myChart.setOption({
            //    series: [{
            //        data: nodesOption,
            //        links: linksOption
            //    }]
            //});
        },
        showMenu: function (e, menus) {
            $("div", menubox).text(e.name);
            var menulistbox = $("ul", menubox).empty();
            $(menus).each(function (i, item) {
                var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
                    .mouseenter(function () {
                        $(this).attr("style", style_li_hover);
                    })
                    .mouseleave(function () {
                        $(this).attr("style", style_li);
                    })
                    .click(function () {
                        item["fn"].call(this);
                        menubox.hide();
                    });
                menulistbox.append(li);
            });
            menubox.css({
                "left": event.x,
                "top": event.y
            }).show();
        },
        newGuid: function () {
            var guid = "";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
                if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                    guid += "-";
            }
            return guid;
        },
        editNode: function (id) {
           
            learun.layerForm({
                id: 'form',
                title: '编辑',
                url: top.$.rootUrl + '/LR_CodeDemo/FlowShow/Edit?id='+id,
                width: 700,
                height: 400,
                callBack: function (id) {
                    return top[id].acceptClick(refreshGirdData);
                }
            });
        }

    };
    
}