利用MxGraph绘制简单的任务流程图

分享人：小威

关于MxGraph

mxGraph是一款完全利用SVG和HTML技术做客户端渲染的Javascript图表库

MxGraph能做些什么

• Draw.io
• GraphEditor

MxGraph的基本一些概念

mxGraphModel

mxGraphModel是描述图表架构的核心模型对象, 并被封装在model包当中。插件，更改，移除等等在图表结构中发生的行为都将通过model API. 模型也提供了决定图表架构的方法，同时提供了一些设置视觉状态的方法，例如可见性，分组和样式等等。

Cells

Cells是图表模型的基础。他们表示了图表中组，顶点和边的状态

MxGraph常用的API对象

View

mxClient

Shape

UTIL

Layout

Model

Editor

Handler

Io

mxGraph的基本使用

const Mx = require('../assets/mxgraph')({
    mxImageBasePath: 'mxgraph/images',
    mxBasePath: 'mxgraph',
})

const {
    mxClient,
    mxGraph,
    mxShape,
    mxConnectionConstraint,
    mxPoint,
    mxPolyline,
    mxEvent,
    mxRubberband,
    mxCellState,
    mxConstants,
    mxEdgeStyle,
    mxCellRenderer,
    // mxCylinder,
} = Mx

创建graphModel, 并插入节点

// 实例化graph对象
const graph = new mxGraph(container)
    this.graph = graph

// 设置样式
let style = graph.getStylesheet().getDefaultEdgeStyle();
        style[mxConstants.STYLE_ROUNDED] = true;
        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
        graph.alternateEdgeStyle = 'elbow=vertical';

// 模型开始
graph.getModel().beginUpdate();
try {
    const v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30)
    const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30)
    const v3 = graph.insertVertex(parent, null, 'Node One!', 300, 150, 80, 30)
    const e1 = graph.insertEdge(parent, null, '', v1, v2)
} finally {
    graph.getModel().endUpdate()
}

查看Demo

Q&A

谢谢