【亲测免费】 Drawflow技术文档

安装指南

Drawflow是一个简洁的数据流库，允许开发者快速构建数据流程图。本节将指导您完成项目安装。

通过NPM安装

如果您在基于Node.js的项目中工作，可以通过NPM来安装Drawflow。

npm i drawflow

对于TypeScript项目，还需要安装类型定义：

npm install -D @types/drawflow

使用CDN

若您的项目不涉及包管理器，可以利用CDN引入资源。

<!-- 最新版本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

<!-- 或指定版本 -->
<link rel="stylesheet" href="https://unpkg.com/drawflow@具体版本号/dist/drawflow.min.css" />
<script src="https://unpkg.com/drawflow@具体版本号/dist/drawflow.min.js"></script>

在Vue/Nuxt中的应用

对于Vue 2和Vue 3项目，需特别处理导入和实例化编辑器的方式。Vue 3中需注意使用h和getCurrentInstance进行适配。

Nuxt配置（仅限Nuxt.js项目）

确保在nuxt.config.js加入以下配置以支持Drawflow的转换编译。

build: {
    transpile: ['drawflow'],
}

项目的使用说明

初始化编辑器

首先，在HTML中创建一个容器用于Drawflow。

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

然后，通过JavaScript初始化Drawflow编辑器。

document.addEventListener('DOMContentLoaded', function() {
    const editor = new Drawflow(document.getElementById("drawflow"));
    editor.start();
});

创建节点

添加节点是通过调用addNode方法实现的，例如：

var newNode = editor.addNode('MyNode', 2, 2, 100, 100, '', { customData: 'value' }, '<div>Node Content</div>');

注册可复用节点

为了重复使用特定设计的节点，可以使用registerNode方法。

// 假设我们有一段自定义的HTML节点
const customNodeHtml = '<div class="custom-node">Custom Node</div>';
editor.registerNode('customNodeType', customNodeHtml);

之后，在需要的地方调用即可：

editor.addNode('customNodeType', 0, 1, 150, 300);

API使用文档

Drawflow提供了丰富的API来控制编辑器的行为和数据流。

• 移动节点: 用户可以直接拖动节点，或者通过编程方式调整位置。
• 连接节点: 可以通过鼠标操作从一节点的输出点拖拽到另一节点的输入点建立连接。
• 编辑节点数据: 利用updateNodeDataFromId方法更新特定节点的数据。
• 事件监听: 包括nodeCreated, nodeRemoved, connectionCreated等，以响应编辑器内的变化。

示例：添加连接

let outputNodeId = 'node-out-id';
let inputNodeId = 'node-in-id';
editor.addConnection(outputNodeId, inputNodeId, 'output-class', 'input-class');

清除模块数据

editor.clearModuleSelected(); // 清空当前选定模块的所有数据
editor.clear(); // 彻底清除所有模块数据

结论

Drawflow是一个功能齐全的JavaScript库，适合快速构建交互式流程图。通过简单的API和灵活的配置选项，开发者能够轻松集成并定制复杂的数据流界面。遵循上述指南，您可以迅速上手，并在项目中充分利用Drawflow的强大功能。