{"id":41890745,"url":"https://github.com/zone-7/andflow_js","last_synced_at":"2026-01-25T14:06:40.775Z","repository":{"id":58773555,"uuid":"428875605","full_name":"zone-7/andflow_js","owner":"zone-7","description":"js流程设计器框架","archived":false,"fork":false,"pushed_at":"2024-11-22T15:23:13.000Z","size":2366,"stargazers_count":51,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-22T16:27:16.032Z","etag":null,"topics":["flow","js","web","workflow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zone-7.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-17T01:56:06.000Z","updated_at":"2024-11-22T15:23:17.000Z","dependencies_parsed_at":"2024-11-13T09:34:26.725Z","dependency_job_id":null,"html_url":"https://github.com/zone-7/andflow_js","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/zone-7/andflow_js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zone-7%2Fandflow_js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zone-7%2Fandflow_js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zone-7%2Fandflow_js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zone-7%2Fandflow_js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zone-7","download_url":"https://codeload.github.com/zone-7/andflow_js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zone-7%2Fandflow_js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28754154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T13:59:49.818Z","status":"ssl_error","status_checked_at":"2026-01-25T13:59:33.728Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flow","js","web","workflow"],"created_at":"2026-01-25T14:06:40.187Z","updated_at":"2026-01-25T14:06:40.767Z","avatar_url":"https://github.com/zone-7.png","language":"JavaScript","readme":"\n# 1.框架介绍\nandflow_js是一个H5流程设计前端组件，是作为流程系统前端的其中一部分。可以快速实现各类流程设计，也可以根据业务和外观需要自定义界面渲染以及显示风格的前端组件。\n目的是共同学习、交流心得。\n在andflow_js可以完成流程设计执行，同时我们还配套了一个基于Golang的流程执行引擎，以及VUE组件。\n\nDemo首页： http://www.andflow.net\n\ngolang 流程引擎 : https://github.com/zone-7/andflow_go\n\nVUE 组件使用DEMO: https://github.com/zone-7/andflow_vue_test\n\n更多信息请关注微信公众号: andflow\n\n## 文件结构 \n\n* src 源代码\n* depends 依赖包\n* dist 目标代码\n* examples 例子\n\n## JS 压缩工具\nhttps://closure-compiler.appspot.com/home\n\n简单压缩\n\n## CSS 压缩工具\nhttps://www.runoob.com/csspack\n\n\n# 2.DEMO\n\n![流程DEMO](./img/demo1.png)\n![流程DEMO](./img/demo2.png)\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e \n\n![流程DEMO](./img/flow1.png)\n\u003c/td\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow2.png)\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow3.png)\n\u003c/td\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow4.png)\n\u003c/td\u003e\n\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow5.png)\n\u003c/td\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow6.png)\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow7.png)\n\u003c/td\u003e\n\u003ctd\u003e\n\n![流程DEMO](./img/flow8.png)\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n \n\n# 3.开发说明\n\n## 3.1 相关js依赖\n* jsplumb\n* canvg.js\n* html2canvas.min.js\n\n## 3.2 开发\n\n### 3.2.1引用依赖js\n```html\n\u003cscript src=\"/static/plugins/jsplumb/js/jsplumb.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/static/plugins/html2canvas/html2canvas.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/static/plugins/canvg/canvg.js\"\u003e\u003c/script\u003e\n\n```\n\n### 3.2.2引用andflow_js相关css、js\n\n```html \n    \u003clink rel=\"stylesheet\" href=\"/static/flow/css/andflow.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"/static/flow/css/andflow_themes.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"/static/flow/css/andflow_themes_action.css\"\u003e\n\n    \u003cscript src=\"/static/flow/js/andflow.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/static/flow/js/andflow_themes.js\"\u003e\u003c/script\u003e\n\n```\n\n### 3.2.3定义流程设计器的DOM\n```html\n\u003cdiv id=\"andflow\" style=\"width: 800px;height: 600px;padding:0px;\"\u003e\n\u003c/div\u003e\n\n```\n\n### 3.2.4初始化流程设计器\n```js\n\n//流程组件过滤标签\nvar tags=['通用', '系统'];\n\n//流程组件定义\nvar metadata=[\n    {\n        \"name\": \"begin\",\n        \"title\": \"开始\",\n        \"des\": \"开始\",\n        \"group\": \"通用\",\n        \"tag\": \"通用\",\n        \"css\": \"begin\",\n        \"icon\": \"/static/flow/img/begin.png\",\n        \"flow_code\": \"57edec62af8a42628714da6d1a045928\",\n        \"params\": [],\n        \"params_html\": \"\",\n        \"params_script\": \"\"\n    },\n    {\n        \"name\": \"end\",\n        \"title\": \"结束\",\n        \"des\": \"结束\",\n        \"group\": \"通用\",\n        \"tag\": \"通用\",\n        \"css\": \"end\",\n        \"icon\": \"/static/flow/img/end.png\",\n        \"flow_code\": \"57edec62af8a42628714da6d1a045928\",\n        \"params\": [],\n        \"params_html\": \"\",\n        \"params_script\": \"\"\n    },\n\n    {\n        \"name\": \"script\",\n        \"title\": \"执行脚本\",\n        \"des\": \"\",\n        \"group\": \"通用\",\n        \"tag\": \"通用\",\n        \"css\": \"\",\n        \"icon\": \"/static/flow/img/script.png\",\n        \"flow_code\": \"57edec62af8a42628714da6d1a045928\",\n        \"params\": [],\n        \"params_html\": \"\",\n        \"params_script\": \"\"\n    },\n\n    {\n        \"name\": \"cmd\",\n        \"title\": \"系统命令\",\n        \"des\": \"\",\n        \"group\": \"系统\",\n        \"tag\": \"系统\",\n        \"css\": \"\",\n        \"icon\": \"/static/flow/img/cmd.png\",\n        \"flow_code\": \"57edec62af8a42628714da6d1a045928\",\n        \"params\": [\n            {\n                \"name\": \"command\",\n                \"title\": \"命令\",\n                \"placeholder\": \"操作系统指令\",\n                \"element\": \"textarea\",\n                \"default\": \"\",\n                \"attrs\": {\n                    \"rows\": \"4\"\n                },\n                \"options\": null,\n                \"option_mode\": \"\"\n            },\n            {\n                \"name\": \"timeout\",\n                \"title\": \"超时（毫秒）\",\n                \"placeholder\": \"超时毫秒\",\n                \"element\": \"input\",\n                \"default\": \"10000\",\n                \"attrs\": {\n                    \"type\": \"number\"\n                },\n                \"options\": null,\n                \"option_mode\": \"\"\n            },\n            {\n                \"name\": \"cache\",\n                \"title\": \"执行结果参数名\",\n                \"placeholder\": \"执行结果存储到哪个参数变量\",\n                \"element\": \"\",\n                \"default\": \"\",\n                \"attrs\": null,\n                \"options\": null,\n                \"option_mode\": \"\"\n            }\n        ],\n        \"params_html\": \"\",\n        \"params_script\": \"\"\n    }\n\n] ;\n\n\n\n//初始化流程模型\n//这个部分也是设计完成之后的JSON，可以参考examples下的例子\nvar flowModel= {\n    \"code\":\"\",\n    \"name\":\"\",\n    \"show_action_body\":\"false\",       //是否显示Body,默认true, flow_theme_icon比较有用\n    \"show_action_content\":\"true\",     //是否显示节点内容,默认true\n    \"show_action_state_list\":\"false\", //是否显示列表,默认false\n    \"theme\":\"flow_theme_default\",     //节点风格,默认flow_theme_default\n    \"link_type\":\"Flowchart\",          //连接线风格，默认Flowchart\n   \n    };\n\n//设计器配置选项\nvar options={\n    //组件过滤标签列表\n    tags:tags,            \n    //组件元素\n    metadata:metadata,    \n    //流程模型\n    flowModel:flowModel,  \n    //是否可编辑，默认true\n    editable:true,        \n    //是否显示工具栏，默认true \n    show_toolbar:true,    \n    //是否显示缩略图\n    show_thumbail:false,\n    //是否显示标尺\n    show_rulers:true,\n    //组件栏样式，可选项：固定左边metadata_fix_left、浮在左边metadata_float_left、浮在顶部metadata_float_top\n    metadata_style:\"\",\n    render_action:function(metadata,action,html){ return html; },//节点渲染\n    render_action_helper: function(metadata,html){return null},  //节点拖拉渲染\n    render_state_list: function(datas){return null},             //流程状态列表渲染\n    render_link:function(conn,linktype,linkdata){return null},   //连接线渲染\n\n    //节点单击事件\n    event_action_click:function(metadata,action){\n\n        var oldid=$(\"#current_action_id\").val();\n        andflow.setActionSelected(oldid,false);\n\n        $(\"#current_action_id\").val(action.id);\n        andflow.setActionSelected(action.id,true);\n\n    },\n    //节点双击事件\n    event_action_dblclick:function(metadata,action){\n\n        var content = prompt(\"set action content \");\n\n        andflow.setActionContent(action.id,content);\n\n    },\n    //连线单击事件\n    event_link_click: function (link) {\n        alert(\"link  click\");\n    },\n    //连线双击事件\n    event_link_dblclick: function (link) {\n        var label = prompt(\"set link label \");\n        link.title=label;\n        andflow.setLinkInfo(link);\n\n    },\n    //画图板单击事件\n    event_canvas_click: function(e){\n        var oldid=$(\"#current_action_id\").val();\n        andflow.setActionSelected(oldid,false);\n        $(\"#current_action_id\").val(\"\");\n    }\n}\n\n//初始化流程设计器实例\nandflow.newInstance(\"andflow\",options);\n//显示流程设计器\nandflow.showFlow();\n```\n\n\n# 4.参数\n\n## 4.1.设计器选项options\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e名称\u003c/td\u003e\u003ctd\u003e描述\u003c/td\u003e\u003ctd\u003e值\u003c/td\u003e\u003ctd\u003e默认值\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etags\u003c/td\u003e\u003ctd\u003e组件标签列表\u003c/td\u003e\u003ctd\u003e数组\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003emetadata\u003c/td\u003e\u003ctd\u003e组件定义元数据\u003c/td\u003e\u003ctd\u003e数组\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eflowModel\u003c/td\u003e\u003ctd\u003e流程模型\u003c/td\u003e\u003ctd\u003eobject\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eeditable\u003c/td\u003e\u003ctd\u003e是否可设计\u003c/td\u003e\u003ctd\u003etrue/false\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_toolbar\u003c/td\u003e\u003ctd\u003e是否显示工具栏\u003c/td\u003e\u003ctd\u003etrue/false\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_thumbnail\u003c/td\u003e\u003ctd\u003e是否显示缩略图\u003c/td\u003e\u003ctd\u003etrue/false\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_rulers\u003c/td\u003e\u003ctd\u003e是否显示标尺\u003c/td\u003e\u003ctd\u003etrue/false\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_grid\u003c/td\u003e\u003ctd\u003e是否显示背景格子\u003c/td\u003e\u003ctd\u003etrue/false\u003c/td\u003e\u003ctd\u003etrue\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003edrag_step\u003c/td\u003e\u003ctd\u003e每次拖动的单步距离\u003c/td\u003e\u003ctd\u003enumber\u003c/td\u003e\u003ctd\u003e10\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003elang\u003c/td\u003e\u003ctd\u003e一些标题的方言\u003c/td\u003e\u003ctd\u003ejson\u003c/td\u003e\u003ctd\u003e\n    {\n    metadata_tag_all: '所有组件',\n    delete_action_confirm: '确定删除该节点?',\n    }\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003erender_action\u003c/td\u003e\u003ctd\u003e组件节点渲染函数\u003c/td\u003e\u003ctd\u003efunction(metadata,action,html){ return null; }\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003erender_action_helper\u003c/td\u003e\u003ctd\u003e组件节点拖拉过程渲染函数\u003c/td\u003e\u003ctd\u003efunction(metadata,html){ return null; }\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003erender_endpoint\u003c/td\u003e\u003ctd\u003e组件节点拖拉点渲染函数\u003c/td\u003e\u003ctd\u003efunction(metadata,action,html){ return null; }\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003erender_removebtn\u003c/td\u003e\u003ctd\u003e组件节点拖拉点渲染函数\u003c/td\u003e\u003ctd\u003efunction(metadata,action,html){ return null; }\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003erender_link\u003c/td\u003e\u003ctd\u003e组件节点连线渲染函数\u003c/td\u003e\u003ctd\u003efunction(conn,linktype,linkdata){return null}\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eevent_action_click\u003c/td\u003e\u003ctd\u003e节点单击事件\u003c/td\u003e\u003ctd\u003efunction(metadata,action){}\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_action_dblclick\u003c/td\u003e\u003ctd\u003e节点双击事件\u003c/td\u003e\u003ctd\u003efunction(metadata,action){}\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eevent_link_click\u003c/td\u003e\u003ctd\u003e连线单击事件\u003c/td\u003e\u003ctd\u003efunction (link)\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eevent_link_dblclick\u003c/td\u003e\u003ctd\u003e连线双击事件\u003c/td\u003e\u003ctd\u003efunction (link)\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_canvas_click\u003c/td\u003e\u003ctd\u003e画布单击事件\u003c/td\u003e\u003ctd\u003efunction (event)\u003c/td\u003e\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n### 4.1.1组件元数据定义metadata\n\nmetadata 参数用于定义流程设计器的组件列表\n\n```js\nvar metadata=[\n    {\n        \"name\": \"begin\",\n        \"title\": \"开始\",\n        \"des\": \"开始\",\n        \"group\": \"通用\",\n        \"tag\": \"通用\", \n        \"icon\": \"/static/flow/img/begin.png\", \n        \"params\": [\n                {\n                    \"name\": \"command\",\n                    \"title\": \"命令\",\n                    \"placeholder\": \"操作系统指令\",\n                    \"element\": \"textarea\",\n                    \"default\": \"\",\n                    \"attrs\": {\n                        \"rows\": \"4\"\n                    },\n                    \"options\": null,\n                    \"option_mode\": \"\"\n                },\n        ],\n        \"params_html\": \"\",\n        \"params_script\": \"\"\n    },\n]\n\n```\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e名称\u003c/td\u003e\n\u003ctd\u003e描述\u003c/td\u003e\n\u003ctd\u003e取值\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ename\u003c/td\u003e\n\u003ctd\u003e组件名称\u003c/td\u003e\n\u003ctd\u003e唯一字符串\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etitle\u003c/td\u003e\n\u003ctd\u003e组件标题\u003c/td\u003e\n\u003ctd\u003e中英文标题\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003egroup\u003c/td\u003e\n\u003ctd\u003e组件所属组别\u003c/td\u003e\n\u003ctd\u003e中英文名称\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etag\u003c/td\u003e\n\u003ctd\u003e组件标签，用于过滤\u003c/td\u003e\n\u003ctd\u003e中英文名称\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecss\u003c/td\u003e\n\u003ctd\u003e组件样式\u003c/td\u003e\n\u003ctd\u003eCSS样式名称\u003c/td\u003e  \n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eicon\u003c/td\u003e\n\u003ctd\u003e组件图标\u003c/td\u003e\n\u003ctd\u003e图标路径或者使用base64格式（例如 data:image/png;base64,....）\u003c/td\u003e  \n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eparams\u003c/td\u003e\n\u003ctd\u003e组件设计参数数组\u003c/td\u003e\n\u003ctd\u003e这个部分可以自定义\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eparams\u003c/td\u003e\n\u003ctd\u003e组件设计参数数组\u003c/td\u003e\n\u003ctd\u003e这个部分可以自定义\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eparams_html\u003c/td\u003e\n\u003ctd\u003e组件设计参数设置界面HTMl\u003c/td\u003e\n\u003ctd\u003e这个部分可以自定义\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eparams_script\u003c/td\u003e\n\u003ctd\u003e组件设计参数设置界面javascript\u003c/td\u003e\n\u003ctd\u003e这个部分可以自定义\u003c/td\u003e  \n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n### 4.1.2流程模型参数flowModel\n用于默认显示的流程模型，也可以放空。\n\n例如：\n```js\n    var flowModel= {\n        \"code\":\"\",\n        \"name\":\"\",\n        \"show_action_body\":\"false\",       //是否显示Body,默认true, flow_theme_icon比较有用\n        \"show_action_content\":\"true\",     //是否显示节点内容,默认true\n        \"show_action_state_list\":\"false\", //是否显示列表,默认false\n        \"theme\":\"flow_theme_default\",     //节点风格,默认flow_theme_default\n        \"link_type\":\"Flowchart\",          //连接线风格，默认Flowchart\n        \"params\":[],\n        // \"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\"}],\n        // \"links\":[{\"source_id\":\"f7a6ec0031784f5a80d8633a6418fd52\",\"target_id\":\"793a2a11cf8b40e9afd8bd8f04405e64\"},{\"source_id\":\"793a2a11cf8b40e9afd8bd8f04405e64\",\"target_id\":\"f558687ca5f34a6c89732eb50749a15a\"}]\n    };\n```\n\n流程模型对象内的相关参数为：\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e名称\u003c/td\u003e\n\u003ctd\u003e描述\u003c/td\u003e\n\u003ctd\u003e取值\u003c/td\u003e  \n\u003ctd\u003e默认\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecode\u003c/td\u003e\n\u003ctd\u003e流程唯一编码\u003c/td\u003e\n\u003ctd\u003e字符串\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ename\u003c/td\u003e\n\u003ctd\u003e流程名称\u003c/td\u003e\n\u003ctd\u003e字符串\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etheme\u003c/td\u003e\n\u003ctd\u003e组件节点样式\u003c/td\u003e\n\u003ctd\u003eflow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box,也可以自定义\u003c/td\u003e  \n\u003ctd\u003eflow_theme_default\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003elink_type\u003c/td\u003e\n\u003ctd\u003e连线样式\u003c/td\u003e\n\u003ctd\u003eFlowchart、Straight、Bezier、StateMachine\u003c/td\u003e  \n\u003ctd\u003eFlowchart\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_action_body\u003c/td\u003e\n\u003ctd\u003e是否显示组件节点中的Body部分\u003c/td\u003e\n\u003ctd\u003e“true\"、“false\"\u003c/td\u003e  \n\u003ctd\u003e\"true\"\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_action_content\u003c/td\u003e\n\u003ctd\u003e是否显示组件节点中的内容\u003c/td\u003e\n\u003ctd\u003e“true\"、“false\"\u003c/td\u003e  \n\u003ctd\u003e\"true\"\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eshow_action_state_list\u003c/td\u003e\n\u003ctd\u003e是否显示流程状态列表\u003c/td\u003e\n\u003ctd\u003e“true\"、“false\"\u003c/td\u003e  \n\u003ctd\u003e\"false\"\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eactions\u003c/td\u003e\n\u003ctd\u003e节点列表：可以在设计后自动生成\u003c/td\u003e\n\u003ctd\u003eobject\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctd\u003eactions\u003c/td\u003e\n\u003ctd\u003e连线列表：可以设计后自动生成\u003c/td\u003e\n\u003ctd\u003eobject\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n## 4.2 方法\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e名称\u003c/td\u003e\n\u003ctd\u003e描述\u003c/td\u003e\n\u003ctd\u003e参数\u003c/td\u003e  \n\u003ctd\u003e返回值\u003c/td\u003e  \n\u003ctd\u003eDEMO\u003c/td\u003e  \n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.showFlow();\u003c/td\u003e\n\u003ctd\u003e显示流程模型\u003c/td\u003e\n\u003ctd\u003eflowModel，可以为空\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.getFlow();\u003c/td\u003e\n\u003ctd\u003e获取流程模型对象\u003c/td\u003e\n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003eflowModel\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.snap(\"流程\");\u003c/td\u003e\n\u003ctd\u003e截图\u003c/td\u003e\n\u003ctd\u003e截图导出的文件名称\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTheme(theme);\u003c/td\u003e\n\u003ctd\u003e设置组件节点样式名称\u003c/td\u003e\n\u003ctd\u003eflow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box、或者其他自定义\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\nandflow.setTheme(theme);\nandflow.reflow();\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setEditable(false);\u003c/td\u003e\n\u003ctd\u003e设置是否可设计\u003c/td\u003e\n\u003ctd\u003etrue、false\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.reflow();\u003c/td\u003e\n\u003ctd\u003e重新渲染设计器,在改变样式、风格之后需要执行这个函数。\u003c/td\u003e\n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getLinkInfo(sourceId, targetId);\u003c/td\u003e\n\u003ctd\u003e获取连线信息\u003c/td\u003e\n\u003ctd\u003esourceId：起始节点ID, targetId：目的节点ID\u003c/td\u003e  \n\u003ctd\u003e连线信息\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setLinkInfo(linkInfo);\u003c/td\u003e\n\u003ctd\u003e设置连线信息\u003c/td\u003e\n\u003ctd\u003elinkInfo连线信息\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setLinkType(link_type);\u003c/td\u003e\n\u003ctd\u003e设置连接线样式名称\u003c/td\u003e\n\u003ctd\u003eFlowchart、Straight、Bezier、StateMachine\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\nandflow.setLinkType(link_type);\nandflow.reflow();\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getLinkLabel(source_id,target_id);\u003c/td\u003e\n\u003ctd\u003e获取连线中间标签标题\u003c/td\u003e\n\u003ctd\u003esourceId：起始节点ID, targetId：目的节点ID\u003c/td\u003e  \n\u003ctd\u003e标签标题\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.setLinkLabel(source_id,target_id,title);\u003c/td\u003e\n\u003ctd\u003e设置连线中间标签标题\u003c/td\u003e\n\u003ctd\u003esourceId：起始节点ID, targetId：目的节点ID,title:标题\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeLink(sourceId, targetId);\u003c/td\u003e\n\u003ctd\u003e删除链接线\u003c/td\u003e\n\u003ctd\u003esourceId：起始节点ID, targetId：目的节点ID\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeLinkBySource(sourceId);\u003c/td\u003e\n\u003ctd\u003e删除从SoureceID节点开始的所有链接线\u003c/td\u003e\n\u003ctd\u003esourceId：起始节点ID\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeLinkByTarget(targetId);\u003c/td\u003e\n\u003ctd\u003e删除所有到达targetId节点的所有链接线\u003c/td\u003e\n\u003ctd\u003etargetId：目标节点ID\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getActionInfo(actionId);\u003c/td\u003e\n\u003ctd\u003e获取节点配置信息\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID\u003c/td\u003e  \n\u003ctd\u003e节点信息\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionInfo(actionInfo);\u003c/td\u003e\n\u003ctd\u003e设置节点配置信息\u003c/td\u003e\n\u003ctd\u003e actionInfo：节点信息\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionTheme(actionId, theme);\u003c/td\u003e\n\u003ctd\u003e设置节点样式\u003c/td\u003e\n\u003ctd\u003e \nactionId: 节点ID\u003cbr/\u003e\ntheme:节点样式，action_theme_default,action_theme_icon,action_theme_zone,action_theme_box 等\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionTitle(actionId,title);\u003c/td\u003e\n\u003ctd\u003e设置节点标题\u003c/td\u003e\n\u003ctd\u003e actionId: 节点ID，title:标题\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getActionTitle(actionId);\u003c/td\u003e\n\u003ctd\u003e获取节点标题\u003c/td\u003e\n\u003ctd\u003e actionId: 节点ID\u003c/td\u003e  \n\u003ctd\u003estring\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionContentVisible(true);\u003c/td\u003e\n\u003ctd\u003e设置内容是否可见\u003c/td\u003e\n\u003ctd\u003etrue、false\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getActionContent(actionId);\u003c/td\u003e\n\u003ctd\u003e获取节点内容\u003c/td\u003e\n\u003ctd\u003eactionId:节点ID\u003c/td\u003e  \n\u003ctd\u003estring\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionContent(actionId, content, content_type);\u003c/td\u003e\n\u003ctd\u003e设置内容\u003c/td\u003e\n\u003ctd\u003eactionId:节点ID；content:内容; content_type:类型（\"msg\"、\"html\",\"chart\"）\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionParam(actionId,key,value);\u003c/td\u003e\n\u003ctd\u003e设置节点参数。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,key：参数名,value：参数值\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getActionParam(actionId,key);\u003c/td\u003e\n\u003ctd\u003e设置节点参数。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,key：参数名\u003c/td\u003e  \n\u003ctd\u003e参数值\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionBorderColor(actionId,color);\u003c/td\u003e\n\u003ctd\u003e设置节点边框颜色。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionHeaderColor(actionId,color);\u003c/td\u003e\n\u003ctd\u003e设置节点头部背景颜色。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionHeaderTextColor(actionId,color);\u003c/td\u003e\n\u003ctd\u003e设置节点头部字体颜色。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionBodyColor(actionId,color);\u003c/td\u003e\n\u003ctd\u003e设置节点内容背景颜色。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setActionBodyTextColor(actionId,color);\u003c/td\u003e\n\u003ctd\u003e设置节点内容字体颜色。\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeAction(actionId);\u003c/td\u003e\n\u003ctd\u003e删除节点\u003c/td\u003e\n\u003ctd\u003eactionId：节点ID\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- group --\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.getGroupInfo(groupId);\u003c/td\u003e\n\u003ctd\u003e获取组配置信息\u003c/td\u003e\n\u003ctd\u003egroupId：组ID\u003c/td\u003e  \n\u003ctd\u003e组信息\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupInfo(groupInfo);\u003c/td\u003e\n\u003ctd\u003e设置组配置信息\u003c/td\u003e\n\u003ctd\u003egroupInfo：组信息\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getGroupTitle(groupId);\u003c/td\u003e\n\u003ctd\u003e获取组标题\u003c/td\u003e\n\u003ctd\u003egroupId：组ID\u003c/td\u003e  \n\u003ctd\u003e组标题\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupTitle(groupId,title);\u003c/td\u003e\n\u003ctd\u003e设置组标题\u003c/td\u003e\n\u003ctd\u003egroupId：组ID, title:组标题\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupBorderColor(groupId,color);\u003c/td\u003e\n\u003ctd\u003e设置组边框颜色。\u003c/td\u003e\n\u003ctd\u003egroupId:组ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupHeaderColor(groupId,color);\u003c/td\u003e\n\u003ctd\u003e设置组头部背景颜色。\u003c/td\u003e\n\u003ctd\u003egroupId：组ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupHeaderTextColor(groupId,color);\u003c/td\u003e\n\u003ctd\u003e设置组头部字体颜色。\u003c/td\u003e\n\u003ctd\u003egroupId：组ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupBodyColor(groupId,color);\u003c/td\u003e\n\u003ctd\u003e设置组内容背景颜色。\u003c/td\u003e\n\u003ctd\u003egroupId：组ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setGroupBodyTextColor(groupId,color);\u003c/td\u003e\n\u003ctd\u003e设置组内容字体颜色。\u003c/td\u003e\n\u003ctd\u003egroupId：组ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeGroup(groupId,deleteMembers);\u003c/td\u003e\n\u003ctd\u003e删除组\u003c/td\u003e\n\u003ctd\u003egroupId：组ID, deleteMembers: 是否删除子元素（true,false)\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- list --\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getListInfo(listId);\u003c/td\u003e\n\u003ctd\u003e获取列表配置信息\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID\u003c/td\u003e  \n\u003ctd\u003e列表信息\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListInfo(listInfo);\u003c/td\u003e\n\u003ctd\u003e设置列表配置信息\u003c/td\u003e\n\u003ctd\u003elistInfo: 列表信息\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getListTitle(listId);\u003c/td\u003e\n\u003ctd\u003e获取列表标题\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID\u003c/td\u003e  \n\u003ctd\u003e列表标题\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListTitle(listId,title);\u003c/td\u003e\n\u003ctd\u003e设置列表标题\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID, title:标题\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListBorderColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表边框颜色。\u003c/td\u003e\n\u003ctd\u003elistId:列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListHeaderColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表头部背景颜色。\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListHeaderTextColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表头部字体颜色。\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListBodyColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表内容背景颜色。\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListBodyTextColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表内容字体颜色。\u003c/td\u003e\n\u003ctd\u003elistId:列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListItemColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表元素背景颜色。\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setListItemTextColor(listId,color);\u003c/td\u003e\n\u003ctd\u003e设置列表元素字体颜色。\u003c/td\u003e\n\u003ctd\u003elistId:列表ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeList(listId);\u003c/td\u003e\n\u003ctd\u003e删除列表\u003c/td\u003e\n\u003ctd\u003elistId: 列表ID\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- tip --\u003e\n\u003ctr\u003e\n\u003ctd\u003eandflow.getTipInfo(tipId);\u003c/td\u003e\n\u003ctd\u003e获取标签配置信息\u003c/td\u003e\n\u003ctd\u003etipId：标签ID\u003c/td\u003e  \n\u003ctd\u003e标签信息\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTipInfo(tipInfo);\u003c/td\u003e\n\u003ctd\u003e设置标签配置信息\u003c/td\u003e\n\u003ctd\u003etipInfo:标签信息\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getTipTitle(tipId);\u003c/td\u003e\n\u003ctd\u003e获取标签标题\u003c/td\u003e\n\u003ctd\u003etipId：标签ID\u003c/td\u003e  \n\u003ctd\u003e标签标题\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTipTitle(tipId,title);\u003c/td\u003e\n\u003ctd\u003e设置标签标题\u003c/td\u003e\n\u003ctd\u003etipId：标签ID, title:标题\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.getTipContent(tipId);\u003c/td\u003e\n\u003ctd\u003e获取标签内容\u003c/td\u003e\n\u003ctd\u003etipId：标签ID\u003c/td\u003e  \n\u003ctd\u003e标签内容\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTipContent(tipId,content);\u003c/td\u003e\n\u003ctd\u003e设置标签内容\u003c/td\u003e\n\u003ctd\u003etipId：标签ID, content:内容\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTipBodyColor(tip,color);\u003c/td\u003e\n\u003ctd\u003e设置标签背景颜色。\u003c/td\u003e\n\u003ctd\u003etipId：标签ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.setTipBodyTextColor(tip,color);\u003c/td\u003e\n\u003ctd\u003e设置标签内容字体颜色。\u003c/td\u003e\n\u003ctd\u003etipId：标签ID,color: 颜色\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eandflow.removeTip(tipId);\u003c/td\u003e\n\u003ctd\u003e删除标签\u003c/td\u003e\n\u003ctd\u003etipId：标签ID\u003c/td\u003e  \n\u003ctd\u003enull\u003c/td\u003e  \n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e \n\n\u003c/table\u003e\n\n\n## 4.3 事件\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e事件\u003c/td\u003e\n\u003ctd\u003e名称\u003c/td\u003e\n\u003ctd\u003e事件函数签名\u003c/td\u003e\n\u003ctd\u003e描述\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_action_click\u003c/td\u003e\n\u003ctd\u003e节点单击\u003c/td\u003e\n\u003ctd\u003eevent_action_click(action_meta, action)  \u003c/td\u003e\n\u003ctd\u003eaction_meta节点配置信息, action:节点信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_action_dblclick\u003c/td\u003e\n\u003ctd\u003e节点双击\u003c/td\u003e\n\u003ctd\u003eevent_action_dblclick(action_meta, action)  \u003c/td\u003e\n\u003ctd\u003eaction_meta节点配置信息, action:节点信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_action_remove\u003c/td\u003e\n\u003ctd\u003e节点被删除\u003c/td\u003e\n\u003ctd\u003eevent_action_remove( action)  \u003c/td\u003e\n\u003ctd\u003e action:节点信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_link_click\u003c/td\u003e\n\u003ctd\u003e连接线单击\u003c/td\u003e\n\u003ctd\u003eevent_link_click(linkinfo)  \u003c/td\u003e\n\u003ctd\u003elinkinfo:链接线信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_link_dblclick\u003c/td\u003e\n\u003ctd\u003e连接线双击\u003c/td\u003e\n\u003ctd\u003eevent_link_dblclick(linkinfo)  \u003c/td\u003e\n\u003ctd\u003elinkinfo:链接线信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_link_remove\u003c/td\u003e\n\u003ctd\u003e连接线被删除\u003c/td\u003e\n\u003ctd\u003eevent_link_remove(linkinfo)  \u003c/td\u003e\n\u003ctd\u003elinkinfo:链接线信息  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_canvas_click\u003c/td\u003e\n\u003ctd\u003e设计面板单击\u003c/td\u003e\n\u003ctd\u003eevent_canvas_click(event)  \u003c/td\u003e\n\u003ctd\u003eevent:事件  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eevent_canvas_changed\u003c/td\u003e\n\u003ctd\u003e设计面板被调整\u003c/td\u003e\n\u003ctd\u003eevent_canvas_changed()  \u003c/td\u003e\n\u003ctd\u003enull\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e   ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzone-7%2Fandflow_js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzone-7%2Fandflow_js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzone-7%2Fandflow_js/lists"}