项目背景
最近在准备开发工作流引擎相关模块，完成表结构设计后开始着手流程设计器的技术选型，调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发，保证定制化的便捷性，相关效果图及项目地址如下
项目地址：https://gitee.com/code2roc/fast-flow-desgion
image
需求概述
流程设计器中最基础的两个元素为活动（节点）和变迁（连接），我们需要以下基础功能来配合相关接口进行工作流相关设计数据的保存/修改
-
活动的添加/删除/移动
-
变迁的添加/删除
-
活动/变迁数据的全部读取
-
根据json渲染活动与变迁
相关引入依赖如下表所示
| 名称 | 功能 |
|---|---|
| jsplumb.js | 设计器主要依赖，用于绘制相关图形与动态操作实现 |
| jquery.js | jsplumb依赖的库 |
| jquery-ui.js | jsplumb依赖的库，进行拖拽绑定 |
| contextMenu.js | 实现右击菜单 |
| mustache.js | 模板引擎渲染活动，避免字符串拼接 |
实现思路
活动添加
通过mustache的render方法渲染添加到html后，需要调用draggable方法让活动能够进行自由拖动，其中grid参数作用是固定每次拖拽移动最小距离，便于不同节点经过移动后对齐
【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】
© 版权声明
本平台（www.cooy.cn）的一切软件、教程及内容信息仅限用于学习和研究，付费仅为收集整理归类费用；
不得将上述内容用于商业或者非法用途，否则一切后果用户自行承担负责。本平台资源、内容、信息均来自来自用户上传，版权争议及其他问题与本平台无关。
您必须在下载后的24个小时之内从您的电脑或手机中彻底删除上述下载内容，如果您喜欢该程序或内容，请支持正版以获取更好的服务。我们非常重视版权问题，如有侵权请发送邮件至下方邮件（655465@qq.com），敬请谅解！
如发现违法违规内容，请联系下方邮箱举报，我们收到后将会第一时间处理。
THE END
暂无评论内容