利用Splunk做应用程序的性能分析
Python 并行分布式框架之 PP

用HTML5构建一个流程图绘制工具

posted @ 2014年11月28日 16:27 in 软件开发 with tags html5 flowchart , 21674 阅读
分享到: 更多

在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy)。利用图我们可以做很多工具,比如思维导图,流程图,状态机,组织架构图,等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。

工具选择

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

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

构建静态应用

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

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

jsPlumb.ready(function() {
    // ... your code goes here ...
}

 

创建一个jsPlumb的实例,并初始化jsPlumb的配置参数:

//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来实现。我这里提供了一个函数来创建节点。

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),锚点就是节点上的连接点,用于连接不同的节点。

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的方式来连接端点,非常方便。

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

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的方法参数就可以了。

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

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的功能,这样我们就可以拖动这些节点来改变图的布局了。

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

 

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

交互式创建节点

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

通常我们希望有一个tree view的控件,让后通过拖拽来创建对应类型的节点。这里我使用了这个开源的tree view,基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我们先创建一个tree view:

function getTreeData() {
  var tree = [
    {
      text: "Nodes",
      nodes: [
        {
          text: "Node1",
        },
        {
          text: "Node2"
        }
      ]
    }
  ]; 

  return tree;
}
//Initialize Control Tree View
$('#control-panel').treeview({data: getTreeData()});

 

树上有两个节点:

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

//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://git.oschina.net/gangtao/FlowChart-Builder


分享到: 更多
Avatar_small
独舞天威 说:
2015年9月01日 14:40

go.js能用于商业上吗??

Avatar_small
sdf 说:
2018年4月07日 22:13

sdfdfs

fdsfsdfsdf

sfd

fsd

f

dsf

s

dfsd

f

dsf

s

fsd

f

sd

fsd

f

sdf

sd

fsd

f

sd

fsd

 

cvx

vxc

v

xc

 

bd

b

gf

h

gy

jgy

jg

hj

gh

jg

yj

ytj

ty

 

Avatar_small
f88tw┃华歌尔 说:
2020年4月22日 20:43

敬启者:个人小网站希望大家多多支持 感谢您对我们热心的支持 f88tw┃华歌尔┃I appreciate your kind assistance. f88tw|墓园|捡骨流程|捡骨费用|捡骨时间|禁忌|捡骨颜色|捡骨师|新竹|时间|台北|桃园|苗栗|头份|火化|晋塔|安葬|法事|捡骨|看日子|墓穴|墓园|坟墓|看日子|乞丐|http://mypaper.pchome.com.tw/f88tw

Avatar_small
f88tw 说:
2021年6月01日 17:46

敬启者:个人小网站希望大家多多支持 感谢您对我们热心的支持 f88tw┃华歌尔┃I appreciate your kind assistance. f88tw粗工粗工内容 粗工粗工内容 |墓园|捡骨流程|捡骨费用|捡骨时间|禁忌|捡骨颜色|捡骨师|新竹|时间|台北|桃园|苗栗|头份|火化|捡骨|https://mypaper.m.pchome.com.tw/f88tw

Avatar_small
Bong88 说:
2021年6月26日 00:02

your writing style very good

Avatar_small
instanthack 说:
2021年7月08日 03:22

This is a very interesting web page and I have enjoyed reading many of the articles and posts contained on the website, keep up the good work and hope to read some more interesting content in the future.

Avatar_small
Cialis tablets 说:
2021年7月08日 13:50

This is a very interesting web page and I have enjoyed reading many of the articles and posts contained on the website, keep up the good work and hope to read some more interesting content in the future.

Avatar_small
visit website 说:
2021年7月15日 02:21

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
gwaa.net 说:
2021年7月16日 01:38

I was looking at some of your posts on this website and I conceive this web site is really instructive! Keep putting up.

Avatar_small
subcene 说:
2021年7月19日 08:49

hello!! Very interesting discussion glad that I came across such informative post. Keep up the good work friend. Glad to be part of your net community

Avatar_small
สล็อตฟรีเครดิต 说:
2021年7月20日 00:49

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info

Avatar_small
fire safety 说:
2021年7月20日 04:23

Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon!

Avatar_small
moviesflix 说:
2021年7月22日 11:22

Fabulous post, you have denoted out some fantastic points, I likewise think this s a very wonderful website. I will visit again for more quality contents and also, recommend this site to all. Thanks.

Avatar_small
Akku Luftpumpe 说:
2021年7月23日 11:35

Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family.

