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();
  }
 }