custom elements
Advanced example. Works with bpmn-js version v0.15.
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 elementsvar 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; // get them after modelingcustomModeler; // 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 elementsCustomContextPadProvider
: A custom context pad that allows you to connect custom elements to BPMN elementsCustomElementFactory
: A factory that knows about how to create BPMN and custom shapesCustomRenderer
: A renderer that knows how to draw custom elementsCustomRules
: A rule provider that defines the allowed interaction with custom elementsCustomUpdater
: An updater that updates business data while the user interacts with the diagram
Run this Example
Fetch dependencies:
npm install
Build example:
grunt auto-build
Run tests:
grunt auto-test
License
MIT