1. 替换节点汉化
点击扳手图标可以将当前节点替换成新的节点。节点名称默认是英文,此处可以汉化
- 控制弹框显示的源码在 bpmn-js\lib\features\popup-menu\ReplaceMenuProvider.js中
import translation from './translationsGerman'; //引入翻译文件
ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, action) {
var translate = this._translate;
var replaceElement = this._bpmnReplace.replaceElement;
var replaceAction = function() {
return replaceElement(element, definition.target);
};
action = action || replaceAction;
var menuEntry = {
label: translation[definition.label], //将label显示的内容替换为中文
// label: definition.label,
className: definition.className,
id: definition.actionName,
action: action
};
return menuEntry;
};
- 控制弹框内容的文件在bpmn-js\lib\features\replace\ReplaceOptions.js中
不同类型的节点,可替换的节点都不同,根据需要自行配置
2.节点属性面板自定义
- 可以在原有面板的基础上进行扩展和修改
详细可参考官方demo https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension
react版本 https://github.com/bpmn-io/bpmn-js-example-react-properties-panel
新增一个PropertiesProvider
文件,并注入到propertiesProvider
中,如下。
可以通过对节点类型等的判断if(is(element, 'bpmn:Task'))
来控制面板显示不同的内容,
import MagicPropertiesProvider from './MagicPropertiesProvider';
export default {
__init__: [ 'propertiesProvider' ],
propertiesProvider: [ 'type', MagicPropertiesProvider ]
};
- 完全自定义控制面板
propertiesPanel
属性注入自定的propertiesPanel.js文件
import PropertiesPanel from './propertiesPanel';
export default {
__init__: ['propertiesPanel'],
propertiesPanel: [ 'type', PropertiesPanel ]
};
propertiesPanel.js
定义构造函数PropertiesPanel
export default function PropertiesPanel(config, eventBus, modeling,bpmnFactory, commandStack, canvas) {
this._eventBus = eventBus;
this._modeling = modeling;
this._commandStack = commandStack; //用于触发bpmn定义的一些命令
this._canvas = canvas;
this._bpmnFactory = bpmnFactory
this.createModal(); //创建节点的属性弹框,可以创建自定的vue组件或者react组件
this._init(config); //初始化,此处通过eventBus监听事件来控制弹框的显示等操作
}
//注入需要使用的模块
PropertiesPanel.$inject = [
'config.propertiesPanel',
'eventBus',
'modeling',
'bpmnFactory',
'commandStack',
'canvas'
];
详细见 https://github.com/haoyanyu/vue-with-bpmn中src/components/bpmn/custom/custom-panel/propertiesPanel.js