拓扑图编辑器-jsplumb连接

了解安装和相关配置后，开始连线。

注：以下代码全部使用jsPlumb调用api，开发过程中最好用上文提到的getInstance方法生成jsPlumb的独立实例调用api。

程序化连接

jsPlumb.connect({source:"element1", target:"element2"});

创建了一个从'element1'到'element2'的连接。jsPlumb.connect方法的参数可以设置源端点、目标端点、锚点、端点样式等，若没有设置会显示默认值：

端点(Endpoint)：默认是“Dot”，半径为10，填充颜色为“＃456”
锚点(Anchors)：默认是Bottom
连接器(Connector)：默认值为“Bezier”连接器，线宽8px，颜色为“＃456”

因此，这个调用的渲染效果为：
一个8px Bezier，颜色为“＃456”，从'element1'的底部中心到'element2'的底部中心的连线，每个Endpoint都是一个10px半径的Dot Endpoint，颜色为“＃456”。

增加一些配置：

jsPlumb.connect({
  source:"element1", 
  target:"element2",
  anchors:["Right", "Left" ],
  endpoint:"Rectangle",
  endpointStyle:{ fill: "yellow" }
});

连接类型

当鼠标放在连接上或者点击连接，希望连接改变样式时，可以通过设置连接类型实现。
端点或连接可以分配零个或多个类型，它们按照分配顺序尽可能精细地合并。支持的API：

hasType
addType
removeType
toggleType
setType
clearTypes

(1) 点击连接时，设置连接example提供的样式:

jsPlumb.registerConnectionType("example", {
  paintStyle:{ stroke:"blue", strokeWidth:5  },
  hoverPaintStyle:{ stroke:"red", strokeWidth:7 }
});

var c = jsPlumb.connect({ source:"someDiv", target:"someOtherDiv" });
c.bind("click", function() {
  c.setType("example"); 
});

(2) 点击连接时切换连接样式：

jsPlumb.registerConnectionTypes({
  "basic": {
    paintStyle:{ stroke:"blue", strokeWidth:5  },
    hoverPaintStyle:{ stroke:"red", strokeWidth:7 },
    cssClass:"connector-normal"
  },
  "selected":{
    paintStyle:{ stroke:"red", strokeWidth:5 },
    hoverPaintStyle:{ strokeWidth: 7 },
    cssClass:"connector-selected"
  } 
});

var c = jsPlumb.connect({ source:"someDiv", target:"someOtherDiv", type:"basic" });

c.bind("click", function() {
  c.toggleType("selected");
});

(3) 完整的API示例：

jsPlumb.registerConnectionTypes({
  "foo":{ paintStyle:{ stroke:"yellow", strokeWidth:5, cssClass:"foo" } },
  "bar":{ paintStyle:{ stroke:"blue", strokeWidth:10 } },
  "baz":{ paintStyle:{ stroke:"green", strokeWidth:1, cssClass:"${clazz}" } },
  "boz":{ paintStyle: { stroke:"${color}", strokeWidth:"${width}" } }
});

var c = jsPlumb.connect({ 
  source:"someDiv", 
  target:"someOtherDiv", 
  type:"foo" 
});

// see what types the connection has.  
console.log(c.hasType("foo"));  // -> true
console.log(c.hasType("bar"));  // -> false

// add type 'bar'
c.addType("bar");

// toggle both types (they will be removed in this case)
c.toggleType("foo bar");

// toggle them back
c.toggleType("foo bar");

// getType returns a list of current types.
console.log(c.getType()); // -> [ "foo", "bar" ]

// set type to be 'baz' only
c.setType("baz");

// add foo and bar back in
c.addType("foo bar");

// remove baz and bar
c.removeType("baz bar");

// what are we left with? good old foo.
console.log(c.getType()); // -> [ "foo" ]

// now let's add 'boz', a parameterized type
c.addType("boz", {
  color:"#456",
  width:35
});

console.log(c.getType()); // -> [ "foo", "boz" ]

// now clear all types
c.clearTypes();

console.log(c.getType()); // -> [  ]

注：除了hasType之外的每个方法都可以使用以空格分隔的类型列表来处理

(4) 连接类型对象中支持的参数
连接类型并非支持Connection中的每个参数，以下是连接类型对象中支持的属性列表：

