Mxgraph学习（三）

前言

上一篇主要介绍了mxgraph如何将图形内容序列化到数据库或者其他存储介质然后再反序列化展示到画布上，这篇主要介绍如何在流程的单个节点上添加运行状态，也就是下图这个小图标。

操作过程

直接上代码

// 绘制给定单元格状态的形状
addOverlayHandler(cell,message) {
    // 先清除节点上的状态
    this.graph.clearCellOverlays(cell);
    var src = this.gtImgUrl(message == 'success' ? 'state_executed.png' : 'error.png');
    var overlay = new mxCellOverlay(new mxImage(src, 24, 24), '成功');
    overlay.cursor = 'hand';
    overlay.align = 'right';
    overlay.verticalAlign = 'top';
    this.graph.addCellOverlay(cell, overlay);
},

说明

该函数的参数：

cell表示的就是mxGraph中的mxCell有可能是节点也有可能是连线。我这里因为前面做了判断所以只处理节点。

message这个是后台处理返回的实时消息，如果处理成功返回的状态就是success,失败返回的状态就是fail.

然后在监听器里面监听message的内容，调用该方法即可显示状态。

补充

现在虽然可以使用mxGraph来画一个可视化的流程了，流程图信息也可以序列化到数据库了，但是如何给流程节点设置内容之前第二篇文章遗漏了，这里做下补充，我是采用的方法是，在流程节点上双击，然后弹框来设置自定义的内容。

监听双击操作

// 添加监听鼠标双击事件
getMonseDoubleClickEvent() {
    this.graph.addListener(mxEvent.DOUBLE_CLICK, mxUtils.bind(this, function(sender, evt) {
            var cell = evt.getProperty('cell');
            if (cell) {
                // 这里是弹框，可以在弹框中设置具体的节点数据，然后保存
                this.$refs.nodeSettingSon.drawer = true;
                // 自定义的节点数据，这里是设置回显，将节点已经存在的数据显示到弹框中
                this.node.fullPath = cell.data.fullPath;
                this.node.text = cell.data.context;
                this.node.radio = cell.data.operation;
                this.node.nodeName = cell.value;
                this.node.type = cell.data.nodeName;
                // 将cell保存到集合
                if (cell.vertex) {
                    this.selectVertex = cell;
                } else {
                    this.selectEdge = cell;
                }
            }
        })
    );
},

弹框修改节点信息

// 修改节点内容：
updateCell() {
    // 修改节点数据
    this.graph.getModel().beginUpdate();
    try {
        // 获取当前触发弹框的节点
        var cell = this.selectVertex;
        // 将弹框中设置的内容保存到cell中
        cell.data.fullPath = this.node.fullPath;
        cell.data.context = this.node.text;
        cell.data.operation = this.node.radio;
        cell.value = this.node.nodeName;

        this.graph.refresh(cell) // 刷新图
    } finally {
        this.graph.getModel().endUpdate();
    }

},

预告

下一篇文章介绍下后台如何解析mxGraph中导出的xml文件。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第3天，点击查看活动详情