Quick find/replace

This commit is contained in:
Jon Herron 2023-10-23 13:07:06 -04:00
parent 72dc832478
commit 9d46ea3ba8
9 changed files with 130 additions and 133 deletions

View File

@ -4,9 +4,9 @@
* @param container
*/
export function findDataObjects(parent, dataObjects) {
if (typeof(dataObjects) === 'undefined')
dataObjects = [];
export function findDataStores(parent, dataStores) {
if (typeof(dataStores) === 'undefined')
dataStores = [];
let process;
if (!parent) {
return [];
@ -16,45 +16,45 @@ export function findDataObjects(parent, dataObjects) {
} else {
process = parent;
if (process.$type === 'bpmn:SubProcess')
findDataObjects(process.$parent, dataObjects);
findDataStores(process.$parent, dataStores);
}
if (typeof(process.flowElements) !== 'undefined') {
for (const element of process.flowElements) {
if (element.$type === 'bpmn:DataObject')
dataObjects.push(element);
if (element.$type === 'bpmn:DataStore')
dataStores.push(element);
}
}
return dataObjects;
return dataStores;
}
export function findDataObject(process, id) {
for (const dataObj of findDataObjects(process)) {
export function findDataStore(process, id) {
for (const dataObj of findDataStores(process)) {
if (dataObj.id === id) {
return dataObj;
}
}
}
export function findDataObjectReferences(children, dataObjectId) {
export function findDataStoreReferences(children, dataStoreId) {
if (children == null) {
return [];
}
return children.flatMap((child) => {
if (child.$type == 'bpmn:DataObjectReference' && child.dataObjectRef.id == dataObjectId)
if (child.$type == 'bpmn:DataStoreReference' && child.dataStoreRef.id == dataStoreId)
return [child];
else if (child.$type == 'bpmn:SubProcess')
return findDataObjectReferences(child.get('flowElements'), dataObjectId);
return findDataStoreReferences(child.get('flowElements'), dataStoreId);
else
return [];
});
}
export function findDataObjectReferenceShapes(children, dataObjectId) {
export function findDataStoreReferenceShapes(children, dataStoreId) {
return children.flatMap((child) => {
if (child.type == 'bpmn:DataObjectReference' && child.businessObject.dataObjectRef.id == dataObjectId)
if (child.type == 'bpmn:DataStoreReference' && child.businessObject.dataStoreRef.id == dataStoreId)
return [child];
else if (child.type == 'bpmn:SubProcess')
return findDataObjectReferenceShapes(child.children, dataObjectId);
return findDataStoreReferenceShapes(child.children, dataStoreId);
else
return [];
});

View File

@ -2,10 +2,10 @@ import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import { getDi, is } from 'bpmn-js/lib/util/ModelUtil';
import { remove as collectionRemove } from 'diagram-js/lib/util/Collections';
import {
findDataObjects,
findDataObjectReferences,
findDataStores,
findDataStoreReferences,
idToHumanReadableName,
} from './DataObjectHelpers';
} from './DataStoreHelpers';
const HIGH_PRIORITY = 1500;
@ -13,14 +13,11 @@ const HIGH_PRIORITY = 1500;
* This Command Interceptor functions like the BpmnUpdator in BPMN.js - It hooks into events
* from Diagram.js and updates the underlying BPMN model accordingly.
*
* This handles some special cases we want to handle for DataObjects and DataObjectReferences,
* This handles some special cases we want to handle for DataStores and DataStoreReferences,
* for instance:
* 1) Use existing data objects if possible when creating a new reference (don't create new objects each time)
* 2) Don't automatically delete a data object when you delete the reference - unless all references are removed.
* 3) Update the name of the DataObjectReference to match the id of the DataObject.
* 4) Don't allow someone to move a DataObjectReference from one process to another process.
* 1) TODO: add the special cases
*/
export default class DataObjectInterceptor extends CommandInterceptor {
export default class DataStoreInterceptor extends CommandInterceptor {
constructor(eventBus, bpmnFactory, commandStack, bpmnUpdater) {
super(eventBus);
@ -36,7 +33,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
realParent = realParent.processRef;
}
if (is(businessObject, 'bpmn:DataObjectReference')) {
if (is(businessObject, 'bpmn:DataStoreReference')) {
// For data object references, always update the flowElements when a parent is provided
// The parent could be null if it's being deleted, and I could probably handle that here instead of
// when the shape is deleted, but not interested in refactoring at the moment.
@ -47,7 +44,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
flowElements.push(businessObject);
}
}
} else if (is(businessObject, 'bpmn:DataObject')) {
} else if (is(businessObject, 'bpmn:DataStore')) {
// For data objects, only update the flowElements for new data objects, and set the parent so it doesn't get moved.
if (typeof (businessObject.$parent) === 'undefined') {
const flowElements = realParent.get('flowElements');
@ -60,15 +57,15 @@ export default class DataObjectInterceptor extends CommandInterceptor {
};
/**
* For DataObjectReferences only ...
* Prevent this from calling the CreateDataObjectBehavior in BPMN-js, as it will
* attempt to crete a dataObject immediately. We can't create the dataObject until
* For DataStoreReferences only ...
* Prevent this from calling the CreateDataStoreBehavior in BPMN-js, as it will
* attempt to crete a dataStore immediately. We can't create the dataStore until
* we know where it is placed - as we want to reuse data objects of the parent when
* possible */
this.preExecute(['shape.create'], HIGH_PRIORITY, function (event) {
const { context } = event;
const { shape } = context;
if (is(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {
if (is(shape, 'bpmn:DataStoreReference') && shape.type !== 'label') {
event.stopPropagation();
}
});
@ -79,17 +76,17 @@ export default class DataObjectInterceptor extends CommandInterceptor {
this.executed(['shape.create'], HIGH_PRIORITY, function (event) {
const { context } = event;
const { shape } = context;
if (is(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {
if (is(shape, 'bpmn:DataStoreReference') && shape.type !== 'label') {
const process = shape.parent.businessObject;
const existingDataObjects = findDataObjects(process);
let dataObject;
if (existingDataObjects.length > 0) {
dataObject = existingDataObjects[0];
const existingDataStores = findDataStores(process);
let dataStore;
if (existingDataStores.length > 0) {
dataStore = existingDataStores[0];
} else {
dataObject = bpmnFactory.create('bpmn:DataObject');
dataStore = bpmnFactory.create('bpmn:DataStore');
}
// set the reference to the DataObject
shape.businessObject.dataObjectRef = dataObject;
// set the reference to the DataStore
shape.businessObject.dataStoreRef = dataStore;
shape.businessObject.$parent = process;
}
});
@ -100,29 +97,29 @@ export default class DataObjectInterceptor extends CommandInterceptor {
this.postExecuted(['shape.create'], HIGH_PRIORITY, function (event) {
const { context } = event;
const { shape } = context;
// set the reference to the DataObject
// set the reference to the DataStore
// Update the name of the reference to match the data object's id.
if (is(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {
if (is(shape, 'bpmn:DataStoreReference') && shape.type !== 'label') {
commandStack.execute('element.updateProperties', {
element: shape,
moddleElement: shape.businessObject,
properties: {
name: idToHumanReadableName(shape.businessObject.dataObjectRef.id),
name: idToHumanReadableName(shape.businessObject.dataStoreRef.id),
},
});
}
});
/**
* Don't remove the associated DataObject, unless all references to that data object
* Don't remove the associated DataStore, unless all references to that data object
* Difficult to do given placement of this logic in the BPMN Updater, so we have
* to manually handle the removal.
*/
this.executed(['shape.delete'], HIGH_PRIORITY, function (event) {
const { context } = event;
const { shape } = context;
if (is(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {
const dataObject = shape.businessObject.dataObjectRef;
if (is(shape, 'bpmn:DataStoreReference') && shape.type !== 'label') {
const dataStore = shape.businessObject.dataStoreRef;
let parent = shape.businessObject.$parent;
if (parent.processRef) {
// Our immediate parent may be a pool, so we need to get the process
@ -130,14 +127,14 @@ export default class DataObjectInterceptor extends CommandInterceptor {
}
const flowElements = parent.get('flowElements');
collectionRemove(flowElements, shape.businessObject);
const references = findDataObjectReferences(flowElements, dataObject.id);
const references = findDataStoreReferences(flowElements, dataStore.id);
if (references.length === 0) {
const dataFlowElements = dataObject.$parent.get('flowElements');
collectionRemove(dataFlowElements, dataObject);
const dataFlowElements = dataStore.$parent.get('flowElements');
collectionRemove(dataFlowElements, dataStore);
}
}
});
}
}
DataObjectInterceptor.$inject = ['eventBus', 'bpmnFactory', 'commandStack', 'bpmnUpdater'];
DataStoreInterceptor.$inject = ['eventBus', 'bpmnFactory', 'commandStack', 'bpmnUpdater'];

View File

@ -6,7 +6,7 @@ import {
import { getBusinessObject, is } from 'bpmn-js/lib/util/ModelUtil';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
import { findDataObject } from './DataObjectHelpers';
import { findDataStore } from './DataStoreHelpers';
const HIGH_PRIORITY = 1500;
@ -14,26 +14,26 @@ const HIGH_PRIORITY = 1500;
* Work in progress -- render data object references in red if they are
* not valid.
*/
export default class DataObjectRenderer extends BaseRenderer {
export default class DataStoreRenderer extends BaseRenderer {
constructor(eventBus, bpmnRenderer) {
super(eventBus, HIGH_PRIORITY);
this.bpmnRenderer = bpmnRenderer;
}
canRender(element) {
return isAny(element, [ 'bpmn:DataObjectReference' ]) && !element.labelTarget;
return isAny(element, [ 'bpmn:DataStoreReference' ]) && !element.labelTarget;
}
drawShape(parentNode, element) {
const shape = this.bpmnRenderer.drawShape(parentNode, element);
if (is(element, 'bpmn:DataObjectReference')) {
if (is(element, 'bpmn:DataStoreReference')) {
let businessObject = getBusinessObject(element);
let dataObject = businessObject.dataObjectRef;
if (dataObject && dataObject.id) {
let dataStore = businessObject.dataStoreRef;
if (dataStore && dataStore.id) {
let parentObject = businessObject.$parent;
dataObject = findDataObject(parentObject, dataObject.id);
dataStore = findDataStore(parentObject, dataStore.id);
}
if (!dataObject) {
if (!dataStore) {
svgAttr(shape, 'stroke', 'red');
}
return shape;
@ -41,4 +41,4 @@ export default class DataObjectRenderer extends BaseRenderer {
}
}
DataObjectRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];
DataStoreRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];

View File

@ -1,5 +1,5 @@
/**
* Custom Rules for the DataObject - Rules allow you to prevent an
* Custom Rules for the DataStore - Rules allow you to prevent an
* action from happening in the diagram, such as dropping an element
* where it doesn't belong.
*
@ -12,13 +12,13 @@ import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
import inherits from 'inherits-browser';
import { is } from 'bpmn-js/lib/util/ModelUtil';
export default function DataObjectRules(eventBus) {
export default function DataStoreRules(eventBus) {
RuleProvider.call(this, eventBus);
}
inherits(DataObjectRules, RuleProvider);
inherits(DataStoreRules, RuleProvider);
const HIGH_PRIORITY = 1500;
DataObjectRules.prototype.init = function() {
DataStoreRules.prototype.init = function() {
this.addRule('elements.move', HIGH_PRIORITY,function(context) {
let elements = context.shapes;
let target = context.target;
@ -28,12 +28,12 @@ DataObjectRules.prototype.init = function() {
function canDrop(elements, target) {
for (let element of elements) {
if (is(element, 'bpmn:DataObjectReference') && element.parent && target) {
if (is(element, 'bpmn:DataStoreReference') && element.parent && target) {
return target === element.parent;
}
// Intentionally returning null here to allow other rules to fire.
}
}
DataObjectRules.prototype.canDrop = canDrop;
DataObjectRules.$inject = [ 'eventBus' ];
DataStoreRules.prototype.canDrop = canDrop;
DataStoreRules.$inject = [ 'eventBus' ];

View File

@ -1,19 +1,19 @@
import DataObjectInterceptor from './DataObjectInterceptor';
import DataObjectRules from './DataObjectRules';
import DataStoreInterceptor from './DataStoreInterceptor';
import DataStoreRules from './DataStoreRules';
import RulesModule from 'diagram-js/lib/features/rules';
import DataObjectRenderer from './DataObjectRenderer';
import DataObjectPropertiesProvider from './propertiesPanel/DataObjectPropertiesProvider';
import DataStoreRenderer from './DataStoreRenderer';
import DataStorePropertiesProvider from './propertiesPanel/DataStorePropertiesProvider';
export default {
__depends__: [
RulesModule
],
__init__: [ 'dataInterceptor', 'dataObjectRules', 'dataObjectRenderer', 'dataObjectPropertiesProvider' ],
dataInterceptor: [ 'type', DataObjectInterceptor ],
dataObjectRules: [ 'type', DataObjectRules ],
dataObjectRenderer: [ 'type', DataObjectRenderer ],
dataObjectPropertiesProvider: [ 'type', DataObjectPropertiesProvider ]
__init__: [ 'dataInterceptor', 'dataStoreRules', 'dataStoreRenderer', 'dataStorePropertiesProvider' ],
dataInterceptor: [ 'type', DataStoreInterceptor ],
dataStoreRules: [ 'type', DataStoreRules ],
dataStoreRenderer: [ 'type', DataStoreRenderer ],
dataStorePropertiesProvider: [ 'type', DataStorePropertiesProvider ]
};

View File

@ -1,5 +1,5 @@
import { ListGroup } from '@bpmn-io/properties-panel';
import { DataObjectArray } from './DataObjectArray';
import { DataStoreArray } from './DataStoreArray';
/**
* Also allows you to select which Data Objects are available
@ -12,16 +12,16 @@ import { DataObjectArray } from './DataObjectArray';
export default function(element, moddle) {
const groupSections = [];
const dataObjectArray = {
id: 'editDataObjects',
const dataStoreArray = {
id: 'editDataStores',
element,
label: 'Available Data Objects',
component: ListGroup,
...DataObjectArray({ element, moddle })
...DataStoreArray({ element, moddle })
};
if (dataObjectArray.items) {
groupSections.push(dataObjectArray);
if (dataStoreArray.items) {
groupSections.push(dataStoreArray);
}
return groupSections;

View File

@ -6,17 +6,17 @@ import {
import { without } from 'min-dash';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import {
findDataObjects,
findDataObjectReferenceShapes,
findDataStores,
findDataStoreReferenceShapes,
idToHumanReadableName,
} from '../DataObjectHelpers';
} from '../DataStoreHelpers';
/**
* Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
* @param props
* @constructor
*/
export function DataObjectArray(props) {
export function DataStoreArray(props) {
const { moddle } = props;
const { element } = props;
const { commandStack } = props;
@ -30,21 +30,21 @@ export function DataObjectArray(props) {
process = element.businessObject.processRef;
}
const dataObjects = findDataObjects(process);
const items = dataObjects.map((dataObject, index) => {
const dataStores = findDataStores(process);
const items = dataStores.map((dataStore, index) => {
const id = `${process.id}-dataObj-${index}`;
return {
id,
label: dataObject.id,
entries: DataObjectGroup({
label: dataStore.id,
entries: DataStoreGroup({
idPrefix: id,
element,
dataObject,
dataStore,
}),
autoFocusEntry: `${id}-dataObject`,
autoFocusEntry: `${id}-dataStore`,
remove: removeFactory({
element,
dataObject,
dataStore,
process,
commandStack,
elementRegistry,
@ -54,11 +54,11 @@ export function DataObjectArray(props) {
function add(event) {
event.stopPropagation();
const newDataObject = moddle.create('bpmn:DataObject');
const newDataStore = moddle.create('bpmn:DataStore');
const newElements = process.get('flowElements');
newDataObject.id = moddle.ids.nextPrefixed('DataObject_');
newDataObject.$parent = process;
newElements.push(newDataObject);
newDataStore.id = moddle.ids.nextPrefixed('DataStore_');
newDataStore.$parent = process;
newElements.push(newDataStore);
commandStack.execute('element.updateModdleProperties', {
element,
moddleElement: process,
@ -72,7 +72,7 @@ export function DataObjectArray(props) {
}
function removeFactory(props) {
const { element, dataObject, process, commandStack } = props;
const { element, dataStore, process, commandStack } = props;
return function (event) {
event.stopPropagation();
@ -80,33 +80,33 @@ function removeFactory(props) {
element,
moddleElement: process,
properties: {
flowElements: without(process.get('flowElements'), dataObject),
flowElements: without(process.get('flowElements'), dataStore),
},
});
// When a data object is removed, remove all references as well.
const references = findDataObjectReferenceShapes(element.children, dataObject.id);
const references = findDataStoreReferenceShapes(element.children, dataStore.id);
for (const ref of references) {
commandStack.execute('shape.delete', { shape: ref });
}
};
}
function DataObjectGroup(props) {
const { idPrefix, dataObject } = props;
function DataStoreGroup(props) {
const { idPrefix, dataStore } = props;
return [
{
id: `${idPrefix}-dataObject`,
component: DataObjectTextField,
id: `${idPrefix}-dataStore`,
component: DataStoreTextField,
isEdited: isTextFieldEntryEdited,
idPrefix,
dataObject,
dataStore,
},
];
}
function DataObjectTextField(props) {
const { idPrefix, element, parameter, dataObject } = props;
function DataStoreTextField(props) {
const { idPrefix, element, parameter, dataStore } = props;
const commandStack = useService('commandStack');
const debounce = useService('debounceInput');
@ -114,14 +114,14 @@ function DataObjectTextField(props) {
const setValue = (value) => {
commandStack.execute('element.updateModdleProperties', {
element,
moddleElement: dataObject,
moddleElement: dataStore,
properties: {
id: value,
},
});
// Also update the label of all the references
const references = findDataObjectReferenceShapes(element.children, dataObject.id);
const references = findDataStoreReferenceShapes(element.children, dataStore.id);
for (const ref of references) {
commandStack.execute('element.updateProperties', {
element: ref,
@ -135,7 +135,7 @@ function DataObjectTextField(props) {
};
const getValue = () => {
return dataObject.id;
return dataStore.id;
};
return TextFieldEntry({

View File

@ -1,11 +1,11 @@
import { is, isAny } from 'bpmn-js/lib/util/ModelUtil';
import { ListGroup, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
import { DataObjectSelect } from './DataObjectSelect';
import { DataObjectArray } from './DataObjectArray';
import { DataStoreSelect } from './DataStoreSelect';
import { DataStoreArray } from './DataStoreArray';
const LOW_PRIORITY = 500;
export default function DataObjectPropertiesProvider(
export default function DataStorePropertiesProvider(
propertiesPanel,
translate,
moddle,
@ -14,9 +14,9 @@ export default function DataObjectPropertiesProvider(
) {
this.getGroups = function (element) {
return function (groups) {
if (is(element, 'bpmn:DataObjectReference')) {
if (is(element, 'bpmn:DataStoreReference')) {
groups.push(
createDataObjectSelector(element, translate, moddle, commandStack)
createDataStoreSelector(element, translate, moddle, commandStack)
);
}
if (
@ -24,7 +24,7 @@ export default function DataObjectPropertiesProvider(
(is(element, 'bpmn:SubProcess') && !element.collapsed)
) {
groups.push(
createDataObjectEditor(
createDataStoreEditor(
element,
translate,
moddle,
@ -39,7 +39,7 @@ export default function DataObjectPropertiesProvider(
propertiesPanel.registerProvider(LOW_PRIORITY, this);
}
DataObjectPropertiesProvider.$inject = [
DataStorePropertiesProvider.$inject = [
'propertiesPanel',
'translate',
'moddle',
@ -54,15 +54,15 @@ DataObjectPropertiesProvider.$inject = [
* @param moddle
* @returns entries
*/
function createDataObjectSelector(element, translate, moddle, commandStack) {
function createDataStoreSelector(element, translate, moddle, commandStack) {
return {
id: 'data_object_properties',
label: translate('Data Object Properties'),
entries: [
{
id: 'selectDataObject',
id: 'selectDataStore',
element,
component: DataObjectSelect,
component: DataStoreSelect,
isEdited: isTextFieldEntryEdited,
moddle,
commandStack,
@ -79,22 +79,22 @@ function createDataObjectSelector(element, translate, moddle, commandStack) {
* @param moddle
* @returns entries
*/
function createDataObjectEditor(
function createDataStoreEditor(
element,
translate,
moddle,
commandStack,
elementRegistry
) {
const dataObjectArray = {
id: 'editDataObjects',
const dataStoreArray = {
id: 'editDataStores',
element,
label: 'Data Objects',
component: ListGroup,
...DataObjectArray({ element, moddle, commandStack, elementRegistry }),
...DataStoreArray({ element, moddle, commandStack, elementRegistry }),
};
if (dataObjectArray.items) {
return dataObjectArray;
if (dataStoreArray.items) {
return dataStoreArray;
}
}

View File

@ -1,6 +1,6 @@
import {useService } from 'bpmn-js-properties-panel';
import { SelectEntry } from '@bpmn-io/properties-panel';
import {findDataObjects, idToHumanReadableName} from '../DataObjectHelpers';
import {findDataStores, idToHumanReadableName} from '../DataStoreHelpers';
/**
* Finds the value of the given type within the extensionElements
@ -19,26 +19,26 @@ import {findDataObjects, idToHumanReadableName} from '../DataObjectHelpers';
*
* @returns {string|null|*}
*/
export function DataObjectSelect(props) {
export function DataStoreSelect(props) {
const element = props.element;
const commandStack = props.commandStack;
const debounce = useService('debounceInput');
const getValue = () => {
return element.businessObject.dataObjectRef.id
return element.businessObject.dataStoreRef.id
}
const setValue = value => {
const businessObject = element.businessObject;
const dataObjects = findDataObjects(businessObject.$parent)
for (const flowElem of dataObjects) {
if (flowElem.$type === 'bpmn:DataObject' && flowElem.id === value) {
const dataStores = findDataStores(businessObject.$parent)
for (const flowElem of dataStores) {
if (flowElem.$type === 'bpmn:DataStore' && flowElem.id === value) {
commandStack.execute('element.updateModdleProperties', {
element,
moddleElement: businessObject,
properties: {
dataObjectRef: flowElem
dataStoreRef: flowElem
}
});
commandStack.execute('element.updateProperties', {
@ -55,16 +55,16 @@ export function DataObjectSelect(props) {
const getOptions = value => {
const businessObject = element.businessObject;
const parent = businessObject.$parent;
let dataObjects = findDataObjects(parent);
let dataStores = findDataStores(parent);
let options = [];
dataObjects.forEach(dataObj => {
dataStores.forEach(dataObj => {
options.push({label: dataObj.id, value: dataObj.id})
});
return options;
}
return <SelectEntry
id={'selectDataObject'}
id={'selectDataStore'}
element={element}
description={"Select the Data Object this represents."}
label={"Which Data Object does this reference?"}