使用logicflow流程图实例

一.背景

需要使用流程引擎开发项目,没有使用flowable、activiti这类的国外流程引擎,想使用国内的引擎二次开发,缺少单例模式的流程画图程序,都是vue、react、angluer的不适合,从网上找了antx6、logicflow、bpmn.js。感觉最容易使用的是logicflow(滴滴开源的),所以翻模了官方示例(官方使用的react)。

二.代码

gitee链接地址:logicflow: logicflow流程图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>流程实例</title>

    <!-- 引入 core包 -->

    <link rel="stylesheet" href="./logicflow/core/dist/style/index.css" />

    <script src="./logicflow/core/dist/logic-flow.js"></script>

    <!-- 引入 extension包样式 -->

    <link rel="stylesheet" href="./logicflow/extension/lib/style/index.css" />

    <!-- 插件支持单个引入,这里以菜单插件为例 -->

    <script src="./logicflow/extension/lib/Menu.js"></script>

    <!-- 拖拽 -->

    <script src="./logicflow/extension/lib/DndPanel.js"></script>

   

    <script src="./logicflow/extension/lib/Control.js"></script>

    <!--选中项-->

    <script src="./logicflow/extension/lib/SelectionSelect.js"></script>

   

    <script src="./logicflow/extension/lib/BpmnAdapter.js"></script>

   

    <script src="./logicflow/extension/lib/BpmnElement.js"></script>

    <!--下载截图-->

    <script src="./logicflow/extension/lib/Snapshot.js"></script>

    <!-- 小地图 -->

    <script src="./logicflow/extension/lib/MiniMap.js"></script>

    <script src="./logicflow/extension/lib/NodeResize.js"></script>

    <script src="./logicflow/extension/lib/CurvedEdge.js"></script>

    <!-- 内容转换 xml 或者 json -->

    <script src="./logicflow/extension/lib/lfJson2Xml.js"></script>

    <script src="./logicflow/extension/lib/lfXml2Json.js"></script>

   

    <!--基础节点信息 -->

    <script src="./js/node.js"></script>

    <link rel="stylesheet" href="./css/index.css" />

    <style type="text/css">

        html,body{

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

    </style>

</head>

<body>

    <div class="container">

        <!-- 按钮操作 -->

        <div class="example-header">

            <div class="content" >

            <div>

                    <button>保存</button>

            </div>

            </div>

            <div class="tools">

                <span>logicflow 流程信息111</span>

            </div>

        </div>

        <!--绘制中间图形-->

        <div class="bpmn-example-container" >

            <div id="graph" class="viewport" ></div>

        </div>

        <!--属性面板-->

        <div class="property-panel"  id="test" style="display: none;" >

            <div>

                <h2>属性面板</h2>

               

                <div>

                <h3>......</h3>

                <h3>业务属性可根据需要进行自定义扩展</h3>

                </div>

                <div class="property-panel-footer">

                    <button class="property-panel-footer-hide"

                    type="primary"

                    οnclick="hidePropertyPanel()">

                    收起

                    </button>

                </div>

            </div>

        </div>

        <!--操作模型-->

        <div class="graph-io">

            <span

            title="下载 XML"

            οnclick="downloadXml()">

            <img src="./img/download.png" alt="下载XML" />

            </span>

            <span

            id="download-img"

            title="下载图片"

            οnclick="downloadImage()">

            <img src="./img/img.png" alt="下载图片" />

            </span>

            <span

            id="upload-xml"

            title="上传 XML">

            <input type="file" class="upload" accept=".xml" οnchange="uploadXml(event)"/>

            <img src="./img/upload.png" alt="上传XML" />

            </span>

        </div>

    </div>

</body>

<script type="text/javascript">

    // LogicFlow.use(Control); // 控制面板

    // LogicFlow.use(Menu); // 右键菜单

    // LogicFlow.use(DndPanel); // 拖拽面板

    // LogicFlow.use(SelectionSelect); // 拖拽面板

    const lf = new LogicFlow({

        container: document.querySelector("#graph"),

        stopScrollGraph: true,

        stopZoomGraph: true,

        metaKeyMultipleSelected: true,

        grid: {

            size: 10,

            type: 'dot',

        },

        keyboard: {

            enabled: true,

        },

        snapline: true,

        //引入插件

        plugins: [Menu,DndPanel, SelectionSelect,BpmnAdapter,BpmnElement,MiniMap,Control,NodeResize,Snapshot]

    });

    //设置拖转节点

    lf.extension.dndPanel.setPatternItems(modelNode);

    // const data = lfJson2Xml(jsonData);

    // lf.render(data);

    // const xml = lfJson2Xml(lf.getGraphData());

    //渲染内容

    lf.render(graphData);

    //小地图

    lf.extension.control.addItem({

        key: 'mini-map',

        iconClass: "custom-minimap",

        title: "",

        text: "导航",

        onMouseEnter: (lf, ev) => {

            const position = lf.getPointByClient(ev.x, ev.y);

            lf.extension.miniMap.show(

            position.domOverlayPosition.x - 120,

            position.domOverlayPosition.y + 35

            );

        },

        onClick: (lf, ev) => {

            const position = lf.getPointByClient(ev.x, ev.y);

            lf.extension.miniMap.show(

            position.domOverlayPosition.x - 120,

            position.domOverlayPosition.y + 35

            );

        },

    });

    //lf.extension.miniMap.show(0, 0);

    //图片处理渲染,下载图片有用

    lf.extension.snapshot.useGlobalRules = false;

    lf.extension.snapshot.customCssRules = `

        .lf-node-text-auto-wrap-content{

        line-height: 1.2;

        background: transparent;

        text-align: center;

        word-break: break-all;

        width: 100%;

        }

        .lf-canvas-overlay {

        background: #ffffff;

        }

    `;

    //点击事件

    lf.on("node:click,edge:click", (data) => {

        console.log(data);

        hidePropertyPanel();

    });

    //切换显示隐藏属性面板

    function hidePropertyPanel()

    {

        var traget = document.getElementById('test');//选取id为test的div元素

        if(traget.style.display=="none"){

            traget.style.display="block";

        }else{

            traget.style.display="none";

        }

    }

    //下载内容

    function download(filename, text) {

        var element = document.createElement('a');

        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

        element.setAttribute('download', filename);

        element.style.display = 'none';

        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);

    }

    //下载xml

    function downloadXml()

    {

        const data = lf.getGraphData();

        download('logic-flow.xml', lfJson2Xml(data));

    }

    //下载截图

    function downloadImage()

    {

        lf.getSnapshot();

    }

    //上传xml渲染

    function uploadXml(event) {

        const file = event.target.files[0];

        const reader = new FileReader()

        reader.readAsText(file, 'UTF-8');

        reader.onload = function(e){

            if (e.target) {

                const xml = e.target.result;

                console.log(xml);

                //将xml转成json渲染

                lf.render(lfXml2Json(xml));

            }

        }

    }

