在我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（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 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 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