dragonfly-dag

小蜻蜓 💗 小蝴蝶（ https://github.com/alibaba/butterfly ）

Dragonfly-dag 是以 Butterfly-dag 为原型，基于 Vue3 的全新实现。

Dragonfly-dag 的目标：

• 更好的可维护性和代码逻辑清晰度
• 更好的 Vue 整合开发体验
• 对原生JS、Vue2、React等提供支持

感谢小蝴蝶团队对这个项目的支持！

快速运行 demo：

如果使用 npm：

npm i
npm run dev

如果使用 yarn：

yarn install
yarn dev

核心组件

画布 DragonflyCanvas

画布属性

属性	类型	默认值	必填	支持双向绑定	说明
nodes	Array	[]	N	Y	显示的节点，节点数据结构参见节点信息
edges	Array	[]	N	Y	显示的边，边数据结构参见边信息
zones	Array	[]	N	Y	显示的区域，边数据结构参见区域信息
layout	Object	{}	N	Y	节点和区域的位置，以id为键，以定位信息为值，参见定位信息
zoomSensitivity	Number	0.001	N	N	缩放敏感度
zoomScale	Number	1	N	Y	缩放比例
maxZoomScale	Number	5	N	N	最大缩放比例
minZoomScale	Number	0.1	N	N	最小缩放比例
layoutConfig	Object	{}	N	N	布局配置，边数据结构参见Dagre 布局
showArrow	Boolean	true	N	N	连线显示箭头
arrowZoomRatio	Number	1	N	N	箭头缩放比例
arrowPosition	Number	100	N	N	箭头显示百分比位置，范围0-100，0为起点，100为终点
beforeAddEdgeHook	Function	undefined	N	N	添加边预处理钩子
nodeGroup	String Object Function	undefined	N	N	节点组控配置，组控配置方式参见组控策略
endpointGroup	String Object Function	undefined	N	N	锚点组控配置
canvasDragging	String	'off'	N	Y	画布拖拽行为，可选值： off：禁用 select：节点圈选 zoom：选区放大 scroll：画布滚屏
nodeDragging	String	'off'	N	Y	节点拖拽行为，可选值：off：禁用 move：移动节点 link：连接节点
canvasWheeling	String	'off'	N	Y	画布滚轮行为，可选值：off：禁用 zoom：滚轮缩放 scroll：滚屏
lineShape	Object	StraightLine	N	N	连线形状
linkingLineShape	Object	StraightLine	N	N	连线时的连线形状

画布插槽

插槽	scope	默认内容	说明
nodeRenderer	node	节点 ID 文本	自定义节点渲染
topEndpoints	node	无	顶部锚点
leftEndpoints	node	无	左侧锚点
rightEndpoints	node	无	右侧锚点
bottomEndpoints	node	无	底部锚点
edgeLabelRenderer	edge	连线标签文本	自定义连线标签渲染
zoneRenderer	zone	无	自定义区域渲染

锚点 DragonflyEndpoint

属性	类型	默认值	必填	支持双向绑定	说明
endpoint	Object	-	Y	N	锚点信息，参考锚点信息
group	String Object	undefined	N	N	节点组控规则
labelClass	String	undefined	N	N	锚点标签样式
label	String	undefined	N	N	锚点标签

直线 StraightLine

属性	类型	默认值	必填	支持双向绑定	说明
source	Object	-	Y	N	连线起点，连线端点信息数据结构参见连线端点信息
target	Object	-	Y	N	连线终点，连线端点信息数据结构参见连线端点信息

之字线 ZigZagLine

属性	类型	默认值	必填	支持双向绑定	说明
source	Object	-	Y	N	连线起点，连线端点信息数据结构参见连线端点信息
target	Object	-	Y	N	连线终点，连线端点信息数据结构参见连线端点信息

S曲线 SCurveLine

