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

Posted 2023-05-10

参考技术A 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.connect() 使用现有端点而不是创建新端点

【中文标题】jsplumb.connect() 使用现有端点而不是创建新端点

【英文标题】：jsplumb.connect() use existing endpoints instead of creating new

【发布时间】：2014-04-10 06:28:37

【问题描述】：

我对 jsPlumb.connect 函数有疑问。我有一个应用程序，用户可以在其中添加<div> 元素，它获取 jsPlumb 端点。用户可以将所有这些元素相互连接。图表可以保存在 MySQL 数据库中（JSON 格式）。

当用户从数据库加载图表时，我可以使用 addElement 和 addEndpoint 函数重新创建元素和端点。但是当我调用 jsPlumb Connect 方法（它只是为了从数据库中创建图表而调用）时，为了绘制连接线，它会为每个连接的元素创建一个新端点

所以我的问题是，如何防止每次调用 connect 方法时创建新端点？

【参考方案1】：

在添加端点时，请确保您还根据放置它​​的元素为它们分配uuid。您可以将 jsPlumb 中的两个端点连接为：

jsPlumb.ready(function ()   
     var e0 = jsPlumb.addEndpoint("container0",uuid:"ep0"), //set your own uuid for endpoint to access later.
     e1 = jsPlumb.addEndpoint("container1",uuid:"ep1");  
     jsPlumb.connect( uuids:[e0.getUuid(),e1.getUuid()] ); 
             // (or) 
     jsPlumb.connect( uuids:["ep0","ep1"] );
);

【讨论】：

有什么方法可以在提供锚点位置的同时自动计算端点？如果可能的话，我不想保存端点的 UUID。或者是否有一个查询可以用来获取端点 UUID 并从元素的 id 键入？

@coding_idiot jsplumb.org/apidocs/files/…

非常感谢，但它也可能返回 null 并且没有设置器。

非常感谢。它似乎永远不会返回空白，除非非常罕见（似乎不是我的情况）。

【参考方案2】：

在添加端点时，请确保您还根据放置它​​的元素为其分配 Uuid。您可以将 jsPlumb 中的两个端点连接为

<script type="text/javascript" src="Jquery\jq.js"></script>
<script type="text/javascript" src="Jquery\jq-ui.min.js"></script> 
<script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script>

<div id="main">
<div id="block1" class="node">node 0</div>
<div id="block2" class="node">node 1</div>
<div id="block3" class="node">node 2</div>
<div id="block4" class="node">node 3</div> 
</div>

  <script type="text/javascript">

  var targetOption = anchor:"TopCenter",
  maxConnections:-1,
  isSource:false,
  isTarget:true,
  endpoint:["Dot", radius:8],
  paintStyle:fillStyle:"#66FF00",
  setDragAllowedWhenFull:true

  var sourceOption = anchor:"BottomCenter",
  maxConnections:-1,
  isSource:true,
  isTarget:false,
  endpoint:["Dot", radius:8],
  paintStyle:fillStyle:"#FFEF00",
  setDragAllowedWhenFull:true


   jsPlumb.bind("ready", function() 

  jsPlumb.addEndpoint('block1', targetOption);
  jsPlumb.addEndpoint('block1', sourceOption);

  jsPlumb.addEndpoint('block2', targetOption);
  jsPlumb.addEndpoint('block2', sourceOption);

  jsPlumb.addEndpoint('block3', targetOption);
  jsPlumb.addEndpoint('block3', sourceOption);

  jsPlumb.addEndpoint('block4', targetOption);
  jsPlumb.addEndpoint('block4', sourceOption);

  jsPlumb.draggable('block1');
  jsPlumb.draggable('block2');
  jsPlumb.draggable('block3');
  jsPlumb.draggable('block4'); 
  );

  </script>

【参考方案3】：

我在 SO 论坛之外从作者本人那里解决了这个问题。

正确的格式：

  paintStyle:  
 stroke:"blue", //renamed to "stroke" from "strokeStyle"
 strokeWidth:10 

【参考方案4】：

虽然这是很久以前提出的问题，但它仍然消耗了我很多时间。对于 2.5 版的 jsplumb，使用 uuid 的 jsplumb.connect() 可能会导致错误：找不到源。要解决这个问题，应该使用jsPlumb instance(instance.connect()) 的范围。

【参考方案5】：

这是一个非常古老的问题，但我想我会分享一种不涉及使用 UUID 的方法：

var endpoint1 = jsPlumb.getEndpoints("id of node1")[0];
var endpoint2 = jsPlumb.getEndpoints("id of node2")[0];
jsPlumb.connect(source: endpoint1, target: endpoint2);

请注意，当您每个节点有 1 个端点时，这种方法效果最好，但如果您可以过滤 getEndpoints 返回的数组以找到所需的端点，这也可以。