轉：超級好用的流程圖js框架
支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。
工具選擇
預先善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。
-
flowchart.js http://adrai.github.io/flowchart.js/ , 基於SVG創建Flow Chart
-
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具 ，支持各種交互式圖表的創建。有免費版和收費版
-
joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
-
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具 ，小巧精悍，使用簡單
-
d3 http://d3js.org 在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 JsPlumbvar 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 https://github.com/jonmiles/bootstrap-treeview
我們先創建一個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://git.oschina.net/gangtao/FlowChart-Builder
轉至:http://gangtao.is-programmer.com/posts/71082.html
轉：超級好用的流程圖js框架