vue里使用bpmn绘制流程图（四）

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.节点属性面板自定义

1. 可以在原有面板的基础上进行扩展和修改

详细可参考官方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 ]
};

2. 完全自定义控制面板

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