Skip to content

lchrennew/dragonfly-dag

Repository files navigation

dragonfly-dag

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

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

image

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-1000为起点,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 - 锚点显示位置,可选值为topbottomleftright
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

自定义锚点