Based on the previous experience and the summary of the questions raised by some group friends, the layout may not be very good, I hope you will forgive me.

If you have any other questions, you can also comment on the article. Interested partners can contact me or Lin Baiyao to enter the discussion group of BPMN. js.

1. Cannot read property ‘isGeneric’

The reason:

Common in Vue projects. As the parameter type received by Bpmn during the update should be ModdleElement type, but the corresponding data was saved into some data of data() {return {}} when writing the component, so it was processed in a responsive manner by VUE, and the prototype and attributes were changed, resulting in failure to parse.

Solution:

Starting with an _ or $sign in data () {}, or assigning this without declaring it in data, avoids reactive processing.

2. Uncaught Error: Unknown type is displayed when XML is imported or a new label or attribute is createdxxx:xxx

The reason:

The current statement of the file (a json file, such as package/process in the project – designer/plugins/descriptor/under three files) does not support this tag/attributes

Solution:

According to the required tag/attribute type, add the corresponding tag/attribute to the corresponding description file class. For details about the file format, see BPMN Custom Parsing File

3. Change element/line colors

3.1. The modeler model

Use the modeling.setcolor (els, option) method directly to change an element’s color or other properties.

3.2. The viewer mode

  1. usecanvas.addMarker(elId, marker)Add a class name to the element, and then add a CSS style to the class.
  2. useoverlays.add(elId, option)Add a mask layer to the element and a CSS style to the mask layer.

The mode in Viewer mode is also available in Modeler mode.

4. Hide the BPMN. IO canvas logo

Add global styles

a.bjs-powered-by {
    display: none
}
Copy the code

Note: although bPMn.js is an open source project, the author requested that the organization’s logo not be hidden, so please keep it as much as possible during development.

5. Prevent contentPad from deleting events

Depending on some solutions in the official BPMN forum, adding a BPMNLint rule may not prevent an element from being deleted before the delete button is clicked. So to determine whether or not to delete after clicking the delete button, you can override the delete feature in contentPad.

5.1 define customContentPad

Create CustomContentPadProvider. Js

class CustomContextPadProvider {
  constructor(contextPad, rules, modeling, translate) {
    contextPad.registerProvider(this);

    this._rules = rules;
    this._modeling = modeling;
    this._translate = translate;
  }
}

CustomContextPadProvider.$inject = [
  "contextPad"."rules"."modeling"."translate"
];

export default {
  __init__: ["customContextPadProvider"].customContextPadProvider: ["type", CustomContextPadProvider]
};
Copy the code

5.2 Defining new Deletion rules

Before defining a new rule, you need to delete the original deletion rule.

Define the getContextPadEntries method in the CustomContextPadProvider class
class CustomContextPadProvider {
  // ...
  
  // The passed argument is the current selected element
  getContextPadEntries(element) {
    const rules = this._rules;
    const translate = this._translate;
    const modeling = this._modeling;
    
    // Entries are the original contentPad operation list
    return function (entries) {
      // 1. Write delete judgment logic
      const deleteAllowed = true;
      
      // 2. Delete the original delete operation
      delete entries["delete"];
      
      // 3. Insert a custom delete button
      entries["delete"] = {
        group: "edit".className: "bpmn-icon-trash".title: translate("Remove"),
        action: {
          click: function (event) {
            if(! deleteAllowed) { alert("This is not allowed!");
            } else{ modeling.removeElements([element]); }}}}// 4. Returns the contentPad action button
      returnentries; }}}Copy the code

5.3 Introduce a custom contentPad when initializing Modeler

import Modeler from "bpmn-js/lib/Modeler";
import customContextPadProviderModule from "./CustomContextPadProvider";

const container = document.getElementById("container");

const modeler = new Modeler({
  container,
  additionalModules: [customContextPadProviderModule],
  keyboard: {
    bindTo: document}});Copy the code

6. Unable to render when importing bPMn.js using CDN

This problem mainly appears in my personal open source project bPMN-Process-Designer, the original function has been disabled.

Main issues:

The process editor BpmnModeler instance could not be instantiated properly when the component could not be initialized properly at page load time.

The main problem can also be found in the error message, an error occurred while defining the customPalette and the customPalette sidebar could not be found properly.

The reason:

When we customize the constructor of the Palette, we inherit the native paletteProvider, but we don’t inject the dependency instance, so we can’t find the other instance object of the dependency at instantiation time.

Solution:

Add dependency injection to the custom paletteProvider

 import PaletteProvider from "bpmn-js/lib/features/palette/PaletteProvider";
 ​
 export default function CustomPalette(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
   PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000);
 }
 ​
 // Inject dependencies
 CustomPalette.$inject = ["palette"."create"."elementFactory"."spaceTool"."lassoTool"."handTool"."globalConnect"."translate"];
Copy the code