jsPlumb.jsAPI阅读笔记（官⽅⽂档翻译）
jsPlumb DOCS
公司要开始做流程控制器，所以先调研下jsPlumb，下⽂是阅读jsPlumb提供的document所产⽣的归纳总结
setup
如果不使⽤jQuery或者类jQuery库，则传⼊的节点得⽤id的形式，否则jsPlumb会为元素设置⼀个id。
···
});
//or
jsPlumb.bind("ready",function(){
···
});
最好确认jsPlumb加载完毕之后，再开始使⽤相关功能。
默认情况下，jsPlumb在浏览器的窗⼝中注册，为整个页⾯提供⼀个静态实例，所以也可以把它看成⼀个类，来实例化jsPlumb：var firstInstance = Instance();
如果在使⽤过程中，元素的id产⽣了新的变化（多是⽣成了新的节点，旧的节点被删除了）。则可以：
jsPlumb.setId(el,newId)
jsPlumb.setIdChanged(oldId,newId)
在使⽤过程中，每个部分的z-index需要注意，否则连线可能会被覆盖，jsPlumb会为每个节点设置端点，⽤于定位端点。jsPlumb也提供了拖动⽅法：
var secondInstance = Instance();
secondInstance.draggable("some element");
重绘，每次使⽤连线时，都会导致相关联的元素重绘，但当加载⼤量数据时，可以使⽤：
jsPlumb.setSuspendDrawing(true);
jsPlumb.setSuspendDrawing(false,true);
这⾥第⼆个参数的true，会使整个jsPlumb⽴即重绘。
也可以使⽤batch：
jsPlumb.batch(fn,[doNotRepaintAfterwards]);
这个函数也是⼀样，可以先将所有的连接全部注册好，再⼀次重绘。
这个⽅法在1.7.3版本之前名称为doWhileSuspended.
config defaults
当然，jsPlumb会有⼀些默认的参数：
分为全局默认参数和连线默认参数，
Anchor : "BottomCenter",//端点的定位点的位置声明（锚点）：left，top，bottom等
Anchors : [ null, null ],//多个锚点的位置声明
ConnectionsDetachable  : true,//连接是否可以使⽤⿏标默认分离
ConnectionOverlays  : [],//附加到每个连接的默认重叠
Connector : "Bezier",//要使⽤的默认连接器的类型：折线，流程等
Container : null,//设置⽗级的元素，⼀个容器
DoNotThrowErrors  : false,//如果请求不存在的Anchor，Endpoint或Connector，是否会抛出
DragOptions : { },//⽤于配置拖拽元素的参数
DropOptions : { },//⽤于配置元素的drop⾏为的参数
Endpoint : "Dot",//端点（锚点）的样式声明（Dot）
Endpoints : [ null, null ],//多个端点的样式声明（Dot）
EndpointOverlays : [ ],//端点的重叠
EndpointStyle : { fill : "#456" },//端点的css样式声明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//⿏标经过样式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//⿏标经过线的样式
LabelStyle : { color : "black" },／／标签的默认样式。
LogEnabled : false,//是否打开jsPlumb的内部⽇志记录
Overlays : [ ],//重叠
MaxConnections : 1,//最⼤连接数
PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
ReattachConnections : false,//是否重新连接使⽤⿏标分离的线
RenderMode : "svg",//默认渲染模式
Scope : "jsPlumb_DefaultScope"//范围，标识
如果是全局则可以使⽤jsPlumb.importDefaults({···})，
也可以在实例化时，重新定义Instance({···})，
Basic Concepts
jsPlumb关键点就是连接线，从上⾯也可以看出，⼤部分的配置项都是为了线⽽设。
其分为五个⽅⾯：
Anchor：锚点位置
Endpoint：端点，连接的起点或终点
Connector：连线，连接两个节点的直观表现，有四种默认类型：Bezier（贝塞尔曲线），Straight（直线），Flowchart（流程图），State machine（状态机）
Overlay：装饰连接器的组件，类似箭头之类
Group：包含在某个其他元素中的⼀组元素，可以折叠，导致与所有组成员的连接被合并到折叠的组容器上。
Anchor
锚点位置有四种类型：
Static：静态，会固定到元素上的某个点，不会移动
Dynamic：动态，是静态锚的集合，就是jsPlumb每次连接时选择最合适的锚
Perimeter anchors：周边锚，动态锚的应⽤。
Continuous anchors：连续锚
1. Static
jsPlumb有九个默认位置，元素的四个⾓，元素的中⼼，元素的每个边的中点。
Top(TopCenter),TopRight,TopLeft
Right(RightMiddle)
Bottom(BottomCenter),BottomRight,BottomLeft
Left(LeftMiddle)
center
可以使⽤基于数组的形式来定义锚点位置：[x,y,dx,dy,offsetX,offsetY]。
[0,0]表⽰节点的左上⾓。
x表⽰锚点在横轴上的距离，y表⽰锚点在纵轴上的距离，这两个值可以从0到1来设置，0.5为center。
⽽dx表⽰锚点向横轴射出线，dy表⽰锚点向纵轴射出线，有0，-1，1三个值来设置。0为不放射线。
offsetX表⽰锚点偏移量x（px），offsetY表⽰锚点偏移量y（px）。
2. Dynamic Anchors
选择每当某物移动或在UI中绘制时最合适的位置。
var dynamicAnchors = [ [0.2,0,0,0],"Top","Bottom" ]
在使⽤过程中，发现其就是指定锚点应该出现在哪个地⽅。jsPlumb会选取最近的点，来当作锚点。可以设置多个点，来当作可能出现的锚点。
当然，jsPlumb⾃带了默认的参数，AutoDefault。其实与["Top","Right","Bottom","Left"]相同。
3. Perimeter Anchors
jsPlumb提供了六种形状：
Circle
Ellipse
Triangle
Diamond
Rectangle
Square
4. Continuous Anchors
anchor:"Continuous"
//or
anchor:["Continuous",{faces:["top","left"]}]
faces同样有四个值：top,left,right,bottom。
将CSS类与Anchors相关联
var ep = jsPlumb.addEndpoint("ele1",{
anchor:[0,0,0,0,0,0,"test"]
});
也可以修改前缀：
Connectors
连接器是实际连接UI元素的线，默认连接器是贝塞尔曲线，也就是默认值是"Bezier";
这⾥才是画线的地⽅，
Bezier：它有⼀个配置项，curviness（弯曲度），默认为150.这定义了Bezier的控制点与锚点的距离
Straight：在两个端点之间绘制⼀条直线，⽀持两个配置参数：stub，默认为0。gap，默认为0
Flowchart：由⼀系列垂直或⽔平段组成的连接。⽀持四个参数，stub，默认为30；alwaysRespectStubs，默认为false；gap，默认为0；midpoint，默认为0.5；cornerRadius，默认为0；
StateMachine：状态器，⽀持在同⼀元素上开始和结束的连接，⽀持的参数有：margin，默认为5；curviness，默认为10；
proximityLimit，默认为80；
Endpoints
端点的配置和外观参数。
jsPlumb带有四个端点实现-点，矩形，空⽩和图像，可以在使⽤connect(),addEndpoint(),makeSource()或jsPlumb.makeTarget时使⽤endpoint参数指定Endpoint属性。
给端点进⾏配置
jsPlumb.addEndpoint()，创建⼀个新的端点时配置属性
jsPlumb.makeSource()，配置元素并随后从该元素中拖动连接时，将创建并分配⼀个新的端点
端点的预设类型
1. Dot：⽀持三个参数：
radius，默认为10px，定义圆点的半径
cssClass，附加到Endpoint创建的元素的CSS类
hoverClass，⼀个CSS类，当⿏标悬停在元素或连接的线上时附加到EndPoint创建的元素
2. Rectangle：⽀持的参数：
width，默认为20，定义矩形的宽度
height，默认为20，定义矩形的⾼度
cssClass，附加到Endpoint创建的元素的CSS类
hoverClass，当⿏标悬停在元素或连接的线上时附加到EndPoint创建的元素
3. image：从给定的URL中绘制图像，⽀持三个参数：
src，必选，指定要使⽤的图像的URL，
cssClass，附加到Endpoint创建的元素的CSS类
hoverClass，当⿏标悬停在元素或连接的线上时附加到EndPoint创建的元素，
4. Blank：空⽩
Overlays（叠加层）
jsPlumb有五种类型的叠加：
1. Arrow：箭头，在连接器的某个点绘制的可配置箭头，可以控制箭头的长度和宽度，参数有：
width，箭头尾部的宽度
length，从箭头的尾部到头部的距离
location，位置，建议使⽤0～1之间，当作百分⽐，便于理解
jquery官方文档下载
direction，⽅向，默认值为1（表⽰向前），可选-1（表⽰向后）
foldback，折回，也就是尾翼的⾓度，默认0.623，当为1时，为正三⾓
paintStyle，样式对象
2. Label：在连接点的可配置标签，参数有
label，要显⽰的⽂本
cssClass，Label的可选css
labelStyle，标签外观的可选参数：font，适应canvas的字体⼤⼩参数；color，标签⽂本的颜⾊；padding，标签的可选填充，⽐例⽽不是px；borderWidth，标签边框的可选参数，默认为0；borderStyle，颜⾊等边框参数
location，位置，默认0.5
也可以使⽤getLabel，和setLabel，来获取和设置label的⽂本，可传函数
3. PlainArrow：箭头形状为三⾓形
只是Arrow的foldback为1时的例⼦，参数与Arrow相同
4. Diamond：棱形
同样是Arrow的foldback为2时的例⼦，参数与Arrow相同
5. Custom：⾃定义
允许创建⾃定义的叠加层，需要使⽤create()，来返回DOM元素或者有效的选择器（ID）
var conn = t({
source:"d1",
target:"d2",
paintStyle:{
stroke:"red",
strokeWidth:3
},
overlays:[
["Custom", {
create:function(component) {
return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");
},
location:0.7,
id:"customOverlay"
}]
]
});
作为[0,1]的⼩数，其表⽰沿着由连接器内接的路径的⼀些成⽐例的⾏程，默认值为0.5。
作为⼤于1的整数，表⽰从起点沿连接器⾏进的某些绝对像素数。等于1时，在终点。
作为⼩于零的整数，其指⽰沿着连接器从端点向后⾏进的⼀些绝对值的像素。等于0时，在起点。
所有叠加层都⽀持：
getLocation-返回当前位置
setLocation-设置当前位置
添加叠加层
例⼦：
overlays:[
"Arrow",
[ "Label", { label:"foo", location:0.25, id:"myLabel" } ]
]
});
⽽在addEndpoint和makeSource⽅法中，则不能使⽤overlays，需要使⽤connectOverlays.
也可以使⽤addOverlay:
var e = jsPlumb.addEndpoint("someElement");
e.addOverlay([ "Arrow", { width:10, height:10, id:"arrow" }]);
当然还有获取叠加层的⽅法：getOverlay(id)这⾥的id与元素中的id不同，只是组件在jsPlumb中的唯⼀标识⽽已，在控制台打印之后，能看到内部提供了很多⽅法，另外注意原型链中的⽅法。
在官⽅的Hiding/Showing Overlays中，向我们展⽰了setVisible,showOverlay(id),hideOverlay(id)，removeOverlay(id)等⽅法，当然，因为对象中有DOM元素，我们也可以使⽤其他⽅法来控制DOM元素。
Groups
相当于给节点之间加⼊了分组的概念，⼀旦分组，那么就可以使⽤组来控制组下的所有元素。
但这⾥的分组仍然是在jsPlumb中建⽴索引，当有相关事例时，再进⾏介绍。
Drag
如果不使⽤jsPlumb提供的拖动，则需要使⽤repaint()来对拖动之后的连线进⾏重绘。
⽽当修改了节点的层级，或者偏移则需要使⽤revalidate(container)来刷新。
Establishing Connections
在上⾯的例⼦中，已经介绍了基本的连接⽅式t({source:"element1",target:"element2"})。
这种⽅式创建的连接线⼀旦移除，则创建的端点也会⾃动移除。如果不想端点被移除，则可以继续加参数，将deleteEndpointsOnDetach设为false。如果不想⿏标能够移除连接线，则可以在局部配置中将ConnectionsDetachable设为false，或者在connect时，
加⼊detachable:false。
拖放连接
⼀开始就要创建⼀个端点来作为源点
var endpoint = jsPlumb.addEndpoint('elementId',{isSource:true})
这样就可以从该端点拉线出去。
如果给另⼀个创建的点加⼊isTarget:true，则就可以⽤上⾯的点连⼊这个点。
或者使⽤makeSource或者makeTarget：
jsPlumb.makeSource("ele1",{
anchor:"Continuous",
maxConnections:1
···
})
上述例⼦中，如果配置了maxConnections，则最多只能出现这个参数的连线，⼀旦多于这个数⽬的连线，就可以⽤onMaxConnections(params,originalEvent)这个回调函数来做其他事.
connect与makeSource，makeTarget，都可以配置第三个参数，相当于公共配置参数，与第⼆个参数类似。
在connect中如果使⽤newConnection：true参数，则会取消makeTarget，makeSoucr，addEndpoint中所添加的配置项，重绘连接线。
⽽makeTarget也有onMaxConnections⽅法。
因为makeTarget包括上⾯介绍的isTarget都可以指向源点元素，所以，如果不想造成回环（⾃⼰连⾃⼰），则可以在makeTarget中设置allowLoopback：false.如果只想产⽣⼀个端点，⽽不是多个端点，则需要使⽤uniqueEndpoint:true.
默认情况下，使⽤makeTarget创建的端点将deleteEndpointsOnDetach设置为true，即删除连线，端点删除；如果不要删除，则需要⼿动改为false。
如果既配置了元素可拖动，⼜设置了元素可拖放连接，那jsPlumb没有办法区分拖动元素和从元素中拖动连接，所以它提供了filter⽅法。
jsPlumb.makeSource("foo",{
filter:"span",
filterExclude:true
});
则除span元素的其他元素都可以创建拖放连接，filter也接受函数。filter:function(event,element).
也可以使⽤isTarget("id"),isSource("id")来判断节点是否成为了源点。
如果配置了source和target之后，想切换源的激活状态，则可以使⽤setTargetEnabled(id),setSourceEnabled(id)。
如果想取消makeTarget和makeSource所创建的源点，可以使⽤：
unmakeTarget("id")

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。