</script>

</html>

三.效果图

可以下载bpm的xml模型,也可以上传xml模型使用

四.后续还需要程序的扩展。

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

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

相关文章

架构设计:数据库扩展

引言 随着业务的发展和用户规模的增长&#xff0c;数据库往往会面临着存储容量不足、性能瓶颈等问题。为了解决这些问题&#xff0c;数据库扩展成为了一种常见的解决方案。在数据库扩展的实践中&#xff0c;有许多不同的策略和技术可供选择&#xff0c;其中包括水平拆分、垂直…

【MySQL 探索之旅】初始MySQL数据库

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

【LeetCode每日一题】 单调栈的案例84 柱状图中最大的矩形

84 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释…

Conmi的正确答案——将JAVA中maven的.m2文件夹放到D盘

系统&#xff1a;WIN11 1、将.m2文件夹移动到D盘 移动后&#xff1a; 2、创建目录链接 mklink /j "C:\Users\Administrator\.m2" "D:\.m2"至此&#xff0c;maven默认的jar包会加载到D盘的.m2文件夹

Ubuntu环境安装MySQL数据库

1.安装过程 打开终端&#xff08;Terminal&#xff09;窗口&#xff0c;使用以下命令更新系统软件包&#xff1a; sudo apt update ubuntu环境安装mysql-server和mysql开发包&#xff0c;包括mysql头文件和动态库文件&#xff0c;命令如下&#xff1a; sudo apt-get instal…

vue复用组件出现data-v-xxx乱码无法通过css修改指定样式