Avatar_small
Akku Luftpumpe 说:
2021年7月23日 11:35

Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family.

Avatar_small
https://g.page/dr-go 说:
2021年7月24日 05:45

This is important, though it's necessary to help you head over to it weblink:

Avatar_small
fat burners 说:
2021年7月25日 06:12

Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon!

Avatar_small
ambcrypto epaper 说:
2021年7月25日 11:33

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people

Avatar_small
how long does it tak 说:
2021年7月26日 03:06

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

Avatar_small
penload 说:
2021年7月26日 12:48

I was looking at some of your posts on this website and I conceive this web site is really instructive! Keep putting up.

Avatar_small
visa de canadá 说:
2021年7月27日 13:46

This is important, though it's necessary to help you head over to it weblink

Avatar_small
nextbet 说:
2021年7月28日 11:27

Wonderful illustrated information. I thank you about that. No doubt it will be very useful for my future projects. Would like to see some other posts on the same subject!

Avatar_small
Travel Tourism 说:
2021年7月30日 15:46

Hey very nice blog!! Man .. Excellent .. Amazing .. I will bookmark your website and take the feeds also…I am happy to find a lot of useful info here in the post

Avatar_small
www.cacamart.com 说:
2021年7月31日 02:53

This is a very interesting web page and I have enjoyed reading many of the articles and posts contained on the website, keep up the good work and hope to read some more interesting content in the future.

Avatar_small
amazon sale of phenq 说:
2021年7月31日 10:19

I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks.

Avatar_small
hotmail.com ́ login 说:
2021年8月01日 14:01

Pretty good post. I have just stumbled upon your blog and enjoyed reading your blog posts very much. I am looking for new posts to get more precious info. Big thanks for the useful info.

Avatar_small
Uwatchfree 说:
2021年8月01日 17:51

Awesome dispatch! I am indeed getting apt to over this info, is truly neighborly my buddy. Likewise fantastic blog here among many of the costly info you acquire. Reserve up the beneficial process you are doing here.

Avatar_small
canada visa online 说:
2021年8月02日 16:41

You made some decent points there. I looked on the net for your issue and located most individuals will go as well as with the internet site.

Avatar_small
relx煙彈 说:
2021年8月03日 15:17

Great! It sounds good. Thanks for sharing..

Avatar_small
free 3d 说:
2021年8月05日 19:08

Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...

Avatar_small
加拿大签证在线 说:
2021年8月06日 00:02

I wanted to leave a little comment to support you and wish you a good continuation. Wishing you the best of luck for all your blogging efforts.

Avatar_small
pawn phoenix 说:
2021年8月07日 01:18

Really your post is really very good and I appreciate it. It’s hard to sort the good from the bad sometimes.You definitely put a new spin on a topic thats been written about for years

Avatar_small
find out 说:
2021年8月08日 22:57

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
khatrimaza 说:
2021年8月09日 18:13

I think this is one of the most significant information for me. And i’m glad reading your article. But should remark on some general things, The web site style is perfect, the articles is really great : D. Good job, cheers

Avatar_small
instant views 说:
2021年8月10日 02:32

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

Avatar_small
instagram takipçi sa 说:
2021年8月10日 06:04

Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene.

Avatar_small
Visto Indiano 说:
2021年8月10日 23:07

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
hindistan vizesi çev 说:
2021年8月14日 22:22

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

Avatar_small
Yeni Zelanda ETA 说:
2021年8月16日 04:50

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
blackjack 说:
2021年8月18日 10:34

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
canada visum voor ne 说:
2021年8月23日 15:15

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

Avatar_small
ติดตั้งกล้องวงจรปิด 说:
2021年8月24日 18:31

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

Avatar_small
Visto Indiano 说:
2021年8月25日 08:35

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

Avatar_small
188bet 说:
2021年8月25日 13:19

Wow, What an Outstanding post. I found this too much informatics. It is what I was seeking for. I would like to recommend you that please keep sharing such type of info.If possible, Thanks

Avatar_small
วีซ่าท่องเที่ยวอินเด 说:
2021年8月27日 06:37

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

Avatar_small
خصم 说:
2021年8月27日 23:13

Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.

Avatar_small
mega888 apk download 说:
2021年8月28日 07:57

This is very useful, although it will be important to help simply click that web page link:

Avatar_small
canada visum voor ne 说:
2021年8月28日 10:03

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

Avatar_small
soaptoday 说:
2021年8月30日 02:21

I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.

Avatar_small
soap2day movies 说:
2021年8月30日 23:28

