spiff-arena/bpmn-js-spiffworkflow/app/app.js

import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';
import diagramXML from '../test/spec/bpmn/empty_diagram.bpmn';
import spiffworkflow from './spiffworkflow';
import setupFileOperations from './fileOperations';

const modelerEl = document.getElementById('modeler');
const panelEl = document.getElementById('panel');
const spiffModdleExtension = require('./spiffworkflow/moddle/spiffworkflow.json');

let bpmnModeler;

/**
 * This provides an example of how to instantiate a BPMN Modeler configured with
 * all the extensions and modifications in this application.
 */
try {
  bpmnModeler = new BpmnModeler({
    container: modelerEl,
    propertiesPanel: {
      parent: panelEl,
    },
    additionalModules: [
      spiffworkflow,
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,
    ],
    moddleExtensions: {
      spiffworkflowModdle: spiffModdleExtension,
    },
  });
} catch (error) {
  if (error.constructor.name === 'AggregateError') {
    console.log(error.message);
    console.log(error.name);
    console.log(error.errors);
  }
  throw error;
}

// import XML
bpmnModeler.importXML(diagramXML).then(() => {});

/**
 * It is possible to populate certain components using API calls to
 * a backend.  Here we mock out the API call, but this gives you
 * a sense of how things might work.
 *
 */
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',
          },
        ],
      },
      {
        id: 'Fact about a Number',
        parameters: [
          {
            id: 'number',
            type: 'integer',
          },
        ],
      },
    ],
  });
});

/**
 * 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',
});

const saveCodeBtn = document.getElementById('saveCode');
let launchCodeEvent = null;

bpmnModeler.on('spiff.script.edit', (newEvent) => {
  launchCodeEvent = newEvent;
  myCodeMirror.setValue(launchCodeEvent.script);
  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();
});

saveCodeBtn.addEventListener('click', (_event) => {
  const { scriptType, element } = launchCodeEvent;
  launchCodeEvent.eventBus.fire('spiff.script.update', {
    element,
    scriptType,
    script: myCodeMirror.getValue(),
  });
  document.getElementById('code_overlay').style.display = 'none';
});

/**
 * Like Python Script Editing, it can be nice to edit your Markdown in a
 * good editor as well.
 */
const simplemde = new SimpleMDE({
  element: document.getElementById('markdown_textarea'),
});
let launchMarkdownEvent = null;
bpmnModeler.on('spiff.markdown.edit', (newEvent) => {
  launchMarkdownEvent = newEvent;
  simplemde.value(launchMarkdownEvent.value);
  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('spiff.markdown.update', {
    element,
    value: simplemde.value(),
  });
  document.getElementById('markdown_overlay').style.display = 'none';
});

/**
 * Also can be good to launch an editor for a call activity, or file
 * Not implemented here but imagine opening up a new browser tab
 * and showing a different process or completly different file editor.
 */
bpmnModeler.on('spiff.callactivity.edit', (newEvent) => {
  console.log(
    'Open new window with editor for call activity: ',
    newEvent.processId
  );
});

/**
 * Also can be good to launch an editor for a call activity, or DMN
 * Not implemented here but imagine opening up a new browser tab
 * and showing a different process.
 */
bpmnModeler.on('spiff.file.edit', (newEvent) => {
  console.log('Open new window to edit file: ', newEvent.value);
});
bpmnModeler.on('spiff.dmn.edit', (newEvent) => {
  console.log('Open new window to edit DMN table: ', newEvent.value);
});

/**
 * 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.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' },
    ],
  });
});

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' },
    ],
  });
});

// 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.element)
  event.eventBus.fire('spiff.callactivity.update', {
    value: 'searched_bpmn_id',
    element: event.element,
  });
});


// 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
// create and save files, so keeping it outside the example.
setupFileOperations(bpmnModeler);