关于mxGraph的研究
下载mxClient.js
github地址https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fjgraph%2Fmxgraph
html部分
Sidebar.js
加载mxGraph 默认的一些工具
var toolbar = new mxToolbar(container);
this.toolbar = toolbar;
this.graph = graph;
toolbar.enabled = false;
this.init();
}
ToolBar.prototype.init = function() {
/**
* 第一个参数:工具栏在显示的图标
* 第二个参数:生成的 cell 的宽度
* 第三个参数:生成的 cell 的高度
* 第四个参数:生成的 cell 的样式
* */
this.addVertex('images/swimlane.gif', 120, 160, 'shape=swimlane;startSize=20;');
this.addVertex('images/rectangle.gif', 100, 40, '');
this.addVertex('images/rounded.gif', 100, 40, 'shape=rounded');
this.addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
this.addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
this.addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
this.addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
this.addVertex('images/actor.gif', 30, 40, 'shape=actor;whiteSpace=wrap');
this.toolbar.addLine();
}
ToolBar.prototype.addVertex = function(icon, w, h, style) {
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
this.addToolbarItem(vertex, icon);
}
ToolBar.prototype.addToolbarItem = function(prototype, image) {
var graph = this.graph;
var toolbar = this.toolbar;
var funct = function(graph, evt, cell) {
graph.stopEditing(false);
var pt = graph.getPointForEvent(evt);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = pt.x;
vertex.geometry.y = pt.y;
graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, funct);
//绑定拖拽事件
mxUtils.makeDraggable(img, graph, funct);
}
向graph加载cell有两种方式
第一种就是html中的方式
第二种如下
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30,style);