给mxGraph的节点设置鼠标事件
来源:互联网 发布:python退出程序命令 编辑:程序博客网 时间:2024/06/07 07:54
//创建显示流程图的画布
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();
}
}
- 给mxGraph的节点设置鼠标事件
- mxGraph节点图形设置
- Flex中如何通过Tree类的setItemIcon事件给Tree节点设置一个个性化图标
- mxGraph Swing 循环取得所有面板上的Cell节点
- JS给某一个节点的子节点全部绑定事件
- 鼠标input_event鼠标事件设置
- JTree的节点式样美化实现鼠标事件监听
- TreeView1鼠标点击节点触发的单击事件
- mxGraph web 下IE设置图片节点显示,只需修改js代码
- 给ajax加载的页面元素添加鼠标事件
- JQuery给动态加载的节点绑定有效事件
- mxGraph 设置默认Edge样式
- mxgraph的右键菜单
- mxgraph
- MxGRAPH
- mxgraph
- mxGraph
- js动态设置鼠标事件
- link和@import的区别
- Capitulum Sampling
- 教务这段时间
- VBO__PBO与FBO
- CUDA应用:GPU加速的离线渲染技术
- 给mxGraph的节点设置鼠标事件
- Ball Stacking (DP+很有意思) #by Plato
- 那些年,我们一起学过的汇编----之子程序设计
- #AWK#SORT命令
- Sql Server中改变表中的字段名的语句!(不是教程胜似教程,是示例代码)
- gdi+保存图片
- Intel 386 and AMD x86-64 Options
- ThreadPoolExecutor几点使用建议
- java.util.concurrent.Executors学习