拓扑图编辑器-jsplumb连接

2019-04-04  本文已影响0人  宁小姐的慢时光

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

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

程序化连接
jsPlumb.connect({source:"element1", target:"element2"});

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

因此，这个调用的渲染效果为：
一个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：

(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中的每个参数 ，以下是连接类型对象中支持的属性列表：

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

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

<ul id="list">
  <li id="one">One</li>
</ul>

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

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

端点类型

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

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.deleteConnectionsForElement(el, [params])

el可以是：

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

连接所有连接
jsPlumb.detachEveryConnection();

注：端点被删除情况同上

删除端点
删除单个端点
var ep = jsPlumb.addEndpoint(someElement, { ... });
...
jsPlumb.deleteEndpoint(ep);

ep可以是：

删除所有端点
jsPlumb.deleteEveryEndpoint();

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

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读