From feb1d64a5acf9ec5c28f6f57a0894c5db5474d0b Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 12:04:47 -0400 Subject: [PATCH 01/10] added ability to create new messages w/ burnettk cullerton --- app/spiffworkflow/messages/MessageHelpers.js | 9 -- .../propertiesPanel/CorrelationKeysArray.js | 1 - .../CorrelationPropertiesArray.js | 14 -- .../messages/propertiesPanel/MessageArray.js | 132 ++++++++++++++++++ .../MessagesPropertiesProvider.js | 49 ++++++- package-lock.json | 128 ++++++++--------- package.json | 6 +- 7 files changed, 244 insertions(+), 95 deletions(-) create mode 100644 app/spiffworkflow/messages/propertiesPanel/MessageArray.js diff --git a/app/spiffworkflow/messages/MessageHelpers.js b/app/spiffworkflow/messages/MessageHelpers.js index 4e11d15..5bd91d7 100644 --- a/app/spiffworkflow/messages/MessageHelpers.js +++ b/app/spiffworkflow/messages/MessageHelpers.js @@ -136,15 +136,6 @@ export function findCorrelationKeys(businessObject) { for (const correlationKey in currentKeys) { const currentCorrelation = rootElement.correlationKeys[correlationKey]; correlationKeys.push(currentCorrelation); - // const currentProperty = {}; - // currentProperty.name = currentCorrelation.name; - // currentProperty.refs = []; - // for (const correlationProperty in currentCorrelation.correlationPropertyRef) { - // currentProperty.refs.push( - // currentCorrelation.correlationPropertyRef[correlationProperty] - // ); - // } - // correlationKeys.push(currentProperty); } } } diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js index e39289f..ab7697f 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js @@ -105,7 +105,6 @@ function CorrelationKeyTextField(props) { function CorrelationPropertyText(props) { const { id, parameter, correlationProperty } = props; - const debounce = useService('debounceInput'); const getValue = () => { diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index a0dde83..7942bb7 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -77,20 +77,6 @@ function MessageCorrelationTextField(props) { id: value, }, }); - - // Also update the label of all the references - // const references = findDataReferenceShapes(element, correlationProperty.id); - const references = ['hello1', 'hello2']; - for (const ref of references) { - commandStack.execute('element.updateProperties', { - element: ref, - moddleElement: ref.businessObject, - properties: { - name: value, - }, - changed: [ref], // everything is already marked as changed, don't recalculate. - }); - } }; const getValue = (_parameter) => { diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js new file mode 100644 index 0000000..5263943 --- /dev/null +++ b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js @@ -0,0 +1,132 @@ +import { useService } from 'bpmn-js-properties-panel'; +import { TextFieldEntry } from '@bpmn-io/properties-panel'; +import { + findCorrelationKeys, + getRoot, + findMessageModdleElements, +} from '../MessageHelpers'; + +/** + * Provides a list of data objects, and allows you to add / remove data objects, and change their ids. + * @param props + * @constructor + */ +export function MessageArray(props) { + const { element, moddle, commandStack, translate } = props; + + const messageElements = findMessageModdleElements(element.businessObject); + const items = messageElements.map((messageElement, index) => { + const id = `messageElement-${index}`; + return { + id, + label: messageElement.name, + entries: messageGroup({ + id, + element, + messageElement, + commandStack, + translate, + }), + autoFocusEntry: id, + }; + }); + + function add(event) { + event.stopPropagation(); + if (element.type === 'bpmn:Collaboration') { + const newMessageElement = moddle.create('bpmn:Message'); + const messageId = moddle.ids.nextPrefixed('Message_'); + newMessageElement.id = messageId; + newMessageElement.name = messageId; + const rootElement = getRoot(element.businessObject); + const { rootElements } = rootElement; + rootElements.push(newMessageElement); + commandStack.execute('element.updateProperties', { + element, + moddleElement: moddle, + properties: { + messages: rootElements, + }, + }); + } + } + + return { items, add }; +} + +function messageGroup(props) { + const { messageElement, commandStack, translate } = props; + const id = `message-${messageElement.name}`; + return [ + { + id: `${id}-${messageElement.name}-key`, + component: MessageIdTextField, + messageElement, + commandStack, + translate, + }, + { + id: `${id}-${messageElement.name}-key`, + component: MessageNameTextField, + messageElement, + commandStack, + translate, + }, + ]; +} + +function MessageIdTextField(props) { + const { id, element, messageElement, commandStack, translate } = props; + + const debounce = useService('debounceInput'); + const setValue = (value) => { + commandStack.execute('element.updateModdleProperties', { + element, + moddleElement: messageElement, + properties: { + id: value, + }, + }); + }; + + const getValue = () => { + return messageElement.id; + }; + + return TextFieldEntry({ + element, + id: `${id}-id-textField`, + label: translate('ID'), + getValue, + setValue, + debounce, + }); +} + +function MessageNameTextField(props) { + const { id, element, messageElement, commandStack, translate } = props; + + const debounce = useService('debounceInput'); + const setValue = (value) => { + commandStack.execute('element.updateModdleProperties', { + element, + moddleElement: messageElement, + properties: { + name: value, + }, + }); + }; + + const getValue = () => { + return messageElement.name; + }; + + return TextFieldEntry({ + element, + id: `${id}-name-textField`, + label: translate('Name'), + getValue, + setValue, + debounce, + }); +} diff --git a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js index 3b5c649..83dbf42 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js @@ -5,6 +5,7 @@ import { MessageSelect } from './MessageSelect'; import { MessagePayload } from './MessagePayload'; import { MessageVariable } from './MessageVariable'; import { CorrelationPropertiesArray } from './CorrelationPropertiesArray'; +import { MessageArray } from './MessageArray'; import { isMessageElement, canReceiveMessage } from '../MessageHelpers'; const LOW_PRIORITY = 500; @@ -20,7 +21,7 @@ export default function MessagesPropertiesProvider( return function pushGroup(groups) { if (is(element, 'bpmn:Collaboration')) { groups.push( - createCollaborationGroup( + ...createCollaborationGroup( element, translate, moddle, @@ -79,12 +80,52 @@ function createCollaborationGroup( moddle, commandStack, elementRegistry +) { + return [ + { + id: 'correlation_keys', + label: translate('Correlation Keys'), + component: ListGroup, + ...CorrelationKeysArray({ + element, + moddle, + commandStack, + elementRegistry, + }), + }, + { + id: 'messages', + label: translate('Messages'), + component: ListGroup, + ...MessageArray({ + element, + moddle, + commandStack, + elementRegistry, + translate, + }), + }, + ]; +} + +/** + * Adds a group to the properties panel for the script task that allows you + * to set the script. + * @param element + * @param translate + * @returns The components to add to the properties panel. */ +function createMessageCollaborationGroup( + element, + translate, + moddle, + commandStack, + elementRegistry ) { return { - id: 'correlation_keys', - label: translate('Correlation Keys'), + id: 'messages', + label: translate('Messages'), component: ListGroup, - ...CorrelationKeysArray({ element, moddle, commandStack, elementRegistry }), + ...MessageArray({ element, moddle, commandStack, elementRegistry }), }; } diff --git a/package-lock.json b/package-lock.json index aa3a5e6..7f13d90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "0.0.8", "license": "MIT", "dependencies": { - "@bpmn-io/properties-panel": "^0.18.0", - "bpmn-js": "^9.2.2", - "bpmn-js-properties-panel": "^1.2.0", + "@bpmn-io/properties-panel": "^0.19.0", + "bpmn-js": "^9.4.0", + "bpmn-js-properties-panel": "^1.5.0", "diagram-js": "^8.5.0", "inherits": "^2.0.4", "inherits-browser": "^0.0.1", @@ -1929,9 +1929,9 @@ } }, "node_modules/@bpmn-io/properties-panel": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz", - "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz", + "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==", "dependencies": { "@bpmn-io/feel-editor": "0.2.0", "classnames": "^2.3.1", @@ -3019,26 +3019,26 @@ "dev": true }, "node_modules/bpmn-js": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz", - "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz", + "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==", "dependencies": { - "bpmn-moddle": "^7.1.2", + "bpmn-moddle": "^7.1.3", "css.escape": "^1.5.1", - "diagram-js": "^8.5.0", + "diagram-js": "^8.9.0", "diagram-js-direct-editing": "^1.7.0", "ids": "^1.0.0", "inherits-browser": "0.0.1", "min-dash": "^3.5.2", - "min-dom": "^3.2.0", + "min-dom": "^3.2.1", "object-refs": "^0.3.0", - "tiny-svg": "^2.2.2" + "tiny-svg": "^2.2.4" } }, "node_modules/bpmn-js-properties-panel": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz", - "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz", + "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==", "dependencies": { "@bpmn-io/element-templates-validator": "^0.9.0", "@bpmn-io/extract-process-variables": "^0.5.0", @@ -3051,20 +3051,20 @@ "semver-compare": "^1.0.0" }, "peerDependencies": { - "@bpmn-io/properties-panel": "0.18.x", + "@bpmn-io/properties-panel": "0.19.x", "bpmn-js": "8.x || 9.x", "camunda-bpmn-js-behaviors": "0.1.x", "diagram-js": "7.x || 8.x" } }, "node_modules/bpmn-moddle": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz", - "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz", + "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==", "dependencies": { "min-dash": "^3.5.2", "moddle": "^5.0.2", - "moddle-xml": "^9.0.5" + "moddle-xml": "^9.0.6" } }, "node_modules/brace-expansion": { @@ -3723,12 +3723,12 @@ "dev": true }, "node_modules/diagram-js": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz", - "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==", + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz", + "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==", "dependencies": { "css.escape": "^1.5.1", - "didi": "^8.0.0", + "didi": "^8.0.1", "hammerjs": "^2.0.1", "inherits-browser": "0.0.1", "min-dash": "^3.5.2", @@ -3751,9 +3751,9 @@ } }, "node_modules/didi": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz", - "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw==" + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz", + "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ==" }, "node_modules/diff": { "version": "5.0.0", @@ -6622,9 +6622,9 @@ } }, "node_modules/moddle-xml": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz", - "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==", + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz", + "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==", "dependencies": { "min-dash": "^3.5.2", "moddle": "^5.0.2", @@ -8471,9 +8471,9 @@ "dev": true }, "node_modules/tiny-svg": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz", - "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ==" + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz", + "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==" }, "node_modules/tinydate": { "version": "1.3.0", @@ -10489,9 +10489,9 @@ } }, "@bpmn-io/properties-panel": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz", - "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz", + "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==", "requires": { "@bpmn-io/feel-editor": "0.2.0", "classnames": "^2.3.1", @@ -11408,26 +11408,26 @@ } }, "bpmn-js": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz", - "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz", + "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==", "requires": { - "bpmn-moddle": "^7.1.2", + "bpmn-moddle": "^7.1.3", "css.escape": "^1.5.1", - "diagram-js": "^8.5.0", + "diagram-js": "^8.9.0", "diagram-js-direct-editing": "^1.7.0", "ids": "^1.0.0", "inherits-browser": "0.0.1", "min-dash": "^3.5.2", - "min-dom": "^3.2.0", + "min-dom": "^3.2.1", "object-refs": "^0.3.0", - "tiny-svg": "^2.2.2" + "tiny-svg": "^2.2.4" } }, "bpmn-js-properties-panel": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz", - "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz", + "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==", "requires": { "@bpmn-io/element-templates-validator": "^0.9.0", "@bpmn-io/extract-process-variables": "^0.5.0", @@ -11441,13 +11441,13 @@ } }, "bpmn-moddle": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz", - "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz", + "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==", "requires": { "min-dash": "^3.5.2", "moddle": "^5.0.2", - "moddle-xml": "^9.0.5" + "moddle-xml": "^9.0.6" } }, "brace-expansion": { @@ -11943,12 +11943,12 @@ "dev": true }, "diagram-js": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz", - "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==", + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz", + "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==", "requires": { "css.escape": "^1.5.1", - "didi": "^8.0.0", + "didi": "^8.0.1", "hammerjs": "^2.0.1", "inherits-browser": "0.0.1", "min-dash": "^3.5.2", @@ -11968,9 +11968,9 @@ } }, "didi": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz", - "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw==" + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz", + "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ==" }, "diff": { "version": "5.0.0", @@ -14157,9 +14157,9 @@ } }, "moddle-xml": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz", - "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==", + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz", + "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==", "requires": { "min-dash": "^3.5.2", "moddle": "^5.0.2", @@ -15527,9 +15527,9 @@ "dev": true }, "tiny-svg": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz", - "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ==" + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz", + "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==" }, "tinydate": { "version": "1.3.0", diff --git a/package.json b/package.json index 612fee0..0e4fe5f 100644 --- a/package.json +++ b/package.json @@ -73,9 +73,9 @@ "webpack-cli": "^4.9.2" }, "dependencies": { - "@bpmn-io/properties-panel": "^0.18.0", - "bpmn-js": "^9.2.2", - "bpmn-js-properties-panel": "^1.2.0", + "@bpmn-io/properties-panel": "^0.19.0", + "bpmn-js": "^9.4.0", + "bpmn-js-properties-panel": "^1.5.0", "diagram-js": "^8.5.0", "inherits": "^2.0.4", "inherits-browser": "^0.0.1", From 51aa461a0483ef6de5d0fbeb71f65ba45bb1bb4c Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 12:22:41 -0400 Subject: [PATCH 02/10] we can delete messages w/ burnettk cullerton --- .../messages/propertiesPanel/MessageArray.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js index 5263943..9ad0e47 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js @@ -1,5 +1,6 @@ import { useService } from 'bpmn-js-properties-panel'; import { TextFieldEntry } from '@bpmn-io/properties-panel'; +import { without } from 'min-dash'; import { findCorrelationKeys, getRoot, @@ -28,6 +29,12 @@ export function MessageArray(props) { translate, }), autoFocusEntry: id, + remove: removeFactory({ + element, + messageElement, + commandStack, + moddle, + }), }; }); @@ -54,6 +61,27 @@ export function MessageArray(props) { return { items, add }; } +function removeFactory(props) { + const { element, messageElement, moddle, commandStack } = props; + + return function (event) { + event.stopPropagation(); + const rootElement = getRoot(element.businessObject); + const { rootElements } = rootElement; + const messageElementIndex = rootElements.indexOf(messageElement); + if (messageElementIndex > -1) { + rootElements.splice(messageElementIndex, 1); + } + commandStack.execute('element.updateProperties', { + element, + moddleElement: moddle, + properties: { + messages: rootElements, + }, + }); + }; +} + function messageGroup(props) { const { messageElement, commandStack, translate } = props; const id = `message-${messageElement.name}`; From a6cb4e2aaaa1212c356db520643feb9c6101a433 Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 12:38:47 -0400 Subject: [PATCH 03/10] we can remove correlation keys w/ burnettk cullerton --- app/spiffworkflow/helpers.js | 7 +++ .../propertiesPanel/CorrelationKeysArray.js | 58 ++++++++++++++----- 2 files changed, 50 insertions(+), 15 deletions(-) create mode 100644 app/spiffworkflow/helpers.js diff --git a/app/spiffworkflow/helpers.js b/app/spiffworkflow/helpers.js new file mode 100644 index 0000000..0f598ad --- /dev/null +++ b/app/spiffworkflow/helpers.js @@ -0,0 +1,7 @@ +export function removeFirstInstanceOfItemFromArrayInPlace(arr, value) { + const index = arr.indexOf(value); + if (index > -1) { + arr.splice(index, 1); + } + return arr; +} diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js index ab7697f..845c0d3 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js @@ -1,6 +1,7 @@ import { useService } from 'bpmn-js-properties-panel'; import { SimpleEntry, TextFieldEntry } from '@bpmn-io/properties-panel'; import { findCorrelationKeys, getRoot } from '../MessageHelpers'; +import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; /** * Provides a list of data objects, and allows you to add / remove data objects, and change their ids. @@ -10,18 +11,24 @@ import { findCorrelationKeys, getRoot } from '../MessageHelpers'; export function CorrelationKeysArray(props) { const { element, moddle, commandStack } = props; - const correlationKeys = findCorrelationKeys(element.businessObject); - const items = correlationKeys.map((correlationKey, index) => { + const correlationKeyElements = findCorrelationKeys(element.businessObject); + const items = correlationKeyElements.map((correlationKeyElement, index) => { const id = `correlationGroup-${index}`; return { id, - label: correlationKey.name, + label: correlationKeyElement.name, entries: correlationGroup({ id, element, - correlationKey, + correlationKeyElement, commandStack, }), + remove: removeFactory({ + element, + correlationKeyElement, + commandStack, + moddle, + }), autoFocusEntry: id, }; }); @@ -32,14 +39,14 @@ export function CorrelationKeysArray(props) { const newCorrelationKeyElement = moddle.create('bpmn:CorrelationKey'); newCorrelationKeyElement.name = moddle.ids.nextPrefixed('CorrelationKey_'); - const correlationKeyElements = + const currentCorrelationKeyElements = element.businessObject.get('correlationKeys'); - correlationKeyElements.push(newCorrelationKeyElement); + currentCorrelationKeyElements.push(newCorrelationKeyElement); commandStack.execute('element.updateProperties', { element, moddleElement: moddle, properties: { - correlationKey: correlationKeyElements, + correlationKey: currentCorrelationKeyElements, }, }); } @@ -48,23 +55,44 @@ export function CorrelationKeysArray(props) { return { items, add }; } +function removeFactory(props) { + const { element, correlationKeyElement, moddle, commandStack } = props; + + return function (event) { + event.stopPropagation(); + const currentCorrelationKeyElements = + element.businessObject.get('correlationKeys'); + removeFirstInstanceOfItemFromArrayInPlace( + currentCorrelationKeyElements, + correlationKeyElement + ); + commandStack.execute('element.updateProperties', { + element, + moddleElement: moddle, + properties: { + correlationKey: currentCorrelationKeyElements, + }, + }); + }; +} + // <--- The correlationGroup // lover_name // lover_instrument // // function correlationGroup(props) { - const { correlationKey, commandStack } = props; - const id = `correlation-${correlationKey.name}`; + const { correlationKeyElement, commandStack } = props; + const id = `correlation-${correlationKeyElement.name}`; const entries = [ { - id: `${id}-${correlationKey.name}-key`, + id: `${id}-${correlationKeyElement.name}-key`, component: CorrelationKeyTextField, - correlationKey, + correlationKeyElement, commandStack, }, ]; - (correlationKey.correlationPropertyRef || []).forEach( + (correlationKeyElement.correlationPropertyRef || []).forEach( (correlationProperty) => { entries.push({ id: `${id}-${correlationProperty.id}-group`, @@ -77,13 +105,13 @@ function correlationGroup(props) { } function CorrelationKeyTextField(props) { - const { id, element, correlationKey, commandStack } = props; + const { id, element, correlationKeyElement, commandStack } = props; const debounce = useService('debounceInput'); const setValue = (value) => { commandStack.execute('element.updateModdleProperties', { element, - moddleElement: correlationKey, + moddleElement: correlationKeyElement, properties: { name: value, }, @@ -91,7 +119,7 @@ function CorrelationKeyTextField(props) { }; const getValue = () => { - return correlationKey.name; + return correlationKeyElement.name; }; return TextFieldEntry({ From 22cb81feee6df71552bb7fa71436ba45dfd36243 Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 15:59:08 -0400 Subject: [PATCH 04/10] allow assigning keys to properties w/ burnettk cullerton --- app/spiffworkflow/helpers.js | 1 + app/spiffworkflow/messages/MessageHelpers.js | 44 +++-- .../CorrelationPropertiesArray.js | 181 ++++++++++++++---- .../messages/propertiesPanel/MessageArray.js | 6 +- .../MessagesPropertiesProvider.js | 2 + test/spec/bpmn/basic_message.bpmn | 45 ++--- 6 files changed, 207 insertions(+), 72 deletions(-) diff --git a/app/spiffworkflow/helpers.js b/app/spiffworkflow/helpers.js index 0f598ad..b3cbaa6 100644 --- a/app/spiffworkflow/helpers.js +++ b/app/spiffworkflow/helpers.js @@ -1,3 +1,4 @@ +// https://stackoverflow.com/a/5767357/6090676 export function removeFirstInstanceOfItemFromArrayInPlace(arr, value) { const index = arr.indexOf(value); if (index > -1) { diff --git a/app/spiffworkflow/messages/MessageHelpers.js b/app/spiffworkflow/messages/MessageHelpers.js index 5bd91d7..2290533 100644 --- a/app/spiffworkflow/messages/MessageHelpers.js +++ b/app/spiffworkflow/messages/MessageHelpers.js @@ -59,7 +59,22 @@ export function getMessageRefElement(shapeElement) { return null; } -export function findFormalExpressions(shapeElement) { +export function findCorrelationKeyForCorrelationProperty(shapeElement) { + const correlationKeyElements = findCorrelationKeys(shapeElement); + for (const cke of correlationKeyElements) { + if (cke.correlationPropertyRef) { + for (const correlationPropertyRef of cke.correlationPropertyRef) { + if (correlationPropertyRef.id === shapeElement.id) { + return cke; + } + } + } + } +} + +export function findCorrelationPropertiesAndRetrievalExpressionsForMessage( + shapeElement +) { const formalExpressions = []; const messageRef = getMessageRefElement(shapeElement); if (messageRef) { @@ -67,15 +82,16 @@ export function findFormalExpressions(shapeElement) { if (root.$type === 'bpmn:Definitions') { for (const childElement of root.rootElements) { if (childElement.$type === 'bpmn:CorrelationProperty') { - const retrievalExpression = processCorrelationProperty( - childElement, - messageRef - ); - // todo: is there a better test for this than length === 1? - if (retrievalExpression.length === 1) { + const retrievalExpression = + getRetrievalExpressionFromCorrelationProperty( + childElement, + messageRef + ); + if (retrievalExpression) { const formalExpression = { - correlationId: childElement.id, - expression: retrievalExpression[0], + correlationPropertyModdleElement: childElement, + correlationPropertyRetrievalExpressionElement: + retrievalExpression, }; formalExpressions.push(formalExpression); } @@ -100,8 +116,10 @@ export function getMessageElementForShapeElement(shapeElement) { return null; } -function processCorrelationProperty(correlationProperty, message) { - const expressions = []; +function getRetrievalExpressionFromCorrelationProperty( + correlationProperty, + message +) { for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) { if ( retrievalExpression.$type === @@ -110,10 +128,10 @@ function processCorrelationProperty(correlationProperty, message) { retrievalExpression.messageRef.id === message.id && retrievalExpression.messagePath.body ) { - expressions.push(retrievalExpression.messagePath.body); + return retrievalExpression; } } - return expressions; + return null; } export function findCorrelationProperties(businessObject) { diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index 7942bb7..2fad681 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -1,11 +1,16 @@ import { useService } from 'bpmn-js-properties-panel'; import { + SelectEntry, isTextFieldEntryEdited, - ListGroup, - TextAreaEntry, TextFieldEntry, } from '@bpmn-io/properties-panel'; -import { findFormalExpressions } from '../MessageHelpers'; +import { + findCorrelationPropertiesAndRetrievalExpressionsForMessage, + getRoot, + findCorrelationKeys, + findCorrelationKeyForCorrelationProperty, +} from '../MessageHelpers'; +import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; /** * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document. @@ -14,18 +19,27 @@ export function CorrelationPropertiesArray(props) { const { moddle } = props; const { element } = props; const { commandStack } = props; + const { translate } = props; + // const { elementRegistry } = props; - const formalExpressions = findFormalExpressions(element); - const items = formalExpressions.map((formalExpression) => { - const id = `correlation-${formalExpression.correlationId}`; - const entries = MessageCorrelationGroup({ + const correlationPropertyArray = + findCorrelationPropertiesAndRetrievalExpressionsForMessage(element); + const items = correlationPropertyArray.map((correlationPropertyObject) => { + const { + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + } = correlationPropertyObject; + const id = `correlation-${correlationPropertyModdleElement.id}`; + const entries = MessageCorrelationPropertyGroup({ idPrefix: id, - formalExpression, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + translate, }); return { id, - label: formalExpression.correlationId, + label: correlationPropertyModdleElement.id, entries, autoFocusEntry: id, // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) @@ -34,13 +48,13 @@ export function CorrelationPropertiesArray(props) { function add(event) { event.stopPropagation(); - const newRetrievalExpression = moddle.create( + const newRetrievalExpressionElement = moddle.create( 'bpmn:CorrelationPropertyRetrievalExpression' ); - const newElements = formalExpressions; - newRetrievalExpression.messageRef = element.businessObject.messageRef; - newElements.push(newRetrievalExpression); - commandStack.execute('element.updateModdleProperties', { + const rootElement = getRoot(element.businessObject); + const { rootElements } = rootElement; + rootElements.push(newRe); + commandStack.execute('element.updateProperties', { element, moddleElement: element.businessObject, }); @@ -48,45 +62,146 @@ export function CorrelationPropertiesArray(props) { return { items, add }; } +// +// function removeFactory(props) { +// const { element, messageElement, moddle, commandStack } = props; +// +// return function (event) { +// event.stopPropagation(); +// const rootElement = getRoot(element.businessObject); +// const { rootElements } = rootElement; +// removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement); +// commandStack.execute('element.updateProperties', { +// element, +// moddleElement: moddle, +// properties: { +// messages: rootElements, +// }, +// }); +// }; +// } -function MessageCorrelationGroup(props) { - const { idPrefix, formalExpression } = props; - +function MessageCorrelationPropertyGroup(props) { + const { + idPrefix, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + translate, + } = props; return [ { - id: `${idPrefix}-group`, - component: MessageCorrelationTextField, + id: `${idPrefix}-correlation-key`, + component: MessageCorrelationKeySelect, isEdited: isTextFieldEntryEdited, idPrefix, - formalExpression, + correlationPropertyModdleElement, + translate, + }, + { + id: `${idPrefix}-expression`, + component: MessageCorrelationExpressionTextField, + isEdited: isTextFieldEntryEdited, + idPrefix, + correlationPropertyRetrievalExpressionElement, + translate, }, ]; } -function MessageCorrelationTextField(props) { - const { idPrefix, element, parameter, formalExpression } = props; - - const commandStack = useService('commandStack'); +function MessageCorrelationKeySelect(props) { + const { idPrefix, correlationPropertyModdleElement, translate, parameter } = + props; const debounce = useService('debounceInput'); const setValue = (value) => { - commandStack.execute('element.updateModdleProperties', { - element, - moddleElement: formalExpression, - properties: { - id: value, - }, - }); + const correlationKeyElements = findCorrelationKeys( + correlationPropertyModdleElement + ); + let newCorrelationKeyElement; + for (const cke of correlationKeyElements) { + if (cke.name === value) { + newCorrelationKeyElement = cke; + } + } + const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty( + correlationPropertyModdleElement + ); + + if (newCorrelationKeyElement.correlationPropertyRef) { + newCorrelationKeyElement.correlationPropertyRef.push( + correlationPropertyModdleElement + ); + } else { + newCorrelationKeyElement.correlationPropertyRef = [ + correlationPropertyModdleElement, + ]; + } + + if (oldCorrelationKeyElement) { + removeFirstInstanceOfItemFromArrayInPlace( + oldCorrelationKeyElement.correlationPropertyRef, + correlationPropertyModdleElement + ); + } + }; + + const getValue = () => { + const correlationKeyElement = findCorrelationKeyForCorrelationProperty( + correlationPropertyModdleElement + ); + if (correlationKeyElement) { + return correlationKeyElement.name; + } + return null; + }; + + const getOptions = () => { + const correlationKeyElements = findCorrelationKeys( + correlationPropertyModdleElement + ); + const options = []; + for (const correlationKeyElement of correlationKeyElements) { + options.push({ + label: correlationKeyElement.name, + value: correlationKeyElement.name, + }); + } + return options; + }; + + return SelectEntry({ + id: `${idPrefix}-select`, + element: parameter, + label: translate('Correlation Key'), + getValue, + setValue, + getOptions, + debounce, + }); +} + +function MessageCorrelationExpressionTextField(props) { + const { + idPrefix, + parameter, + correlationPropertyRetrievalExpressionElement, + translate, + } = props; + + const debounce = useService('debounceInput'); + + const setValue = (value) => { + correlationPropertyRetrievalExpressionElement.messagePath.body = value; }; const getValue = (_parameter) => { - return formalExpression.expression; + return correlationPropertyRetrievalExpressionElement.messagePath.body; }; return TextFieldEntry({ element: parameter, id: `${idPrefix}-textField`, - label: 'Expression', + label: translate('Expression'), getValue, setValue, debounce, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js index 9ad0e47..2cec639 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js @@ -6,6 +6,7 @@ import { getRoot, findMessageModdleElements, } from '../MessageHelpers'; +import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; /** * Provides a list of data objects, and allows you to add / remove data objects, and change their ids. @@ -68,10 +69,7 @@ function removeFactory(props) { event.stopPropagation(); const rootElement = getRoot(element.businessObject); const { rootElements } = rootElement; - const messageElementIndex = rootElements.indexOf(messageElement); - if (messageElementIndex > -1) { - rootElements.splice(messageElementIndex, 1); - } + removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement); commandStack.execute('element.updateProperties', { element, moddleElement: moddle, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js index 83dbf42..ef4f6bd 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js @@ -91,6 +91,7 @@ function createCollaborationGroup( moddle, commandStack, elementRegistry, + translate, }), }, { @@ -181,6 +182,7 @@ function createMessageGroup( moddle, commandStack, elementRegistry, + translate, }), }); diff --git a/test/spec/bpmn/basic_message.bpmn b/test/spec/bpmn/basic_message.bpmn index 9495bcd..23ce94b 100644 --- a/test/spec/bpmn/basic_message.bpmn +++ b/test/spec/bpmn/basic_message.bpmn @@ -1,11 +1,12 @@ - + - + + message_correlation_property @@ -69,18 +70,6 @@ - - - - - - - - - - - - @@ -97,17 +86,21 @@ + + + + + + + + + + + + - - - - - - - - @@ -123,6 +116,14 @@ + + + + + + + + From 60e515f868eaa9fe0279598cf90d113a61618759 Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 17:27:49 -0400 Subject: [PATCH 05/10] we can add correlation properties w/ burnettk cullerton --- app/spiffworkflow/messages/MessageHelpers.js | 38 ++-- .../propertiesPanel/CorrelationKeysArray.js | 2 +- .../CorrelationPropertiesArray.js | 168 +++++++++----- .../MessageCorrelationPropertiesArray.js | 211 ++++++++++++++++++ .../MessagesPropertiesProvider.js | 36 ++- test/spec/bpmn/basic_message.bpmn | 2 +- 6 files changed, 369 insertions(+), 88 deletions(-) create mode 100644 app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js diff --git a/app/spiffworkflow/messages/MessageHelpers.js b/app/spiffworkflow/messages/MessageHelpers.js index 2290533..f153dfe 100644 --- a/app/spiffworkflow/messages/MessageHelpers.js +++ b/app/spiffworkflow/messages/MessageHelpers.js @@ -59,8 +59,8 @@ export function getMessageRefElement(shapeElement) { return null; } -export function findCorrelationKeyForCorrelationProperty(shapeElement) { - const correlationKeyElements = findCorrelationKeys(shapeElement); +export function findCorrelationKeyForCorrelationProperty(shapeElement, moddle) { + const correlationKeyElements = findCorrelationKeys(shapeElement, moddle); for (const cke of correlationKeyElements) { if (cke.correlationPropertyRef) { for (const correlationPropertyRef of cke.correlationPropertyRef) { @@ -120,15 +120,17 @@ function getRetrievalExpressionFromCorrelationProperty( correlationProperty, message ) { - for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) { - if ( - retrievalExpression.$type === - 'bpmn:CorrelationPropertyRetrievalExpression' && - retrievalExpression.messageRef && - retrievalExpression.messageRef.id === message.id && - retrievalExpression.messagePath.body - ) { - return retrievalExpression; + if (correlationProperty.correlationPropertyRetrievalExpression) { + for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) { + if ( + retrievalExpression.$type === + 'bpmn:CorrelationPropertyRetrievalExpression' && + retrievalExpression.messageRef && + retrievalExpression.messageRef.id === message.id && + retrievalExpression.messagePath.body + ) { + return retrievalExpression; + } } } return null; @@ -145,8 +147,18 @@ export function findCorrelationProperties(businessObject) { return correlationProperties; } -export function findCorrelationKeys(businessObject) { - const root = getRoot(businessObject); +export function findCorrelationKeys(businessObject, moddle) { + let root; + // HACK: get the root element. need a more formal way to do this + if (moddle) { + for (const elementId in moddle.ids._seed.hats) { + if (elementId.startsWith('Definitions_')) { + root = moddle.ids._seed.hats[elementId]; + } + } + } else { + root = getRoot(businessObject); + } const correlationKeys = []; for (const rootElement of root.rootElements) { if (rootElement.$type === 'bpmn:Collaboration') { diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js index 845c0d3..795ca84 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js @@ -46,7 +46,7 @@ export function CorrelationKeysArray(props) { element, moddleElement: moddle, properties: { - correlationKey: currentCorrelationKeyElements, + correlationKeys: currentCorrelationKeyElements, }, }); } diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index 2fad681..b237f74 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -8,6 +8,7 @@ import { findCorrelationPropertiesAndRetrievalExpressionsForMessage, getRoot, findCorrelationKeys, + findCorrelationProperties, findCorrelationKeyForCorrelationProperty, } from '../MessageHelpers'; import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; @@ -21,42 +22,46 @@ export function CorrelationPropertiesArray(props) { const { commandStack } = props; const { translate } = props; - // const { elementRegistry } = props; - - const correlationPropertyArray = - findCorrelationPropertiesAndRetrievalExpressionsForMessage(element); - const items = correlationPropertyArray.map((correlationPropertyObject) => { - const { - correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, - } = correlationPropertyObject; - const id = `correlation-${correlationPropertyModdleElement.id}`; - const entries = MessageCorrelationPropertyGroup({ - idPrefix: id, - correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, - translate, - }); - return { - id, - label: correlationPropertyModdleElement.id, - entries, - autoFocusEntry: id, - // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) - }; - }); + const correlationPropertyArray = findCorrelationProperties( + element.businessObject + ); + const items = correlationPropertyArray.map( + (correlationPropertyModdleElement, index) => { + const id = `correlation-${index}`; + const entries = MessageCorrelationPropertyGroup({ + idPrefix: id, + correlationPropertyModdleElement, + translate, + commandStack, + moddle, + }); + return { + id, + label: correlationPropertyModdleElement.id, + entries, + autoFocusEntry: id, + // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) + }; + } + ); function add(event) { event.stopPropagation(); - const newRetrievalExpressionElement = moddle.create( - 'bpmn:CorrelationPropertyRetrievalExpression' + const newCorrelationPropertyElement = moddle.create( + 'bpmn:CorrelationProperty' ); + const correlationPropertyId = moddle.ids.nextPrefixed( + 'CorrelationProperty_' + ); + newCorrelationPropertyElement.id = correlationPropertyId; + newCorrelationPropertyElement.name = correlationPropertyId; const rootElement = getRoot(element.businessObject); const { rootElements } = rootElement; - rootElements.push(newRe); + rootElements.push(newCorrelationPropertyElement); commandStack.execute('element.updateProperties', { element, - moddleElement: element.businessObject, + moddleElement: moddle, + properties: {}, }); } @@ -64,13 +69,13 @@ export function CorrelationPropertiesArray(props) { } // // function removeFactory(props) { -// const { element, messageElement, moddle, commandStack } = props; +// const { element, correlationPropertyModdleElement, moddle, commandStack } = props; // // return function (event) { // event.stopPropagation(); // const rootElement = getRoot(element.businessObject); // const { rootElements } = rootElement; -// removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement); +// removeFirstInstanceOfItemFromArrayInPlace(rootElements, correlationPropertyModdleElement); // commandStack.execute('element.updateProperties', { // element, // moddleElement: moddle, @@ -85,8 +90,9 @@ function MessageCorrelationPropertyGroup(props) { const { idPrefix, correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, translate, + commandStack, + moddle, } = props; return [ { @@ -96,26 +102,43 @@ function MessageCorrelationPropertyGroup(props) { idPrefix, correlationPropertyModdleElement, translate, + moddle, }, { - id: `${idPrefix}-expression`, - component: MessageCorrelationExpressionTextField, + id: `${idPrefix}-correlation-property-id`, + component: CorrelationPropertyIdTextField, isEdited: isTextFieldEntryEdited, idPrefix, - correlationPropertyRetrievalExpressionElement, + correlationPropertyModdleElement, translate, + commandStack, + }, + { + id: `${idPrefix}-correlation-property-name`, + component: CorrelationPropertyNameTextField, + isEdited: isTextFieldEntryEdited, + idPrefix, + correlationPropertyModdleElement, + translate, + commandStack, }, ]; } function MessageCorrelationKeySelect(props) { - const { idPrefix, correlationPropertyModdleElement, translate, parameter } = - props; + const { + idPrefix, + correlationPropertyModdleElement, + translate, + parameter, + moddle, + } = props; const debounce = useService('debounceInput'); const setValue = (value) => { const correlationKeyElements = findCorrelationKeys( - correlationPropertyModdleElement + correlationPropertyModdleElement, + moddle ); let newCorrelationKeyElement; for (const cke of correlationKeyElements) { @@ -124,7 +147,8 @@ function MessageCorrelationKeySelect(props) { } } const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty( - correlationPropertyModdleElement + correlationPropertyModdleElement, + moddle ); if (newCorrelationKeyElement.correlationPropertyRef) { @@ -147,7 +171,8 @@ function MessageCorrelationKeySelect(props) { const getValue = () => { const correlationKeyElement = findCorrelationKeyForCorrelationProperty( - correlationPropertyModdleElement + correlationPropertyModdleElement, + moddle ); if (correlationKeyElement) { return correlationKeyElement.name; @@ -157,7 +182,8 @@ function MessageCorrelationKeySelect(props) { const getOptions = () => { const correlationKeyElements = findCorrelationKeys( - correlationPropertyModdleElement + correlationPropertyModdleElement, + moddle ); const options = []; for (const correlationKeyElement of correlationKeyElements) { @@ -180,28 +206,68 @@ function MessageCorrelationKeySelect(props) { }); } -function MessageCorrelationExpressionTextField(props) { +function CorrelationPropertyIdTextField(props) { const { - idPrefix, - parameter, - correlationPropertyRetrievalExpressionElement, + id, + element, + correlationPropertyModdleElement, + commandStack, translate, } = props; const debounce = useService('debounceInput'); - const setValue = (value) => { - correlationPropertyRetrievalExpressionElement.messagePath.body = value; + commandStack.execute('element.updateModdleProperties', { + element, + moddleElement: correlationPropertyModdleElement, + properties: { + id: value, + }, + }); }; - const getValue = (_parameter) => { - return correlationPropertyRetrievalExpressionElement.messagePath.body; + const getValue = () => { + return correlationPropertyModdleElement.id; }; return TextFieldEntry({ - element: parameter, - id: `${idPrefix}-textField`, - label: translate('Expression'), + element, + id: `${id}-id-textField`, + label: translate('ID'), + getValue, + setValue, + debounce, + }); +} + +function CorrelationPropertyNameTextField(props) { + const { + id, + element, + correlationPropertyModdleElement, + commandStack, + translate, + } = props; + + const debounce = useService('debounceInput'); + const setValue = (value) => { + commandStack.execute('element.updateModdleProperties', { + element, + moddleElement: correlationPropertyModdleElement, + properties: { + name: value, + }, + }); + }; + + const getValue = () => { + return correlationPropertyModdleElement.name; + }; + + return TextFieldEntry({ + element, + id: `${id}-name-textField`, + label: translate('Name'), getValue, setValue, debounce, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js new file mode 100644 index 0000000..f615175 --- /dev/null +++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js @@ -0,0 +1,211 @@ +import { useService } from 'bpmn-js-properties-panel'; +import { + SelectEntry, + isTextFieldEntryEdited, + TextFieldEntry, +} from '@bpmn-io/properties-panel'; +import { + findCorrelationPropertiesAndRetrievalExpressionsForMessage, + getRoot, + findCorrelationKeys, + findCorrelationKeyForCorrelationProperty, +} from '../MessageHelpers'; +import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; + +/** + * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document. + */ +export function MessageCorrelationPropertiesArray(props) { + const { moddle } = props; + const { element } = props; + const { commandStack } = props; + const { translate } = props; + + const correlationPropertyArray = + findCorrelationPropertiesAndRetrievalExpressionsForMessage(element); + const items = correlationPropertyArray.map((correlationPropertyObject) => { + const { + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + } = correlationPropertyObject; + const id = `correlation-${correlationPropertyModdleElement.id}`; + const entries = MessageCorrelationPropertyGroup({ + idPrefix: id, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + translate, + }); + return { + id, + label: correlationPropertyModdleElement.id, + entries, + autoFocusEntry: id, + // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) + }; + }); + + function add(event) { + event.stopPropagation(); + const newCorrelationPropertyElement = moddle.create( + 'bpmn:CorrelationProperty' + ); + const newRetrievalExpressionElement = moddle.create( + 'bpmn:CorrelationPropertyRetrievalExpression' + ); + const newFormalExpression = moddle.create('bpmn:FormalExpression'); + // const rootElement = getRoot(element.businessObject); + // const { rootElements } = rootElement; + // rootElements.push(newRetrievalExpressionElement); + // commandStack.execute('element.updateProperties', { + // element, + // moddleElement: element.businessObject, + // }); + } + + return { items, add }; +} +// +// function removeFactory(props) { +// const { element, messageElement, moddle, commandStack } = props; +// +// return function (event) { +// event.stopPropagation(); +// const rootElement = getRoot(element.businessObject); +// const { rootElements } = rootElement; +// removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement); +// commandStack.execute('element.updateProperties', { +// element, +// moddleElement: moddle, +// properties: { +// messages: rootElements, +// }, +// }); +// }; +// } + +function MessageCorrelationPropertyGroup(props) { + const { + idPrefix, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + translate, + } = props; + return [ + { + id: `${idPrefix}-correlation-key`, + component: MessageCorrelationKeySelect, + isEdited: isTextFieldEntryEdited, + idPrefix, + correlationPropertyModdleElement, + translate, + }, + { + id: `${idPrefix}-expression`, + component: MessageCorrelationExpressionTextField, + isEdited: isTextFieldEntryEdited, + idPrefix, + correlationPropertyRetrievalExpressionElement, + translate, + }, + ]; +} + +function MessageCorrelationKeySelect(props) { + const { idPrefix, correlationPropertyModdleElement, translate, parameter } = + props; + const debounce = useService('debounceInput'); + + const setValue = (value) => { + const correlationKeyElements = findCorrelationKeys( + correlationPropertyModdleElement + ); + let newCorrelationKeyElement; + for (const cke of correlationKeyElements) { + if (cke.name === value) { + newCorrelationKeyElement = cke; + } + } + const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty( + correlationPropertyModdleElement + ); + + if (newCorrelationKeyElement.correlationPropertyRef) { + newCorrelationKeyElement.correlationPropertyRef.push( + correlationPropertyModdleElement + ); + } else { + newCorrelationKeyElement.correlationPropertyRef = [ + correlationPropertyModdleElement, + ]; + } + + if (oldCorrelationKeyElement) { + removeFirstInstanceOfItemFromArrayInPlace( + oldCorrelationKeyElement.correlationPropertyRef, + correlationPropertyModdleElement + ); + } + }; + + const getValue = () => { + const correlationKeyElement = findCorrelationKeyForCorrelationProperty( + correlationPropertyModdleElement + ); + if (correlationKeyElement) { + return correlationKeyElement.name; + } + return null; + }; + + const getOptions = () => { + const correlationKeyElements = findCorrelationKeys( + correlationPropertyModdleElement + ); + const options = []; + for (const correlationKeyElement of correlationKeyElements) { + options.push({ + label: correlationKeyElement.name, + value: correlationKeyElement.name, + }); + } + return options; + }; + + return SelectEntry({ + id: `${idPrefix}-select`, + element: parameter, + label: translate('Correlation Key'), + getValue, + setValue, + getOptions, + debounce, + }); +} + +function MessageCorrelationExpressionTextField(props) { + const { + idPrefix, + parameter, + correlationPropertyRetrievalExpressionElement, + translate, + } = props; + + const debounce = useService('debounceInput'); + + const setValue = (value) => { + correlationPropertyRetrievalExpressionElement.messagePath.body = value; + }; + + const getValue = (_parameter) => { + return correlationPropertyRetrievalExpressionElement.messagePath.body; + }; + + return TextFieldEntry({ + element: parameter, + id: `${idPrefix}-textField`, + label: translate('Expression'), + getValue, + setValue, + debounce, + }); +} diff --git a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js index ef4f6bd..bc254a5 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js @@ -5,6 +5,7 @@ import { MessageSelect } from './MessageSelect'; import { MessagePayload } from './MessagePayload'; import { MessageVariable } from './MessageVariable'; import { CorrelationPropertiesArray } from './CorrelationPropertiesArray'; +import { MessageCorrelationPropertiesArray } from './MessageCorrelationPropertiesArray'; import { MessageArray } from './MessageArray'; import { isMessageElement, canReceiveMessage } from '../MessageHelpers'; @@ -94,6 +95,18 @@ function createCollaborationGroup( translate, }), }, + { + id: 'correlation_properties', + label: translate('Correlation Properties'), + component: ListGroup, + ...CorrelationPropertiesArray({ + element, + moddle, + commandStack, + elementRegistry, + translate, + }), + }, { id: 'messages', label: translate('Messages'), @@ -109,27 +122,6 @@ function createCollaborationGroup( ]; } -/** - * Adds a group to the properties panel for the script task that allows you - * to set the script. - * @param element - * @param translate - * @returns The components to add to the properties panel. */ -function createMessageCollaborationGroup( - element, - translate, - moddle, - commandStack, - elementRegistry -) { - return { - id: 'messages', - label: translate('Messages'), - component: ListGroup, - ...MessageArray({ element, moddle, commandStack, elementRegistry }), - }; -} - /** * Adds a group to the properties panel for editing messages for the SendTask * @param element @@ -177,7 +169,7 @@ function createMessageGroup( id: 'correlationProperties', label: translate('Correlation Properties'), component: ListGroup, - ...CorrelationPropertiesArray({ + ...MessageCorrelationPropertiesArray({ element, moddle, commandStack, diff --git a/test/spec/bpmn/basic_message.bpmn b/test/spec/bpmn/basic_message.bpmn index 23ce94b..05d42eb 100644 --- a/test/spec/bpmn/basic_message.bpmn +++ b/test/spec/bpmn/basic_message.bpmn @@ -1,6 +1,6 @@ - + From cab4fb10fc740bb9e1c8609ad1ff8d39181d8912 Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 17:33:04 -0400 Subject: [PATCH 06/10] we can remove correlation properties w/ burnettk cullerton --- .../CorrelationPropertiesArray.js | 59 +++++++++++++------ 1 file changed, 40 insertions(+), 19 deletions(-) diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index b237f74..8bbcece 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -40,7 +40,12 @@ export function CorrelationPropertiesArray(props) { label: correlationPropertyModdleElement.id, entries, autoFocusEntry: id, - // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) + remove: removeFactory({ + element, + correlationPropertyModdleElement, + commandStack, + moddle, + }), }; } ); @@ -67,24 +72,40 @@ export function CorrelationPropertiesArray(props) { return { items, add }; } -// -// function removeFactory(props) { -// const { element, correlationPropertyModdleElement, moddle, commandStack } = props; -// -// return function (event) { -// event.stopPropagation(); -// const rootElement = getRoot(element.businessObject); -// const { rootElements } = rootElement; -// removeFirstInstanceOfItemFromArrayInPlace(rootElements, correlationPropertyModdleElement); -// commandStack.execute('element.updateProperties', { -// element, -// moddleElement: moddle, -// properties: { -// messages: rootElements, -// }, -// }); -// }; -// } + +function removeFactory(props) { + const { element, correlationPropertyModdleElement, moddle, commandStack } = + props; + + return function (event) { + event.stopPropagation(); + const rootElement = getRoot(element.businessObject); + const { rootElements } = rootElement; + + const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty( + correlationPropertyModdleElement, + moddle + ); + if (oldCorrelationKeyElement) { + removeFirstInstanceOfItemFromArrayInPlace( + oldCorrelationKeyElement.correlationPropertyRef, + correlationPropertyModdleElement + ); + } + + removeFirstInstanceOfItemFromArrayInPlace( + rootElements, + correlationPropertyModdleElement + ); + commandStack.execute('element.updateProperties', { + element, + moddleElement: moddle, + properties: { + messages: rootElements, + }, + }); + }; +} function MessageCorrelationPropertyGroup(props) { const { From fcd6bd8638f585ee9b1f9d3a36994d8f3a41ce2d Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 24 Aug 2022 18:17:03 -0400 Subject: [PATCH 07/10] we can select a property for message w/ burnettk cullerton --- app/spiffworkflow/messages/MessageHelpers.js | 39 +++++---- .../CorrelationPropertiesArray.js | 1 - .../MessageCorrelationPropertiesArray.js | 80 +++++++++---------- .../MessagesPropertiesProvider.js | 2 +- 4 files changed, 59 insertions(+), 63 deletions(-) diff --git a/app/spiffworkflow/messages/MessageHelpers.js b/app/spiffworkflow/messages/MessageHelpers.js index f153dfe..9e36ca5 100644 --- a/app/spiffworkflow/messages/MessageHelpers.js +++ b/app/spiffworkflow/messages/MessageHelpers.js @@ -4,13 +4,22 @@ import { is } from 'bpmn-js/lib/util/ModelUtil'; * loops up until it can find the root. * @param element */ -export function getRoot(businessObject) { - // todo: Do we want businessObject to be a shape or moddle object? - if (businessObject.$type === 'bpmn:Definitions') { - return businessObject; - } - if (typeof businessObject.$parent !== 'undefined') { - return getRoot(businessObject.$parent); +export function getRoot(businessObject, moddle) { + // HACK: get the root element. need a more formal way to do this + if (moddle) { + for (const elementId in moddle.ids._seed.hats) { + if (elementId.startsWith('Definitions_')) { + return moddle.ids._seed.hats[elementId]; + } + } + } else { + // todo: Do we want businessObject to be a shape or moddle object? + if (businessObject.$type === 'bpmn:Definitions') { + return businessObject; + } + if (typeof businessObject.$parent !== 'undefined') { + return getRoot(businessObject.$parent); + } } return businessObject; } @@ -136,8 +145,8 @@ function getRetrievalExpressionFromCorrelationProperty( return null; } -export function findCorrelationProperties(businessObject) { - const root = getRoot(businessObject); +export function findCorrelationProperties(businessObject, moddle) { + const root = getRoot(businessObject, moddle); const correlationProperties = []; for (const rootElement of root.rootElements) { if (rootElement.$type === 'bpmn:CorrelationProperty') { @@ -148,17 +157,7 @@ export function findCorrelationProperties(businessObject) { } export function findCorrelationKeys(businessObject, moddle) { - let root; - // HACK: get the root element. need a more formal way to do this - if (moddle) { - for (const elementId in moddle.ids._seed.hats) { - if (elementId.startsWith('Definitions_')) { - root = moddle.ids._seed.hats[elementId]; - } - } - } else { - root = getRoot(businessObject); - } + const root = getRoot(businessObject, moddle); const correlationKeys = []; for (const rootElement of root.rootElements) { if (rootElement.$type === 'bpmn:Collaboration') { diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index 8bbcece..3597375 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -5,7 +5,6 @@ import { TextFieldEntry, } from '@bpmn-io/properties-panel'; import { - findCorrelationPropertiesAndRetrievalExpressionsForMessage, getRoot, findCorrelationKeys, findCorrelationProperties, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js index f615175..a471b0a 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js @@ -7,6 +7,8 @@ import { import { findCorrelationPropertiesAndRetrievalExpressionsForMessage, getRoot, + findCorrelationProperties, + getMessageRefElement, findCorrelationKeys, findCorrelationKeyForCorrelationProperty, } from '../MessageHelpers'; @@ -34,6 +36,7 @@ export function MessageCorrelationPropertiesArray(props) { correlationPropertyModdleElement, correlationPropertyRetrievalExpressionElement, translate, + moddle, }); return { id, @@ -89,15 +92,18 @@ function MessageCorrelationPropertyGroup(props) { correlationPropertyModdleElement, correlationPropertyRetrievalExpressionElement, translate, + moddle, } = props; return [ { id: `${idPrefix}-correlation-key`, - component: MessageCorrelationKeySelect, + component: MessageCorrelationPropertySelect, isEdited: isTextFieldEntryEdited, idPrefix, correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, translate, + moddle, }, { id: `${idPrefix}-expression`, @@ -110,62 +116,54 @@ function MessageCorrelationPropertyGroup(props) { ]; } -function MessageCorrelationKeySelect(props) { - const { idPrefix, correlationPropertyModdleElement, translate, parameter } = - props; +function MessageCorrelationPropertySelect(props) { + const { + idPrefix, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionElement, + translate, + parameter, + moddle, + } = props; const debounce = useService('debounceInput'); const setValue = (value) => { - const correlationKeyElements = findCorrelationKeys( - correlationPropertyModdleElement + const correlationPropertyElements = findCorrelationProperties( + correlationPropertyModdleElement, + moddle ); - let newCorrelationKeyElement; - for (const cke of correlationKeyElements) { - if (cke.name === value) { - newCorrelationKeyElement = cke; + const newCorrelationPropertyElement = correlationPropertyElements.find( + (cpe) => { + return cpe.id === value; } - } - const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty( - correlationPropertyModdleElement ); - if (newCorrelationKeyElement.correlationPropertyRef) { - newCorrelationKeyElement.correlationPropertyRef.push( - correlationPropertyModdleElement - ); - } else { - newCorrelationKeyElement.correlationPropertyRef = [ - correlationPropertyModdleElement, - ]; - } - - if (oldCorrelationKeyElement) { - removeFirstInstanceOfItemFromArrayInPlace( - oldCorrelationKeyElement.correlationPropertyRef, - correlationPropertyModdleElement - ); + if (!newCorrelationPropertyElement.correlationPropertyRetrievalExpression) { + newCorrelationPropertyElement.correlationPropertyRetrievalExpression = []; } + newCorrelationPropertyElement.correlationPropertyRetrievalExpression.push( + correlationPropertyRetrievalExpressionElement + ); + removeFirstInstanceOfItemFromArrayInPlace( + correlationPropertyModdleElement.correlationPropertyRetrievalExpression, + correlationPropertyRetrievalExpressionElement + ); }; const getValue = () => { - const correlationKeyElement = findCorrelationKeyForCorrelationProperty( - correlationPropertyModdleElement - ); - if (correlationKeyElement) { - return correlationKeyElement.name; - } - return null; + return correlationPropertyModdleElement.id; }; const getOptions = () => { - const correlationKeyElements = findCorrelationKeys( - correlationPropertyModdleElement + const correlationPropertyElements = findCorrelationProperties( + correlationPropertyModdleElement, + moddle ); const options = []; - for (const correlationKeyElement of correlationKeyElements) { + for (const correlationPropertyElement of correlationPropertyElements) { options.push({ - label: correlationKeyElement.name, - value: correlationKeyElement.name, + label: correlationPropertyElement.name, + value: correlationPropertyElement.id, }); } return options; @@ -174,7 +172,7 @@ function MessageCorrelationKeySelect(props) { return SelectEntry({ id: `${idPrefix}-select`, element: parameter, - label: translate('Correlation Key'), + label: translate('Correlation Property'), getValue, setValue, getOptions, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js index bc254a5..6abf6c7 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js @@ -167,7 +167,7 @@ function createMessageGroup( entries.push({ id: 'correlationProperties', - label: translate('Correlation Properties'), + label: translate('Correlation'), component: ListGroup, ...MessageCorrelationPropertiesArray({ element, From 880fdf75ce443573a58eec5e741f7618968c9c06 Mon Sep 17 00:00:00 2001 From: burnettk Date: Wed, 24 Aug 2022 22:29:24 -0400 Subject: [PATCH 08/10] simplify one-liner --- .../propertiesPanel/MessageCorrelationPropertiesArray.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js index a471b0a..318b79c 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js @@ -133,9 +133,7 @@ function MessageCorrelationPropertySelect(props) { moddle ); const newCorrelationPropertyElement = correlationPropertyElements.find( - (cpe) => { - return cpe.id === value; - } + (cpe) => cpe.id === value ); if (!newCorrelationPropertyElement.correlationPropertyRetrievalExpression) { From aa866412d8ce81f62f0095cd51483567c2ddd0b5 Mon Sep 17 00:00:00 2001 From: jasquat Date: Thu, 25 Aug 2022 11:23:05 -0400 Subject: [PATCH 09/10] we can add and remove properties from messages w/ burnettk --- app/spiffworkflow/messages/MessageHelpers.js | 12 +- .../CorrelationPropertiesArray.js | 18 +- .../MessageCorrelationPropertiesArray.js | 188 +++++++++++------- test/spec/bpmn/basic_message.bpmn | 9 +- 4 files changed, 148 insertions(+), 79 deletions(-) diff --git a/app/spiffworkflow/messages/MessageHelpers.js b/app/spiffworkflow/messages/MessageHelpers.js index 9e36ca5..6d5821d 100644 --- a/app/spiffworkflow/messages/MessageHelpers.js +++ b/app/spiffworkflow/messages/MessageHelpers.js @@ -79,14 +79,15 @@ export function findCorrelationKeyForCorrelationProperty(shapeElement, moddle) { } } } + return null; } export function findCorrelationPropertiesAndRetrievalExpressionsForMessage( shapeElement ) { const formalExpressions = []; - const messageRef = getMessageRefElement(shapeElement); - if (messageRef) { + const messageRefElement = getMessageRefElement(shapeElement); + if (messageRefElement) { const root = getRoot(shapeElement.businessObject); if (root.$type === 'bpmn:Definitions') { for (const childElement of root.rootElements) { @@ -94,12 +95,12 @@ export function findCorrelationPropertiesAndRetrievalExpressionsForMessage( const retrievalExpression = getRetrievalExpressionFromCorrelationProperty( childElement, - messageRef + messageRefElement ); if (retrievalExpression) { const formalExpression = { correlationPropertyModdleElement: childElement, - correlationPropertyRetrievalExpressionElement: + correlationPropertyRetrievalExpressionModdleElement: retrievalExpression, }; formalExpressions.push(formalExpression); @@ -135,8 +136,7 @@ function getRetrievalExpressionFromCorrelationProperty( retrievalExpression.$type === 'bpmn:CorrelationPropertyRetrievalExpression' && retrievalExpression.messageRef && - retrievalExpression.messageRef.id === message.id && - retrievalExpression.messagePath.body + retrievalExpression.messageRef.id === message.id ) { return retrievalExpression; } diff --git a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js index 3597375..205669c 100644 --- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js @@ -62,9 +62,24 @@ export function CorrelationPropertiesArray(props) { const rootElement = getRoot(element.businessObject); const { rootElements } = rootElement; rootElements.push(newCorrelationPropertyElement); + + const correlationKeyElements = findCorrelationKeys( + newCorrelationPropertyElement, + moddle + ); + const correlationKeyElement = correlationKeyElements[0]; + if (correlationKeyElement.correlationPropertyRef) { + correlationKeyElement.correlationPropertyRef.push( + newCorrelationPropertyElement + ); + } else { + correlationKeyElement.correlationPropertyRef = [ + newCorrelationPropertyElement, + ]; + } + commandStack.execute('element.updateProperties', { element, - moddleElement: moddle, properties: {}, }); } @@ -98,7 +113,6 @@ function removeFactory(props) { ); commandStack.execute('element.updateProperties', { element, - moddleElement: moddle, properties: { messages: rootElements, }, diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js index 318b79c..225233e 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js @@ -23,74 +23,122 @@ export function MessageCorrelationPropertiesArray(props) { const { commandStack } = props; const { translate } = props; - const correlationPropertyArray = + const correlationPropertyObjectsForCurrentMessage = findCorrelationPropertiesAndRetrievalExpressionsForMessage(element); - const items = correlationPropertyArray.map((correlationPropertyObject) => { - const { - correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, - } = correlationPropertyObject; - const id = `correlation-${correlationPropertyModdleElement.id}`; - const entries = MessageCorrelationPropertyGroup({ - idPrefix: id, - correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, - translate, - moddle, - }); - return { - id, - label: correlationPropertyModdleElement.id, - entries, - autoFocusEntry: id, - // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) - }; - }); + const allCorrelationPropertyModdleElements = findCorrelationProperties( + element, + moddle + ); + const items = correlationPropertyObjectsForCurrentMessage.map( + (correlationPropertyObject) => { + const { + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionModdleElement, + } = correlationPropertyObject; + const id = `correlation-${correlationPropertyModdleElement.id}`; + const entries = MessageCorrelationPropertyGroup({ + idPrefix: id, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionModdleElement, + translate, + moddle, + }); + return { + id, + label: correlationPropertyModdleElement.id, + entries, + autoFocusEntry: id, + remove: removeFactory({ + element, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionModdleElement, + commandStack, + }), + }; + } + ); function add(event) { event.stopPropagation(); - const newCorrelationPropertyElement = moddle.create( - 'bpmn:CorrelationProperty' - ); - const newRetrievalExpressionElement = moddle.create( - 'bpmn:CorrelationPropertyRetrievalExpression' - ); - const newFormalExpression = moddle.create('bpmn:FormalExpression'); - // const rootElement = getRoot(element.businessObject); - // const { rootElements } = rootElement; - // rootElements.push(newRetrievalExpressionElement); - // commandStack.execute('element.updateProperties', { - // element, - // moddleElement: element.businessObject, - // }); + + let correlationPropertyElement; + allCorrelationPropertyModdleElements.forEach((cpe) => { + let foundElement = false; + correlationPropertyObjectsForCurrentMessage.forEach((cpo) => { + const cpme = cpo.correlationPropertyModdleElement; + if (cpme.id === cpe.id) { + foundElement = true; + } + }); + if (!foundElement) { + correlationPropertyElement = cpe; + } + }); + + // TODO: we should have some way to show an error if element is not found instead + // we need to check this since the code assumes each message only has one ref + // and will not display all properties if there are multiple + if (correlationPropertyElement) { + const newRetrievalExpressionElement = moddle.create( + 'bpmn:CorrelationPropertyRetrievalExpression' + ); + const messageRefElement = getMessageRefElement(element); + const newFormalExpression = moddle.create('bpmn:FormalExpression'); + newFormalExpression.body = ''; + + newRetrievalExpressionElement.messageRef = messageRefElement; + newRetrievalExpressionElement.messagePath = newFormalExpression; + + if (!correlationPropertyElement.correlationPropertyRetrievalExpression) { + correlationPropertyElement.correlationPropertyRetrievalExpression = []; + } + correlationPropertyElement.correlationPropertyRetrievalExpression.push( + newRetrievalExpressionElement + ); + commandStack.execute('element.updateProperties', { + element, + properties: {}, + }); + } else { + console.log( + 'ERROR: There are not any more correlation properties this message can be added to' + ); + } } - return { items, add }; + const returnObject = { items }; + if (allCorrelationPropertyModdleElements.length !== 0) { + returnObject.add = add; + } + return returnObject; +} + +function removeFactory(props) { + const { + element, + correlationPropertyModdleElement, + correlationPropertyRetrievalExpressionModdleElement, + commandStack, + } = props; + + return function (event) { + event.stopPropagation(); + removeFirstInstanceOfItemFromArrayInPlace( + correlationPropertyModdleElement.correlationPropertyRetrievalExpression, + correlationPropertyRetrievalExpressionModdleElement + ); + commandStack.execute('element.updateProperties', { + element, + properties: {}, + }); + }; } -// -// function removeFactory(props) { -// const { element, messageElement, moddle, commandStack } = props; -// -// return function (event) { -// event.stopPropagation(); -// const rootElement = getRoot(element.businessObject); -// const { rootElements } = rootElement; -// removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement); -// commandStack.execute('element.updateProperties', { -// element, -// moddleElement: moddle, -// properties: { -// messages: rootElements, -// }, -// }); -// }; -// } function MessageCorrelationPropertyGroup(props) { const { idPrefix, correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, + correlationPropertyRetrievalExpressionModdleElement, translate, moddle, } = props; @@ -101,7 +149,7 @@ function MessageCorrelationPropertyGroup(props) { isEdited: isTextFieldEntryEdited, idPrefix, correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, + correlationPropertyRetrievalExpressionModdleElement, translate, moddle, }, @@ -110,7 +158,7 @@ function MessageCorrelationPropertyGroup(props) { component: MessageCorrelationExpressionTextField, isEdited: isTextFieldEntryEdited, idPrefix, - correlationPropertyRetrievalExpressionElement, + correlationPropertyRetrievalExpressionModdleElement, translate, }, ]; @@ -120,7 +168,7 @@ function MessageCorrelationPropertySelect(props) { const { idPrefix, correlationPropertyModdleElement, - correlationPropertyRetrievalExpressionElement, + correlationPropertyRetrievalExpressionModdleElement, translate, parameter, moddle, @@ -128,23 +176,22 @@ function MessageCorrelationPropertySelect(props) { const debounce = useService('debounceInput'); const setValue = (value) => { - const correlationPropertyElements = findCorrelationProperties( + const allCorrelationPropertyModdleElements = findCorrelationProperties( correlationPropertyModdleElement, moddle ); - const newCorrelationPropertyElement = correlationPropertyElements.find( - (cpe) => cpe.id === value - ); + const newCorrelationPropertyElement = + allCorrelationPropertyModdleElements.find((cpe) => cpe.id === value); if (!newCorrelationPropertyElement.correlationPropertyRetrievalExpression) { newCorrelationPropertyElement.correlationPropertyRetrievalExpression = []; } newCorrelationPropertyElement.correlationPropertyRetrievalExpression.push( - correlationPropertyRetrievalExpressionElement + correlationPropertyRetrievalExpressionModdleElement ); removeFirstInstanceOfItemFromArrayInPlace( correlationPropertyModdleElement.correlationPropertyRetrievalExpression, - correlationPropertyRetrievalExpressionElement + correlationPropertyRetrievalExpressionModdleElement ); }; @@ -153,12 +200,12 @@ function MessageCorrelationPropertySelect(props) { }; const getOptions = () => { - const correlationPropertyElements = findCorrelationProperties( + const allCorrelationPropertyModdleElements = findCorrelationProperties( correlationPropertyModdleElement, moddle ); const options = []; - for (const correlationPropertyElement of correlationPropertyElements) { + for (const correlationPropertyElement of allCorrelationPropertyModdleElements) { options.push({ label: correlationPropertyElement.name, value: correlationPropertyElement.id, @@ -182,18 +229,19 @@ function MessageCorrelationExpressionTextField(props) { const { idPrefix, parameter, - correlationPropertyRetrievalExpressionElement, + correlationPropertyRetrievalExpressionModdleElement, translate, } = props; const debounce = useService('debounceInput'); const setValue = (value) => { - correlationPropertyRetrievalExpressionElement.messagePath.body = value; + correlationPropertyRetrievalExpressionModdleElement.messagePath.body = + value; }; const getValue = (_parameter) => { - return correlationPropertyRetrievalExpressionElement.messagePath.body; + return correlationPropertyRetrievalExpressionModdleElement.messagePath.body; }; return TextFieldEntry({ diff --git a/test/spec/bpmn/basic_message.bpmn b/test/spec/bpmn/basic_message.bpmn index 05d42eb..08c6145 100644 --- a/test/spec/bpmn/basic_message.bpmn +++ b/test/spec/bpmn/basic_message.bpmn @@ -5,7 +5,9 @@ - + + correlation_property_one + message_correlation_property @@ -64,6 +66,11 @@ + + + new + + From c6d4d300c3b40e61bc1dc677b61a8115f362459a Mon Sep 17 00:00:00 2001 From: jasquat Date: Thu, 25 Aug 2022 12:19:19 -0400 Subject: [PATCH 10/10] do not show properties in dropdown that are already associated with the message w/ burnettk jbirddog --- .../MessageCorrelationPropertiesArray.js | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js index 225233e..9394dcb 100644 --- a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js +++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js @@ -6,11 +6,8 @@ import { } from '@bpmn-io/properties-panel'; import { findCorrelationPropertiesAndRetrievalExpressionsForMessage, - getRoot, findCorrelationProperties, getMessageRefElement, - findCorrelationKeys, - findCorrelationKeyForCorrelationProperty, } from '../MessageHelpers'; import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers'; @@ -30,18 +27,20 @@ export function MessageCorrelationPropertiesArray(props) { moddle ); const items = correlationPropertyObjectsForCurrentMessage.map( - (correlationPropertyObject) => { + (correlationPropertyObject, index) => { const { correlationPropertyModdleElement, correlationPropertyRetrievalExpressionModdleElement, } = correlationPropertyObject; - const id = `correlation-${correlationPropertyModdleElement.id}`; + const id = `correlation-${index}`; const entries = MessageCorrelationPropertyGroup({ idPrefix: id, correlationPropertyModdleElement, correlationPropertyRetrievalExpressionModdleElement, translate, moddle, + element, + commandStack, }); return { id, @@ -141,6 +140,8 @@ function MessageCorrelationPropertyGroup(props) { correlationPropertyRetrievalExpressionModdleElement, translate, moddle, + element, + commandStack, } = props; return [ { @@ -152,6 +153,8 @@ function MessageCorrelationPropertyGroup(props) { correlationPropertyRetrievalExpressionModdleElement, translate, moddle, + element, + commandStack, }, { id: `${idPrefix}-expression`, @@ -172,6 +175,8 @@ function MessageCorrelationPropertySelect(props) { translate, parameter, moddle, + element, + commandStack, } = props; const debounce = useService('debounceInput'); @@ -193,6 +198,10 @@ function MessageCorrelationPropertySelect(props) { correlationPropertyModdleElement.correlationPropertyRetrievalExpression, correlationPropertyRetrievalExpressionModdleElement ); + commandStack.execute('element.updateProperties', { + element, + properties: {}, + }); }; const getValue = () => { @@ -204,12 +213,26 @@ function MessageCorrelationPropertySelect(props) { correlationPropertyModdleElement, moddle ); + const correlationPropertyObjectsForCurrentMessage = + findCorrelationPropertiesAndRetrievalExpressionsForMessage(element); const options = []; - for (const correlationPropertyElement of allCorrelationPropertyModdleElements) { - options.push({ - label: correlationPropertyElement.name, - value: correlationPropertyElement.id, - }); + for (const cpe of allCorrelationPropertyModdleElements) { + const foundElement = correlationPropertyObjectsForCurrentMessage.find( + (cpo) => { + const cpme = cpo.correlationPropertyModdleElement; + return cpme.id === cpe.id; + } + ); + if ( + !foundElement || + foundElement.correlationPropertyModdleElement === + correlationPropertyModdleElement + ) { + options.push({ + label: cpe.name, + value: cpe.id, + }); + } } return options; };