属性	类型	默认值	必填	支持双向绑定	说明
source	Object	-	Y	N	连线起点，连线端点信息数据结构参见连线端点信息
target	Object	-	Y	N	连线终点，连线端点信息数据结构参见连线端点信息

数据类型

节点信息 Node

字段	类型	必填	默认值	说明
id	String	Y	-	节点唯一标识 ID
label	String	N	undefined	节点显示标签
movable	Boolean	N	true	节点是否可以拖拽移动
linkable	Boolean	N	true	节点是否可连线（无论连入还是连出）
endpoints	Array	N	undefined	节点的锚点列表，数据结构参见锚点信息
group	String Object	N	undefined	节点组控规则，参见 组控策略

锚点信息 Endpoint

字段	类型	必填	默认值	说明
id	String	Y	-	锚点唯一标识 ID
label	String	N	-	锚点显示标签
orientation	String	Y	-	锚点显示位置，可选值为top、bottom、left、right
linkable	Boolean	N	true	锚点是否可连线（无论连入还是连出）
group	String Object	N	undefined	锚点组控规则，参见 组控策略
className	String	N	undefined	锚点样式名
labelClassName	String	N	undefined	锚点标签样式名
label	String	N	undefined	锚点标签

边信息 Edge

字段	类型	必填	默认值	说明
id	String	Y	-	边唯一标识 ID
label	String	N	-	边显示标签
source	String	N	-	边起点节点 ID
sourceEndpoint	String	N	-	边起点锚点 ID
target	String	N	-	边终点锚点 ID
targetEndpoint	String	N	-	边终点锚点 ID

连线端点信息 LineEnd

字段	类型	必填	默认值	说明
x	Number	N	-	节点/锚点的中心 x 坐标
y	Number	N	-	节点/锚点的中心 y 坐标
width	Number	N	-	节点/锚点的宽度
height	Number	N	-	节点/锚点的高度

区域信息 Zone

字段	类型	必填	默认值	说明
id	String	true	-	区域唯一标识

定位信息 Position

字段	类型	必填	默认值	说明
x	Number	N	布局计算值	左上角 x 坐标
y	Number	N	布局计算值	左上角 y 坐标
width	Number	N	默认显示值	宽度
height	Number	N	默认显示值	高度

组控策略 Group

组控策略用于控制节点/锚点进行连线操作时的连入/连出的判定规则。

字符串组控策略

直接用字符串做组控策略时，字符串为组名，组名完全相同的节点/锚点可以连入。（连出能否成功取决于目标节点/锚点的组策略）

对象组控策略

字段	类型	必填	默认值	说明
name	String	N	undefined	当前节点/锚点所属组名
linkIn	String Array Function Boolean	N	undefined	连入规则，参见 连入规则
linkOut	Boolean	N	undefined	连出规则，参见 连出规则

连入规则 linkIn

情形	逻辑
undefined	当前节点/锚点组名也是undefined时允许任何节点/锚点连入，否则只允许和当前节点/锚点组名一致的节点/锚点连入
String类型	源节点/锚点具有相同组名时可接入
Array类型	数组包含源节点/锚点的组名时可连入
Function类型	函数返回true允许连入，false不允许连入，输入参数参见 函数形式的输入参数

函数形式的输入参数

// 输入参数为一个对象，解构如下：
{
  source, // 源节点ID
  sourceEndpoint, // 源锚点ID，如果值为undefined则表示源为ID为source值的节点，否则源为对应该ID的锚点
  sourceGroup; // 源节点/锚点的组名
}

连出规则 linkOut

情形	逻辑
undefined	当前节点可以连出
Boolean类型	为true时可以连出，false不允许连出
Function类型	函数入参为当前节点信息（或锚点所在节点）和锚点信息（如果源为节点，锚点信息则为undefined），函数返回Boolean类型的值为true时允许连出，false不允许连出

Dagre 布局

参见Dagre 布局配置

自定义

自定义节点渲染

自定义样式

自定义连线形状

extends: LineShapeBase implement: getDefinition(): String

自定义锚点