mxGraph学习笔记--设置节点鼠标事件 //创建显示流程图的画布

原文转自：点我

 // 创建显示流程图的画布
 createEdit: function() {
  var self = this;
  // 创建流程图编辑器，先检查加载图形库
  JxUtil.loadJxGraph();
  self.editor = new mxCanvas('public/lib/graph/config/showeditor_nav.xml');
  var graph = self.editor.graph;
  // 设置编辑器为只读
  // 由于设置setEnabled为false，分组块不能收缩了，所以采用下面的组合
  graph.setCellsEditable(false);
  graph.setCellsSelectable(false);
  graph.setConnectable(false);
  graph.setCellsMovable(false);
  
  // 设置导航图的任务节点的鼠标与移入移出效果
  var track = new mxCellTracker(graph);
  track.mouseMove = function(sender, me) {
   var cell = this.getCell(me);
   if (cell && self.isTask(cell)) {
    // 设置鼠标为样式为手状
    me.getState().setCursor('pointer');
    if (this.cur_cell == null) {
     this.cur_cell = cell;
     // 设置鼠标移入节点效果
     self.moveNode(cell, true);
    }
   } else {
    // 设置鼠标移出节点效果
    self.moveNode(this.cur_cell, false);
    this.cur_cell = null;
   }
  };
  
  // 捕获任务节点的鼠标点击事件
  graph.addListener(mxEvent.CLICK, function(sender, evt) {
   var cell = evt.getProperty('cell');
   var nodeId = self.getTaskId(cell);
   if (nodeId.length > 0) {
    self.clickCell(self.graphId, nodeId);
   }
  });
 },

 // private 检查是否为任务节点
 isTask: function(cell) {
  if (cell == null) return false;
  
  var enc = new mxCodec();
  var node = enc.encode(cell);
  var nodetype = node.getAttribute('nodetype');
  if (nodetype == 'task') {
   return true;
  }
  return false;
 },

 /**
  * 给指定的节点设置背景色
  * cell -- 当前节点
  * isin -- true 表示鼠标在节点上，false 表示鼠标没在节点上
  **/
 moveNode: function(cell, isin) {
  // 为空与灰色的节点都不处理鼠标事件
  if (cell == null) return;
  if (cell.is_disabled) return;
  
  var self = this;
  var model = self.editor.graph.getModel();
  model.beginUpdate();
  try {
   self.editor.graph.setCellStyles("strokeColor", isin?"#A1A1FF":"#C3D9FF", [cell]);
   self.editor.graph.setCellStyles("fillColor", isin?"#A1A1FF":"#C3D9FF", [cell]);
  } finally {
   model.endUpdate();
  }
 }