Hi team.
I developed an angular 9 project with camunda modeler using below dependencies.
angular - “~9.1.13”,
“bpmn-js”: “6.3.4”,
“bpmn-js-properties-panel”: “0.33.2”,
“camunda-bpmn-moddle”: “^7.0.1”,
“core-js”: “3.6.4”,
“diagram-js”: “^11.13.0”
Expected and my implementation is as below.
So far what I have done is shown in attached image left side.
Property panel seems not the updated one (might be the problem is the versions I use).
My problems are;
-
I need to show connectors in tasks and show the most updated property panel like in camunda online modeler. When I search about the connectors, I found out that I need to use bpmn-js-connectors-extension in order to show the connectors like in the attached picture right side.
-
I couldn’t find a proper version of bpmn-js-connectors-extension that matches with other dependency versions and couldn’t find proper versions that matches with each other dependency version.
I have spent 3 weeks searching for this and I seek some support to add the connectors and other options in the property panel
import * as _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import * as _CamundaPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda';
import * as _ElementTemplates from 'bpmn-js-properties-panel/lib/provider/camunda/element-templates';
import * as _PropertiesPanelModule from 'bpmn-js-properties-panel';
// @ts-ignore
import { default as _CamundaModdleDescriptor } from 'camunda-bpmn-moddle/resources/camunda.json';
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
import Modeler from 'bpmn-js/lib/Modeler';
export const InjectionNames = {
eventBus: 'eventBus',
bpmnFactory: 'bpmnFactory',
entryFactory: 'entryFactory',
elementFactory: 'elementFactory',
elementRegistry: 'elementRegistry',
translate: 'translate',
moddle: 'moddle',
bpmnModdle: 'bpmnModdle',
propertiesProvider: 'propertiesProvider',
elementTemplates: 'elementTemplates',
paletteProvider: 'paletteProvider',
originalPaletteProvider: 'originalPaletteProvider'
};
export const EntryFactory = _EntryFactory;
export const BpmnModeler = Modeler;
export const OriginalPaletteProvider = PaletteProvider;
export const CamundaPropertiesProvider = _CamundaPropertiesProvider;
export const ElementTemplates = _ElementTemplates;
export const PropertiesPanelModule = _PropertiesPanelModule;
export const CamundaModdleDescriptor = _CamundaModdleDescriptor;
export interface IPaletteProvider {
getPaletteEntries(): any;
}
export interface IPalette {
registerProvider(provider: IPaletteProvider): any;
}
export interface IPropertiesProvider {
getTabs(elemnt): any;
}
export class WorkflowDesignComponent implements OnInit {
title = 'Angular/BPMN';
modeler;
constructor(private http: HttpClient) {
}
ngOnInit(): void {
this.modeler = new BpmnModeler({
container: '#canvas',
width: '100vw',
height: '100vh',
additionalModules: [
{[InjectionNames.elementTemplates]: ['type', ElementTemplates.elementTemplates[1]]},
{[InjectionNames.propertiesProvider]: ['type', CamundaPropertiesProvider.propertiesProvider[1]]},
{[InjectionNames.originalPaletteProvider]: ['type', OriginalPaletteProvider]},
PropertiesPanelModule
],
propertiesPanel: {
parent: '#properties'
},
moddleExtensions: {
camunda: CamundaModdleDescriptor
}
});
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
load(): void {
const url = '/../assets/bpmn/initial.bpmn';
this.http.get(url, {
headers: {observe: 'response'}, responseType: 'text'
}).subscribe(
(x: any) => {
console.log('Fetched XML, now importing: ', x);
this.modeler.importXML(x, this.handleError);
},
this.handleError
);
}
save(): void {
this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));
}
}