anchor: 用于连接的两端
anchors: 用于连接的每一端
detachable: 连接是否可以使用鼠标拆卸
paintStyle:
hoverPaintStyle:
scope:
cssClass: 用于设置连接器元素的类
parameters: - 当添加/设置具有参数的Type时，将覆盖具有相同键的任何现有参数。删除具有参数的Type时，不会从连接器中删除其参数
overlays: - 将多个类型应用于连接器时，将获得跨各种类型定义的所有overlays的并集。注意当使用jsPlumb.connect创建连线并提供'type'时，相当于调用'addType'，将获得设置的Type和提供的任何其他类型定义的Overlays构造函数
endpoint

删除节点

jsPlumb.remove
从DOM中删除元素，与元素关联的Connections和Endpoints也会被删除。

var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.remove("element1");

*jsPlumb.empty
将删除某个元素下的所有子元素，以及与子元素关联的Connections和Endpoints


  One


var conn = jsPlumb.connect({source:"one", target:"someOtherElement"});
...
jsPlumb.empty("list");

注：除了hasType之外的每个方法都可以使用以空格分隔的类型列表来处理

端点类型

可以在创建时以编程方式为端点分配一个或多个类型。
端点和连接类型之间唯一真正的区别是允许的参数。端点列表：

paintStyle
endpointStyle: 如果paintStyle提供此选项，则优先
hoverPaintStyle
endpointHoverStyle: 如果hoverPaintStyle提供此项，则优先
MaxConnections
connectorStyle: 使用此端点的任何连接器的样式
connectorHoverStyle: 从此端点悬停连接的绘制样式
connector: 连接器定义，比如: StateMachine或[ "Flowchart", { stub:50 } ]
connectionType: 这允许您指定从此端点进行的连接的连接类型。
scope: 端点只支持一个范围。因此，如果应用了多个类型，则将从定义一个类型的最后一个类型中获取范围
cssClass: 与连线的CSS类相同
parameters: 当添加/设置具有参数的Type时，将覆盖具有相同键的任何现有参数。删除具有参数的Type时，不会从连接器中删除其参数。
overlays: 将多个类型应用于端点时，将获得跨各种类型定义的所有overlays的并集。
注：传递给Connections的参数只对源端点生效，目标端点不生效
使用端点类型的示例：

jsPlumb.registerEndpointTypes({
  "basic":{         
    paintStyle:{fill:"blue"}
  },
  "selected":{          
    paintStyle:{fill:"red"}
  }
});

var e = jsPlumb.addEndpoint("someElement", {
  anchor:"TopMiddle",
  type:"basic"
});

e.bind("click", function() {
  e.toggleType("selected");
});

注: 不会影响现有的Connections，仅影响在端点上设置新类型后创建的Connections。

删除连接

删除单个连接

var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.detach(conn);

调用jsPlumb.detach删除连接时，与该连接关联的端点会不会被删除，取决于建立连接的方式。
以下情况，端点被删除：

使用jsPlumb.connect创建连接，没有设置deleteEndpointsOnDetach: false
连接由用户在配置的元素上通过鼠标创建的，该元素makeSource没有设置deleteEndpointsOnDetach: false。

以下情况，端点不被删除：

使用jsPlumb.connect创建连接，设置deleteEndpointsOnDetach: false
端点由addEndpoint创建，连接由用户通过鼠标创建
连接由用户在配置的元素上通过鼠标创建的，该元素makeSource设置deleteEndpointsOnDetach: false

单个元素中删除所有连接

jsPlumb.deleteConnectionsForElement(el, [params])

el可以是：

表示元素id的String
一个DOM元素
表示单个元素的选择器

params是可选的，可能包含：
fireEvent - 是否触发断开连接事件。默认值为true。
注：端点被删除情况同上

连接所有连接

jsPlumb.detachEveryConnection();

注：端点被删除情况同上

删除端点

删除单个端点

var ep = jsPlumb.addEndpoint(someElement, { ... });
...
jsPlumb.deleteEndpoint(ep);

ep可以是：

一个String，表示端点的UUID（添加端点时，可以为该端点设置uuid）
一个实际的Endpoint对象（如上所示）

删除所有端点

jsPlumb.deleteEveryEndpoint();

注：该方法会删除所有端点和所有连接

选择并操作Connections列表
选择并操作端点列表

参考：
http://jsplumb.github.io/jsplumb/overlays.html

下一篇：拓扑图编辑器-jsplum事件