LogicFlow自定义节点：矩形、HTML（vue3）

效果：

LogicFlow 内部是基于MVVM模式进行开发的，分别使用preact和mobx来处理 view 和 model，所以当我们自定义节点的时候，需要为这个节点定义view和model。

参考官方文档：节点 | LogicFlow

1、自定义矩形节点

customRect.ts文件：

import { RectNode, RectNodeModel, h } from '@logicflow/core';class TodoNodeView extends RectNode {getShape() {// 获取XxxNodeModel中定义的形状属性const { model } = this.props;const { x, y, width, height, radius } = model;// 获取XxxNodeModel中定义的样式属性const style = model.getNodeStyle();return h('g', {}, [h('rect', {...style,x: x - width / 2,y: y - height / 2,width,height,rx: radius,ry: radius,}),// h(//   // 待办图标//   'svg',//   {//     x: x - width / 2 + 5,//     // y: y - height / 2 + 5,//     // width: 25,//     // height: 25,//     y: y - height / 2 - 2,//     width: 30,//     height: 30,//     viewBox: '0 0 1274 1024',//   },//   h('path', {//     fill: '#6f757d',//     d: 'M735.483537 563.043418c-127.277094 0-230.472576 103.195482-230.472576 230.484006s103.195482 230.472576 230.472576 230.472576 230.472576-103.195482 230.472576-230.461147-103.184053-230.495435-230.472576-230.495435z m104.555573 333.999509a29.99058 29.99058 0 0 1-42.288546 0l-83.434159-83.434159a29.876286 29.876286 0 0 1-8.686296-22.56151V671.679264a29.922004 29.922004 0 0 1 59.832578 0v108.40726l74.576423 74.656428a29.99058 29.99058 0 0 1 0 42.299975z',//     // d://     //   "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z",//   }),//   h('path', {//     fill: '#6f757d',//     d: 'M481.992276 793.538853a253.514119 253.514119 0 0 1 144.318236-228.883898q-8.114829-0.377168-16.321093-0.377169h-204.585129c-191.498538 0-347.360404 152.010179-347.360403 338.856977v19.921335c0 99.709534 153.278836 99.709534 347.360403 99.709534h221.729134A253.468402 253.468402 0 0 1 481.992276 793.538853zM490.118535 546.665178c150.707235 0 273.344019-122.648213 273.344018-273.355447S640.848628 0 490.118535 0 216.785945 122.636784 216.785945 273.309731 339.365583 546.665178 490.118535 546.665178z',//   }),// ),]);}
}class TodoNodeModel extends RectNodeModel {getNodeStyle() {const style = super.getNodeStyle();style.stroke = '#ffffff'; //节点边框颜色style.fill = '#ffffff'; //填充色return style;}initNodeData(data) {super.initNodeData(data); //调用父类的方法this.width = 180;this.height = 60;this.radius = 10;}
}export default {type: 'TodoNode',view: TodoNodeView,model: TodoNodeModel,
};

2、自定义HTML节点

customHtml.ts文件：

import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
class UmlModel extends HtmlNodeModel {setAttributes() {// 设置节点宽高和锚点const width = 80;const height = 88;this.width = width;this.height = height;}
}
class UmlNode extends HtmlNode {setHtml(rootEl) {const { properties } = this.props.model;const node_md = this.props.model;const el = document.createElement('div');el.className = 'uml-wrapper';el.id = node_md.id; // html 节点绑定节点唯一ID;即可通过id 获取对应dom元素 并进行相关业务操作const html = `<div class="logdom-hml" ></div>`;el.innerHTML = '我是一个小天才';el.style.backgroundColor = 'pink';// 需要先把之前渲染的子节点清除掉。rootEl.innerHTML = '';rootEl.appendChild(el);}
}export default {type: 'Htmlnode',view: UmlNode,model: UmlModel,
};

注册自定义节点

我们可以在创建LogicFlow实例之后，render之前，使用register方法来注册自定义节点。

<template><div class="composer"><div class="workflow-app" id="container"></div></div>
</template>
<script setup lang="ts">import { onMounted, ref } from 'vue';// import { forEach, map, has } from 'lodash-es';import LogicFlow from '@logicflow/core';import '@logicflow/core/dist/style/index.css';import { Control } from '@logicflow/extension';import TodoNode from './customRect';import Htmlnode from './ProgressNode';const lf = ref();const render = (data: any) => {lf.value.render(data);};onMounted(() => {renderGraphData();render({nodes: [{id: '1',type: 'TodoNode',x: 200,y: 200,text: '开始',},{id: '2',type: 'TodoNode',x: 600,y: 300,text: '流程节点1',},{id: '3',type: 'Htmlnode',x: 600,y: 500,},],edges: [{type: 'bezier',sourceNodeId: 1,targetNodeId: 2,},],});});const renderGraphData = () => {const container: any = document.querySelector('#container');if (container) {lf.value = new LogicFlow({plugins: [Control],background: {backgroundColor: '#f5f6f7',},grid: {size: 10,type: 'dot',config: {color: '#DEE0E3',thickness: 1,},},keyboard: {// 键盘事件开关enabled: true,},// style: {//   rect: {//     // 矩形节点样式//     stroke: '#31A5FF',//     strokeWidth: 1,//     fill: '#fff',//   },// },container,});lf.value.register(TodoNode); //注册节点lf.value.register(Htmlnode); //注册节点// console.log('画布', lf.value.getGraphData()); //打印画布数据lf.value.on('node:click', (data: any) => {console.log('点击了', data.data.text.value, data);});}};
</script>
<style lang="less" scoped>.composer {height: 100%;width: 100%;.workflow-app {width: 100%;height: 100%;}}
</style>