jsPlumb Demo源码分析
html 代码：
<!doctype html>
<html>
<head>
<title>jsPlumb 1.5.2 demo - jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- <link rel="stylesheet" href="../demo-all.css"> -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="main">
<div id="render"></div>
<div class="component window" id="window1"><strong>Window 1</strong></div>
<div class="component window" id="window2"><strong>Window 2</strong></div>
<div class="component window" id="window3"><strong>Window 3</strong></div>
<div class="component window" id="window4"><strong>Window 4</strong></div>
<div class="component window" id="window5"><strong>Window 5</strong></div>
<div class="component window" id="window6"><strong>Window 6</strong></div>
<div class="component window" id="window7"><strong>Window 7</strong></div>
</div>
</body>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-1.9.0-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-ui-1.9.2-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.jsPlumb-1.5.2.js'></script>
<!-- demo code -->
<script src="demo.js"></script>
</html>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
css样式：
#window1 { top:5em;left:4em;}
#window2 { top:17em; left:49em;}
#window3 { top:31em;left:4em; }
#window4 { top:9em; left:28em;}
#window5 {top:45em;left:33em;}
#window6 {top:30em;left:64em;}
#window7 {top:52em;left:6em;}
#window8 {left:66em;top:32em;}
body {
padding:0;
margin:0;
background-color:white;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color:#eaedef;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:local('Open Sans'),
local('OpenSans'),
url("OpenSans-Regular.ttf") format('truetype'),
url("OpenSans.woff") format('woff');
}
#main {
margin-top:44px;
position: relative;
font-size: 80%;
}
#render {
background-color:#fff;
}
.window{
text-align:center;
z-index:24;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}
.component:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window {
background-color:white;
border:1px solid #346789;
box-shadow: 2px 2px 19px #e0e0e0;
-o-box-shadow: 2px 2px 19px #e0e0e0;
-webkit-box-shadow: 2px 2px 19px #e0e0e0;
-moz-box-shadow: 2px 2px 19px #e0e0e0;
-moz-border-radius:0.5em;
border-radius:0.5em;
width:5em; height:5em;
position:absolute;
color:black;
padding:0.5em;
width:8em;
height:8em;
line-height: 8em;
font-size:0.8em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.window:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window a {
font-family:helvetica;
}
._jsPlumb_drag_select * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none
}
/** Z-INDEX **/
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
z-index:23 !important;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
js代码：
jsPlumb.bind("ready", function() {
window.jsPlumbDemo = {
init : function() {
jsPlumb.importDefaults({
DragOptions : { cursor: "pointer", zIndex:2000 },
HoverClass:"connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = { strokeStyle:"#7ec3d9" }; // hover paint style is merged on normal style, so you
// don't necessarily need to specify a lineWidth
//
// connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
// window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
// and allow the endpoint styles to derive their color and outline from the connection.
// label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
// wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
// our own css classes, and the Label overlay has three css classes specified for it too. we also give this
// connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
//
var connection1 = jsPlumb.connect({
//开始点
source:"window1",
//目的点
target:"window2",
//连接器采用Bezier曲线，还有直线和流程图连线
connector:["Bezier", { curviness:70 }],
//样式
cssClass:"c1",
//端点类型，点对点（Dot Endpoint ）,矩形端点(Rectangle Endpoint).图片端点(Image Endpoint)
//blank端点类型为空
endpoint:"Blank",
endpointClass:"c1Endpoint",
//anchors锚（动态锚，静态锚）,[x,y,dx,dy];x,y的区间为[0,1]意思为锚的位置;dx,dy的区间为[-1,1]意思为曲线的方向
anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:6,
//连接器的颜色
strokeStyle:"#a7b04b",
//连接器或端点的轮廓宽度
outlineWidth:1,
//连接器或端点的颜色
outlineColor:"#666"
},
//fillStyle:定义Endpoint的颜色
endpointStyle:{ fillStyle:"#a7b04b" },
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//覆盖物类型，四个值Arrow可配置的箭头（可折回），Label点的连接器上可配置的标签，PlainArrow一个三角形的箭头，不可折回，Diamond钻石
overlays : [
//连接器上配置的label
["Label", {
cssClass:"l1 component label",
//显示的label
label : "Connection One",
//连接器的位置
location:0.7,
id:"label",
//点击事件
events:{
"click":function(label, evt) {
alert("clicked on label for connection " + label.component.id);
}
}
}],
//连接器上配置的箭头
["Arrow", {
cssClass:"l1arrow",
location:0.5, width:20,length:20,
//点击事件
events:{
"click":function(arrow, evt) {
alert("clicked on arrow for connection " + arrow.component.id);
}
}
}]
]
});
var w23Stroke = "rgb(189,11,11)";
var connection3 = jsPlumb.connect({
source:"window2",
target:"window3",
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:8,
//连接器的颜色
strokeStyle:w23Stroke,
outlineColor:"#666",
outlineWidth:1
},
detachable:false,
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
//端点类型
endpoint:"Rectangle",
endpointStyles:[
//gradient渐变，Linear线条渐变和radial半径渐变两种
{ gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
{ gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
]
});
var connection2 = jsPlumb.connect({
source:'window3', target:'window4',
//连接线的样式
paintStyle:{
lineWidth:10,
//连接器颜色
strokeStyle:connectorStrokeColor,
outlineColor:"#666",
outlineWidth:1
},
//鼠标悬浮连接器样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchor:"AutoDefault",
detachable:false,
//端点样式
endpointStyle:{
gradient : {
stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
offset:17.5,
innerRadius:15
},
//端点半径
radius:35
},
//覆盖物label显示时间
label : function(connection) {
var d = new Date();
var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
},
labelStyle:{
cssClass:"component label"
}
});
//
//this connects window5 with window6 using a Flowchart connector that is painted green,
//with large Dot endpoints that are placed in the center of each element. there is a
//label at the default location of 0.5, and the connection is marked as not being
//detachable.
//
var conn4Color = "rgba(46,164,26,0.8)";
var connection4 = jsPlumb.connect({
source:'window5',
target:'window6',
//连接器采用流程图连线，cornerRadius流程图线在折线处为圆角
connector:[ "Flowchart", { cornerRadius:10 } ],
//锚，连接器在两个window连接的位置
anchors:["Center", "Center"],
//连接线样式
paintStyle:{
lineWidth:9,
strokeStyle:conn4Color,
outlineColor:"#666",
outlineWidth:2,
joinstyle:"round"
},
//鼠标悬浮连接线样式
hoverPaintStyle:hoverPaintStyle,
detachable:false,
endpointsOnTop:false,
//端点样式
endpointStyle:{ radius:65, fillStyle:conn4Color },
labelStyle : { cssClass:"component label" },
label : "big\nendpoints"
});
var connection5 = jsPlumb.connect({
source:"window4",
target:"window5",
//锚点位置
anchors:["BottomRight", "TopLeft"],
//连接线样式
paintStyle:{
lineWidth:7,
//连接器颜色
strokeStyle:"rgb(131,8,135)",
// outlineColor:"#666",
// outlineWidth:1,
//闪烁的线
dashstyle:"4 2",
joinstyle:"miter"
},
//鼠标悬浮样式
hoverPaintStyle:hoverPaintStyle,
//端点类型为图片
endpoint:["Image", {url:"endpointTest1.png"}],
//连接器直线
connector:"Straight",
endpointsOnTop:true,
//覆盖物
overlays:[ ["Label", {
cssClass:"component label",
label : "4 - 5",
location:0.3
}],
//箭头
"Arrow"
]
});
var stateMachineConnector = {
//连接器
connector:"StateMachine",
//连接器样式
paintStyle:{lineWidth:3,strokeStyle:"#056"},
//鼠标悬浮样式
hoverPaintStyle:{strokeStyle:"#dbe300"},
//端点为空
endpoint:"Blank",
//锚位置
anchor:"Continuous",
//覆盖物，三件箭头不可折回
overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]
};
jsPlumb.connect({
source:"window3",
target:"window7"
}, stateMachineConnector);
jsPlumb.connect({
source:"window7",
target:"window3"
}, stateMachineConnector);
// jsplumb event handlers
// double click on any connection
jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
// single click on any endpoint
jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
// context menu (right click) on any component.
jsPlumb.bind("contextmenu", function(component, originalEvent) {
alert("context menu on component " + component.id);
originalEvent.preventDefault();
return false;
});
// make all .window divs draggable. note that here i am just using a convenience method - getSelector -
// that enables me to reuse this code across all three libraries. In your own usage of jsPlumb you can use
// your library's selector method - "$" for jQuery, "$$" for MooTools, "Y.all" for YUI3.
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
jsPlumb.bind("click", function(c) {
var p = $(c.canvas).find("path"),
l = p[0].getTotalLength(),
i = l, d = -10, s = 150,
att = function(a, v) {
for (var i = 0; i < p.length; i++)
p[i].setAttribute(a, v);
},
tick = function() {
if (i > 0) {
i += d;
att("stroke-dashoffset", i);
window.setTimeout(tick, s);
}
};
att("stroke-dasharray", l + " " + l);
tick();
});
}
};
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);
});
