LogicFlow 在HTML中的引入与使用

LogicFlow 在HTML中的引入与使用

LogicFlow的引入与使用,相较于BPMNJS相对容易一些,更加灵活一些,但是扩展代码可能写得更多一些。

示例展示

使用方式

这个的使用方式就简单很多了,利用cdn把js下载下来,引入到HTML文件中,直接使用就可以。这里就不详细说明其中的API使用了,看示例代码就可以了。

核心代码

    <script src="./assets/js/logic-flow.js"></script><link href="./assets/css/index.css" rel="stylesheet"><script src="./assets//js/BpmnElement.js"></script><script src="./assets/js/BpmnAdapter.js"></script><script src="./assets/js/Control.js"></script><script src="./assets/js/Menu.js"></script><script src="./assets/js/SelectionSelect.js"></script><script src="./assets/js/DndPanel.js"></script><script src="./assets/js/Snapshot.js"></script><link href="./assets/css/extension.css" rel="stylesheet"><script src="./logicflow.js"></script><link href="./logicflow.css" rel="stylesheet">

html body

 <div id="graph" class="viewport" style="width: 100%; height: 100%;"></div>

核心JS

const config = getConfig();LogicFlow.use(BpmnElement);LogicFlow.use(BpmnXmlAdapter);LogicFlow.use(Snapshot);LogicFlow.use(Control);LogicFlow.use(Menu);LogicFlow.use(SelectionSelect);LogicFlow.use(DndPanel);lf = new LogicFlow({...config,container: document.querySelector("#graph"),});// 右击菜单:component-menu.mdlf.extension.menu.addMenuConfig({nodeMenu: [{text: '分享',className: 'test-share',callback() {alert('分享成功!');}},{text: '属性',callback(node) {alert(`节点id:${node.id}节点类型:${node.type}节点坐标:(x: ${node.x}, y: ${node.y})`);},},],edgeMenu: [{text: '属性',callback(edge) {alert(`边id:${edge.id}边类型:${edge.type}边坐标:(x: ${edge.x}, y: ${edge.y})源节点id:${edge.sourceNodeId}目标节点id:${edge.targetNodeId}`);},},],graphMenu: [{text: '分享',callback() {alert('分享成功!');}},],});lf.render();

参考链接

  • extension links: https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.9/lib/
  • logicfllw website: https://07.logic-flow.cn/guide/start.html
  • logicflow github: https://github.com/didi/LogicFlow
  • 示例:http://logic-flow.org/examples/#/basic/node

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/795087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言之向main函数传递参数

在c语言中&#xff0c;main函数也是可以传递传递参数的&#xff0c;业内向main函数传递参数的格式是 main(int argc,char *argv[]) 向main函数传递参数不是通过代码传递的&#xff0c;一般是通过dos命令传递 举个例子 #include<stdio.h> void main(int argc,char *ar…

PyTorch之计算模型推理时间

一、参考资料 如何测试模型的推理速度 Pytorch 测试模型的推理速度 二、计算PyTorch模型推理时间 1. 计算CPU推理时间 import torch import torchvision import time import tqdm from torchsummary import summarydef calcCPUTime():model torchvision.models.resnet18()…

使用pip install替代conda install将packet下载到anaconda虚拟环境

问题描述 使用conda install 下载 stable_baseline3出现问题 一番搜索下是Anaconda.org缺少源 解决方法 首先使用管理员权限打开 anaconda prompt 然后激活目标环境&#xff1a;conda activate env_name 接着使用&#xff1a;conda env list查看目标env的位置 如D:\anacon…

2023.4.7 机器学习周报

目录 引言 Abstract 文献阅读 1、题目 2、引言 3、过去方案和Motivation 4、Segment Anything模型 5、创新点 6、实验过程 7、实验结果 1、评价绩效 2、检测评价 3、跟踪评价 8、 结论 总结 引言 本周阅读了一篇关于高效的任意分割模型的文献&#xff0c;用于自…

JVM基础:类的生命周期详解

JDK版本&#xff1a;jdk8 IDEA版本&#xff1a;IntelliJ IDEA 2022.1.3 文章目录 一. 生命周期概述二. 加载阶段(Loading)2.1 加载步骤2.2 查看内存中的对象 三. 连接阶段(Linking)3.1 连接之验证3.2 连接之准备3.3 连接阶段之解析 四. 初始化阶段(Initialization)4.1 单个类的…

Arcgis Pro地理配准

目录 一、目的 二、配准 1、找到配准工具 2、添加控制点 3、选择控制点 4、添加更多控制点 5、配准完成、保存 三、附录 1、查看控制点或删除控制点 2、效果不好怎么办 一、目的 下面我们将两张地图进行配准&#xff0c;其中一张有地理位置&#xff0c;而另外一张没…

