2022-06-07 18:16:49 +00:00
|
|
|
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
2022-08-05 18:57:30 +00:00
|
|
|
import {
|
|
|
|
BpmnPropertiesPanelModule,
|
|
|
|
BpmnPropertiesProviderModule,
|
|
|
|
} from 'bpmn-js-properties-panel';
|
2022-11-01 18:41:21 +00:00
|
|
|
import diagramXML from '../test/spec/bpmn/diagram.bpmn';
|
2022-07-08 14:30:21 +00:00
|
|
|
import spiffworkflow from './spiffworkflow';
|
2022-09-20 20:18:59 +00:00
|
|
|
import setupFileOperations from './fileOperations';
|
2022-06-15 19:13:35 +00:00
|
|
|
|
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-08-04 20:38:40 +00:00
|
|
|
let bpmnModeler;
|
|
|
|
|
2022-09-21 13:10:34 +00:00
|
|
|
/**
|
|
|
|
* This provides an example of how to instantiate a BPMN Modeler configured with
|
|
|
|
* all the extensions and modifications in this application.
|
|
|
|
*/
|
2022-08-04 19:57:15 +00:00
|
|
|
try {
|
2022-08-04 20:38:40 +00:00
|
|
|
bpmnModeler = new BpmnModeler({
|
2022-08-04 19:57:15 +00:00
|
|
|
container: modelerEl,
|
|
|
|
propertiesPanel: {
|
2022-08-05 18:57:30 +00:00
|
|
|
parent: panelEl,
|
2022-08-04 19:57:15 +00:00
|
|
|
},
|
|
|
|
additionalModules: [
|
|
|
|
spiffworkflow,
|
|
|
|
BpmnPropertiesPanelModule,
|
|
|
|
BpmnPropertiesProviderModule,
|
|
|
|
],
|
|
|
|
moddleExtensions: {
|
2022-08-05 18:57:30 +00:00
|
|
|
spiffworkflowModdle: spiffModdleExtension,
|
|
|
|
},
|
2022-08-04 19:57:15 +00:00
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
if (error.constructor.name === 'AggregateError') {
|
|
|
|
console.log(error.message);
|
|
|
|
console.log(error.name);
|
|
|
|
console.log(error.errors);
|
|
|
|
}
|
2022-08-04 20:38:40 +00:00
|
|
|
throw error;
|
2022-08-04 19:57:15 +00:00
|
|
|
}
|
2022-06-21 21:04:24 +00:00
|
|
|
|
2022-08-04 20:38:40 +00:00
|
|
|
// import XML
|
|
|
|
bpmnModeler.importXML(diagramXML).then(() => {});
|
|
|
|
|
2022-07-11 17:57:12 +00:00
|
|
|
/**
|
2022-10-29 14:36:25 +00:00
|
|
|
* It is possible to populate certain components using API calls to
|
2022-09-21 13:10:34 +00:00
|
|
|
* a backend. Here we mock out the API call, but this gives you
|
|
|
|
* a sense of how things might work.
|
|
|
|
*
|
2022-07-11 17:57:12 +00:00
|
|
|
*/
|
2022-09-21 13:10:34 +00:00
|
|
|
bpmnModeler.on('spiff.service_tasks.requested', (event) => {
|
|
|
|
event.eventBus.fire('spiff.service_tasks.returned', {
|
|
|
|
serviceTaskOperators: [
|
|
|
|
{
|
|
|
|
id: 'Chuck Norris Fact Service',
|
|
|
|
parameters: [
|
|
|
|
{
|
|
|
|
id: 'category',
|
|
|
|
type: 'string',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2022-09-23 18:32:25 +00:00
|
|
|
{
|
|
|
|
id: 'Fact about a Number',
|
|
|
|
parameters: [
|
|
|
|
{
|
|
|
|
id: 'number',
|
|
|
|
type: 'integer',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2022-09-21 13:10:34 +00:00
|
|
|
],
|
|
|
|
});
|
2022-07-11 17:57:12 +00:00
|
|
|
});
|
2022-06-21 21:04:24 +00:00
|
|
|
|
2022-10-29 14:36:25 +00:00
|
|
|
/**
|
|
|
|
* Python Script authoring is best done in some sort of editor
|
|
|
|
* here is an example that will connect a large CodeMirror editor
|
|
|
|
* to the "Launch Editor" buttons (Script Tasks, and the Pre and Post
|
|
|
|
* scripts on all other tasks.
|
|
|
|
*/
|
|
|
|
const myCodeMirror = CodeMirror(document.getElementById('code_editor'), {
|
|
|
|
lineNumbers: true,
|
|
|
|
mode: 'python',
|
|
|
|
});
|
|
|
|
|
2022-10-29 19:10:17 +00:00
|
|
|
const saveCodeBtn = document.getElementById('saveCode');
|
|
|
|
let launchCodeEvent = null;
|
2022-10-29 14:36:25 +00:00
|
|
|
|
|
|
|
bpmnModeler.on('script.editor.launch', (newEvent) => {
|
2022-10-29 19:10:17 +00:00
|
|
|
launchCodeEvent = newEvent;
|
|
|
|
myCodeMirror.setValue(launchCodeEvent.script);
|
2022-10-29 14:36:25 +00:00
|
|
|
setTimeout(function() {
|
|
|
|
myCodeMirror.refresh();
|
|
|
|
},1); // We have to wait a moment before calling refresh.
|
|
|
|
document.getElementById('code_overlay').style.display = 'block';
|
|
|
|
document.getElementById('code_editor').focus();
|
|
|
|
});
|
|
|
|
|
2022-10-29 19:10:17 +00:00
|
|
|
saveCodeBtn.addEventListener('click', (_event) => {
|
|
|
|
const { scriptType, element } = launchCodeEvent;
|
|
|
|
launchCodeEvent.eventBus.fire('script.editor.update', { element, scriptType, script: myCodeMirror.getValue()} )
|
2022-10-29 14:36:25 +00:00
|
|
|
document.getElementById('code_overlay').style.display = 'none';
|
|
|
|
});
|
|
|
|
|
2022-10-29 19:10:17 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Like Python Script Editing, it can be nice to edit your Markdown in a
|
|
|
|
* good editor as well.
|
|
|
|
*/
|
|
|
|
var simplemde = new SimpleMDE({ element: document.getElementById("markdown_textarea") });
|
|
|
|
let launchMarkdownEvent = null;
|
|
|
|
bpmnModeler.on('markdown.editor.launch', (newEvent) => {
|
|
|
|
launchMarkdownEvent = newEvent;
|
|
|
|
simplemde.value(launchMarkdownEvent.markdown);
|
|
|
|
document.getElementById('markdown_overlay').style.display = 'block';
|
|
|
|
document.getElementById('markdown_editor').focus();
|
|
|
|
});
|
|
|
|
|
|
|
|
const saveMarkdownBtn = document.getElementById('saveMarkdown');
|
|
|
|
saveMarkdownBtn.addEventListener('click', (_event) => {
|
|
|
|
const { element } = launchMarkdownEvent;
|
|
|
|
launchMarkdownEvent.eventBus.fire('markdown.editor.update', { element, markdown:simplemde.value() });
|
|
|
|
document.getElementById('markdown_overlay').style.display = 'none';
|
|
|
|
});
|
|
|
|
|
2022-10-31 20:20:05 +00:00
|
|
|
/**
|
2022-11-01 14:35:07 +00:00
|
|
|
* Also can be good to launch an editor for a call activity, or file
|
2022-10-31 20:20:05 +00:00
|
|
|
* Not implemented here but imagine opening up a new browser tab
|
2022-11-01 14:35:07 +00:00
|
|
|
* and showing a different process or completly different file editor.
|
2022-10-31 20:20:05 +00:00
|
|
|
*/
|
|
|
|
bpmnModeler.on('callactivity.editor.launch', (newEvent) => {
|
|
|
|
console.log(
|
|
|
|
'Open new window with editor for call activity: ',
|
|
|
|
newEvent.processId
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2022-11-01 14:35:07 +00:00
|
|
|
/**
|
2022-11-01 18:41:21 +00:00
|
|
|
* Also can be good to launch an editor for a call activity, or DMN
|
2022-11-01 14:35:07 +00:00
|
|
|
* Not implemented here but imagine opening up a new browser tab
|
|
|
|
* and showing a different process.
|
|
|
|
*/
|
|
|
|
bpmnModeler.on('file.editor.launch', (newEvent) => {
|
|
|
|
console.log(
|
|
|
|
'Open new window to edit file: ',
|
2022-11-01 18:41:21 +00:00
|
|
|
newEvent.value
|
|
|
|
);
|
|
|
|
});
|
|
|
|
bpmnModeler.on('dmn.editor.launch', (newEvent) => {
|
|
|
|
console.log(
|
|
|
|
'Open new window to edit DMN table: ',
|
|
|
|
newEvent.value
|
2022-11-01 14:35:07 +00:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2022-10-31 20:20:05 +00:00
|
|
|
/**
|
|
|
|
* Also handy to get a list of available files that can be used in a given
|
|
|
|
* context, say json files for a form, or a DMN file for a BusinessRuleTask
|
|
|
|
*/
|
|
|
|
bpmnModeler.on('spiff.options.requested', (event) => {
|
|
|
|
console.log('Requested!', event);
|
|
|
|
if (event.optionType === 'json') {
|
|
|
|
console.log("Firing the json")
|
|
|
|
event.eventBus.fire('spiff.options.returned.json', {
|
|
|
|
options: [
|
|
|
|
{ label: 'pizza_form.json', value: 'pizza_form.json' },
|
|
|
|
{ label: 'credit_card_form.json', value: 'credit_card_form.json' },
|
|
|
|
],
|
|
|
|
});
|
|
|
|
} else if (event.optionType === 'dmn') {
|
|
|
|
console.log("Firing the dmn")
|
|
|
|
event.eventBus.fire('spiff.options.returned.dmn', {
|
|
|
|
options: [
|
|
|
|
{ label: 'Pizza Special Prices', value: 'pizza_prices' },
|
|
|
|
{ label: 'Topping Prices', value: 'topping_prices' },
|
2022-11-01 18:41:21 +00:00
|
|
|
{ label: 'Test Decision', value: 'test_decision' },
|
2022-10-31 20:20:05 +00:00
|
|
|
],
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2022-09-21 13:10:34 +00:00
|
|
|
// This handles the download and upload buttons - it isn't specific to
|
|
|
|
// the BPMN modeler or these extensions, just a quick way to allow you to
|
2022-10-29 14:36:25 +00:00
|
|
|
// create and save files, so keeping it outside the example.
|
2022-09-20 20:18:59 +00:00
|
|
|
setupFileOperations(bpmnModeler);
|