其他分享
首页 > 其他分享> > mxGraph上下级节点与连线高亮显示代码

mxGraph上下级节点与连线高亮显示代码

作者:互联网

 var highlightList = [];
    var highlighEdgetList = [];
    // 给图中节点加入单击事件
    graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
         var cell = evt.getProperty('cell');
         
         // 高亮节点集合
         if(highlightList){
             for(var k=0;k<highlightList.length;k++){
                 highlightList[k].light.destroy();
             }
         }

        // 高亮线集合
        if(highlighEdgetList){
            for(var k=0;k<highlighEdgetList.length;k++){
                highlighEdgetList[k].light.destroy();
            }
        }
         
        if(cell&&cell.isVertex&&cell.itypeid){
             var edges = cell.edges;
             var edge;
             for(var i=0;i<edges.length;i++){
                 edge = edges[i];
                 // 添加上级节点相关高亮配置
                 if(cell.id!=edge.source.id){
                     var cellSource = graph.getModel().getCell(edge.source.id);
                     // 上级节点高亮配置
                     var highlight = new mxCellHighlight(graph, '#00FF00', 2);
                     highlight.highlight(graph.view.getState(cellSource));
                     var highlightMap = {};

                     highlightMap.cell = cellSource;
                     highlightMap.light = highlight;
                     highlightList.push(highlightMap);

                    // 上级连线高亮配置
                     var highlightEdge = new mxCellHighlight(graph, '#00FF00', 2);
                     highlightEdge.highlight(graph.view.getState(edge));
                     var highlightEdgeMap = {};
                     highlightEdgeMap.light = highlightEdge;
                     highlighEdgetList.push(highlightEdgeMap);
                 }
                 // 添加下级节点相关高亮配置
                 if(cell.id!=edge.target.id){
                     var cellTarget = graph.getModel().getCell(edge.target.id);
                     // 下级节点高亮配置
                     var highlight = new mxCellHighlight(graph, '#00FF00', 2);
                     highlight.highlight(graph.view.getState(cellTarget));

                     var highlightMap = {};
                     highlightMap.cell = cellTarget;
                     highlightMap.light = highlight;
                     highlightList.push(highlightMap);
                    // 下级连线高亮配置
                     var highlightEdge = new mxCellHighlight(graph, '#00FF00', 2);
                     highlightEdge.highlight(graph.view.getState(edge));
                     var highlightEdgeMap = {};
                     highlightEdgeMap.light = highlightEdge;
                     highlighEdgetList.push(highlightEdgeMap);
                 }
             }
         }
    });

 

标签:mxGraph,高亮,cell,highlightList,var,上下级,evt,节点
来源: https://www.cnblogs.com/symbol8888/p/13031263.html