LogicFlow-前端流程图开发

2025/4/27 16:21:54 来源：https://blog.csdn.net/2301_77189077/article/details/147050046 浏览: 次关键词：LogicFlow-前端流程图开发

LogicFlow-前端流程图开发

一、安装使用

1、安装logicflow

通过npm安装logicflow

npm install @logicflow/core --save# 插件包（不使用插件时不需要引入）
npm install @logicflow/extension --save

2、创建实例

  import LogicFlow from "@logicflow/core";import "@logicflow/core/lib/style/index.css"; // 初始化实例const lf = new LogicFlow({container: document.querySelector('#container'),// 其他配置})// 渲染数据lf.render({// 渲染的数据})

渲染数据如下：

{// 节点数据nodes: [{id: '21', // 节点ID，需要全局唯一，不传入内部会自动生成一个IDtype: 'rect', // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型x: 100, // 节点形状中心在x轴位置y: 100, // 节点形状中心在y轴的位置text: 'Origin Usage-rect', // 节点文本properties: { // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高width: 160,height: 80,}},{id: '50',type: 'circle',x: 300,y: 300,text: 'Origin Usage-circle',properties: {r: 60,}},],// 边数据edges: [{id: 'rect-2-circle', // 边ID，性质与节点ID一样type: 'polyline', // 边类型sourceNodeId: '50', // 起始节点IdtargetNodeId: '21', // 目标节点Id},],
}

效果如下：

请添加图片描述

二、插件安装使用

如果需要使用插件，开发者需要引入@logicflow/extension依赖包，并根据自己的诉求引入插件。

主要使用的插件提供了放大缩小或者自适应画布的能力，同时也内置了 redo 和 undo 的功能。

使用npm安装后如下引用：

import LogicFlow from "@logicflow/core";
import { Control } from "@logicflow/extension";// 全局使用 每一个lf实例都具备 Control
LogicFlow.use(Control);

效果如下：

请添加图片描述

三、自定义节点

LogicFlow提供了7种类型的节点供继承之后进行重写，这边主要讲解html节点的自定义，因为html节点的可定制性比较高。

自定义节点需要返回三个东西，view、model和type。

1、view重写

继承HtmlNode，重写setHtml方法。这边Component是定义在同文件中的vue组件，可以直接导入一个开发好的组件，这个组件即节点的最终样式。

class CustomNode extends HtmlNode {setHtml(rootEl: any) {const { properties } = this.props.model;const node = document.createElement('div');node.className = 'logic-flow-node-customnode';render(<Component properties={properties} props={this.props} key={new Date().getTime()} />,node,);rootEl.innerHTML = '';rootEl.appendChild(node);}
}

2、model重写

继承HtmlNodeModel，重写setAttributes方法。

class NodeModel extends HtmlNodeModel {setAttributes() {// this.draggable = falsethis.width = NODE_WIDTH;this.height = 120;this.text.editable = false;}
}

3、导出属性

export default {type: 'custom-node-mc',view: CustomNode,model: NodeModel,
};

4、注册自定义节点

在创建实例的地方导入自定义的节点，并通过this.lf.batchRegister批量注册。注册后的节点，就可以addNode函数增添节点，在type中填入自定义的type即可。

LogicFlow-前端流程图开发