小蜻蜓 💗 小蝴蝶（ https://github.com/alibaba/butterfly ）
Dragonfly-dag 是以 Butterfly-dag 为原型，基于 Vue3 的全新实现。
更好的可维护性和代码逻辑清晰度
更好的 Vue 整合开发体验
对原生JS、Vue2、React等提供支持
感谢小蝴蝶团队对这个项目的支持！
如果使用 npm：
如果使用 yarn：
DragonflyCanvas
属性
类型
默认值
必填
支持双向绑定
说明
nodes
Array[]N
Y
显示的节点，节点数据结构参见节点信息
edges
Array[]N
Y
显示的边，边数据结构参见边信息
zones
Array[]N
Y
显示的区域，边数据结构参见区域信息
layout
Object{}N
Y
节点和区域的位置，以id为键，以定位信息为值，参见定位信息
zoomSensitivity
Number0.001N
N
缩放敏感度
zoomScale
Number1N
Y
缩放比例
maxZoomScale
Number5N
N
最大缩放比例
minZoomScale
Number0.1N
N
最小缩放比例
layoutConfig
Object{}N
N
布局配置，边数据结构参见Dagre 布局
showArrow
BooleantrueN
N
连线显示箭头
arrowZoomRatio
Number1N
N
箭头缩放比例
arrowPosition
Number100N
N
箭头显示百分比位置，范围0-100，0为起点，100为终点
beforeAddEdgeHook
FunctionundefinedN
N
添加边预处理钩子
nodeGroup
StringObjectFunction
undefinedN
N
节点组控配置，组控配置方式参见组控策略
endpointGroup
StringObjectFunction
undefinedN
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
ObjectStraightLineN
N
连线形状
linkingLineShape
ObjectStraightLineN
N
连线时的连线形状
插槽
scope
默认内容
说明
nodeRenderer
node节点 ID 文本
自定义节点渲染
topEndpoints
node无
顶部锚点
leftEndpoints
node无
左侧锚点
rightEndpoints
node无
右侧锚点
bottomEndpoints
node无
底部锚点
edgeLabelRenderer
edge连线标签文本
自定义连线标签渲染
zoneRenderer
zone无
自定义区域渲染
DragonflyEndpoint
属性
类型
默认值
必填
支持双向绑定
说明
endpoint
Object-
Y
N
锚点信息，参考锚点信息
group
StringObject
undefinedN
N
节点组控规则
labelClass
StringundefinedN
N
锚点标签样式
label
StringundefinedN
N
锚点标签
StraightLine
属性
类型
默认值
必填
支持双向绑定
说明
source
Object-
Y
N
连线起点，连线端点信息数据结构参见连线端点信息
target
Object-
Y
N
连线终点，连线端点信息数据结构参见连线端点信息
ZigZagLine
属性
类型
默认值
必填
支持双向绑定
说明
source
Object-
Y
N
连线起点，连线端点信息数据结构参见连线端点信息
target
Object-
Y
N
连线终点，连线端点信息数据结构参见连线端点信息
SCurveLine
属性
类型
默认值
必填
支持双向绑定
说明
source
Object-
Y
N
连线起点，连线端点信息数据结构参见连线端点信息
target
Object-
Y
N
连线终点，连线端点信息数据结构参见连线端点信息
Node
字段
类型
必填
默认值
说明
id
StringY
-
节点唯一标识 ID
label
StringN
undefined
节点显示标签
movable
BooleanN
true
节点是否可以拖拽移动
linkable
BooleanN
true
节点是否可连线（无论连入还是连出）
endpoints
ArrayN
undefined
节点的锚点列表，数据结构参见锚点信息
group
StringObject
N
undefined
节点组控规则，参见 组控策略
Endpoint
字段
类型
必填
默认值
说明
id
StringY
-
锚点唯一标识 ID
label
StringN
-
锚点显示标签
orientation
StringY
-
锚点显示位置，可选值为top、bottom、left、right
linkable
BooleanN
true
锚点是否可连线（无论连入还是连出）
group
StringObject
N
undefined
锚点组控规则，参见 组控策略
className
StringN
undefined
锚点样式名
labelClassName
StringN
undefined
锚点标签样式名
label
StringN
undefined
锚点标签
Edge
字段
类型
必填
默认值
说明
id
StringY
-
边唯一标识 ID
label
StringN
-
边显示标签
source
StringN
-
边起点节点 ID
sourceEndpoint
StringN
-
边起点锚点 ID
target
StringN
-
边终点锚点 ID
targetEndpoint
StringN
-
边终点锚点 ID
LineEnd
字段
类型
必填
默认值
说明
x
NumberN
-
节点/锚点的中心 x 坐标
y
NumberN
-
节点/锚点的中心 y 坐标
width
NumberN
-
节点/锚点的宽度
height
NumberN
-
节点/锚点的高度
Zone
字段
类型
必填
默认值
说明
id
Stringtrue
-
区域唯一标识
Position
字段
类型
必填
默认值
说明
x
NumberN
布局计算值
左上角 x 坐标
y
NumberN
布局计算值
左上角 y 坐标
width
NumberN
默认显示值
宽度
height
NumberN
默认显示值
高度
Group
组控策略用于控制节点/锚点进行连线操作时的连入/连出的判定规则。
直接用字符串做组控策略时，字符串为组名，组名完全相同的节点/锚点可以连入。（连出能否成功取决于目标节点/锚点的组策略）
字段
类型
必填
默认值
说明
name
StringN
undefined当前节点/锚点所属组名
linkIn
StringArrayFunctionBoolean
N
undefined连入规则，参见 连入规则
linkOut
BooleanN
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 布局配置
extends: LineShapeBase
implement: getDefinition(): String
