项目背景

最近在准备开发工作流引擎相关模块，完成表结构设计后开始着手流程设计器的技术选型，调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发，保证定制化的便捷性，相关效果图及项目地址如下

项目地址：https://gitee.com/code2roc/fast-flow-desgion

image

需求概述

流程设计器中最基础的两个元素为活动（节点）和变迁（连接），我们需要以下基础功能来配合相关接口进行工作流相关设计数据的保存/修改

• 活动的添加/删除/移动

• 变迁的添加/删除

• 活动/变迁数据的全部读取

• 根据json渲染活动与变迁

相关引入依赖如下表所示

实现思路

活动添加

通过mustache的render方法渲染添加到html后，需要调用draggable方法让活动能够进行自由拖动，其中grid参数作用是固定每次拖拽移动最小距离，便于不同节点经过移动后对齐

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】