ngx-bpmn-modeler
v1.0.1
Published
Angular [bpmn-js](https://bpmn.io/toolkit/bpmn-js/) component with Custom Properties Panel Support.
Downloads
19
Readme
ngx-bpmn-modeler
Angular bpmn-js component with Custom Properties Panel Support.
Implements ControlValueAccesor
.
Getting Started
1. Install packages
# bpmn-js dependencies
npm i bpmn-js bpmn-js-properties-panel diagram-js-minimap
# this package
npm i ngx-bpmn-modeler
2. Include bpmn-js stylesheets
@import '~bpmn-js/dist/assets/diagram-js';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
@import '~diagram-js-minimap/assets/diagram-js-minimap';
3. Import Module
import { NgxBpmnModelerModule } from 'ngx-bpmn-modeler';
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
NgxBpmnModelerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
4. Include the component
<ngx-bpmn-modeler [(ngModel)]="xmlModel">
</ngx-bpmn-modeler>
Inputs
| name | description | | ---- | ----------- | | wrapperClass | Wrapper element custom CSS Class | | containerClass | Container element custom CSS Class | | propertiesClass | Properties Panel element custom CSS Class | | propertiesProvider | Your custom Properties Provider. See bpmn-js properties panel extension | | propertiesDescriptor | Your custom Properties Descriptor. See bpmn-js properties panel extension | | additionalModules | Additional BPMN-js modules. |
Tips
Adding Custom Properties
You can see how at bpmn-js examples
If your customizations are simple, you can omit PropertiesProvider
by adding some extra fields to your PropertiesDescriptor
.
const myCustomPropertiesDescriptor = {
id: 'world',
name: 'World',
label: 'World Properties',
prefix: 'world',
uri: 'http://world',
xml: {
tagAlias: 'lowerCase'
},
associations: [],
types: [
{
name: 'CustomizedSequenceFlow',
extends: [
'bpmn:SequenceFlow'
],
properties: [
{
name: 'description',
description: 'Description of the sequence',
label : 'Description',
isAttr: true,
type: 'String'
}
]
},
]
}