dragonfly-dag

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

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

!image

Dragonfly-dag 的目标：

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

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

快速运行 demo：

如果使用 npm：

``shell script
npm i
npm run dev
`

如果使用 yarn：

`shell script
yarn install
yarn dev
`

核心组件

$3

#### 画布属性

| 属性 | 类型 | 默认值 | 必填 | 支持双向绑定 | 说明 |
| ----------------- | ---------------------------------- | -------------- | ---- | ------------ | ----------------------------------------------------------------------------------------------------- |
| 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 | 无 | 自定义区域渲染 |

$3

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

$3

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

$3

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

$3

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




数据类型

$3

| 字段 | 类型 | 必填 | 默认值 | 说明 |
| --------- | -------------------- | ---- | ---------- | ---------------------------------------------------------- |
| 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 | 节点组控规则，参见 组控策略 |

$3

| 字段 | 类型 | 必填 | 默认值 | 说明 |
| -------------- | -------------------- | ---- | --------- | ------------------------------------------------------ |
| 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 | 锚点标签 |

$3

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

$3

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

$3


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

$3

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

$3

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

#### 字符串组控策略

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

#### 对象组控策略

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

##### 连入规则 linkIn

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

###### 函数形式的输入参数

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

##### 连出规则 linkOut

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

Dagre 布局

参见Dagre 布局配置

自定义

$3

$3

$3


extends: LineShapeBase
implement: getDefinition(): String`

$3