企业网站备案注销,建设部网站被黑,wordpress首页截断插件,小学门户网站建设效果#xff1a; LogicFlow 内部是基于MVVM模式进行开发的#xff0c;分别使用preact和mobx来处理 view 和 model#xff0c;所以当我们自定义节点的时候#xff0c;需要为这个节点定义view和model。
参考官方文档#xff1a;节点 | LogicFlow
1、自定义矩形节点
custo…效果 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 classlogdom-hml /div;el.innerHTML 我是一个小天才;el.style.backgroundColor pink;// 需要先把之前渲染的子节点清除掉。rootEl.innerHTML ;rootEl.appendChild(el);}
}export default {type: Htmlnode,view: UmlNode,model: UmlModel,
};注册自定义节点
我们可以在创建LogicFlow实例之后render之前使用register方法来注册自定义节点。
templatediv classcomposerdiv classworkflow-app idcontainer/div/div
/template
script setup langtsimport { 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 langless scoped.composer {height: 100%;width: 100%;.workflow-app {width: 100%;height: 100%;}}
/style
