mxGraph 学习笔记 --mxGraph常用功能代码

1、设置当鼠标移到流程图的节点上时，给个绿色边框标记，鼠标移开时标记消失：

new mxCellTracker(editor.graph, '#00FF00');

2、给指定流程图节点加上红色边框标记

 /**
  * 给指定节点加上标记
  * cellId -- 节点ID
  **/
 flagCurNode: function(cellId) {
  var self = this;
  var model = self.editor.graph.getModel();
  var curCell = model.getCell(cellId);
  model.beginUpdate();
  try {
   self.editor.graph.setCellStyles("strokeColor", "red", [curCell]);
   self.editor.graph.setCellStyles("strokeWidth", "2", [curCell]);
  } finally {
   model.endUpdate();
  }
 }

3、取当前选择的流程图节点的信息

  var self = this,
   graph = self.editor.graph,
   cell = graph.getSelectionCell();
  if (cell == null) {
   JxHint.alert(jx.wfx.nopic); //'没有选择图形元素！'
   return;
  }

  var objId = cell.getId();  //元素ID
  var enc = new mxCodec();
  var node = enc.encode(cell); //解析为DOM对象时自定义属性才可以识别
  var nodetype = node.getAttribute('nodetype'); //取节点类型，如果是线则为空
  var source = node.getAttribute('source');  //取线的来源节点ID，如果是节点则值为空

4、加载xml格式描述的流程图设计文件显示到设计控件中

  var hdCall = function(xmlfile) {
   if (xmlfile == null || xmlfile.length == 0) { 
    xmlfile = "<?xml version='1.0' encoding='utf-8'?>";
    xmlfile += "<mxGraphModel><root><mxCell id='0'/><mxCell id='1' parent='0'/></root></mxGraphModel>";
   }
   
   var doc = mxUtils.parseXml(xmlfile);
   var dec = new mxCodec(doc);
   dec.decode(doc.documentElement, self.editor.graph.getModel());
  };

5、保存设计信息到xml文件中

  var self = this,
   enc = new mxCodec(),
   graph = self.editor.graph,
   nodeGraph = enc.encode(graph.getModel()),
   rootNode = nodeGraph.getElementsByTagName('root')[0],
   mxCells = rootNode.childNodes;

//校验节点设置的有效性

...

//保存到xml中

var xmlFile = mxUtils.getPrettyXml(nodeGraph);