当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 转：超级好用的流程图js框架

转：超级好用的流程图js框架

2019年04月17日  | 移动技术网IT编程  | 我要评论

支叫（graph theroy）。利用图我们可以做很多工具，比如思维导图，流程图，状态机，组织架构图，等等。今天我要做的是用开源的html5工具来快速构造一个做图的工具。

工具选择

预先善其事，必先利其器。第一件事是选择一件合适的工具，开源时代，程序员还是很幸福的，选择很多。

  • flowchart.js   , 基于svg创建flow chart

  • go.js   go.js 提供一整套的js工具 ，支持各种交互式图表的创建。有免费版和收费版

  • joint.js  joint.js 是另一个创建图标库的工具，也提供免费版和商业版

  • jsplumb   jsplumb是一套开源的流程图创建工具 ，小巧精悍，使用简单

  • d3  在html5领域，d3可谓是最好的可视化基础库，提供方面的dom操作，非常强大。

最终，我选择了jsplumb，因为它完全开源，使用很简单，用d3的话可能会多花很多功夫。joint.js也不错。大家可以根据自己的需要选择。

构建静态应用

下面我们一步一步的来使用jsplumb来创建我们的流程图工具。

第一步是等待dom和jsplumb初始化完毕，类似document.ready()和jquery.ready(), 要使用jsplumb, 需要把代码放在这个函数里：