Thanks for another informative website. Where else could I get that type of information written in such a perfect way? I have a project that I’m just now working on, and I’ve been on the look out for such info.

Avatar_small
merchant sales rep 说:
2021年8月31日 04:19

Cool you inscribe, the info is really salubrious further fascinating, I'll give you a connect to my scene

Avatar_small
this 说:
2021年9月01日 03:14

Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our.

Avatar_small
House Cleaning Servi 说:
2021年9月12日 22:40

There is a party of professionals in which are well trained in neuro-scientific housekeeping. They are simply experienced and additionally efficient in just about every house bind. You may well hire a fabulous part-time housemaid for Dubai or pc daily chores try full-time service personnel in Dubai. With us, go to unlock quite a plethora of cleaning offerings.

Avatar_small
ท่อHDPE 说:
2021年9月15日 03:03

The information you have posted is very useful. The sites you have referred was good. Thanks for sharing.

Avatar_small
Bruno Nicoletti 说:
2021年9月18日 01:45

i was just browsing along and came upon your blog. just wanted to say good blog and this article really helped me <a href="https://www.marketwatch.com/press-release/bruno-nicoletti-selected-as-ceo-of-the-year-by-ceo-monthly-magazine-2021-09-99">Bruno Nicoletti</a>

Avatar_small
elizabeth rabbit 说:
2021年9月18日 14:12

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.

Avatar_small
Bruno Nicoletti 说:
2021年9月21日 02:24

Great! It sounds good. Thanks for sharing..

Avatar_small
uae visa services 说:
2021年9月21日 06:12

wow very nice <a href="https://opseon.com/">uae visa services</a>

Avatar_small
FB88 说:
2021年9月23日 17:27

This is important, though it's necessary to help you head over to it weblink:

Avatar_small
Satta king 说:
2021年9月24日 07:00

Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...

Avatar_small
merchant sales rep 说:
2021年9月24日 11:44

However, you must remember that not all sports betting software will yield you sizable returns in your sports trading activities.

Avatar_small
slot 说:
2021年9月25日 03:13

I think this is one of the most significant information for me. And i’m glad reading your article. But should remark on some general things, The web site style is perfect, the articles is really great : D. Good job, cheers

Avatar_small
afdah 说:
2021年9月27日 06:10

I visit your blog regularly and recommend it to all of those who wanted to enhance their knowledge with ease. The style of writing is excellent and also the content is top-notch. Thanks for that shrewdness you provide the readers!

Avatar_small
tshirts for nerds 说:
2021年9月27日 22:55

I visit your blog regularly and recommend it to all of those who wanted to enhance their knowledge with ease. The style of writing is excellent and also the content is top-notch. Thanks for that shrewdness you provide the readers!

Avatar_small
Stage Curaçao 说:
2021年9月28日 14:27

Amazing, this is great as you want to learn more, I invite to This is my page.

Avatar_small
Stage op Curaçao 说:
2021年9月30日 10:27

Wow, this is fascinating reading. I am glad I found this and got to read it. Great job on this content. I liked it a lot. Thanks for the great and unique info.

Avatar_small
here 说:
2021年10月01日 05:35

You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you.

Avatar_small
white label 说:
2021年10月02日 17:25

I all around need to uncover to you that I am new to weblog and totally respected this blog page. Reliable I'm going to bookmark your blog . All of you around have mind blowing stories. Offers of interest familiarizing with us your blog.

Avatar_small
ฉีดฟิลเลอร์คาง 说:
2021年10月03日 13:57

This was really an interesting topic and I kinda agree with what you have mentioned here!

Avatar_small
Bruno Nicoletti 说:
2021年10月04日 03:56

nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so cheers for taking time to discuss this

Avatar_small
Bruno Nicoletti 说:
2021年10月04日 03:57

This was really an interesting topic and I kinda agree with what you have mentioned here!

Avatar_small
Bruno Nicoletti 说:
2021年10月04日 03:58

all around need to uncover to you that I am new to weblog and totally respected this blog page. Reliable I'm going to bookmark your blog . All of you around have mind blowing stories. Offers of interest familiarizing with us your blog.

Avatar_small
guest post, guestpo 说:
2021年10月07日 02:19

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

Avatar_small
Buy Naughty One Stra 说:
2021年10月11日 03:03

wow very nice <a href="https://somkingundispensary.com/">Buy Naughty One Strain Online</a>

Avatar_small
دانلود فیلم سریال 说:
2021年10月26日 06:02

Everything has its own value, but this is really precious information shared by Author of


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter