前端流程图之JointJS（四）

今天的工作重点分三块：

属性窗口，用于展示和修改单个节点的属性值
Run to here（RTH）功能，任意选择一个节点，可以找出从根节点到当前节点到最短路径并进行着色
重新布局功能，对修改后的流程图进行重新布局
给页面加了一个外框架，感觉比较正式
重构了代码，集成到了require.js里

先上个效果图

效果图

有标题、菜单、缩进按钮、底部状态栏、中间的画布也可以通过拖拽进行resize，应该比较正规了。

属性窗口

这里使用的是rappid的Dialog和Inspector，代码是从rappid中扒出来的，这里只列一下使用方法。

Inspector，用于监控cell的值，并将其和input项关联起来。

var inspector = new joint.ui.Inspector({
    cell: element,
    live:false,
    inputs: {
        'name': {                              
             type: 'text',
             label: '文档名称',
             index:1
         },
         'name11': {
             type: 'text',
             label: '底数',
             index: 2
         }
    } 
});

Dialog显示弹出窗口，点击窗口外任何位置会关闭窗口

var dialog = new joint.ui.Dialog({
    type: 'inspector-dialog',
    width: 260,
    title: 'Edit Member', 
    closeButton: false,
    content: inspector.render().el,
    buttons: [{
        content: 'Cancel',
        action: 'cancel'
    }, {
        content: 'Apply',
        action: 'apply'
    }]

});

RTH
这里使用了graphlib的dijkstra算法来计算两点之间的路径，然后对路径上所有点进行渲染。

RTH

showPath: function(src, dest) {
    var g = this.graph.toGraphLib();
    var result = graphlib.alg.dijkstra(g, src);
    var path = [];
    var target = dest;
    while (target != src) {
        path.push(target);
        target = result[target].predecessor;
    }
    path.push(target);
    path.reverse();
    this.resetGraph();
    path.forEach(function(id) {
        var cell = this.graph.getCell(id);
        if (cell) {
            cell.attr('rect/stroke', 'orange')
            cell.attr('rect/fill', 'orange')
        }
    }.bind(this))
},

重新布局
重新布局最关键的是要把joint的graph对象转换为graphlib对象，然后再转换回来，缺省的转换过程会把link的label丢掉，需要自己添加对应的回调函数来进行转换。

//joint graph -> graph lib
var g = this.graph.toGraphLib({
    setEdgeLabel: function(cell) {
        return cell.prop('labels/0/attrs/text/text');
    }
});

//graphlib -> joint graph
var self = this;
this.graph.fromGraphLib(g, {
    importNode: function(node) {
        this.addCell(self.makeElement(node));
    },
    importEdge: function(edge) {
        var label = g.edge(edge);
        this.addCell(self.makeLink(edge.v, edge.w, label));
    }
});

收集的代码（备用）

  //define the style of magnet links
  defaultLink: function(cellView, magnet) {
    return new joint.shapes.standard.Link({
        attrs: {
          line: {
            stroke: V(magnet).attr('port-group') === "blue-ports" ? "blue" : "red"
          }
        }
    }
  })

前端流程图之JointJS（四）

推荐阅读更多精彩内容