custom-elements

Custom Elements

This example shows how to add support for custom shapes and connections to bpmn-js.

About

This example creates a custom BPMN modeler that can display and add custom shapes and connections to BPMN 2.0 diagrams.

The renderer ships with custom rules that define which modeling operations are possible on custom shapes and connections. It can import custom shapes and connections from a JSON descriptor and updates their properties during modeling.

Usage Summary

The example provides a custom modeler. After instantiation, the modeler allows you to add and get custom shapes and connections.

// add custom elements
var customElements = [
  {
    type: "custom:triangle",
    id: "CustomTriangle_1",
    x: 300,
    y: 300
  },
  {
    type: "custom:connection",
    id: "CustomConnection_1",
    source: "CustomTriangle_1",
    target: "Task_1",
    waypoints: [
      // ...
    ]
 }
];

customModeler.addCustomElements(customElements);


// get them after modeling
customModeler.getCustomElements(); // all currently existing custom elements

The modeler ships with a module that provides the following bpmn-js extensions:

• CustomPalette: A custom palette that allows you to create custom elements
• CustomContextPadProvider: A custom context pad that allows you to connect custom elements to BPMN elements
• CustomElementFactory: A factory that knows about how to create BPMN and custom shapes
• CustomRenderer: A renderer that knows how to draw custom elements
• CustomRules: A rule provider that defines the allowed interaction with custom elements
• CustomUpdater: An updater that updates business data while the user interacts with the diagram

Run this Example

Fetch dependencies:

npm install

Build example and open in your browser:

npm run dev

Run tests:

npm test

License

MIT