OnChange Events

This commit is contained in:
theaubmov 2023-12-01 16:51:17 +01:00
parent e355780619
commit 84d6e20ff8
3 changed files with 26 additions and 15 deletions

View File

@ -87,6 +87,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
dataObject = existingDataObjects[0]; dataObject = existingDataObjects[0];
} else { } else {
dataObject = bpmnFactory.create('bpmn:DataObject'); dataObject = bpmnFactory.create('bpmn:DataObject');
dataObject.name = 'DataObject Name';
} }
// set the reference to the DataObject // set the reference to the DataObject
shape.businessObject.dataObjectRef = dataObject; shape.businessObject.dataObjectRef = dataObject;
@ -107,7 +108,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
element: shape, element: shape,
moddleElement: shape.businessObject, moddleElement: shape.businessObject,
properties: { properties: {
name: idToHumanReadableName(shape.businessObject.dataObjectRef.id), name: idToHumanReadableName(shape.businessObject.dataObjectRef.name),
}, },
}); });
} }

View File

@ -57,6 +57,7 @@ export function DataObjectArray(props) {
const newDataObject = moddle.create('bpmn:DataObject'); const newDataObject = moddle.create('bpmn:DataObject');
const newElements = process.get('flowElements'); const newElements = process.get('flowElements');
newDataObject.id = moddle.ids.nextPrefixed('DataObject_'); newDataObject.id = moddle.ids.nextPrefixed('DataObject_');
newDataObject.name = 'DataObject Name';
newDataObject.$parent = process; newDataObject.$parent = process;
newElements.push(newDataObject); newElements.push(newDataObject);
commandStack.execute('element.updateModdleProperties', { commandStack.execute('element.updateModdleProperties', {
@ -153,11 +154,14 @@ function DataObjectNameTextField(props) {
// Update references name // Update references name
const references = findDataObjectReferenceShapes(element.children, dataObject.id); const references = findDataObjectReferenceShapes(element.children, dataObject.id);
for (const ref of references) { for (const ref of references) {
const stateName = ref.businessObject.dataState && ref.businessObject.dataState.name ? ref.businessObject.dataState.name : '';
const newName = stateName ? `${value} [${stateName}]` : value;
commandStack.execute('element.updateProperties', { commandStack.execute('element.updateProperties', {
element: ref, element: ref,
moddleElement: ref.businessObject, moddleElement: ref.businessObject,
properties: { properties: {
name: idToHumanReadableName(value), name: newName,
}, },
changed: [ref], changed: [ref],
}); });

View File

@ -1,6 +1,6 @@
import {useService } from 'bpmn-js-properties-panel'; import { useService } from 'bpmn-js-properties-panel';
import { SelectEntry } from '@bpmn-io/properties-panel'; import { SelectEntry } from '@bpmn-io/properties-panel';
import {findDataObjects, idToHumanReadableName} from '../DataObjectHelpers'; import { findDataObjects, idToHumanReadableName } from '../DataObjectHelpers';
/** /**
* Finds the value of the given type within the extensionElements * Finds the value of the given type within the extensionElements
@ -32,20 +32,26 @@ export function DataObjectSelect(props) {
const setValue = value => { const setValue = value => {
const businessObject = element.businessObject; const businessObject = element.businessObject;
const dataObjects = findDataObjects(businessObject.$parent) const dataObjects = findDataObjects(businessObject.$parent)
for (const flowElem of dataObjects) { for (const dataObject of dataObjects) {
if (flowElem.$type === 'bpmn:DataObject' && flowElem.id === value) { if (dataObject.$type === 'bpmn:DataObject' && dataObject.id === value) {
commandStack.execute('element.updateModdleProperties', { commandStack.execute('element.updateModdleProperties', {
element, element: element,
moddleElement: businessObject, moddleElement: businessObject,
properties: { properties: {
dataObjectRef: flowElem dataObjectRef: dataObject
} }
}); });
// Construct the new name by : the dataObject name and the current state
const stateName = businessObject.dataState && businessObject.dataState.name ? businessObject.dataState.name : '';
const newName = stateName ? `${dataObject.name} [${stateName}]` : dataObject.name;
// Update the name property of the DataObjectReference
commandStack.execute('element.updateProperties', { commandStack.execute('element.updateProperties', {
element, element: element,
moddleElement: businessObject,
properties: { properties: {
'name': idToHumanReadableName(flowElem.id) name: newName
} }
}); });
} }
@ -58,7 +64,7 @@ export function DataObjectSelect(props) {
let dataObjects = findDataObjects(parent); let dataObjects = findDataObjects(parent);
let options = []; let options = [];
dataObjects.forEach(dataObj => { dataObjects.forEach(dataObj => {
options.push({label: dataObj.id, value: dataObj.id}) options.push({ label: dataObj.id, value: dataObj.id })
}); });
return options; return options;
} }
@ -68,9 +74,9 @@ export function DataObjectSelect(props) {
element={element} element={element}
description={"Select the Data Object this represents."} description={"Select the Data Object this represents."}
label={"Which Data Object does this reference?"} label={"Which Data Object does this reference?"}
getValue={ getValue } getValue={getValue}
setValue={ setValue } setValue={setValue}
getOptions={ getOptions } getOptions={getOptions}
debounce={debounce} debounce={debounce}
/>; />;