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

Bertha 。 2024-04-18 18:46 73阅读 0赞

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

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

1.  插件提供的接口方法 官方demo： [https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors][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)'
    	});
    })

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

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

修改源码 详细见 [https://github.com/haoyanyu/vue-with-bpmn][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;
    },

[https_github.com_bpmn-io_bpmn-js-examples_tree_master_colors]: https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors
[https_github.com_haoyanyu_vue-with-bpmn]: https://github.com/haoyanyu/vue-with-bpmn