使用logicflow流程图实例

news2024/11/18 1:25:01

一.背景

需要使用流程引擎开发项目,没有使用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.coloradmin.cn/o/1467101.html

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

相关文章

了解人工智能计算: 人工智能入门

回顾历史&#xff0c;各种数学仪器在人类进步的历程中发挥了重要作用。从算盘和六分仪到滑尺和计算机&#xff0c;这些工具推动贸易、助力航海&#xff0c;增强理解&#xff0c;并提高了我们的生活质量。然而&#xff0c;在科学和工业领域&#xff0c;推动我们前进的前沿且强大…

Redis 工具类 与 Redis 布隆过滤器

Redis 工具类 1. 核心依赖 <!--redis--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <dependency><groupId>com.google.guava…

网卡本质,网络发展(局域网,广域网概念)

目录 引入 网卡的本质 网络的发展 引入 早期 局域网LAN&#xff08;Local Area Network&#xff09; 广域网WAN&#xff08;Wide Area Network&#xff09; 注意 引入 前面我们已经学习了很多关于linux系统的知识,其中文件系统和线程尤为繁杂 而网络其实也算系统的一部…

Vue监听器(上)之组合式watch

1. 定义监听器 //要监视的属性被改变时触发 watch(要监视的属性, (更改后的心值, 更改前的旧值) > {具体操作}, );//监视对象为getter的时候 //表达式内任意响应式属性被改变时触发 watch(() > return表达式, (表达式的新值, 表达式的旧值) > {具体操作} );//数组中任…

如何实现一个规则研究区域内数据的提取(matlab)

在利用经验正交分解&#xff08;EOF&#xff09;进行某一个研究区域分析时&#xff0c;我们需要将研究区域转换成N*M的矩阵&#xff0c;其中N为空间维度&#xff0c;M为时间维度&#xff0c;这意味着我们之前的数据加上时间维度是三维的&#xff0c;即&#xff08;lon,lat,rg&a…

【深入理解设计模式】原型设计模式

原型设计模式 原型设计模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许通过复制已有对象来创建新对象&#xff0c;而无需直接依赖它们的具体类。这种模式通常用于需要频繁创建相似对象的场景&#xff0c;以避免昂贵的创建操作或初始化过…

泛微e-office系统敏感信息泄露漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 1、系统简介 泛微e-office系统是标准、易用、快速部署上线的专业协同OA软…

C++之类作用域

目录 1、全局作用域 2、类作用域 2.1、设计模式之Pimpl 2.2、单例模式的自动释放 2.2.0、检测内存泄漏的工具valgrind 2.2.1、可以使用友元形式进行设计 2.2.2、内部类加静态数据成员形式 2.2.3、atexit方式进行 2.2.4、pthread_once形式 作用域可以分为类作用域、类名…

【MIT-PHP-推荐】imi-ai 是一个 ChatGPT 开源项目

mi-ai 是一个 ChatGPT 开源项目&#xff0c;支持聊天、问答、写代码、写文章、做作业等功能。 项目架构合理&#xff0c;代码编写优雅&#xff0c;简单快速部署。前后端代码完全开源&#xff0c;不管是学习自用还是商用二开都很适合。 本项目现已支持 ChatGPT 聊天 AI 和 Emb…

PyTorch概述(五)---LINEAR

torch.nn.Linear torch.nn.Linear(in_features,out_features,biasTrue,deviceNone,dtypeNone) 对输入的数据应用一个线性变换&#xff1a; 该模块支持TensorFLoat32类型的数据&#xff1b;在某些ROCm设备上&#xff0c;使用float16类型的数据输入时&#xff0c;该模块在反向传…

电路设计(28)——交通灯控制器的multisim仿真

1.功能设定 南北、东西两道的红灯时间、绿灯时间均为24S&#xff0c;数码管显示倒计时。在绿灯的最后5S内&#xff0c;黄灯闪烁。有夜间模式&#xff1a;按下按键进入夜间模式。在夜间模式下&#xff0c;数码管显示计数最大值&#xff0c;两个方向的黄灯不停闪烁。 2.电路设计 …

高通XBL阶段读取分区

【需求】: 在某些场景下,需要在XBL阶段读取分区数据,需要验证xbl阶段方案 这里主要以裸分区为例,比如oem分区。 1、创建一个1MB大小的oem.img,写入内容“test oem partition” 创建方式: dd if=/dev/null of=oem.img bs=1024 count=1oem.img内容: 2、XBL阶段读分区方…

一个更好的IP工具箱MyIP

什么是 MyIP &#xff1f; MyIP 是一个完全开源的 IP 信息查看器&#xff0c;可以轻松检查你的 IP&#xff0c;IP 地理位置&#xff0c;检查 DNS 泄漏&#xff0c;检查 WebRTC 连接&#xff0c;速度测试&#xff0c;ping 测试&#xff0c;MTR 测试&#xff0c;检查网站可用性等…

洛谷C++简单题小练习day20—小狗暴躁,津津的不高兴程度两个小程序(祝大家元宵节happy)

day20--小狗暴躁--2.24 习题概述 题目描述 在一个小村子里&#xff0c;邮递员、送奶工、垃圾清理工每天早晨都面临着同样的难题&#xff1a;18 号房子的门前有两条看门狗。他们所不知道的是&#xff0c;这两条狗的表现是有迹可循的。 当一天开始时&#xff0c;其中一条狗会…

流畅的Python笔记

流畅的Python 第一部分 序幕第 1 章 Python 数据模型 第二部分 数据结构第 2 章 序列构成的数组列表推导生成器表达式元组切片对序列使用和*序列的增量赋值list.sort方法和内置函数sortedbisect数组memoryviewdeque 第 3 章 字典和集合第 4 章 文本和字节序列 第三部分 把函数视…

Leetcode 209.长度最小的子数组

给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#xff1a; 输入&…

Linux---权限管理(ACL权限、特殊位和隐藏属性)

目录 1.ACT权限 1.1什么是ACT权限 1.2ACT图解 2.操作步骤 2.1添加测试目录、用户、组&#xff0c;并将用户添加到组 2.2修改目录的所有者和所属组 2.3设定权限 2.4为临时用户分配权限 2.4.1添加临时用户 2.4.2为临时用户分配特定权限 2.4.3查看目录权限&#xff0c;注…

Moment.js——轻松处理日期和和时间,有实例代码

hello&#xff0c;我是贝格前端工场&#xff0c;本期给大家带来便捷的处理日期和时间的js库&#xff1a;Moment.js&#xff0c;用这个类库处理时间将会十分方便&#xff0c;欢迎老铁们点赞关注&#xff0c;如有前端定制开发需求可以私信我们。 一、Moment.js的简介和功能 Mom…

C++多线程同步(上)

多线程同步 引言总述详情互斥锁示例运行结果分析条件变量示例一实现分析优化运行结果示例二实现代码运行结果示例三实现代码运行结果读写锁示例实现代码注意分析运行结果附言实现运行结果运行结果个人心得引言 项目中使用多线程,会遇到两种问题,一种是对共享资源的访问时需要…

echarts多y轴样式重叠问题

1、主要属性设置 yAxis: [{//y轴1nameTextStyle: {align: "right",padding: 0}},{//y轴2nameTextStyle: {align: "left",padding: 0}},{//y轴3axisLabel: {margin: 50},nameTextStyle: {align: "left",padding: [0, 0, 0, 50]},axisPointer: {l…