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

上回记录到在页面上生成并编辑流程图；
但是实际使用中，往往需要进行自定义；
下面就根据实际需求来一步一步实现自定义。

不同的节点用不同的颜色区分

1. 插件提供的接口方法 官方demo： https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors

this.viewer.importXML(diagramXml, err => {
	if (err) {
		throw (err)
	}
	var overlays = this.viewer.get('overlays'),
		canvas = this.viewer.get('canvas'),
		elementRegistry = this.viewer.get('elementRegistry'),
		modeling = this.viewer.get('modeling');
	
	this.viewer.get('canvas').zoom('fit-viewport')

	var elementToColor = elementRegistry.get('ServiceTask_appPushDelegate_0wulpvm');

	modeling.setColor([ elementToColor], {
		stroke: 'green',
		fill: 'rgba(0, 80, 0, 0.4)'
	});
})

2. 修改源码 详细见 https://github.com/haoyanyu/vue-with-bpmn
   'bpmn-js/lib/draw/BpmnRenderer.js’中有对应的节点绘制方法

var StartEvent_StrokeColor = '#8F99AA',
		EndEvent_StrokeColor = '#8F99AA',
		SendTask_StrokeColor = 'green',
		UserTask_StrokeColor = '#ff9900',
		Start_FillColor = '#8F99AA',
		ComplexGateway_FillColor = "#374A5E",
		Gateway_FillColor = "#86CD69";
var handlers = this.handlers = {
	'bpmn:Event': function (parentGfx, element, attrs = {}) {
		if (!('fillOpacity' in attrs)) {
			attrs.fillOpacity = DEFAULT_FILL_OPACITY;
		}
		//由此可知，还可以自定义节点绘制的图形形状
		return drawCircle(parentGfx, element.width, element.height, attrs);
	},
	// 开始
	'bpmn:StartEvent': function (parentGfx, element) {
		var attrs = {
			//注释掉原有的
			//fill: getFillColor(element, defaultFillColor),
			//stroke: getStrokeColor(element, defaultStrokeColor)
			//根据需求新增变量定义颜色
			fill: getFillColor(element, Start_FillColor),
			stroke: getStrokeColor(element, StartEvent_StrokeColor)
		};

		var semantic = getSemantic(element);

		if (!semantic.isInterrupting) {
			attrs = {
				strokeDasharray: '6',
				strokeLinecap: 'round',
				fill: getFillColor(element, Start_FillColor),
				stroke: getStrokeColor(element, defaultStrokeColor)
			};
		}

		var circle = renderer('bpmn:Event')(parentGfx, element, attrs);

		renderEventContent(element, parentGfx);

		return circle;
	},
	...
}

修改文字label的位置(任务节点默认在框框内)

修改源码 详细见 https://github.com/haoyanyu/vue-with-bpmn
双击时进入编辑状态，控制的代码位置如下
bpmnjs/lib/features/label-editing/labelEditingProvider.js

// internal labels for tasks and collapsed call activities,
  // sub processes and participants
  if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity']) ||
      isCollapsedPool(element) ||
      isCollapsedSubProcess(element)) {
	//源代码
    //assign(bounds, {
     // width: bbox.width,
     // height: bbox.height
    //});
    //自定义 根据需求，修改label的位置
    assign(bounds, {
      width: bbox.width,
      height: bbox.height / 2,
	  y: bbox.height + bounds.y
    });

    assign(style, {
      fontSize: defaultFontSize + 'px',
      lineHeight: defaultLineHeight,
      paddingTop: (7 * zoom) + 'px',
      paddingBottom: (7 * zoom) + 'px',
      paddingLeft: (5 * zoom) + 'px',
      paddingRight: (5 * zoom) + 'px'
    });
  }

编辑完成后，label的显示位置
diagramjs/lib/util/Textjs

Text.prototype.layoutText = function(text, options) {
  ...
  if (align.vertical === 'middle') {
    padding.top = padding.bottom = 0;
  }
  //新增代码, 通过传入的参数来控制显示的位置///////////////////////////////////
   if (align.vertical === 'bottom') {
    y = box.height + 5;
  }

  ...

  var dimensions = {
    width: maxLineWidth,
    height: totalHeight
  };

  return {
    dimensions: dimensions,
    element: textElement
  };
};

BpmnRenderer.js中传入参数控制位置

'bpmn:Task': function (parentGfx, element, attr = {}) {
	var strokeColor = attr.strokeColor || 'red'
	var attrs = {
		fill: getFillColor(element, '#fff'),
		stroke: getStrokeColor(element, strokeColor)
	};

	var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
	//通过传入参数来配合控制label内容显示位置
	renderEmbeddedLabel(parentGfx, element, 'center-bottom');
	attachTaskMarkers(parentGfx, element);

	return rect;
},