preface

Recently, due to the needs of the company’s business, I will use BPMN. js, so I look for relevant documents on the network to ponder, and I have to find many pits by myself. First of all here to recommend some nuggets of gold authors very useful articles, to avoid stepping on pits.

By LinDaiDai_ Lin Dull

Works: the most detailed bPMN. js textbook directory: juejin.cn/post/684490…

Author: MiyueFE

Bpmn.js 中文 版 (a) : juejin.cn/post/690079…

Bpmn. js中文 版 (2) : juejin.cn/post/692530…

Customize the Task node in the Renderer and add text

Before that, watch LinDaiDai_ Lin gawky juejin.cn/post/684490… Because I wrote the code referring to this chapter, I finally added my own task style, but the problem is that the text of the input task is missing. The author added the content by adding the Label. This method has no problem and is suitable for some specific situations.

But the director was not satisfied with this solution, and AFTER a few days of groping, I summed up BPMN’s approach to the text.js source code, which provided a custom task style that could be used, while adding the text box in the source code.

Take a look at lindaidai_Lin’s nerdy custom Renderer chapter and go straight to the code:

    //CustomRender.js
    // Import source code text.js, where the method is to create a Text display box
    import Text from 'diagram-js/lib/util/Text'

    // drawShape is the baserender.js rendering method
    drawShape = function(parentNode, element) {
        const type = element.type 
            if (customElements.includes(type)) { 
                // If statement is used to determine whether the node is a custom node
                const { url, attr,sendType } = customConfig[type]
                const customIcon = svgCreate('image', {
                    ...attr,
                    href: url,
                })
                element['width'] = attr.width 
                element['height'] = attr.height
                svgAppend(parentNode, customIcon)
                
                if (hasLabelElements.includes(type) && element.businessObject.name) {
                    // The if statement is used to determine whether there is a name attribute as well as a custom node that needs text
                    var defaultStyle = {
                        fontSize: 12.lineHeight: 1.2
                      }
                    // Use fontSize and lineHeight in the source code
                      var defaultSize = {
                        width: 100.height: 80
                      }
                    // Set the size of the display box to the same size as the task image
                   
                    var customText =new Text({
                        size:defaultSize,
                        style: defaultStyle,
                        align: 'center-middle'
                      })
                   // After creating the instance, pass in the two attributes just defined
                   // The most important thing is to add align: 'center-middle' to keep the text centered
                    var text=customText.createText(element.businessObject.name,element)
                   // The createText method of the source code needs to be passed (' displayed text ',' element node ')

                    svgAppend(parentNode, text)
                   // Append to the parent node
                }
                return parentNode
        }
    }
Copy the code

Add the above code to create a text display that looks just like the original node:

To see the source code for creating text, go to node_modules/ schematic-js /lib/util/ text.js

Finished this function, to continue to move bricks