mxgraph点击事件java_给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();   }  }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！