Below is what we have so far, we are fairly new with this and still trying to get a grasp on how everything is working together, but i’ve seen that once it’s imported the javascript object can be accessed. That being said, i’m not sure how to go about doing it. A great start would being able to see the entire object tree to get a feel for how the data is formatted, the end game will be to modify the tree and export it as a json object.
note: we are not using this to create BPMN files but hoping to utilize the tool to create our own output based on the BPMN diagrams.
import React from 'react';
import BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import "bpmn-js/dist/assets/diagram-js.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
const propertiesPanelModule = require('bpmn-js-properties-panel');
const propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/bpmn');
export default class ReactBpmn extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.saveXML = this.saveXML.bind(this);
}
componentDidMount() {
const {
url,
diagramXML
} = this.props;
this.bpmnModeler = new BpmnJS({
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
container: '#canvas',
propertiesPanel: {
parent: '#properties'
}
});
this.bpmnModeler.on('import.done', (event) => {
const {
error,
warnings
} = event;
if (error) {
return this.handleError(error);
}
this.bpmnModeler.get('canvas').zoom('fit-viewport');
return this.handleShown(warnings);
});
if (url) {
return this.fetchDiagram(url);
}
if (diagramXML) {
return this.displayDiagram(diagramXML);
}
}
componentWillUnmount() {
this.bpmnModeler.destroy();
}
componentDidUpdate(prevProps, prevState) {
const {
props,
state
} = this;
if (props.url !== prevProps.url) {
return this.fetchDiagram(props.url);
}
const currentXML = props.diagramXML || state.diagramXML;
const previousXML = prevProps.diagramXML || prevState.diagramXML;
if (currentXML && currentXML !== previousXML) {
return this.displayDiagram(currentXML);
}
}
displayDiagram(diagramXML) {
this.bpmnModeler.importXML(diagramXML);
}
fetchDiagram(url) {
this.handleLoading();
fetch(url)
.then(response => response.text())
.then(text => this.setState({ diagramXML: text }))
.catch(err => this.handleError(err));
}
handleLoading() {
const { onLoading } = this.props;
if (onLoading) {
onLoading();
}
}
handleError(err) {
const { onError } = this.props;
if (onError) {
onError(err);
}
}
handleShown(warnings) {
const { onShown } = this.props;
if (onShown) {
onShown(warnings);
}
}
saveXML() {
this.bpmnModeler.saveXML().then( xml => console.log(xml));
}
render() {
return (
<div className="modeler">
<div id="canvas"></div>
<div id="properties"></div>
<button onClick={this.saveXML}></button>
</div>
);
}
}