2022-06-07 18:16:49 +00:00
|
|
|
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
|
|
|
import diagramXML from '../resources/diagram.bpmn';
|
2022-06-15 13:51:46 +00:00
|
|
|
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
|
|
|
|
import inputOutput from './spiffworkflow/InputOutput';
|
2022-06-15 14:00:03 +00:00
|
|
|
import SpiffWorkflowPropertiesProvider from './spiffworkflow/PropertiesPanel';
|
2022-07-07 15:20:43 +00:00
|
|
|
import FileSaver from 'file-saver';
|
|
|
|
import dataObjectInterceptor from './spiffworkflow/DataObject'; // For file downloads.
|
2022-06-15 19:13:35 +00:00
|
|
|
|
|
|
|
// Examples for extending the xml language can be found at
|
|
|
|
// https://github.com/camunda/camunda-bpmn-moddle/blob/master/resources/camunda.json
|
2022-06-15 13:51:46 +00:00
|
|
|
const modelerEl = document.getElementById('modeler');
|
|
|
|
const panelEl = document.getElementById('panel');
|
2022-06-27 21:29:24 +00:00
|
|
|
const spiffModdleExtension = require('./spiffworkflow/moddle/spiffworkflow.json');
|
|
|
|
|
2022-06-07 18:16:49 +00:00
|
|
|
// create modeler
|
|
|
|
const bpmnModeler = new BpmnModeler({
|
2022-06-15 13:51:46 +00:00
|
|
|
container: modelerEl,
|
|
|
|
propertiesPanel: {
|
|
|
|
parent: panelEl
|
|
|
|
},
|
2022-06-07 18:52:29 +00:00
|
|
|
additionalModules: [
|
2022-06-15 13:51:46 +00:00
|
|
|
inputOutput,
|
2022-07-07 15:20:43 +00:00
|
|
|
dataObjectInterceptor,
|
2022-06-15 14:00:03 +00:00
|
|
|
SpiffWorkflowPropertiesProvider,
|
2022-06-15 13:51:46 +00:00
|
|
|
BpmnPropertiesPanelModule,
|
|
|
|
BpmnPropertiesProviderModule,
|
2022-06-07 18:52:29 +00:00
|
|
|
],
|
2022-06-15 13:51:46 +00:00
|
|
|
moddleExtensions: {
|
2022-06-27 21:29:24 +00:00
|
|
|
spiffworkflow: spiffModdleExtension
|
2022-06-15 13:51:46 +00:00
|
|
|
}
|
2022-06-07 18:16:49 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
// import XML
|
2022-06-08 20:31:17 +00:00
|
|
|
bpmnModeler.importXML(diagramXML).then(() => {});
|
2022-06-21 21:04:24 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Just a quick bit of code so we can save the XML that is output.
|
|
|
|
* Helps for debugging against other libraries (like SpiffWorkflow)
|
|
|
|
*/
|
|
|
|
let btn = document.getElementById('downloadButton');
|
|
|
|
btn.addEventListener('click', event => {
|
|
|
|
saveXML();
|
|
|
|
});
|
|
|
|
async function saveXML() {
|
|
|
|
const { xml } = await bpmnModeler.saveXML({ format: true });
|
|
|
|
const blob = new Blob([ xml ], { type: 'text/xml' });
|
|
|
|
FileSaver.saveAs(blob, 'diagram.bpmn');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|