当前位置:主页 > JavsScript库 > 其它 >

拖放流程图生成器 - Drawflow
栏目分类:其它   发布日期:2021-08-18   浏览次数:

Drawflow 是一个 JavaScript 库,可通过拖放动态生成漂亮的流程图。

更多功能:

  • 放大/缩小。

  • 键盘交互。

  • 预览和编辑器模式。

  • 预定义的节点块。

  • 添加/删除/清除节点。

  • 绘制块之间的连接线。

  • 响应迅速且适合移动设备。

  • 导入和导出为 JSON 数据。

  • 事件处理程序。

安装和下载:

# NPM
$ npm install drawflow --save

使用:

1. 将 drawflow 导入为 ES 模块。

import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'

2. 或者在文档中加载 Drawflow 的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="/path/to/dist/drawflow.min.css" />
<script src="/path/to/dist/drawflow.min.js"></script>

3. 创建要在其中呈现流程图的容器。

<div id="drawflow"></div>

4. 初始化流程图构建器。

var example = document.getElementById("drawflow");
const editor = new Drawflow(example);

5. 开始编辑流程图。

editor.start();

6. 向流程图添加节点。

  • name:节点名称

  • input:输入的数量

  • outputs:输出的数量

  • pos_x:节点位置(x轴)

  • pos_y:节点位置(y轴)

  • class:附加到节点的 CSS 类

  • data:要传递给节点的JSON数据

  • html:HTML 内容或可重用节点的名称。

  • typenode:对于 HTML 为 true,对于 vue 为 vue

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

7. 注册可重用节点。

var html = document.createElement("div");
html.innerHTML =  "Hello World!";
editor.registerNode('myNode', html);
editor.addNode('newNode', 0, 1, 150, 300, 'newNode', data, 'myNode', true);

8. 导出和导入图表数据。

var exportdata = editor.export();
editor.import(exportdata);

9. 禁用编辑器模式。

editor.editor_mode = 'fixed';

10. 调整最小/最大缩放系数。

editor.zoom_max = 1.6;
editor.zoom_min = 0.5;
11、更多的API方法。
// 从 ID 获取节点
editor.getNodeFromId(id)
  
// 从名称获取节点
editor.getNodesFromName(name)
  
// 删除节点
editor.removeNodeId(id)
  
// 向节点添加输入
editor.addNodeInput(id)
  
// 添加输出到节点
editor.addNodeOutput(id);
  
// 从节点中删除输入
editor.removeNodeInput(id, input_class)
  
// 从节点中移除输出
editor.removeNodeOutput(id, output_class)
  
// 添加一个连接
editor.addConnection(id_output, id_input, output_class, input_class)
  
// 移除连接
editor.removeSingleConnection(id_output, id_input, output_class, input_class)
  
// 更新节点之间的连接
editor.updateConnectionNodes(id) 
  
// 删除节点之间的集合
editor.removeConnectionNodeId(id);
  
// 从节点 ID 获取模块
editor.getModuleFromNodeId(id) 
  
// 清除选中节点的数据
editor.clearModuleSelected();
  
// 清除所有数据
editor.clear();
  
// 放大/缩小
editor.zoom_in();
editor.zoom_out();

12. 事件处理程序。

editor.on('nodeCreated', function(id) {
  // 做些事情
})
  
editor.on('nodeRemoved', function(id) {
  // 做些事情
})
  
editor.on('nodeDataChanged', function(id) {
  // 做些事情
})
  
editor.on('nodeSelected', function(id) {
  // 做些事情
})
  
editor.on('nodeUnselected', function(id) {
  // 做些事情
})
  
editor.on('nodeMoved', function(id) {
  // 做些事情
})
  
editor.on('connectionCreated', function(ouput_id, input_id, ouput_class, input_class) {
  // 做些事情
})
  
editor.on('connectionRemoved', function(ouput_id, input_id, ouput_class, input_class) {
  // 做些事情
})
  
editor.on('connectionSelected', function(ouput_id, input_id, ouput_class, input_class) {
  // 做些事情
})
  
editor.on('connectionUnselected', function() {
  // 做些事情
})
  
editor.on('connectionStart', function(output_id, output_class) {
  // 做些事情
})
  
editor.on('connectionCancel', function() {
  // 做些事情
})
  
editor.on('addReroute', function(id) {
  // 做些事情
})
  
editor.on('removeReroute', function(id) {
  // 做些事情
})
  
editor.on('rerouteMoved', function(id) {
  // 做些事情
})
  
editor.on('moduleCreated', function(name) {
  // 做些事情
})
  
editor.on('moduleChanged', function(name) {
  // 做些事情
})
  
editor.on('moduleRemoved', function(name) {
  // 做些事情
})
  
editor.on('mouseMove', function(x, y) {
  // 做些事情
})
  
editor.on('keydown', function(event) {
  // 做些事情
})
  
editor.on('click', function(event) {
  // 做些事情
})
  
editor.on('clickEnd', function(event) {
  // 做些事情
})
  
editor.on('contextmenu', function(event) {
  // 做些事情
})
  
editor.on('zoom', function(zoom_level) {
  // 做些事情
})
  
editor.on('translate', function(x, y) {
  // 做些事情
})
  
editor.on('import', function() {
  // 做些事情
})
  
editor.on('export', function(data) {
  // 做些事情
})


官方网站:https://github.com/jerosoler/Drawflow

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库