Merge branch 'main' of github.com:sartography/bpmn-js-spiffworkflow

app/spiffworkflow/DataObject/DataObjectHelpers.js

@@ -1,8 +1,13 @@
+/**
+ * Returns the moddelElement if it is a process, otherwise, returns the
+ *
+ * @param container
+ */
+
 
 export function findDataObjects(process) {
-
   let dataObjects = [];
-  if (! process.flowElements) {
+  if (!process || !process.flowElements) {
     return dataObjects;
   }
   for (const element of process.flowElements) {
@@ -21,11 +26,13 @@ export function findDataObject(process, id) {
   }
 }
 
-export function findDataReferences(process, id) {
+export function findDataReferenceShapes(processShape, id) {
   let refs = [];
-  for (const element of process.children) {
-    if (element.type === 'bpmn:DataObjectReference') {
-      refs.push(element);
+  for (const shape of processShape.children) {
+    if (shape.type === 'bpmn:DataObjectReference') {
+      if (shape.businessObject.dataObjectRef && shape.businessObject.dataObjectRef.id === id) {
+        refs.push(shape);
+      }
     }
   }
   return refs;

app/spiffworkflow/DataObject/DataObjectRenderer.js

@@ -0,0 +1,44 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+
+import {
+  attr as svgAttr
+} from 'tiny-svg';
+
+import { getBusinessObject, is } from 'bpmn-js/lib/util/ModelUtil';
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+import { findDataObject } from './DataObjectHelpers';
+
+const HIGH_PRIORITY = 1500;
+
+/**
+ * Work in progress -- render data object references in red if they are
+ * not valid.
+ */
+export default class DataObjectRenderer extends BaseRenderer {
+  constructor(eventBus, bpmnRenderer) {
+    super(eventBus, HIGH_PRIORITY);
+    this.bpmnRenderer = bpmnRenderer;
+  }
+
+  canRender(element) {
+    return isAny(element, [ 'bpmn:DataObjectReference' ]) && !element.labelTarget;
+  }
+
+  drawShape(parentNode, element) {
+    const shape = this.bpmnRenderer.drawShape(parentNode, element);
+    if (is(element, 'bpmn:DataObjectReference')) {
+      let businessObject = getBusinessObject(element);
+      let dataObject = businessObject.dataObjectRef;
+      if (dataObject && dataObject.id) {
+        let parentObject = businessObject.$parent;
+        dataObject = findDataObject(parentObject, dataObject.id);
+      }
+      if (!dataObject) {
+        svgAttr(shape, 'stroke', 'red');
+      }
+      return shape;
+    }
+  }
+}
+
+DataObjectRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];

app/spiffworkflow/DataObject/index.js

@@ -1,14 +1,16 @@
 import DataObjectInterceptor from './DataObjectInterceptor';
 import DataObjectRules from './DataObjectRules';
 import RulesModule from 'diagram-js/lib/features/rules';
+import DataObjectRenderer from './DataObjectRenderer';
 
 
 export default {
   __depends__: [
     RulesModule
   ],
-  __init__: [ 'dataInterceptor', 'dataObjectRules' ],
+  __init__: [ 'dataInterceptor', 'dataObjectRules', 'dataObjectRenderer' ],
   dataInterceptor: [ 'type', DataObjectInterceptor ],
-  dataObjectRules: [ 'type', DataObjectRules ]
+  dataObjectRules: [ 'type', DataObjectRules ],
+  dataObjectRenderer: [ 'type', DataObjectRenderer ]
 };
 

app/spiffworkflow/PropertiesPanel/SpiffWorkflowPropertiesProvider.js

@@ -18,7 +18,7 @@ export default function SpiffWorkflowPropertiesProvider(propertiesPanel, transla
       if (is(element, 'bpmn:DataObjectReference')) {
         groups.push(createDataObjectSelector(element, translate, moddle, commandStack));
       }
-      if (isAny(element, [ 'bpmn:Process', 'bpmn:SubProcess' ])) {
+      if (isAny(element, [ 'bpmn:Process', 'bpmn:SubProcess', 'bpmn:Participant' ])) {
         groups.push(createDataObjectEditor(element, translate, moddle, commandStack, elementRegistry));
       }
       if (is(element, 'bpmn:UserTask')) {

app/spiffworkflow/PropertiesPanel/parts/DataObjectArray.js

@@ -1,7 +1,8 @@
 import { useService } from 'bpmn-js-properties-panel';
 import { isTextFieldEntryEdited, TextFieldEntry } from '@bpmn-io/properties-panel';
 import { without } from 'min-dash';
-import {findDataObjects, findDataReferences} from '../../DataObject/DataObjectHelpers';
+import { findDataObjects, findDataReferenceShapes } from '../../DataObject/DataObjectHelpers';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 /**
  * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
@@ -11,10 +12,16 @@ import {findDataObjects, findDataReferences} from '../../DataObject/DataObjectHe
 export function DataObjectArray(props) {
   const moddle = props.moddle;
   const element = props.element;
-  const process = props.element.businessObject; // The BusinessObject in this case must be a BPMN:Process
   const commandStack = props.commandStack;
   const elementRegistry = props.elementRegistry;
+  let process;
 
+  // This element might be a process, or something that will reference a process.
+  if (is(element.businessObject, 'bpmn:Process')) {
+    process = element.businessObject;
+  } else if (element.businessObject.processRef) {
+    process = element.businessObject.processRef;
+  }
 
   let dataObjects = findDataObjects(process);
   const items = dataObjects.map((dataObject, index) => {
@@ -70,6 +77,18 @@ function removeFactory(props) {
         flowElements: without(process.get('flowElements'), dataObject)
       }
     });
+    // Also update the label of all the references
+    let references = findDataReferenceShapes(element, dataObject.id);
+    for (const ref of references) {
+      commandStack.execute('element.updateProperties', {
+        element: ref,
+        moddleElement: ref.businessObject,
+        properties: {
+          'name': '???'
+        },
+        changed:[ ref ] // everything is already marked as changed, don't recalculate.
+      });
+    }
   };
 }
 
@@ -116,7 +135,7 @@ function DataObjectTextField(props) {
     );
 
     // Also update the label of all the references
-    let references = findDataReferences(element, dataObject.id);
+    let references = findDataReferenceShapes(element, dataObject.id);
     for (const ref of references) {
       commandStack.execute('element.updateProperties', {
         element: ref,

app/spiffworkflow/index.js

@@ -5,16 +5,18 @@ import SpiffWorkflowPropertiesProvider from './PropertiesPanel/SpiffWorkflowProp
 import DataObjectInterceptor from './DataObject/DataObjectInterceptor';
 import DataObjectRules from './DataObject/DataObjectRules';
 import RulesModule from 'diagram-js/lib/features/rules';
+import DataObjectRenderer from './DataObject/DataObjectRenderer';
 
 export default {
   __depends__: [ RulesModule ],
   __init__: [
     'spiffWorkflowPropertiesProvider',
     'dataObjectInterceptor', 'dataObjectRules',
-    'ioPalette', 'ioRules', 'ioInterceptor' ],
+    'ioPalette', 'ioRules', 'ioInterceptor', 'dataObjectRenderer' ],
   spiffWorkflowPropertiesProvider: [ 'type', SpiffWorkflowPropertiesProvider ],
   dataObjectInterceptor: [ 'type', DataObjectInterceptor ],
   dataObjectRules:[ 'type', DataObjectRules ],
+  dataObjectRenderer: [ 'type', DataObjectRenderer ],
   ioPalette: [ 'type', IoPalette ],
   ioRules: [ 'type', IoRules ],
   ioInterceptor: [ 'type', IoInterceptor ],

package-lock.json

@@ -16,7 +16,8 @@
         "inherits-browser": "^0.0.1",
         "min-dash": "^3.8.1",
         "min-dom": "^3.2.1",
-        "moddle": "^5.0.3"
+        "moddle": "^5.0.3",
+        "tiny-svg": "^2.2.3"
       },
       "devDependencies": {
         "@babel/core": "^7.18.6",

package.json

@@ -71,6 +71,7 @@
     "inherits-browser": "^0.0.1",
     "min-dash": "^3.8.1",
     "min-dom": "^3.2.1",
-    "moddle": "^5.0.3"
+    "moddle": "^5.0.3",
+    "tiny-svg": "^2.2.3"
   }
 }