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 | StringObjectFunction | undefined | N | N | 节点组控配置，组控配置方式参见组控策略 | | endpointGroup | StringObjectFunction | 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 | StringObject | 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 | StringObject | N | undefined | 节点组控规则，参见 组控策略 |

锚点信息 Endpoint

| 字段 | 类型 | 必填 | 默认值 | 说明 | | -------------- | -------------------- | ---- | --------- | ------------------------------------------------------ | | id | String | Y | - | 锚点唯一标识 ID | | label | String | N | - | 锚点显示标签 | | orientation | String | Y | - | 锚点显示位置，可选值为top、bottom、left、right | | linkable | Boolean | N | true | 锚点是否可连线（无论连入还是连出） | | group | StringObject | 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 | StringArrayFunctionBoolean | 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

自定义锚点