vue复用组件出现data-v-xxx乱码无法通过css修改指定样式解决方案如下 选择需要修改的样式 给最高级父级元素定义新的classname 与原有样式保持相同级联 修改指定样式 .demo_parent .demo_son .demo_grandson[data-v-73a2ee76]{ padding: 0; border-radius: 3px; background: #…

分享数字孪生潭江流域建设与实践论文

数字孪生潭江流域建设 广东省水利厅 以支撑江门市沿线水工程精准联调联控&#xff0c;提升水旱灾害防御能力为首要任务&#xff0c;融合多信息源预报、GIS等技术&#xff0c;建立气象-水文-水动力集一体的复杂流域入库径流预报及其洪涝延伸预报模型平台&#xff0c;构建具有“…

HTMLElement.click()的回调触发踩坑

先看看以下代码 const el document.getElementById("btn") el.addEventListener("click", () > {Promise.resolve().then(() > console.log("microtask 1"));console.log("1"); }); el.addEventListener("click", (…

Spring Boot 手写starter!!!

原因&#xff1a;为什么要手写starter&#xff1f;&#xff1f;&#xff1f; 原因&#xff1a;简化功能。 实例&#xff1a;以分页为例&#xff1a;写一个starter。 1.首先定义一个PageX注解。 Target({ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented p…

mac/windows git ssh 配置多平台账号(入门篇)

目录 引子多账号多平台配置git一、.ssh文件夹路径1.1 mac 系统1.2 windows 系统 二、生成new ssh2.1 mac系统2.2 windows 系统 三、配置 config四、验证五、用ssh方式拉取远程仓库代码 引子 push代码到github仓库时&#xff0c;提示报错。 Push failed Remote: Support for pa…

Redis部署方式(一)四种部署方式介绍

redis的四种部署方式&#xff1a; Redis单机模式部署、Redis主从模式部署、Redis哨兵模式部署、Cluster集群模式部署&#xff0c;后面三种&#xff08;主从模式&#xff0c;Sentinel哨兵模式&#xff0c;Cluster模式&#xff09;也可以统称为集群模式。 一、单机 1、缺点&…

XFF伪造 [MRCTF2020]PYWebsite1

打开题目 直接查看源码 看到一个./flag.php 访问一下 购买者的ip已经被记录&#xff0c;本地可以看到flag&#xff0c;那么使用xff或者client-ip伪造一下ip试试 bp抓包 加一个X-Forwarded-For头 得到flag

T-Dongle-S3开发笔记——分区表

参考&#xff1a; ESP32之 ESP-IDF 教学&#xff08;十三&#xff09;—— 分区表_esp32分区表-CSDN博客 分区表 - ESP32 - — ESP-IDF 编程指南 latest 文档 (espressif.com) 分区表是 ESP32 划分内部 flash 闪存的清单&#xff0c;它将 flash 划分为多个不同功能的区域用于…

QT问题 打开Qt Creator发现没有菜单栏

之前不知道按了什么快捷键,当我再次打开Qt Creator时发现菜单栏消失啦 找了许多原因发现:安装有道词典的快捷键Ctrl Alt m 与Qt Creator里的快捷键冲突导致菜单栏被莫名其妙的隐藏 解决方法: 1找到有道词典快捷键 2再次按快捷键 Ctrl Alt m就可以重新显示菜单栏

【Pytorch】从MoCo看无监督对比学习;从SupCon看有监督对比学习

目录 无监督对比学习&#xff1a;Moco文章内容理解代码解释 有监督对比学习&#xff1a;Supervised Contrastive Learning文章内容理解 无监督对比学习&#xff1a;Moco 文章内容理解 以下内容全部来自于&#xff1a;自监督学习-MoCo-论文笔记. 侵删 论文&#xff1a;Momentu…

超平面介绍

超平面公式 (1) 超平面是指n维线性空间中维度为n-1的子空间。它可以把线性空间分割成不相交的两部分。比如二维空间中&#xff0c;一条直线是一维的&#xff0c;它把平面分成了两部分&#xff1b;三维空间中&#xff0c;一个平面是二维的&#xff0c;它把空间分成了两部分。(2…

性能优化——canvas 加载海量图

背景 公司的在线设计稿平台的画板列表页开发时由于数据量不足&#xff0c;未能测出关于画板列表页性能问题&#xff0c;在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题&#xff0c;画板列表页采用了vue-konva 原因 关于画板列表为何卡顿有如下几点原因 1、…

如何用jmeter请求application/octet-stream,image/jpeg

用postman调用时&#xff1a; 用jmeter&#xff1a; 注意上图不要勾选&#xff0c;不然会把所有的内容都以二进制传进去&#xff0c;我们不勾选只传二进制的图片内容&#xff0c;勾选了会把MIME类型、参数名称都转为二进制传进去。会报错。

华为配置WLAN AC和AP之间VPN穿越示例

配置WLAN AC和AP之间VPN穿越示例 组网图形 图1 配置WLAN AC和AP之间VPN穿越示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 企业用户接入WLAN网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff0c;不影响…

七、矩阵的初等变换

目录 -1. 介绍 0、增广矩阵&#xff1a; 1、初等变换的性质&#xff1a; ​编辑2、矩阵初等变换的分类&#xff1a; 2.1 普通的行阶梯矩阵&#xff1a; 2.2 、行最简形矩阵&#xff1a; 2.3、标准形矩阵&#xff1a; 3、初等变换的定理&#xff1a; 4、初等变换的应用&…