轉:超級好用的流程圖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 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
轉:超級好用的流程圖js框架