数据库的透视

在力扣做到这个题的时候&#xff0c;了解到了透视的概念&#xff0c;下面记录一下我对透视的理解&#xff0c;以及透视需要解决的一个很关键的问题。 一、题目描述 这个题要求重新格式化当前的表 表 Department&#xff1a; ------------------------ | Column Name | Typ…

前端面试高频: 理解 React/Vue 中 Key 的作用

一: 引言 在 React 或 Vue 项目中&#xff0c;我们经常在列表组件中使用key属性。key是给每一个vnode的唯一id&#xff0c;它在列表渲染和虚拟 DOM 操作中扮演着重要的角色。 当我们在渲染一个包含多个相同子组件的列表时&#xff0c;如果没有使用 key&#xff0c;React 或 Vue…

666666666666666666

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

Linux (Ubuntu)- mysql8 部署

目录 1.基本部署 2.修改密码 3.开启root可远程连接配置 1.基本部署 01》》先查看OS类型&#xff0c;如果是Ubuntu在往下边看 rootspray:/etc/mysql/mysql.conf.d# lsb_release -a LSB Version: core-11.1.0ubuntu2-noarch:security-11.1.0ubuntu2-noarch Distributor ID: …

备战蓝桥杯---线段树应用2

来几个不那么模板的题&#xff1a; 对于删除&#xff0c;我们只要给那个元素附上不可能的值即可&#xff0c;关键问题是怎么处理序号变化的问题。 事实上&#xff0c;当我们知道每一个区间有几个元素&#xff0c;我们就可以确定出它的位置&#xff0c;因此我们可以再维护一下前…

Windows Edge 兼容性问题修复

修复Windows Edge兼容性问题的方法 如果你在使用Windows Edge浏览器时遇到了兼容性问题&#xff0c;可以尝试以下几种方法来解决&#xff1a; 方法一&#xff1a;更改注册表 使用WinR组合键打开运行对话框。在运行对话框中输入regedit并按回车键&#xff0c;打开注册表编辑器…

RK3568测试

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

非关系型数据库------------Redis的安装和部署

目录 一、关系型数据库与非关系型数据库 1.1关系型数据库 1.2非关系型数据库 1.2.1非关系型数据库产生背景 1.3关系型非关系型区别 1.4客户访问时&#xff0c;关系型数据库与redis的工作过程 二、Redis 2.1redis简介 2.2Redis命中机制和淘汰机制 2.3Redis 具有以下优…

在Ubuntu 14.04上如何备份和恢复Redis数据

简介 Redis 是一个内存中的键值缓存和存储&#xff08;也可以是数据库&#xff09;&#xff0c;同时也可以持久化&#xff08;永久保存&#xff09;到磁盘上。在本文中&#xff0c;您将了解如何在 Ubuntu 14.04 服务器上备份 Redis 数据库。 默认情况下&#xff0c;Redis 数据…

Day45 动态规划 part07

Day45 动态规划 part07 57. 爬楼梯&#xff08;卡码网&#xff09; 我的思路&#xff1a; 和昨天的组合总和题几乎一模一样的代码 解答&#xff1a; import java.util.*;public class Main {public static void main (String[] args) {Scanner myScanner new Scanner(Syst…

【torch-gpu】手动快速安装

cuda11.7就选cu117 python3.8就选cp38 windows就选win 安装torch 进入官网 https://download.pytorch.org/whl/torch/ 搜索 torch-2.0.1cu117-cp38-cp38-win_amd64.whl 安装torchvision 进入官网 https://download.pytorch.org/whl/torchvision/ 搜索 torchvision-0.15.2cu…

树莓派安装Windows搭建网盘和下载机

0 需求分析 在同一个局域网内&#xff0c;同时有多种设备&#xff08;Windows&#xff0c;Linux&#xff0c;Android&#xff09;需要进行大量的数据共享。另外&#xff0c;还时常需要从百度网盘/夸克网盘等网盘下载文件。不难看出&#xff0c;我的需求很简单&#xff0c;就是…

提醒:2024年思维100春季线上比赛今天报名截止,来看官方样题

【温馨提醒】今天是2024年4月6日&#xff0c;是2024年春季思维100活动第一阶段线上比赛报名的截止日期。如果要参赛&#xff0c;请设置好闹钟别错过了报名。更多安排和需要提前了解的关键点可以见我前面写的文章&#xff0c;或者直接联系我获取相关资料。 官方发布的2024年春季…

汽车网络安全管理

汽车网络安全管理 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c…