GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → lchrennew → dragonfly-dag

lchrennew / dragonfly-dag

Licence: MIT license
完全支持Vue3和Vitejs的DAG流程图组件

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
Less
1899 projects
CSS
56736 projects
HTML
75241 projects

Labels

diagramflowchartdagvue3vitejs

Projects that are alternatives of or similar to dragonfly-dag

X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+4874.07%)
Mutual labels:  diagram, flowchart, dag
Butterfly
🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+4238.89%)
Mutual labels:  diagram, flowchart, dag
Jsplumb
Visual connectivity for webapps
Stars: ✭ 6,758 (+12414.81%)
Mutual labels:  diagram, flowchart
Flowchart.js
Draws simple SVG flow chart diagrams from textual representation of the diagram
Stars: ✭ 7,711 (+14179.63%)
Mutual labels:  diagram, flowchart
Vzl
💠 DOT Language Live Editor (GraphViz)
Stars: ✭ 83 (+53.7%)
Mutual labels:  diagram, flowchart
Heimer
Heimer is a simple cross-platform mind map, diagram, and note-taking tool written in Qt.
Stars: ✭ 380 (+603.7%)
Mutual labels:  diagram, flowchart
Grafana Flowcharting
Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
Stars: ✭ 463 (+757.41%)
Mutual labels:  diagram, flowchart
Hook Flow
A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf
Stars: ✭ 1,246 (+2207.41%)
Mutual labels:  diagram, flowchart
Mermaid
Provides a parser function to generate diagrams and flowcharts with the help of the mermaid script language
Stars: ✭ 27 (-50%)
Mutual labels:  diagram, flowchart
Nomnoml
The sassy UML diagram renderer
Stars: ✭ 1,685 (+3020.37%)
Mutual labels:  diagram, flowchart
Dag Diagram
VUE plugin for DAG graph , u can use it 4 flow diagram or machine learning visualization
Stars: ✭ 286 (+429.63%)
Mutual labels:  diagram, dag
vue-next-admin
🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）
Stars: ✭ 1,002 (+1755.56%)
Mutual labels:  vue3, vitejs
react-direct-graph
📏 React component for drawing direct graphs with rectangular (non-curve) edges.
Stars: ✭ 25 (-53.7%)
Mutual labels:  diagram, flowchart
Gojs
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Stars: ✭ 5,739 (+10527.78%)
Mutual labels:  diagram, flowchart
Mxgraph-EasyFlowEditor
基于mxGraph+vue设计的流程图编辑器
Stars: ✭ 73 (+35.19%)
Mutual labels:  diagram, flowchart
React Flow Chart
A flexible, stateless, declarative flow chart library for react.
Stars: ✭ 1,051 (+1846.3%)
Mutual labels:  diagram, flowchart
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: ✭ 15 (-72.22%)
Mutual labels:  vue3, vitejs
bpmn
BPMN diagrams in R
Stars: ✭ 16 (-70.37%)
Mutual labels:  diagram, flowchart
Flowy Vue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Stars: ✭ 107 (+98.15%)
Mutual labels:  diagram, flowchart
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+3762.96%)
Mutual labels:  diagram, flowchart
View All Similar Projects ➔

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-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

自定义锚点

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].