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
|
|
|
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.script.edit', (newEvent) => {
|
2022-10-29 19:10:17 +00:00
|
|
|
launchCodeEvent = newEvent;
|
|
|
|
myCodeMirror.setValue(launchCodeEvent.script);
|
2022-11-02 00:24:28 +00:00
|
|
|
setTimeout(function () {
|
2022-10-29 14:36:25 +00:00
|
|
|
myCodeMirror.refresh();
|
2022-11-02 00:24:28 +00:00
|
|
|
}, 1); // We have to wait a moment before calling refresh.
|
2022-10-29 14:36:25 +00:00
|
|
|
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;
|
2022-11-02 00:24:28 +00:00
|
|
|
launchCodeEvent.eventBus.fire('spiff.script.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.
|
|
|
|
*/
|
2022-11-02 00:24:28 +00:00
|
|
|
const simplemde = new SimpleMDE({
|
|
|
|
element: document.getElementById('markdown_textarea'),
|
|
|
|
});
|
2022-10-29 19:10:17 +00:00
|
|
|
let launchMarkdownEvent = null;
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.markdown.edit', (newEvent) => {
|
2022-10-29 19:10:17 +00:00
|
|
|
launchMarkdownEvent = newEvent;
|
2022-11-02 00:24:28 +00:00
|
|
|
simplemde.value(launchMarkdownEvent.value);
|
2022-10-29 19:10:17 +00:00
|
|
|
document.getElementById('markdown_overlay').style.display = 'block';
|
|
|
|
document.getElementById('markdown_editor').focus();
|
|
|
|
});
|
|
|
|
|
|
|
|
const saveMarkdownBtn = document.getElementById('saveMarkdown');
|
|
|
|
saveMarkdownBtn.addEventListener('click', (_event) => {
|
|
|
|
const { element } = launchMarkdownEvent;
|
2022-11-02 00:24:28 +00:00
|
|
|
launchMarkdownEvent.eventBus.fire('spiff.markdown.update', {
|
|
|
|
element,
|
|
|
|
value: simplemde.value(),
|
|
|
|
});
|
2022-10-29 19:10:17 +00:00
|
|
|
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
|
|
|
*/
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.callactivity.edit', (newEvent) => {
|
2022-10-31 20:20:05 +00:00
|
|
|
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.
|
|
|
|
*/
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.file.edit', (newEvent) => {
|
|
|
|
console.log('Open new window to edit file: ', newEvent.value);
|
2022-11-01 18:41:21 +00:00
|
|
|
});
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.dmn.edit', (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
|
|
|
|
*/
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.json_files.requested', (event) => {
|
|
|
|
event.eventBus.fire('spiff.json_files.returned', {
|
|
|
|
options: [
|
|
|
|
{ label: 'pizza_form.json', value: 'pizza_form.json' },
|
|
|
|
{ label: 'credit_card_form.json', value: 'credit_card_form.json' },
|
|
|
|
],
|
|
|
|
});
|
2022-10-31 20:20:05 +00:00
|
|
|
});
|
|
|
|
|
2022-11-02 00:24:28 +00:00
|
|
|
bpmnModeler.on('spiff.dmn_files.requested', (event) => {
|
|
|
|
event.eventBus.fire('spiff.dmn_files.returned', {
|
|
|
|
options: [
|
|
|
|
{ label: 'Pizza Special Prices', value: 'pizza_prices' },
|
|
|
|
{ label: 'Topping Prices', value: 'topping_prices' },
|
|
|
|
{ label: 'Test Decision', value: 'test_decision' },
|
|
|
|
],
|
|
|
|
});
|
|
|
|
});
|
2022-10-31 20:20:05 +00:00
|
|
|
|
2022-11-14 17:23:22 +00:00
|
|
|
// As call activites might refernce processes across the system
|
|
|
|
// it should be possible to search for a paticular call activity.
|
|
|
|
bpmnModeler.on('spiff.callactivity.search', (event) => {
|
|
|
|
console.log("Firing call activity update")
|
|
|
|
event.eventBus.fire('spiff.callactivity.update', {
|
|
|
|
value: 'searched_bpmn_id',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
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);
|