首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >LogicFlow自定义业务节点

LogicFlow自定义业务节点

作者头像
前端小鑫同学
发布于 2023-01-13 00:53:48
发布于 2023-01-13 00:53:48
87100
代码可运行
举报
运行总次数:0
代码可运行

🎄Hi~ 大家好,我是小鑫同学,一位长期从事前端开发的编程爱好者,我将使用更为实用的案例输出更多的编程知识,同时我信奉分享是成长的唯一捷径,在这里也希望我的每一篇文章都能成为你技术落地的参考~

🚀技术&代码分享

  • 我在 IT200 总结技术学习;
  • 我在 1024Code 在线编写代码;
  • 我在 掘金 分享技术文章;
  • 我在 Github 参与开源学习;

😇推荐几个好用的工具

进入正题

LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

这一节将讲解快速上手 LogicFlow 流程图编辑框架的自定义业务节点内容,代码要在上一节的基础上进行开发,使用1024code在线编写代码的小伙伴可以直接fork上一节的代码开始,这一节的大致内容包括了,准备自定义业务节点的模板、注册和使用、自定义样式、自定义形状、自定义外观几个方面,做好准备后我们就开始了。

1. 认识自定义业务节点模板:

LF框架自定义业务节点使用到了面向对象中继承的概念,通过继承LF提供的 XxxNodeXxxNodeModel 类后对相关的函数进行重写,并在默认导出时提供 typeview 和 model`;

下面这段代码继承了Rect相关的 RectNodeRectNodeModel,如果要继承其他的内置对象还请查看官方文档或源码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 源码位置:./src/CustomNode.ts
import { RectNode, RectNodeModel } from "@logicflow/core";

class CustomNodeView extends RectNode {

}

class CustomNodeModel extends RectNodeModel {

}

export default {
    type: "CustomNode",
    view: CustomNodeView,
    model: CustomNodeModel,
}

2. 优先进行注册和使用:

自定义业务模板准备好以后就可以先进行注册和使用了,第一个是因为在继承内置类后虽然没有进行任何的函数重写但是不耽误渲染结果;第二个是因为一开始并不熟悉,所以要及时注册和使用起来看到效果,也是方便后续的自定义。

2.1 注册自定义业务节点:

注册过程主要分两个步骤:

  • 第一要将上面编写的 CustomNode.ts 导入到 App.vue;
  • 第二要将 CustomNode 对象通过lf实例中的 register() 函数在 render() 前注册;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 导入自定义节点
import CustomNode from "./CustomNode";

const graphData = {}
...

onMounted(() => {
  // 在执行render前进行注册
  lf.value.register(CustomNode);
  lf.value.render(graphData);
})
2.2 如何使用自定义业务节点:

在成功注册后即可通过 render 函数来渲染业务流程中的一切元素的数据,自定义的业务节点和内置的默认节点使用方式相同,都是通过 type 选项来标识;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 定义graphData
// 数据中的type为自定义节点导出的type属性的值
// 将节点在坐标为(100,100)的位置显示
const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    }
  ]
}

3. 自定义业务节点样式:

自定义业务节点样式(绿色描边),需要重写 RectNodeModel 类中的 getNodeStyle() 函数,通过关键词 super 获取到父类中的节点样式,并改变 stroke 的值为绿色,最后将修改完成的 style 返回;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class CustomNodeModel extends RectNodeModel {

  getNodeStyle() {
      const style = super.getNodeStyle();
      style.stroke = 'green';
      return style;
    }
}

4. 自定义业务节点形状:

自定义业务节点形状(圆角矩形)和自定义业务节点样式一样的简单,重写RectNodeModel类中的initNodeData(data: any)函数就可以了;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class CustomNodeModel extends RectNodeModel {

  initNodeData(data: any): void {
    super.initNodeData(data);
    this.width = 120;
    this.height = 80;
    this.radius = 10;
  }
}

5. 自定义业务节点外观:

前面的自定义业务节点样式和形状都是在原有内置对象的基础上进行属性的调整,为了实习更高的自定义的外观,需要用到类似 Vue 中的 h 函数(渲染函数),通过重写 RectNode 中的 Shape() 并借助渲染函数实现外观的自定义;

  • 第一步:重写 getShape 函数,获取 props 中存储的当前节点的信息,如位置、尺寸和样式等;
  • 第二步:节点的外观要基于 SVG 实现,下面的案例要在业务组件左上角显示一个ICON,ICON可以从 iconfont 找一个自己喜欢的;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class CustomNodeView 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,
              viewBox: "0 0 1028 1024",
          }, [
              h('path', {
                  fill: style.stroke,
                  d: "<icon-svg-data>",
              })
          ])
      ]);
  }
}

6. 重启项目预览效果:

至此自定义业务节点基本完成,这种样式也是大多数流程管理系统中常见的一种风格,接着补充一下 graphData 数据,来看一下最终的效果~

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    },
    {
      id: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'CustomNode',
      x: 300,
      y: 100
    }
  ],
  edges: [
    {
      sourceNodeId: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      targetNodeId: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'polyline'
    }
  ]
}

总结

这一节的内容就到此结束了,自定义业务节点的样式、形状和外观都搞定了吗?尤其是外观的自定义需要渲染 SVG 标签,所以掌握一些 SVG 相关的数据或掌握使用工具的生成 SVG 数据还是很有必要的,感觉把这一节的代码熟悉熟悉,接着要对 LF中的 Edge 进行自定义了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
TIANCHI-津南数字制造算法挑战赛【赛场一】基本分析&Baseline
有趣的是,训练集中缺失值比较多的A23和A21在测试集中并无缺失,同样地,测试集中缺失概率达67%的A25、A27和A20反而在训练集中并无缺失。(此处作者笔误,缺失率只有0.67%)
Coggle数据科学
2019/09/12
6840
TIANCHI-津南数字制造算法挑战赛【赛场一】基本分析&Baseline
LightGBM+Optuna 建模自动调参教程!
在kaggle机器学习竞赛赛中有一个调参神器组合非常热门,在很多个top方案中频频出现LightGBM+Optuna。知道很多小伙伴苦恼于漫长的调参时间里,这次结合一些自己的经验,给大家带来一个LGBM模型+OPTUNA调参的使用教程,这对可谓是非常实用且容易上分的神器组合了,实际工作中也可使用。
Python数据科学
2023/08/29
1.5K0
LightGBM+Optuna 建模自动调参教程!
Optiver波动率预测大赛系列解读二:LightGBM模型及特征工程
量化投资与机器学习微信公众号,是业内垂直于量化投资、对冲基金、Fintech、人工智能、大数据等领域的主流自媒体。公众号拥有来自公募、私募、券商、期货、银行、保险、高校等行业20W+关注者,连续2年被腾讯云+社区评选为“年度最佳作者”。 前言 Optiver波动率预测大赛于上个月27号截止提交,比赛终于告一段落,等待着明年1月份的最终比赛结果。Kaggle上,由财大气粗的对冲基金大佬主办的金融交易类预测大赛,总能吸引大量的人气。在过去3个月的比赛中,也诞生了很多优秀的开源代码,各路神仙应用各种模型算法,在竞争激烈的榜单你追我赶。 关于这个比赛,网络上陆陆续续也有很多参赛经验的分享。但为了充分吸收大神们的精髓,公众号还是决定从0到1解读各种不同类型的开源比赛代码,方便小伙伴们学习归纳,并应用到实际研究中去。本系列大概安排内容如下:
量化投资与机器学习微信公众号
2021/10/22
2.8K0
Optiver波动率预测大赛系列解读二:LightGBM模型及特征工程
NN和树模型通吃的调参神器Optuna!
本文介绍的一种超参寻优策略则同时解决了上面三个问题,与此同时,该方法在目前kaggle的数据竞赛中也都是首选的调参工具包,其优势究竟有多大,我们看一下其与目前最为流行的一些工具包的对比。
炼丹笔记
2021/07/16
1.8K0
NN和树模型通吃的调参神器Optuna!
2019腾讯广告算法大赛方案分享(初赛冠军)
bettenW/Tencent2019_Finals_Rank1st​github.com
Coggle数据科学
2019/09/12
1.8K0
2019腾讯广告算法大赛方案分享(初赛冠军)
python - 机器学习lightgbm相关实践
相关文章: R+python︱XGBoost极端梯度上升以及forecastxgb(预测)+xgboost(回归)双案例解读 python︱sklearn一些小技巧的记录(训练集划分/pipelline/交叉验证等)
悟乙己
2021/12/07
1.2K0
python - 机器学习lightgbm相关实践
数据挖掘实践(金融风控):金融风控之贷款违约预测挑战赛(下篇)xgboots/lightgbm/Catboost等模型--模型融合:stacking、blend
通过组合多个学习器来完成学习任务,通过集成方法,可以将多个弱学习器组合成一个强分类器,因此集成学习的泛化能力一般比单一分类器要好。
汀丶人工智能
2023/05/17
4.2K0
数据挖掘实践(金融风控):金融风控之贷款违约预测挑战赛(下篇)xgboots/lightgbm/Catboost等模型--模型融合:stacking、blend
数据挖掘机器学习[六]---项目实战金融风控之贷款违约预测
因为文档是去年弄的,很多资料都有点找不到了,我尽可能写的详细。后面以2021年研究生数学建模B题为例【空气质量预报二次建模】再进行一个教学。
汀丶人工智能
2022/12/21
1.7K0
数据挖掘机器学习[六]---项目实战金融风控之贷款违约预测
科大讯飞:电信客户流失预测赛方案
2022科大讯飞大赛于6月9日正式开赛了。Datawhale作为大赛生态伙伴,与科大讯飞联合设计了学习型赛事,帮助大家提升数据挖掘、CV、NLP等方向的实践技能。
Coggle数据科学
2022/08/31
1.7K0
​100天搞定机器学习|Day63 彻底掌握 LightGBM
LightGBM 全称为轻量的梯度提升机(Light Gradient Boosting Machine),由微软于2017年开源出来的一款SOTA Boosting算法框架。
Ai学习的老章
2021/11/16
1.5K0
模型融合stacking实战
模型融合stacking的原理具体不再解释,有的博客已经解释很清楚了,还是附一张经典图吧,
全栈程序员站长
2022/07/25
4370
【多层堆叠集成模型(Stacking Ensemble)详解】
 在机器学习中,集成学习(Ensemble Learning)是通过将多个学习器的预测结果结合起来,从而提升模型的性能。集成方法有很多种,其中 堆叠集成(Stacking Ensemble) 是一种非常强大且灵活的集成方法,它通过将多个模型的输出作为特征输入到下一级模型中,从而让最终模型做出更准确的预测。
机器学习司猫白
2025/03/12
8260
【多层堆叠集成模型(Stacking Ensemble)详解】
【数据竞赛】Kaggle GM秘技:树模型初始化技巧
作者: 尘沙樱落 树模型初始化技巧 大家都知道神经网络训练的提升分数的技巧之一就是: 依据验证集合的效果,来调整learning rate的大小,从而获得更好的效果; 但我们在训练树模型的时候却往往
黄博的机器学习圈子
2021/02/08
6120
突破最强算法模型,LightGBM !!!
LightGBM呢,是微软开发的一个机器学习工具,擅长处理大数据和高维数据。LightGBM是基于决策树的提升方法,通过不断调整和优化预测模型来提高精度。与其他算法相比,LightGBM速度更快、内存占用更少、准确率更高,并且能处理类别特征。
Python编程爱好者
2024/07/12
4940
突破最强算法模型,LightGBM !!!
LightGBM 如何调参
本文结构: 什么是 LightGBM 怎么调参 和 xgboost 的代码比较 ---- 1. 什么是 LightGBM Light GBM is a gradient boosting framew
杨熹
2018/06/19
3.8K0
【机器学习实战】kaggle背包价格预测(堆叠的实战用法)
该竞赛的数据集是学生背包价格预测数据集中训练的深度学习模型生成的。特征分布与原始分布接近但不完全相同。请随意将原始数据集用作本竞赛的一部分,既要探索差异,又要查看将原始内容纳入训练是否可以改善模型性能。
机器学习司猫白
2025/02/15
1630
在lightgbm中使用交叉验证
防止过拟合的参数: max_depth 树的深度,不要设置的太大; num_leaves 应该小于 2^(max_depth),否则可能会导致过拟合; min_child_samples 较大的值可以避免生成一个过深的树, 避免过拟合,但有可能导致欠拟合; min_sum_hessian_in_leaf 设置较大防止过拟合; feature_fraction 和 bagging_fraction都可以降低过拟合; 正则化参数lambda_l1(reg_alpha), lambda_l2(reg_lambda)。
生信编程日常
2020/09/08
4K0
鱼佬:百行代码入手数据挖掘赛!
本实践以科大讯飞xDatawhale联合举办的数据挖掘赛为例,给出了百行代码Baseline,帮助学习者更好地结合赛事实践。同时,在如何提分上进行了详细解读,以便于大家进阶学习。
Datawhale
2021/07/12
4570
【白话机器学习】算法理论+实战之LightGBM算法
如果想从事数据挖掘或者机器学习的工作,掌握常用的机器学习算法是非常有必要的,在这简单的先捋一捋, 常见的机器学习算法:
石晓文
2020/06/28
7.6K0
Kaggle系列- Russia房产价格预测top1%(22/3270)方案总结
比赛名称:Sberbank Russian Housing Market 比赛链接:https://www.kaggle.com/c/sberbank-russian-housing-market
致Great
2021/01/18
1K0
推荐阅读
相关推荐
TIANCHI-津南数字制造算法挑战赛【赛场一】基本分析&Baseline
更多 >
LV.1
ICT自然语言处理实习
目录
  • 🚀技术&代码分享
  • 😇推荐几个好用的工具
  • 进入正题
  • 1. 认识自定义业务节点模板:
  • 2. 优先进行注册和使用:
    • 2.1 注册自定义业务节点:
    • 2.2 如何使用自定义业务节点:
  • 3. 自定义业务节点样式:
  • 4. 自定义业务节点形状:
  • 5. 自定义业务节点外观:
  • 6. 重启项目预览效果:
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档