拓扑图编辑器-jsplumb基本配置

jsPlumb的配置项有很多，如果不主动设置，jsPlumb就使用默认配置。

建议不要修改默认的配置，而是使用自定义的方式。

1 . 锚位置:

jsPlumb有九个默认锚点位置，可用于指定连接器连接到元素的位置：分别是元素的四个角，元素的中心以及元素每个边的中点：

2、基于数组的语法[x,y,dx,dy]

除了提供锚点的位置和方向外，还可以选择提供另外两个参数来定义与给定位置的像素偏移量。这是上面指定的锚点，但在y轴正方向有50像素偏移：

3、动态锚

连线时锚点根据位置自动调整到定义的数组里几个点中最合适的位置

创建动态锚点没有特殊的语法，只需提供一系列单独的静态锚点，例如：

或者混合使用

4、多边形锚

不理解多边形锚，可以参考 jsplumb 中的demo/perimeterAnchors，拖动节点试一下效果

jsPlumb支持六种形状：

如果节点的宽高一样，该锚点位置为动态圆周，宽高不同为椭圆。

默认情况下，锚点个数为60，可以手动指定：

(2) 组合锚点（三角形与菱形）：

(3) 自定义角度多边形锚点

上面定义了两个三角形旋转不同角度得到的组合图形。

旋转适用带角度的多边形，该值必须以角度为单位，而不是弧度，并且数字可以是正数或负数

5、CSS类和锚点

锚点的不同位置可以有多种css样式，那就要有不同的css类提供支持。

(1) 被写入到锚点的CSS类和元素以jsPlumb实例的endpointAnchorClass为前缀，默认为:

jsPlumb将会分配这个类给创建的 endpoint 和元素 someDiv：

(2) 动态锚的示例：

这里，分配给Endpoint和Element的类将在锚位置更改时循环显示这些值：

注意，如果提供的类名由多个术语组成，则jsPlumb不会在该类中的每个术语前添加前缀：

将导致将2个类添加到端点和元素：

(3) 更改锚类前缀

与锚类一起使用的前缀为jsPlumb的endpointAnchorClass。可以在jsPlumb的某个实例上将其更改为喜欢的任何内容：

或者

jsPlumb提供了四种连接线：

在两个端点之间画一条直线。 支持两个参数:

stub ：可选，默认为0px。此参数的任何正值将导致在与连接线的两端产生一段不可改变方向的线段

gap ：可选，默认为0px。在连接线的一端和连接的元素之间指定一个间隙。

贝塞尔提供了一个立方的贝塞尔曲线。 支持一个参数:

curviness ：可选，默认为150px。 定义了曲线的弯曲程度。

垂直或水平的连接线，支持四个参数：

stub ：可选，最小长度，以像素为单位，最初的存根，源自一个端点。可以是整数，指定了连接器的每个末端的存根，或是一个整数数组，指定[源, 目标]端点的连接。默认值为30像素的整数

alwaysRespectStubs ：可选，默认为false，此参数表示jsPlumb始终从每个端点绘制指定存根长度，而不是比较两个元素的存根

gap ：可选，默认为0像素。在连接线的一端和连接的元素之间指定一个间隙。

midpoint ：可选，默认为0.5。两个元素之间的距离。

cornerRadius ：默认为0。此参数的正值将改变弯角的度数。

略微弯曲的线（实际上是二次Bezier曲线），类似于状态机的连接器，支持三个参数：

margin ：可选，默认为5。定义连接线开始/结束的元素的距离。

curviness ：可选的，默认为10，定义了曲线的弯曲程度。

proximityLimit ：可选，默认为80。 连接线的两端之间的最小距离，它描绘为一条直线而非二次贝塞尔曲线。

端点是连接里的一个端点外观和行为表现的集合，jsPlumb实现了四个端点：

端点以多种不同方式创建：

(1) 调用jsPlumb.connect(..)并传递元素id或DOM元素作为源/目标，创建并分配新的端点

(2) 调用jsPlumb.addEndpoint(...)创建新的端点

(3) 使用jsPlumb.makeSource(...)并随后从该元素拖动连接时，将创建并分配新的端点

在屏幕上绘制一个点，支持三个参数:

radius ：可选，默认为10像素。 定义点的半径

cssClass ：可选，端点元素的CSS类

hoverClass : 可选，元素或连线的hover属性样式类

绘制一个矩形。 支持构造函数参数有:

width ：可选，默认为20像素。定义矩形的宽度

height ：可选，默认为20像素。定义矩形的高

cssClass ：可选，端点元素的CSS类

hoverClass ：可选，元素或连线的hover属性样式类

从一个指定的URL加载图像，支持三个参数:

src ：图片的url

cssClass ：可选，端点元素的CSS类

hoverClass ：可选，元素或连线的hover属性样式类

jsPlumb有五个类型的覆盖:

位置表明连接元素在连接线的位置，通常有三种表明方式：

对于端点，适用相同的原则，将位置指定为[x，y]数组

