merged in main and resolved conflicts w/ burnettk

app/app.js

@@ -3,9 +3,9 @@ import {
   BpmnPropertiesPanelModule,
   BpmnPropertiesProviderModule,
 } from 'bpmn-js-properties-panel';
-import FileSaver from 'file-saver';
 import diagramXML from '../test/spec/bpmn/script_task.bpmn';
 import spiffworkflow from './spiffworkflow';
+import setupFileOperations from './fileOperations';
 
 const modelerEl = document.getElementById('modeler');
 const panelEl = document.getElementById('panel');
@@ -13,7 +13,10 @@ const spiffModdleExtension = require('./spiffworkflow/moddle/spiffworkflow.json'
 
 let bpmnModeler;
 
-// create modeler
+/**
+ * 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,
@@ -41,80 +44,38 @@ try {
 // import XML
 bpmnModeler.importXML(diagramXML).then(() => {});
 
-/** ****************************************
- * Below are a few helper methods so we can upload and download files
- * easily from the editor for testing purposes.
- * -----------------------------------------
- */
-
 /**
- * Just a quick bit of code so we can save the XML that is output.
+ * It is possible to poplulate certain components using API calls to
- * Helps for debugging against other libraries (like SpiffWorkflow)
+ * a backend.  Here we mock out the API call, but this gives you
+ * a sense of how things might work.
+ *
  */
-const btn = document.getElementById('downloadButton');
+bpmnModeler.on('spiff.service_tasks.requested', (event) => {
-btn.addEventListener('click', (_event) => {
+  event.eventBus.fire('spiff.service_tasks.returned', {
-  saveXML();
+    serviceTaskOperators: [
-});
+      {
-async function saveXML() {
+        id: 'Chuck Norris Fact Service',
-  const { xml } = await bpmnModeler.saveXML({ format: true });
+        parameters: [
-  const blob = new Blob([xml], { type: 'text/xml' });
+          {
-  FileSaver.saveAs(blob, 'diagram.bpmn');
+            id: 'category',
-}
+            type: 'string',
-
+          },
-/**
+        ],
- * Just a quick bit of code so we can open a local XML file
+      },
- * Helps for debugging against other libraries (like SpiffWorkflow)
+      {
- */
+        id: 'Fact about a Number',
-const uploadBtn = document.getElementById('uploadButton');
+        parameters: [
-uploadBtn.addEventListener('click', (_event) => {
+          {
-  openFile(displayFile);
+            id: 'number',
+            type: 'integer',
+          },
+        ],
+      },
+    ],
+  });
 });
 
-function clickElem(elem) {
+// This handles the download and upload buttons - it isn't specific to
-  const eventMouse = document.createEvent('MouseEvents');
+// the BPMN modeler or these extensions, just a quick way to allow you to
-  eventMouse.initMouseEvent(
+// create and save files.
-    'click',
+setupFileOperations(bpmnModeler);
-    true,
-    false,
-    window,
-    0,
-    0,
-    0,
-    0,
-    0,
-    false,
-    false,
-    false,
-    false,
-    0,
-    null
-  );
-  elem.dispatchEvent(eventMouse);
-}
-
-function displayFile(contents) {
-  bpmnModeler.importXML(contents).then(() => {});
-}
-
-export default function openFile(func) {
-  const readFile = function readFileCallback(e) {
-    const file = e.target.files[0];
-    if (!file) {
-      return;
-    }
-    const reader = new FileReader();
-    reader.onload = function onloadCallback(onloadEvent) {
-      const contents = onloadEvent.target.result;
-      fileInput.func(contents);
-      document.body.removeChild(fileInput);
-    };
-    reader.readAsText(file);
-  };
-  let fileInput = document.createElement('input');
-  fileInput.type = 'file';
-  fileInput.style.display = 'none';
-  fileInput.onchange = readFile;
-  fileInput.func = func;
-  document.body.appendChild(fileInput);
-  clickElem(fileInput);
-}

app/fileOperations.js

@@ -0,0 +1,83 @@
+// FileSaver isn't really a dependency, we use it here to provide an example.
+// eslint-disable-next-line import/no-extraneous-dependencies
+import FileSaver from 'file-saver';
+
+/** ****************************************
+ * Below are a few helper methods so we can upload and download files
+ * easily from the editor for testing purposes.
+ * -----------------------------------------
+ */
+export default function setupFileOperations(bpmnModeler) {
+  /**
+   * Just a quick bit of code so we can save the XML that is output.
+   * Helps for debugging against other libraries (like SpiffWorkflow)
+   */
+  const 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');
+  }
+
+  /**
+   * Just a quick bit of code so we can open a local XML file
+   * Helps for debugging against other libraries (like SpiffWorkflow)
+   */
+  const uploadBtn = document.getElementById('uploadButton');
+  uploadBtn.addEventListener('click', (_event) => {
+    openFile(displayFile);
+  });
+
+  function displayFile(contents) {
+    bpmnModeler.importXML(contents).then(() => {});
+  }
+}
+
+function clickElem(elem) {
+  const eventMouse = document.createEvent('MouseEvents');
+  eventMouse.initMouseEvent(
+    'click',
+    true,
+    false,
+    window,
+    0,
+    0,
+    0,
+    0,
+    0,
+    false,
+    false,
+    false,
+    false,
+    0,
+    null
+  );
+  elem.dispatchEvent(eventMouse);
+}
+
+export function openFile(func) {
+  const readFile = function readFileCallback(e) {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = function onloadCallback(onloadEvent) {
+      const contents = onloadEvent.target.result;
+      fileInput.func(contents);
+      document.body.removeChild(fileInput);
+    };
+    reader.readAsText(file);
+  };
+  let fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.style.display = 'none';
+  fileInput.onchange = readFile;
+  fileInput.func = func;
+  document.body.appendChild(fileInput);
+  clickElem(fileInput);
+}

app/spiffworkflow/messages/propertiesPanel/MessageArray.js

@@ -1,11 +1,6 @@
 import { useService } from 'bpmn-js-properties-panel';
 import { TextFieldEntry } from '@bpmn-io/properties-panel';
-import { without } from 'min-dash';
+import { getRoot, findMessageModdleElements } from '../MessageHelpers';
-import {
-  findCorrelationKeys,
-  getRoot,
-  findMessageModdleElements,
-} from '../MessageHelpers';
 import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
 
 /**
@@ -51,7 +46,7 @@ export function MessageArray(props) {
       rootElements.push(newMessageElement);
       commandStack.execute('element.updateProperties', {
         element,
-        properties: {}
+        properties: {},
       });
     }
   }
@@ -59,17 +54,41 @@ export function MessageArray(props) {
   return { items, add };
 }
 
+function removeMessageRefs(messageElement, moddleElement) {
+  if (
+    moddleElement.messageRef &&
+    moddleElement.messageRef.id === messageElement.id
+  ) {
+    moddleElement.messageRef = null;
+  } else if (moddleElement.correlationPropertyRetrievalExpression) {
+    moddleElement.correlationPropertyRetrievalExpression.forEach((cpre) => {
+      removeMessageRefs(messageElement, cpre);
+    });
+  } else if (moddleElement.flowElements) {
+    moddleElement.flowElements.forEach((fe) => {
+      removeMessageRefs(messageElement, fe);
+    });
+  } else if (moddleElement.eventDefinitions) {
+    moddleElement.eventDefinitions.forEach((ed) => {
+      removeMessageRefs(messageElement, ed);
+    });
+  }
+}
+
 function removeFactory(props) {
-  const { element, messageElement, moddle, commandStack } = props;
+  const { element, messageElement, commandStack } = props;
 
   return function (event) {
     event.stopPropagation();
     const rootElement = getRoot(element.businessObject);
     const { rootElements } = rootElement;
     removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement);
+    rootElements.forEach((moddleElement) => {
+      removeMessageRefs(messageElement, moddleElement);
+    });
     commandStack.execute('element.updateProperties', {
       element,
-      properties: {}
+      properties: {},
     });
   };
 }

dist/src_moddle_spiffworkflow_json.index.js

@@ -0,0 +1,14 @@
+"use strict";
+(self["webpackChunkbpmn_js_spiffworkflow"] = self["webpackChunkbpmn_js_spiffworkflow"] || []).push([["src_moddle_spiffworkflow_json"],{
+
+/***/ "./src/moddle/spiffworkflow.json":
+/*!***************************************!*\
+  !*** ./src/moddle/spiffworkflow.json ***!
+  \***************************************/
+/***/ ((module) => {
+
+module.exports = JSON.parse('{"name":"SpiffWorkflow","uri":"http://spiffworkflow.org/bpmn/schema/1.0/core","prefix":"spiffworkflow","associations":[],"types":[{"name":"preScript","superClass":["Element"],"properties":[{"name":"script","isBody":true,"type":"String"}]},{"name":"postScript","superClass":["Element"],"properties":[{"name":"script","isBody":true,"type":"String"}]},{"name":"messagePayload","superClass":["Element"],"properties":[{"name":"messagePayload","isBody":true,"type":"String"}]},{"name":"messageVariable","superClass":["Element"],"properties":[{"name":"messageVariable","isBody":true,"type":"String"}]},{"name":"calledDecisionId","superClass":["Element"],"properties":[{"name":"calledDecisionId","isBody":true,"type":"String"}]},{"name":"instructionsForEndUser","superClass":["Element"],"properties":[{"name":"instructionsForEndUser","isBody":true,"type":"String"}]},{"name":"properties","superClass":["Element"],"properties":[{"name":"properties","type":"property","isMany":true}]},{"name":"property","superClass":["Element"],"properties":[{"name":"name","isAttr":true,"type":"String"},{"name":"value","isAttr":true,"type":"String"}]},{"name":"serviceTaskOperator","superClass":["Element"],"properties":[{"name":"id","isAttr":true,"type":"String"},{"name":"parameterList","type":"parameters"}]},{"name":"parameters","superClass":["Element"],"properties":[{"name":"parameters","type":"parameter","isMany":true}]},{"name":"parameter","superClass":["Element"],"properties":[{"name":"id","isAttr":true,"type":"String"},{"name":"type","isAttr":true,"type":"String"},{"name":"value","isAttr":true,"type":"String"}]}]}');
+
+/***/ })
+
+}]);

test/spec/MessagesSpec.js

@@ -73,7 +73,7 @@ describe('Messages should work', function () {
     const selector = findSelect(entry);
     expect(selector).to.exist;
     expect(selector.length).to.equal(2);
-    //await expectSelected('my_collaboration');
+    await expectSelected('my_collaboration');
   });
 
   it('should show the payload inside the message group', async function () {