如何在现在的项目中添加事物子流程
如何绘制事物子流程图标
有两种方式:
- 通过svg代码进行绘制
- 通过在线网站绘制图形事物子流程
第一种自己绘制的难度比较的大，所以选择第二种，方便又快捷
选在推荐一个在线设计svg的工具
http://editor.method.ac/
分析方法
通过eclipse上面的事件子流程与事物子流程，可以看见，他们的参数都一样的，不同的是形状不一样。
修改方法
通过上面的分析，其实我们可以知道，可以通过修改事件子流程来进行修改。
修改文件及路径kop-ide-portal\resource\stencilset.json
在文件867行添加
{
"type" : "node",
"id" : "EventSubProcess",
"title" : "Event sub process",
"description" : "A event sub process scope",
"view" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns:oryx=\"http://www.b3mn.org/oryx\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n width=\"200\"\n height=\"160\"\n version=\"1.0\">\n <defs></defs>\n <oryx:magnets>\n \t<oryx:magnet oryx:cx=\"0\" oryx:cy=\"80\" oryx:anchors=\"left\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"160\" oryx:anchors=\"bottom\" />\n \t<oryx:magnet oryx:cx=\"200\" oryx:cy=\"80\" oryx:anchors=\"right\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"0\" oryx:anchors=\"top\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"80\" oryx:default=\"yes\" />\n </oryx:magnets>\n <g pointer-events=\"fill\" oryx:minimumSize=\"120 100\" oryx:maximumSize=\"\" >\n\t<rect id=\"text_frame\" oryx:anchors=\"bottom top right left\" x=\"0\" y=\"0\" width=\"190\" height=\"160\" rx=\"5\" ry=\"5\" stroke=\"none\" stroke-width=\"0\" fill=\"none\" />\n\t<rect id=\"bg_frame\" oryx:anchors=\"bottom top right left\" oryx:resize=\"vertical horizontal\" x=\"0\" y=\"0\" width=\"200\" height=\"160\" rx=\"5\" ry=\"5\" stroke=\"#bbbbbb\" stroke-width=\"1\" stroke-dasharray=\"2,2,2\" fill=\"#ffffff\" />\n \t<text \n\t\t\tfont-size=\"12\" \n\t\t\tid=\"text_name\" \n\t\t\tx=\"8\" \n\t\t\ty=\"10\" \n\t\t\toryx:align=\"top left\"\n\t\t\toryx:fittoelem=\"text_frame\"\n\t\t\toryx:anchors=\"left top\" \n\t\t\tstroke=\"#373e48\">\n\t\t</text>\n \t\n\t<g id=\"none\"></g>\n\t\n </g>\n</svg>",
"icon" : "activity/event.subprocess.png",
"groups" : [ "Structural" ],
"propertyPackages" : [ "overrideidpackage", "namepackage", "documentationpackage", "asynchronousdefinitionpackage", "exclusivedefinitionpackage", "executionlistenerspackage" ],
"hiddenPropertyPackages" : [ ],
"roles" : [ "Activity", "all" ]
}
将以上文件修改为:
{
"type" : "node",
"id" : "TransactionSubProcess",
"title" : "Transaction sub process",
"description" : "A Transaction sub process scope",
"view" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns:oryx=\"http://www.b3mn.org/oryx\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n width=\"200\"\n height=\"160\"\n version=\"1.0\">\n <defs></defs>\n <oryx:magnets>\n \t<oryx:magnet oryx:cx=\"0\" oryx:cy=\"80\" oryx:anchors=\"left\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"160\" oryx:anchors=\"bottom\" />\n \t<oryx:magnet oryx:cx=\"200\" oryx:cy=\"80\" oryx:anchors=\"right\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"0\" oryx:anchors=\"top\" />\n \t<oryx:magnet oryx:cx=\"100\" oryx:cy=\"80\" oryx:default=\"yes\" />\n </oryx:magnets>\n <g pointer-events=\"fill\" oryx:minimumSize=\"120 100\" oryx:maximumSize=\"\" >\n\t<rect id=\"text_frame\" oryx:anchors=\"bottom top right left\" x=\"0\" y=\"0\" width=\"190\" height=\"160\" rx=\"5\" ry=\"5\" stroke=\"none\" stroke-width=\"0\" fill=\"none\" />\n\t<rect id=\"bg_frame\" oryx:anchors=\"bottom top right left\" oryx:resize=\"vertical horizontal\" x=\"0\" y=\"0\" width=\"200\" height=\"160\" rx=\"5\" ry=\"5\" stroke=\"#bbbbbb\" stroke-width=\"1\" fill=\"#ffffff\" />\n \t\n\t<rect id=\"bg_frame2\" oryx:anchors=\"bottom top right left\" oryx:resize=\"vertical horizontal\" x=\"5\" y=\"5\" width=\"190\" height=\"150\" rx=\"5\" ry=\"5\" stroke=\"#bbbbbb\" stroke-width=\"1\" fill=\"#ffffff\" />\n \t<text \n\t\t\tfont-size=\"12\" \n\t\t\tid=\"text_name\" \n\t\t\tx=\"8\" \n\t\t\ty=\"10\" \n\t\t\toryx:align=\"top left\"\n\t\t\toryx:fittoelem=\"text_frame\"\n\t\t\toryx:anchors=\"left top\" \n\t\t\tstroke=\"#373e48\">\n\t\t</text>\n \t\n\t<g id=\"none\"></g>\n\t\n </g>\n</svg>",
"icon" : "activity/event.subprocess.png",
"groups" : [ "Structural" ],
"propertyPackages" : [ "overrideidpackage", "namepackage", "documentationpackage", "asynchronousdefinitionpackage", "exclusivedefinitionpackage", "executionlistenerspackage" ],
"hiddenPropertyPackages" : [ ],
"roles" : [ "Activity", "all" ]
}
根据规则可以知道，Structural之间是无法直接替换的，所以需要在工具栏上添加该元素，在元素框中，需要添加滚动条
滚动条修改位置
process-toolbar-config.js中435行中 将,overflow:"hidden" 修改为,overflow:"auto"
这样元素列表滚动条就出现了。
拖动的时候，显示的事务子流程的图标不对
在工具栏增加事务子流程图标
在less文件( kop-boolbar.less )中定义图标
.kop-icon-position-transaction-subprocess {
background-position: -954px -492px; //这个位置需要根据雪碧图的图标来看
}
在process-toolbar-config.js添加如下内容
{
id:"transactionSubProcess"
,name:"事务子流程"
,groupsENname:"Structural"
,groupsCNname:"结构"
,ico:"kop-icon-position-transaction-subprocess"
,position:"inherit"
,type:"draggable-widget"
,btStyle:"kop-tools-button-style-none"
,width:100
,y:10
,x:13
}
替换图片
将添加事务子流程的tool.png图片进行替换。
问题
工具栏样式调整
由于流程类型多了一个，所以加入滚动条的功能
具体效果参考
无法拖动流程元素到事务子流程中
该问题解决了，主要在文件stencilset.json中相关行替换为一下内容就可以了。 代码行数第1248行"containmentRules" : [ { "role" : "BPMNDiagram", "contains" : [ "all" ] }, { "role" : "SubProcess", "contains" : [ "sequence_start", "sequence_end", "from_task_event", "to_task_event", "EventSubprocess", "TextAnnotation","TransactionSubProcess" ] }, { "role" : "EventSubProcess", "contains" : [ "sequence_start", "sequence_end", "from_task_event", "to_task_event", "TextAnnotation" ] }, { "role" : "TransactionSubProcess", "contains" : [ "sequence_start", "sequence_end", "from_task_event", "to_task_event", "TextAnnotation" ] }, { "role" : "Pool", "contains" : [ "Lane" ] }, { "role" : "Lane", "contains" : [ "sequence_start", "sequence_end", "EventSubprocess", "TextAnnotation", "DataStore" ,"TransactionSubProcess"] } ]
总结
在添加一个流程元素的时候，需要添加两个部分:
- 流程元素的xml图形定义
- 流程元素的规则定义
- 看流程引擎核心系统是否支持