From 5ecb49e9f5b9d9e7c1f7eb5986e3ee75b82a6e40 Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 09:33:06 -0400 Subject: [PATCH 1/2] some initial work to support adding condition expressions to gateway --- app/app.js | 4 +- app/spiffworkflow/conditions/index.js | 6 + .../ConditionsPropertiesProvider.js | 122 ++++++++++++++++++ app/spiffworkflow/index.js | 3 + app/spiffworkflow/moddle/bpmn.json | 19 +++ app/spiffworkflow/moddle/spiffworkflow.json | 2 - test/spec/bpmn/gateway.bpmn | 110 ++++++++++++++++ 7 files changed, 263 insertions(+), 3 deletions(-) create mode 100644 app/spiffworkflow/conditions/index.js create mode 100644 app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js create mode 100644 app/spiffworkflow/moddle/bpmn.json create mode 100644 test/spec/bpmn/gateway.bpmn diff --git a/app/app.js b/app/app.js index 1b8733d..6700386 100644 --- a/app/app.js +++ b/app/app.js @@ -4,12 +4,13 @@ import { BpmnPropertiesProviderModule, } from 'bpmn-js-properties-panel'; import FileSaver from 'file-saver'; -import diagramXML from '../test/spec/bpmn/basic_message.bpmn'; +import diagramXML from '../test/spec/bpmn/gateway.bpmn'; import spiffworkflow from './spiffworkflow'; const modelerEl = document.getElementById('modeler'); const panelEl = document.getElementById('panel'); const spiffModdleExtension = require('./spiffworkflow/moddle/spiffworkflow.json'); +const bpmnModdleExtension = require('./spiffworkflow/moddle/bpmn.json'); let bpmnModeler; @@ -27,6 +28,7 @@ try { ], moddleExtensions: { spiffworkflowModdle: spiffModdleExtension, + // bpmnModdleExtension, }, }); } catch (error) { diff --git a/app/spiffworkflow/conditions/index.js b/app/spiffworkflow/conditions/index.js new file mode 100644 index 0000000..b37dcea --- /dev/null +++ b/app/spiffworkflow/conditions/index.js @@ -0,0 +1,6 @@ +import ConditionsPropertiesProvider from './propertiesPanel/ConditionsPropertiesProvider'; + +export default { + __init__: ['conditionsPropertiesProvider'], + conditionsPropertiesProvider: ['type', ConditionsPropertiesProvider], +}; diff --git a/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js b/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js new file mode 100644 index 0000000..7ebf48b --- /dev/null +++ b/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js @@ -0,0 +1,122 @@ +import { is } from 'bpmn-js/lib/util/ModelUtil'; +import { + isTextFieldEntryEdited, + TextFieldEntry, +} from '@bpmn-io/properties-panel'; +import { useService } from 'bpmn-js-properties-panel'; + +const LOW_PRIORITY = 500; + +export default function ConditionsPropertiesProvider( + propertiesPanel, + translate, + moddle, + commandStack, + _elementRegistry +) { + this.getGroups = function getGroupsCallback(element) { + return function pushGroup(groups) { + if (is(element, 'bpmn:SequenceFlow')) { + const { source } = element; + if (is(source, 'bpmn:ExclusiveGateway')) { + groups.push( + createConditionsGroup(element, translate, moddle, commandStack) + ); + } + } + return groups; + }; + }; + propertiesPanel.registerProvider(LOW_PRIORITY, this); +} + +ConditionsPropertiesProvider.$inject = [ + 'propertiesPanel', + 'translate', + 'moddle', + 'commandStack', + 'elementRegistry', +]; + +function createConditionsGroup(element, translate, moddle, commandStack) { + return { + id: 'conditions', + label: translate('Conditions'), + entries: conditionGroup( + element, + moddle, + 'Condition Expression', + 'Expression to Execute', + commandStack + ), + }; +} + +function conditionGroup(element, moddle, label, description, commandStack) { + return [ + { + id: `condition_expression`, + element, + component: ConditionExpressionTextField, + moddle, + label, + description, + commandStack, + }, + ]; +} + +function ConditionExpressionTextField(props) { + const { element } = props; + const { moddle } = props; + const { label } = props; + console.log('props', props); + debugger; + + const debounce = useService('debounceInput'); + const getValue = () => { + const { conditionExpression } = element.businessObject; + if (conditionExpression) { + return conditionExpression.body; + } + return ''; + }; + + const setValue = (value, event) => { + const { conditionExpression } = element.businessObject; + if (!conditionExpression) { + const newDataObject = moddle.create('bpmn:DataObject'); + + // FIXME: bpmn-io doesn't support this element and doesn't allow us + // to add items to the bpmn prefix. We need to find a way around this. + const conditionExpressionElement = moddle.create( + 'bpmn:conditionExpression' + ); + element.businessObject.push(conditionExpressionElement); + } + // const { businessObject } = element; + // let scriptObj = getScriptObject(); + // // Create the script object if needed. + // if (!scriptObj) { + // scriptObj = moddle.create(type); + // if (type !== SCRIPT_TYPE.bpmn) { + // if (!businessObject.extensionElements) { + // businessObject.extensionElements = moddle.create( + // 'bpmn:ExtensionElements' + // ); + // } + // businessObject.extensionElements.get('values').push(scriptObj); + // } + // } + // scriptObj.script = value; + }; + + return TextFieldEntry({ + element, + id: `the-id`, + label, + getValue, + setValue, + debounce, + }); +} diff --git a/app/spiffworkflow/index.js b/app/spiffworkflow/index.js index eda30f9..cc7a30e 100644 --- a/app/spiffworkflow/index.js +++ b/app/spiffworkflow/index.js @@ -6,6 +6,7 @@ import DataObjectInterceptor from './DataObject/DataObjectInterceptor'; import DataObjectRules from './DataObject/DataObjectRules'; import DataObjectRenderer from './DataObject/DataObjectRenderer'; import DataObjectPropertiesProvider from './DataObject/propertiesPanel/DataObjectPropertiesProvider'; +import ConditionsPropertiesProvider from './conditions/propertiesPanel/ConditionsPropertiesProvider'; import ExtensionsPropertiesProvider from './extensions/propertiesPanel/ExtensionsPropertiesProvider'; import MessagesPropertiesProvider from './messages/propertiesPanel/MessagesPropertiesProvider'; @@ -15,6 +16,7 @@ export default { 'dataObjectInterceptor', 'dataObjectRules', 'dataObjectPropertiesProvider', + 'conditionsPropertiesProvider', 'extensionsPropertiesProvider', 'messagesPropertiesProvider', 'ioPalette', @@ -26,6 +28,7 @@ export default { dataObjectRules: ['type', DataObjectRules], dataObjectRenderer: ['type', DataObjectRenderer], dataObjectPropertiesProvider: ['type', DataObjectPropertiesProvider], + conditionsPropertiesProvider: ['type', ConditionsPropertiesProvider], extensionsPropertiesProvider: ['type', ExtensionsPropertiesProvider], messagesPropertiesProvider: ['type', MessagesPropertiesProvider], ioPalette: ['type', IoPalette], diff --git a/app/spiffworkflow/moddle/bpmn.json b/app/spiffworkflow/moddle/bpmn.json new file mode 100644 index 0000000..bf932fa --- /dev/null +++ b/app/spiffworkflow/moddle/bpmn.json @@ -0,0 +1,19 @@ +{ + "name": "SpiffBpmn", + "uri": "http://www.omg.org/spec/BPMN/20100524/MODEL", + "prefix": "bpmn", + "associations": [], + "types": [ + { + "name": "ConditionExpression", + "superClass": [ "Element" ], + "properties": [ + { + "name": "expression", + "isBody": true, + "type": "String" + } + ] + } + ] +} diff --git a/app/spiffworkflow/moddle/spiffworkflow.json b/app/spiffworkflow/moddle/spiffworkflow.json index 0aadcee..511afc7 100644 --- a/app/spiffworkflow/moddle/spiffworkflow.json +++ b/app/spiffworkflow/moddle/spiffworkflow.json @@ -91,5 +91,3 @@ ] } - - diff --git a/test/spec/bpmn/gateway.bpmn b/test/spec/bpmn/gateway.bpmn new file mode 100644 index 0000000..36c3497 --- /dev/null +++ b/test/spec/bpmn/gateway.bpmn @@ -0,0 +1,110 @@ + + + + + Flow_0ik6wwl + + + + + Flow_0ik6wwl + Flow_0l0l3ie + the_var = 1 + + + top_flow + Flow_13gkhe0 + result_var = "TOP" + + + bottom_flow + Flow_1u2cwim + result_var = "BOTTOM" + + + Flow_13gkhe0 + + + + Flow_1u2cwim + + + + Flow_0l0l3ie + bottom_flow + top_flow + + + + the_var == 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 5ac68f8e52dfad7d38141d7265302a902b06422c Mon Sep 17 00:00:00 2001 From: jasquat Date: Thu, 25 Aug 2022 12:45:08 -0400 Subject: [PATCH 2/2] we can add and update condition expressions w/ burnettk jbirddog --- .../ConditionsPropertiesProvider.js | 35 ++++--------------- 1 file changed, 7 insertions(+), 28 deletions(-) diff --git a/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js b/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js index 7ebf48b..f473de1 100644 --- a/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js +++ b/app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js @@ -70,8 +70,6 @@ function ConditionExpressionTextField(props) { const { element } = props; const { moddle } = props; const { label } = props; - console.log('props', props); - debugger; const debounce = useService('debounceInput'); const getValue = () => { @@ -82,33 +80,14 @@ function ConditionExpressionTextField(props) { return ''; }; - const setValue = (value, event) => { - const { conditionExpression } = element.businessObject; - if (!conditionExpression) { - const newDataObject = moddle.create('bpmn:DataObject'); - - // FIXME: bpmn-io doesn't support this element and doesn't allow us - // to add items to the bpmn prefix. We need to find a way around this. - const conditionExpressionElement = moddle.create( - 'bpmn:conditionExpression' - ); - element.businessObject.push(conditionExpressionElement); + const setValue = (value) => { + let { conditionExpressionModdleElement } = element.businessObject; + if (!conditionExpressionModdleElement) { + conditionExpressionModdleElement = moddle.create('bpmn:Expression'); } - // const { businessObject } = element; - // let scriptObj = getScriptObject(); - // // Create the script object if needed. - // if (!scriptObj) { - // scriptObj = moddle.create(type); - // if (type !== SCRIPT_TYPE.bpmn) { - // if (!businessObject.extensionElements) { - // businessObject.extensionElements = moddle.create( - // 'bpmn:ExtensionElements' - // ); - // } - // businessObject.extensionElements.get('values').push(scriptObj); - // } - // } - // scriptObj.script = value; + conditionExpressionModdleElement.body = value; + element.businessObject.conditionExpression = + conditionExpressionModdleElement; }; return TextFieldEntry({