https://github.com/zone-7/andflow_js
js流程设计器框架
https://github.com/zone-7/andflow_js
flow js web workflow
Last synced: 3 months ago
JSON representation
js流程设计器框架
- Host: GitHub
- URL: https://github.com/zone-7/andflow_js
- Owner: zone-7
- Created: 2021-11-17T01:56:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-22T15:23:13.000Z (over 1 year ago)
- Last Synced: 2024-11-22T16:27:16.032Z (over 1 year ago)
- Topics: flow, js, web, workflow
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 51
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 1.框架介绍
andflow_js是一个H5流程设计前端组件，是作为流程系统前端的其中一部分。可以快速实现各类流程设计，也可以根据业务和外观需要自定义界面渲染以及显示风格的前端组件。
目的是共同学习、交流心得。
在andflow_js可以完成流程设计执行，同时我们还配套了一个基于Golang的流程执行引擎，以及VUE组件。
Demo首页： http://www.andflow.net
golang 流程引擎 : https://github.com/zone-7/andflow_go
VUE 组件使用DEMO: https://github.com/zone-7/andflow_vue_test
更多信息请关注微信公众号: andflow
## 文件结构
* src 源代码
* depends 依赖包
* dist 目标代码
* examples 例子
## JS 压缩工具
https://closure-compiler.appspot.com/home
简单压缩
## CSS 压缩工具
https://www.runoob.com/csspack
# 2.DEMO
# 3.开发说明
## 3.1 相关js依赖
* jsplumb
* canvg.js
* html2canvas.min.js
## 3.2 开发
### 3.2.1引用依赖js
```html
```
### 3.2.2引用andflow_js相关css、js
```html
```
### 3.2.3定义流程设计器的DOM
```html
```
### 3.2.4初始化流程设计器
```js
//流程组件过滤标签
var tags=['通用', '系统'];
//流程组件定义
var metadata=[
{
"name": "begin",
"title": "开始",
"des": "开始",
"group": "通用",
"tag": "通用",
"css": "begin",
"icon": "/static/flow/img/begin.png",
"flow_code": "57edec62af8a42628714da6d1a045928",
"params": [],
"params_html": "",
"params_script": ""
},
{
"name": "end",
"title": "结束",
"des": "结束",
"group": "通用",
"tag": "通用",
"css": "end",
"icon": "/static/flow/img/end.png",
"flow_code": "57edec62af8a42628714da6d1a045928",
"params": [],
"params_html": "",
"params_script": ""
},
{
"name": "script",
"title": "执行脚本",
"des": "",
"group": "通用",
"tag": "通用",
"css": "",
"icon": "/static/flow/img/script.png",
"flow_code": "57edec62af8a42628714da6d1a045928",
"params": [],
"params_html": "",
"params_script": ""
},
{
"name": "cmd",
"title": "系统命令",
"des": "",
"group": "系统",
"tag": "系统",
"css": "",
"icon": "/static/flow/img/cmd.png",
"flow_code": "57edec62af8a42628714da6d1a045928",
"params": [
{
"name": "command",
"title": "命令",
"placeholder": "操作系统指令",
"element": "textarea",
"default": "",
"attrs": {
"rows": "4"
},
"options": null,
"option_mode": ""
},
{
"name": "timeout",
"title": "超时（毫秒）",
"placeholder": "超时毫秒",
"element": "input",
"default": "10000",
"attrs": {
"type": "number"
},
"options": null,
"option_mode": ""
},
{
"name": "cache",
"title": "执行结果参数名",
"placeholder": "执行结果存储到哪个参数变量",
"element": "",
"default": "",
"attrs": null,
"options": null,
"option_mode": ""
}
],
"params_html": "",
"params_script": ""
}
] ;
//初始化流程模型
//这个部分也是设计完成之后的JSON，可以参考examples下的例子
var flowModel= {
"code":"",
"name":"",
"show_action_body":"false", //是否显示Body,默认true, flow_theme_icon比较有用
"show_action_content":"true", //是否显示节点内容,默认true
"show_action_state_list":"false", //是否显示列表,默认false
"theme":"flow_theme_default", //节点风格,默认flow_theme_default
"link_type":"Flowchart", //连接线风格，默认Flowchart
};
//设计器配置选项
var options={
//组件过滤标签列表
tags:tags,
//组件元素
metadata:metadata,
//流程模型
flowModel:flowModel,
//是否可编辑，默认true
editable:true,
//是否显示工具栏，默认true
show_toolbar:true,
//是否显示缩略图
show_thumbail:false,
//是否显示标尺
show_rulers:true,
//组件栏样式，可选项：固定左边metadata_fix_left、浮在左边metadata_float_left、浮在顶部metadata_float_top
metadata_style:"",
render_action:function(metadata,action,html){ return html; },//节点渲染
render_action_helper: function(metadata,html){return null}, //节点拖拉渲染
render_state_list: function(datas){return null}, //流程状态列表渲染
render_link:function(conn,linktype,linkdata){return null}, //连接线渲染
//节点单击事件
event_action_click:function(metadata,action){
var oldid=$("#current_action_id").val();
andflow.setActionSelected(oldid,false);
$("#current_action_id").val(action.id);
andflow.setActionSelected(action.id,true);
},
//节点双击事件
event_action_dblclick:function(metadata,action){
var content = prompt("set action content ");
andflow.setActionContent(action.id,content);
},
//连线单击事件
event_link_click: function (link) {
alert("link click");
},
//连线双击事件
event_link_dblclick: function (link) {
var label = prompt("set link label ");
link.title=label;
andflow.setLinkInfo(link);
},
//画图板单击事件
event_canvas_click: function(e){
var oldid=$("#current_action_id").val();
andflow.setActionSelected(oldid,false);
$("#current_action_id").val("");
}
}
//初始化流程设计器实例
andflow.newInstance("andflow",options);
//显示流程设计器
andflow.showFlow();
```
# 4.参数
## 4.1.设计器选项options
名称描述值默认值
tags组件标签列表数组null
metadata组件定义元数据数组null
flowModel流程模型objectnull
editable是否可设计true/falsetrue
show_toolbar是否显示工具栏true/falsetrue
show_thumbnail是否显示缩略图true/falsefalse
show_rulers是否显示标尺true/falsetrue
show_grid是否显示背景格子true/falsetrue
drag_step每次拖动的单步距离number10
lang一些标题的方言json
{
metadata_tag_all: '所有组件',
delete_action_confirm: '确定删除该节点?',
}
render_action组件节点渲染函数function(metadata,action,html){ return null; }null
render_action_helper组件节点拖拉过程渲染函数function(metadata,html){ return null; }null
render_endpoint组件节点拖拉点渲染函数function(metadata,action,html){ return null; }null
render_removebtn组件节点拖拉点渲染函数function(metadata,action,html){ return null; }null
render_link组件节点连线渲染函数function(conn,linktype,linkdata){return null}null
event_action_click节点单击事件function(metadata,action){}null
event_action_dblclick节点双击事件function(metadata,action){}null
event_link_click连线单击事件function (link)null
event_link_dblclick连线双击事件function (link)null
event_canvas_click画布单击事件function (event)null
### 4.1.1组件元数据定义metadata
metadata 参数用于定义流程设计器的组件列表
```js
var metadata=[
{
"name": "begin",
"title": "开始",
"des": "开始",
"group": "通用",
"tag": "通用",
"icon": "/static/flow/img/begin.png",
"params": [
{
"name": "command",
"title": "命令",
"placeholder": "操作系统指令",
"element": "textarea",
"default": "",
"attrs": {
"rows": "4"
},
"options": null,
"option_mode": ""
},
],
"params_html": "",
"params_script": ""
},
]
```
名称
描述
取值
name
组件名称
唯一字符串
title
组件标题
中英文标题
group
组件所属组别
中英文名称
tag
组件标签，用于过滤
中英文名称
css
组件样式
CSS样式名称
icon
组件图标
图标路径或者使用base64格式（例如 data:image/png;base64,....）
params
组件设计参数数组
这个部分可以自定义
params
组件设计参数数组
这个部分可以自定义
params_html
组件设计参数设置界面HTMl
这个部分可以自定义
params_script
组件设计参数设置界面javascript
这个部分可以自定义
### 4.1.2流程模型参数flowModel
用于默认显示的流程模型，也可以放空。
例如：
```js
var flowModel= {
"code":"",
"name":"",
"show_action_body":"false", //是否显示Body,默认true, flow_theme_icon比较有用
"show_action_content":"true", //是否显示节点内容,默认true
"show_action_state_list":"false", //是否显示列表,默认false
"theme":"flow_theme_default", //节点风格,默认flow_theme_default
"link_type":"Flowchart", //连接线风格，默认Flowchart
"params":[],
// "actions":[{"id":"f7a6ec0031784f5a80d8633a6418fd52","left":"77px","top":"101px","name":"begin","params":{},"title":"开始","icon":"/static/flow/img/begin.png","width":"120px","height":"80px"},{"id":"793a2a11cf8b40e9afd8bd8f04405e64","left":"126px","top":"222px","name":"script","params":{},"title":"执行脚本","icon":"/static/flow/img/script.png","width":"120px","height":"80px"},{"id":"f558687ca5f34a6c89732eb50749a15a","left":"201px","top":"362px","name":"end","params":{},"title":"结束","icon":"/static/flow/img/end.png","width":"120px","height":"80px"}],
// "links":[{"source_id":"f7a6ec0031784f5a80d8633a6418fd52","target_id":"793a2a11cf8b40e9afd8bd8f04405e64"},{"source_id":"793a2a11cf8b40e9afd8bd8f04405e64","target_id":"f558687ca5f34a6c89732eb50749a15a"}]
};
```
流程模型对象内的相关参数为：
名称
描述
取值
默认
code
流程唯一编码
字符串
null
name
流程名称
字符串
null
theme
组件节点样式
flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box,也可以自定义
flow_theme_default
link_type
连线样式
Flowchart、Straight、Bezier、StateMachine
Flowchart
show_action_body
是否显示组件节点中的Body部分
“true"、“false"
"true"
show_action_content
是否显示组件节点中的内容
“true"、“false"
"true"
show_action_state_list
是否显示流程状态列表
“true"、“false"
"false"
actions
节点列表：可以在设计后自动生成
object
null
actions
连线列表：可以设计后自动生成
object
null
## 4.2 方法
名称
描述
参数
返回值
DEMO
andflow.showFlow();
显示流程模型
flowModel，可以为空
null
andflow.getFlow();
获取流程模型对象
null
flowModel
andflow.snap("流程");
截图
截图导出的文件名称
null
andflow.setTheme(theme);
设置组件节点样式名称
flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box、或者其他自定义
null
andflow.setTheme(theme);
andflow.reflow();
andflow.setEditable(false);
设置是否可设计
true、false
null
andflow.reflow();
重新渲染设计器,在改变样式、风格之后需要执行这个函数。
null
null
andflow.getLinkInfo(sourceId, targetId);
获取连线信息
sourceId：起始节点ID, targetId：目的节点ID
连线信息
andflow.setLinkInfo(linkInfo);
设置连线信息
linkInfo连线信息
null
andflow.setLinkType(link_type);
设置连接线样式名称
Flowchart、Straight、Bezier、StateMachine
null
andflow.setLinkType(link_type);
andflow.reflow();
andflow.getLinkLabel(source_id,target_id);
获取连线中间标签标题
sourceId：起始节点ID, targetId：目的节点ID
标签标题
andflow.setLinkLabel(source_id,target_id,title);
设置连线中间标签标题
sourceId：起始节点ID, targetId：目的节点ID,title:标题
null
andflow.removeLink(sourceId, targetId);
删除链接线
sourceId：起始节点ID, targetId：目的节点ID
null
andflow.removeLinkBySource(sourceId);
删除从SoureceID节点开始的所有链接线
sourceId：起始节点ID
null
andflow.removeLinkByTarget(targetId);
删除所有到达targetId节点的所有链接线
targetId：目标节点ID
null
andflow.getActionInfo(actionId);
获取节点配置信息
actionId：节点ID
节点信息
andflow.setActionInfo(actionInfo);
设置节点配置信息
actionInfo：节点信息
null
andflow.setActionTheme(actionId, theme);
设置节点样式
actionId: 节点ID
theme:节点样式，action_theme_default,action_theme_icon,action_theme_zone,action_theme_box 等
null
andflow.setActionTitle(actionId,title);
设置节点标题
actionId: 节点ID，title:标题
null
andflow.getActionTitle(actionId);
获取节点标题
actionId: 节点ID
string
andflow.setActionContentVisible(true);
设置内容是否可见
true、false
null
andflow.getActionContent(actionId);
获取节点内容
actionId:节点ID
string
andflow.setActionContent(actionId, content, content_type);
设置内容
actionId:节点ID；content:内容; content_type:类型（"msg"、"html","chart"）
null
andflow.setActionParam(actionId,key,value);
设置节点参数。
actionId：节点ID,key：参数名,value：参数值
null
andflow.getActionParam(actionId,key);
设置节点参数。
actionId：节点ID,key：参数名
参数值
andflow.setActionBorderColor(actionId,color);
设置节点边框颜色。
actionId：节点ID,color: 颜色
null
andflow.setActionHeaderColor(actionId,color);
设置节点头部背景颜色。
actionId：节点ID,color: 颜色
null
andflow.setActionHeaderTextColor(actionId,color);
设置节点头部字体颜色。
actionId：节点ID,color: 颜色
null
andflow.setActionBodyColor(actionId,color);
设置节点内容背景颜色。
actionId：节点ID,color: 颜色
null
andflow.setActionBodyTextColor(actionId,color);
设置节点内容字体颜色。
actionId：节点ID,color: 颜色
null
andflow.removeAction(actionId);
删除节点
actionId：节点ID
andflow.getGroupInfo(groupId);
获取组配置信息
groupId：组ID
组信息
andflow.setGroupInfo(groupInfo);
设置组配置信息
groupInfo：组信息
null
andflow.getGroupTitle(groupId);
获取组标题
groupId：组ID
组标题
andflow.setGroupTitle(groupId,title);
设置组标题
groupId：组ID, title:组标题
null
andflow.setGroupBorderColor(groupId,color);
设置组边框颜色。
groupId:组ID,color: 颜色
null
andflow.setGroupHeaderColor(groupId,color);
设置组头部背景颜色。
groupId：组ID,color: 颜色
null
andflow.setGroupHeaderTextColor(groupId,color);
设置组头部字体颜色。
groupId：组ID,color: 颜色
null
andflow.setGroupBodyColor(groupId,color);
设置组内容背景颜色。
groupId：组ID,color: 颜色
null
andflow.setGroupBodyTextColor(groupId,color);
设置组内容字体颜色。
groupId：组ID,color: 颜色
null
andflow.removeGroup(groupId,deleteMembers);
删除组
groupId：组ID, deleteMembers: 是否删除子元素（true,false)
null
andflow.getListInfo(listId);
获取列表配置信息
listId: 列表ID
列表信息
andflow.setListInfo(listInfo);
设置列表配置信息
listInfo: 列表信息
null
andflow.getListTitle(listId);
获取列表标题
listId: 列表ID
列表标题
andflow.setListTitle(listId,title);
设置列表标题
listId: 列表ID, title:标题
null
andflow.setListBorderColor(listId,color);
设置列表边框颜色。
listId:列表ID,color: 颜色
null
andflow.setListHeaderColor(listId,color);
设置列表头部背景颜色。
listId: 列表ID,color: 颜色
null
andflow.setListHeaderTextColor(listId,color);
设置列表头部字体颜色。
listId: 列表ID,color: 颜色
null
andflow.setListBodyColor(listId,color);
设置列表内容背景颜色。
listId: 列表ID,color: 颜色
null
andflow.setListBodyTextColor(listId,color);
设置列表内容字体颜色。
listId:列表ID,color: 颜色
null
andflow.setListItemColor(listId,color);
设置列表元素背景颜色。
listId: 列表ID,color: 颜色
null
andflow.setListItemTextColor(listId,color);
设置列表元素字体颜色。
listId:列表ID,color: 颜色
null
andflow.removeList(listId);
删除列表
listId: 列表ID
null
andflow.getTipInfo(tipId);
获取标签配置信息
tipId：标签ID
标签信息
andflow.setTipInfo(tipInfo);
设置标签配置信息
tipInfo:标签信息
null
andflow.getTipTitle(tipId);
获取标签标题
tipId：标签ID
标签标题
andflow.setTipTitle(tipId,title);
设置标签标题
tipId：标签ID, title:标题
null
andflow.getTipContent(tipId);
获取标签内容
tipId：标签ID
标签内容
andflow.setTipContent(tipId,content);
设置标签内容
tipId：标签ID, content:内容
null
andflow.setTipBodyColor(tip,color);
设置标签背景颜色。
tipId：标签ID,color: 颜色
null
andflow.setTipBodyTextColor(tip,color);
设置标签内容字体颜色。
tipId：标签ID,color: 颜色
null
andflow.removeTip(tipId);
删除标签
tipId：标签ID
null
## 4.3 事件
事件
名称
事件函数签名
描述
event_action_click
节点单击
event_action_click(action_meta, action)
action_meta节点配置信息, action:节点信息
event_action_dblclick
节点双击
event_action_dblclick(action_meta, action)
action_meta节点配置信息, action:节点信息
event_action_remove
节点被删除
event_action_remove( action)
action:节点信息
event_link_click
连接线单击
event_link_click(linkinfo)
linkinfo:链接线信息
event_link_dblclick
连接线双击
event_link_dblclick(linkinfo)
linkinfo:链接线信息
event_link_remove
连接线被删除
event_link_remove(linkinfo)
linkinfo:链接线信息
event_canvas_click
设计面板单击
event_canvas_click(event)
event:事件
event_canvas_changed
设计面板被调整
event_canvas_changed()
null