Add LabelEditing Provider

app/spiffworkflow/DataObject/DataObjectLabelEditingProvider.js

@@ -0,0 +1,65 @@
+import { is, isAny } from 'bpmn-js/lib/util/ModelUtil';
+import { ListGroup, isTextFieldEntryEdited, TextFieldEntry } from '@bpmn-io/properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
+
+const LOW_PRIORITY = 500;
+
+export default function DataObjectLabelEditingProvider(eventBus, canvas, directEditing, commandStack, modeling) {
+
+    console.log('DataObjectLabelEditingProvider', eventBus, canvas, directEditing, commandStack, modeling, this);
+
+    directEditing.registerProvider(LOW_PRIORITY, this);
+
+    let el;
+
+    // listen to dblclick on non-root elements
+    eventBus.on('element.dblclick', function (event) {
+        const { element } = event;
+        if (is(element.businessObject, 'bpmn:DataObjectReference')) {
+            let label = element.businessObject.name;
+            label = label.replace(/\s*\[.*?\]\s*$/, '');
+            modeling.updateLabel(element, label);
+            directEditing.activate(element);
+            el = element;
+            console.log('IS ACTIVE', directEditing.isActive(element))
+
+        }
+    });
+
+    eventBus.on('directEditing.activate', async function (event) {
+        console.log('directEditing.activate', event);
+        const { element } = event.active;
+        if (is(element.businessObject, 'bpmn:DataObjectReference')) {
+            console.log('directEditing.activate bpmn:DataObjectReference', element, directEditing);
+            // modeling.updateLabel(element, 'newLabel');
+            // directEditing.activate(element);
+        }
+    });
+
+    eventBus.on('directEditing.complete', function (event) {
+        const element = el;
+        if (element && is(element.businessObject, 'bpmn:DataObjectReference')) {
+            const dataState = element.businessObject.dataState && element.businessObject.dataState.name;
+            let newLabel = element.businessObject.name;
+
+            // Append the data state if it exists
+            if (dataState) {
+                newLabel += ` [${dataState}]`;
+            }
+
+            // Update the label with the data state
+            modeling.updateLabel(element, newLabel);
+
+            el = undefined;
+        }
+    });
+
+}
+
+DataObjectLabelEditingProvider.$inject = [
+    'eventBus',
+    'canvas',
+    'directEditing',
+    'commandStack',
+    'modeling'
+];

app/spiffworkflow/DataObject/index.js

@@ -3,6 +3,7 @@ import DataObjectRules from './DataObjectRules';
 import RulesModule from 'diagram-js/lib/features/rules';
 import DataObjectRenderer from './DataObjectRenderer';
 import DataObjectPropertiesProvider from './propertiesPanel/DataObjectPropertiesProvider';
+import DataObjectLabelEditingProvider from './DataObjectLabelEditingProvider';
 
 
 export default {
@@ -13,7 +14,8 @@ export default {
   dataInterceptor: [ 'type', DataObjectInterceptor ],
   dataObjectRules: [ 'type', DataObjectRules ],
   dataObjectRenderer: [ 'type', DataObjectRenderer ],
-  dataObjectPropertiesProvider: [ 'type', DataObjectPropertiesProvider ]
+  dataObjectPropertiesProvider: [ 'type', DataObjectPropertiesProvider ],
+  dataObjectLabelEditingProvider: [ 'type', DataObjectLabelEditingProvider ]
 };
 
 

app/spiffworkflow/DataObject/propertiesPanel/DataObjectPropertiesProvider.js

@@ -19,53 +19,6 @@ export default function DataObjectPropertiesProvider(
   this.getGroups = function (element) {
     return function (groups) {
       if (is(element, 'bpmn:DataObjectReference')) {
-
-        eventBus.on('element.dblclick', 1000, function (event) {
-          console.log('element.dblclick', event);
-          // const element = event.element;
-          // modeling.updateLabel(element, 'newLabel');
-          // // eventBus.fire('directEditing.activate', element);
-          // eventBus.fire('directEditing.activate', {
-          //   element: element
-          // });
-        });
-
-        eventBus.on('directEditing.activate', async function (event) {
-          console.log('directEditing.activate', event);
-          const { element, provider, context } = event.active;
-          // console.log('element', element);
-          // console.log('provider', provider);
-          // console.log('context', context);
-          // console.log('modeling', modeling);
-
-          await modeling.updateLabel(element, 'newLabel');
-          // provider.update(element, 'newLabel', context);
-          provider.activate(element);
-        });
-
-        eventBus.on('directEditing.complete', function (event) {
-          console.log('directEditing.complete', event);
-        });
-
-        // eventBus.on('directEditing.activate', function (event) {
-        //   // Direct editing started
-        //   console.log('directEditing.activate', event);
-        //   event.active.context.text = 'elele'
-        //   const element = event.active.element;
-        //   // event.active.element.label = "jeje";
-        //   // event.active.element.set('label', 'jke');
-        //   event.active.element.name = "jeje";
-        //   element.businessObject.name = "jeje";
-        //   element.businessObject.dataObjectRef.name = "jeje";
-        //   const originalLabel = element.businessObject.name;
-        //   const labelWithoutState = originalLabel.split(' [')[0];
-        //   // modeling.updateProperties(element, { name: labelWithoutState });
-        //   // storeOriginalLabel(element, originalLabel);
-        // });
-
-
-
-        // Remove Name Input from default group entries
         const generalGroup = groups.find(group => group.id === 'general');
         if (generalGroup) {
           generalGroup.entries = generalGroup.entries.filter(entry => entry.id !== 'name');

app/spiffworkflow/index.js

@@ -6,6 +6,7 @@ import DataObjectInterceptor from './DataObject/DataObjectInterceptor';
 import DataObjectRules from './DataObject/DataObjectRules';
 import DataObjectRenderer from './DataObject/DataObjectRenderer';
 import DataObjectPropertiesProvider from './DataObject/propertiesPanel/DataObjectPropertiesProvider';
+import DataObjectLabelEditingProvider from './DataObject/DataObjectLabelEditingProvider';
 import DataStorePropertiesProvider from './DataStoreReference/propertiesPanel/DataStorePropertiesProvider';
 import DataStoreInterceptor from './DataStoreReference/DataStoreInterceptor';
 import ConditionsPropertiesProvider from './conditions/propertiesPanel/ConditionsPropertiesProvider';
@@ -24,6 +25,7 @@ export default {
     'dataObjectInterceptor',
     'dataObjectRules',
     'dataObjectPropertiesProvider',
+    'dataObjectLabelEditingProvider',
     'dataStoreInterceptor',
     'dataStorePropertiesProvider',
     'conditionsPropertiesProvider',
@@ -44,6 +46,7 @@ export default {
   dataObjectRules: ['type', DataObjectRules],
   dataObjectRenderer: ['type', DataObjectRenderer],
   dataObjectPropertiesProvider: ['type', DataObjectPropertiesProvider],
+  dataObjectLabelEditingProvider: ['type', DataObjectLabelEditingProvider],
   dataStoreInterceptor: ['type', DataStoreInterceptor],
   dataStorePropertiesProvider: ['type', DataStorePropertiesProvider],
   conditionsPropertiesProvider: ['type', ConditionsPropertiesProvider],