1
2
3
jsplumb.ready(function() {
    // ... your code goes here ...
}

 

创建一个jsplumb的实例，并初始化jsplumb的配置参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
//initialize jsplumb
var color = "#e8c870";
var instance = jsplumb.getinstance({
    // notice the 'curviness' argument to this bezier curve.  the curves on this page are far smoother
    // than the curves on the first demo, which use the default curviness value.     
    connector : [ "bezier", { curviness:50 } ],
    dragoptions : { cursor: "pointer", zindex:2000 },
    paintstyle : { strokestyle:color, linewidth:2 },
    endpointstyle : { radius:5, fillstyle:color },
    hoverpaintstyle : {strokestyle:"#7073eb" },
    endpointhoverstyle : {fillstyle:"#7073eb" },
    container:"container-id"
 });

 

这里给给出了一些配置包括，连接线（这里配置了一个贝塞尔曲线），线的风格，连接点得风格。container需要配置一个对应的div容器的id。（这里也可以使用setcontainer的方法）

下面我们要创建一个节点（node），每一个节点可以用一个div来实现。我这里提供了一个函数来创建节点。

1
2
3
4
5
6
7
8
9
10
11
function addnode(parentid, nodeid, nodelable, position) {
  var panel = d3.select("#" + parentid);
  panel.append('div').style('width','120px').style('height','50px')
    .style('position','absolute')
    .style('top',position.y).style('left',position.x)
    .style('border','2px #9dffca solid').attr('align','center')
    .attr('id',nodeid).classed('node',true)
    .text(nodelable);
 
  return jsplumb.getselector('#' + nodeid)[0];
}

 

这里做的事情就是创建了一个div元素，并放在对应的容器的制定位置上，注意为了支持拖拽的功能，必须使用position:absolute 。

我使用d3来操作dom，大家可能会更习惯jquery，这纯属个人喜好的问题。

最后返回创建节点的实例引用，这是的selector使用了jsplumb.getselector()方法，它和jquery的selector是一样的，这样用的好处是你可以使用不同的dom操作库，例如vanilla

下面我使用一个函数来创建端点/锚点（anchor），锚点就是节点上的连接点，用于连接不同的节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function addports(instance, node, ports, type) {
  //assume horizental layout
  var number_of_ports = ports.length;
  var i = 0;
  var height = $(node).height();  //note, jquery does not include border for height
  var y_offset = 1 / ( number_of_ports + 1);
  var y = 0;
 
  for ( ; i < number_of_ports; i++ ) {
    var anchor = [0,0,0,0];
    var paintstyle = { radius:5, fillstyle:'#ff8891' };
    var issource = false, istarget = false;
    if ( type === 'output' ) {
      anchor[0] = 1;
      paintstyle.fillstyle = '#d4ffd6';
      issource = true;
    } else {
      istarget =true;
    }
 
    anchor[1] = y + y_offset;
    y = anchor[1];
 
    instance.addendpoint(node, {
      uuid:node.getattribute("id") + "-" + ports[i],
      paintstyle: paintstyle,
      anchor:anchor,
      maxconnections:-1,
      issource:issource,
      istarget:istarget
    });
  }
}

 

instance是jsplumb的实例

node是我们用addnode方法创建的node实例

ports，是一个string的数组，指定端点的个数和名字

type，可能是output或者input，指定端点的种类，一个节点的输出端口可以连接另一个节点的输入端口。

这里anchor是一个四维数组，0维和1维分别是锚点在节点x轴和y轴的偏移百分比。我这里希望把端口画在节点的左右两侧，并按照端口的数量均匀分布。

最后使用instance.addendpoint来创建端点。注意这里只要指定issource和istarget就可以用drag&drop的方式来连接端点，非常方便。

下面一步我们提供一个函数来连接端点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function connectports(instance, node1, port1, node2 , port2) {
  // declare some common values:
  var color = "gray";
  var arrowcommon = { foldback:0.8, fillstyle:color, width:5 },
  // use three-arg spec to create two different arrows with the common values:
  overlays = [
    [ "arrow", { location:0.8 }, arrowcommon ],
    [ "arrow", { location:0.2, direction:-1 }, arrowcommon ]
  ];
 
  var uuid_source = node1.getattribute("id") + "-" + port1;
  var uuid_target = node2.getattribute("id") + "-" + port2;
 
  instance.connect({uuids:[uuid_source, uuid_target]});
}

 

node1和node2是源节点和目标节点的引用，port1和port2是源端口和目标端口的名字。

使用instance.connect方法来创建连接。 overlays用来添加连接线的箭头效果或者其他风格，我这里没有使用，因为觉得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法参数就可以了。

调用以上方法来创建节点，端点和连接线。

1
2
3
4
5
6
7
var node1 = addnode('container-id','node1', 'node1', {x:'80px',y:'20px'});
var node2 = addnode('container-id','node2', 'node2', {x:'280px',y:'20px'});
 
addports(instance, node1, ['out1','out2'],'output');
addports(instance, node2, ['in','in1','in2'],'input');
 
connectports(instance, node1, 'out2', node2, 'in');

 

这里我们创建了两个节点，第一个节点有两个输出端口，第二个节点有三个输入端口，然后把第一个节点的out2端口连接到第二个端点的in端口。效果如下：

最后我们给节点增加drag&drop的功能，这样我们就可以拖动这些节点来改变图的布局了。

1
instance.draggable($('.node'));

 

这里似乎依赖于jquery-ui,我还不是很清楚。

交互式创建节点

我们已经初步具有了创建图的功能，可是节点的创建必须通过程序，我们希望用交互的方式来创建节点。

通常我们希望有一个tree view的控件，让后通过拖拽来创建对应类型的节点。这里我使用了这个开源的tree view，基于bootstrap 

我们先创建一个tree view：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function gettreedata() {
  var tree = [
    {
      text: "nodes",
      nodes: [
        {
          text: "node1",
        },
        {
          text: "node2"
        }
      ]
    }
  ];
 
  return tree;
}
//initialize control tree view
$('#control-panel').treeview({data: gettreedata()});

 

树上有两个节点:

然后我实现从树上拖拽对应的节点，到流程图上的逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//handle drag and drop
$('.list-group-item').attr('draggable','true').on('dragstart', function(ev){
  //ev.datatransfer.setdata("text", ev.target.id);
  ev.originalevent.datatransfer.setdata('text',ev.target.textcontent);
  console.log('drag start');
});
 
$('#container-id').on('drop', function(ev){
  //avoid event conlict for jsplumb
  if (ev.target.classname.indexof('_jsplumb') >= 0 ) {
    return;
  }
 
  ev.preventdefault();
  var mx = '' + ev.originalevent.offsetx + 'px';
  var my = '' + ev.originalevent.offsety + 'px';
 
  console.log('on drop : ' + ev.originalevent.datatransfer.getdata('text'));
  var uid = new date().gettime();
  var node = addnode('flow-panel','node' + uid, 'node', {x:mx,y:my});
  addports(instance, node, ['out'],'output');
  addports(instance, node, ['in1','in2'],'input');
  instance.draggable($(node));
}).on('dragover', function(ev){
  ev.preventdefault();
  console.log('on drag over');
});

 

这里要注意的是要避免和jsplumb拖拽端点的逻辑冲突，当检测到target是jsplumb对象是需要直接从drop方法中退出以执行对应的jsplumb的drop逻辑。

好了，一个绘制流程图的软件工具初步完工。

我把代码放在oschina的代码托管服务上了， 大家有兴趣可以下来试试 

转至:http://gangtao.is-programmer.com/posts/71082.html

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网