2019-06-21mxGraph

关于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);

你可能感兴趣的:(2019-06-21mxGraph)