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