(1) 指定一个覆盖在端点的中心位置：

location:[ 0.5, 0.5 ]

(2) 从左上角沿x轴叠加5像素

location: [ 5, 0 ]

(3) 从右下角沿x轴叠加5像素

location: [ -5, 0 ]

对于位置的 *** 作，jsPlumb提供了两个方法：

(1) jsPlumb.connect调用时

使用箭头的默认选项和带有文本“foo”的标签创建一个箭头

这个连接将有一个位于中间的箭头，位于四分之一的标签“foo”。注意id参数，如果希望删除覆盖层或更改其可见性，可以在以后使用它

(2) jsPlumb.addEndpoint调用时

注：在addEndpoint 使用 connectorOverlays 代替 overlays，因为 overlays指向端点覆盖。

此连接将有一个位于连接头部的10x30箭头，标签“foo”位于中间点。端点本身也有一个覆盖，相对于端点的左上角位于[-0.5 *宽度，-0.5 *高度]

(3) jsPlumb.makeSource调用

同样使用 connectorOverlays，而且 makeSource 支持 endpoint 参数。

此连接将有10x30像素箭坐落在连接头，标签“foo”位于中点。

注： jsPlumb.makeTarget调用时不能添加覆盖层

(4) addOverlay调用

端点和连接都有一个addOverlay方法，它将一个Overlay定义作为参数

(1) Arrow(箭头)

绘制一个箭头，使用四个点：头部和两个尾点，以及一个foldback允许箭头尾部缩进的点。此Overlay的可用构造函数参数：

(2) PlainArrow

Arrow的foldback为1 的特殊实例，意味着箭头的尾部是扁平。Arrow的所有构造函数参数都适用于PlainArrow

(3) 钻石

Arrow的foldback为2，意味着箭头变成钻石。Arrow的所有构造函数参数都适用于Diamond。

(4) 标签

提供用于装饰连接器的文本标签。可用的构造函数参数是：

标签覆盖提供了两个方法 getLabel 和 setLabel 用于动态地get/set标签内容：

标签被赋予一个id ‘label’，然后检索这个id动态设置lable的值。

Connections和Endpoints都支持Label Overlays，并且因为更改标签是一种非常常见的 *** 作，所以setLabel和getLabel方法已添加到这些对象中：

这些方法支持传入Function而不是String，如果在调用setLabel时，jsPlumb将为您创建一个标签覆盖：

(5) Custom（自定义）

jsPlumb允许自定义OverLays，只需要实现 create(component)：

自定义覆盖允许创建自己的覆盖层，jsPlumb将为您定位。只需要实现一个方法 - create(component)：

此处的id为 customeOverlay，可以在 Connection 或者 Endpoint上使用 getOverlay(id) 方法。

可以使用 setVisible 方法控制 Overlays 的显示属性，或者在一个连接上使用 showOverlay(id) 和 hideOverlay(id) 。

(1) 使用id

(2) 使用 showOverlay(id) 和 hideOverlay(id)

Connection 和 Endpoint 可以使用showOverlay(id) 和 hideOverlay(id)：

Connection和Endpoint有一个removeOverlay方法，可以删除覆盖

参考：

http://jsplumb.github.io/jsplumb/overlays.html

https://www.jianshu.com/p/0e7bb5c081c8

下一篇：拓扑图编辑器-jsplum连接

jsPlumb支持绑定到Connections，Endpoints和Overlays上的几个不同事件，以及jsPlumb对象本身。

要在jsPlumb本身（或jsPlumb实例）上绑定事件，请使用jsPlumb.bind(event, callback)

可以在jsPlumb类上绑定的事件：

info具有的属性：

originalEvent：建立连接的原始鼠标事件。

注： jsPlumb.connect或者鼠标连线时触发此事件

info具有的属性：

连接到某个节点之前放弃新拖动的Connection时不会触发此事件，可以使用connectionAborted捕获。

originalEvent：断开连接的原始鼠标事件。

info具有的属性：

注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。

info具有的属性：

beforeDrag 与其他拦截器的 *** 作略有不同：从拦截器函数返回false将取消当前拖动，也可以从拦截器返回一个对象，此对象将作为 data 被传进新连接的构造函数中:

如果已定义参数化连接类型，此功能特别有用。使用此机制，可以使用选择的数据填充新拖动的连接。

注: 1.7.6之前的所有jsPlumb版本，新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始，后一种行为已被移至 beforeStartDetach拦截器。

返回false，取消拖动。

绑定到Connection上的事件，还可以使用以下bind方法：

这些是可以绑定到连线事件：

绑定到端点上的事件，使用以下bind方法：

这些是可以绑定到端点的事件：

在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。

以下是在Overlay上注册点击监听器的方法：

在jsPlumb对象以及Connections和Endpoints上，可以使用unbind方法删除监听器。

下一篇：拓扑图编辑器-实现过程

//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逻辑。

好了，一个绘制流程图的软件工具初步完工。

---