（转）mxgraph基础使用

公司的项目用到mxgraph，大部分的使用同事都已经写好了。但是今天要我加一个新的功能，这让我想来整理下基本用法。如果哪天用到了，不至于无从下手

文章从https://www.jianshu.com/p/1c52cdd24a2a 转了大部分。后面补充了一下自己开发中用到的一些功能

function main(container) {
//判断浏览器是否支持
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    } else {
        //创建视图
        //创建的这个graph对象，可以全局使用
        var graph = new mxGraph(container);
        graph.setHtmlLabels(true);
        graph.setTolerance(20);
        graph.setEnabled(false); // 禁用选择和单元格处理

        var style = graph.getStylesheet().getDefaultVertexStyle();
        // style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;//文字对齐方式
        // style[mxConstants.STYLE_FILLCOLOR] = 'rgb(251, 148, 79)'; //填充色 
        style[mxConstants.STYLE_FONTSIZE] = 14; //文字大小
        style[mxConstants.STYLE_FONTCOLOR] = "#fff"; //文字颜色
        style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; //自动换行
        delete style[mxConstants.STYLE_STROKECOLOR]; //去掉边框
        //鼠标拖动
        graph.setAutoSizeCells(true);
        graph.setPanning(true);
        graph.panningHandler.useLeftButtonForPanning = true;

        graph.setCellsResizable(false); // 禁止改变元素大小
        mxEvent.disableContextMenu(container); // 禁用浏览器默认的右键菜单栏

        // 缩放
        mxEvent.addMouseWheelListener(function(evt, up) {
            if (up) {
                graph.zoomIn();
            } else {
                graph.zoomOut();
            }
            mxEvent.consume(evt);
        });

        style = graph.getStylesheet().getDefaultEdgeStyle();
        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
        style[mxConstants.STYLE_STROKECOLOR] = 'rgb(115, 121, 133)'; //连接线颜色
        delete graph.getStylesheet().getDefaultEdgeStyle()['endArrow']; //去掉箭头


        //添加双击事件
        graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
            var cell = evt.getProperty('cell');  //获取元素
            console.log(cell)
        }); 

/* 关于mxgraph的事件
mxEvent.CHANGE   //焦点改变
mxEvent.ADD  
...
等等等，可以去mxEvent.js里，从最后面看
*/
        
        //获取选中的元素
        var cell=graph.getSelectionCell()

        var parent = graph.getDefaultParent();
        graph.getModel().beginUpdate();
        try {
            var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); //生成模块
            var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
            graph.insertEdge(parent, null, ' ', v2, v1); //连接两个模块
        } finally {
            graph.getModel().endUpdate();
        }
    }
}