mxClient可以在网页中设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的插件-BFW插件库

mxClient可以在网页中设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的插件

mxClient是mxgraph的流程图绘制插件，可以在网页中设计/编辑 Workflow/BPM 流程图、图表、网络图和普通图形的插件

使用方式：

第一步引入bfwone

第二步use插件及css

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点</title>
    <style>
        html, body {
            height: 100%;
        }

        #graphContainer {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background: url('http://repo.bfw.wiki/bfwrepo/image/grid.gif');
            cursor: default;
        }
    </style>
</head>

<body onload="main(document.getElementById('graphContainer'))">
    <button id="btn2"> 创建</button>
    <div id="graphContainer"></div>
    <script>
        mxBasePath = 'http://repo.bfw.wiki/bfwrepo/js/mxgraph/';//加载资源库
    </script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mxClient.js"></script>
    <script>
        function main(container) {
            // 禁用鼠标右键
            mxEvent.disableContextMenu(container);
            const graph = new mxGraph(container);
            // 设置这个属性后节点之间才可以连接
            graph.setConnectable(true);
            // 开启区域选择
            new mxRubberband(graph);

            const parent = graph.getDefaultParent();
            graph.getModel().beginUpdate();
            try {
                var v1 = createNewNode(graph, 20, 20, '节点1');
                var v2 = createNewNode(graph, 200, 150, '节点2');
            } finally {
                graph.getModel().endUpdate();
            }
            var btn2 = document.getElementById('btn2');
            //创建新节点事件
            btn2.addEventListener('click', function() {
                createNewNode(graph, 120, 120, '新节点');
            }, false);

        }
        //创建节点函数
        function createNewNode(graph, x, y, text) {
            const parent = graph.getDefaultParent();
            var node = graph.insertVertex(parent, null, text, x, y, 80, 30);
            return node;
        }
    </script>
</body>


</html>

官网：https://github.com/jgraph/mxgraph