feat(label-editing): enable direct editing for group labels

* Adds external label for Groups
* Modifies referenced categoryValue

Closes #955

lib/features/label-editing/LabelEditingProvider.js

@@ -279,7 +279,7 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
       paddingTop = 7 * zoom,
       paddingBottom = 4 * zoom;
 
-  // external labels for events, data elements, gateways and connections
+  // external labels for events, data elements, gateways, groups and connections
   if (target.labelTarget) {
     assign(bounds, {
       width: width,

lib/features/label-editing/LabelUtil.js

@@ -16,6 +16,21 @@ function getLabelAttr(semantic) {
   if (is(semantic, 'bpmn:TextAnnotation')) {
     return 'text';
   }
+
+  if (is(semantic, 'bpmn:Group')) {
+    return 'categoryValueRef';
+  }
+}
+
+function getCategoryValue(semantic) {
+  var categoryValueRef = semantic['categoryValueRef'];
+
+  if (!categoryValueRef) {
+    return '';
+  }
+
+
+  return categoryValueRef.value || '';
 }
 
 export function getLabel(element) {
@@ -23,6 +38,12 @@ export function getLabel(element) {
       attr = getLabelAttr(semantic);
 
   if (attr) {
+
+    if (attr === 'categoryValueRef') {
+
+      return getCategoryValue(semantic);
+    }
+
     return semantic[attr] || '';
   }
 }
@@ -33,7 +54,13 @@ export function setLabel(element, text, isExternal) {
       attr = getLabelAttr(semantic);
 
   if (attr) {
-    semantic[attr] = text;
+
+    if (attr === 'categoryValueRef') {
+      semantic['categoryValueRef'].value = text;
+    } else {
+      semantic[attr] = text;
+    }
+
   }
 
   return element;

lib/features/label-editing/cmd/UpdateLabelHandler.js

@@ -11,7 +11,6 @@ import {
 } from '../../../util/LabelUtil';
 
 import {
-  getBusinessObject,
   is
 } from '../../../util/ModelUtil';
 
@@ -103,9 +102,7 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
       return;
     }
 
-    var bo = getBusinessObject(label);
+    var text = getLabel(label);
-
-    var text = bo.name || bo.text;
 
     // don't resize without text
     if (!text) {

lib/features/rules/BpmnRules.js

@@ -255,7 +255,7 @@ function isTextAnnotation(element) {
 }
 
 function isGroup(element) {
-  return is(element, 'bpmn:Group');
+  return is(element, 'bpmn:Group') && !element.labelTarget;
 }
 
 function isCompensationBoundary(element) {

lib/import/BpmnImporter.js

@@ -17,6 +17,10 @@ import {
   isExpanded
 } from '../util/DiUtil';
 
+import {
+  getLabel
+} from '../features/label-editing/LabelUtil';
+
 import {
   elementToString
 } from './Util';
@@ -182,7 +186,7 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
     }));
   }
   // (optional) LABEL
-  if (isLabelExternal(semantic) && semantic.name) {
+  if (isLabelExternal(semantic) && getLabel(element)) {
     this.addLabel(semantic, element);
   }
 
@@ -239,7 +243,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
 
   bounds = getExternalLabelBounds(semantic, element);
 
-  text = semantic.name;
+  text = getLabel(element);
 
   if (text) {
     // get corrected bounds from actual layouted text
@@ -250,7 +254,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
     id: semantic.id + '_label',
     labelTarget: element,
     type: 'label',
-    hidden: element.hidden || !semantic.name,
+    hidden: element.hidden || !getLabel(element),
     x: Math.round(bounds.x),
     y: Math.round(bounds.y),
     width: Math.round(bounds.width),

lib/util/LabelUtil.js

@@ -27,7 +27,8 @@ export function isLabelExternal(semantic) {
          is(semantic, 'bpmn:DataInput') ||
          is(semantic, 'bpmn:DataOutput') ||
          is(semantic, 'bpmn:SequenceFlow') ||
-         is(semantic, 'bpmn:MessageFlow');
+         is(semantic, 'bpmn:MessageFlow') ||
+         is(semantic, 'bpmn:Group');
 }
 
 /**
@@ -97,6 +98,11 @@ export function getExternalLabelMid(element) {
 
   if (element.waypoints) {
     return getFlowLabelPosition(element.waypoints);
+  } else if (is(element, 'bpmn:Group')) {
+    return {
+      x: element.x + element.width / 2,
+      y: element.y + DEFAULT_LABEL_SIZE.height / 2
+    };
   } else {
     return {
       x: element.x + element.width / 2,

test/spec/features/label-editing/LabelEditing.bpmn

@@ -67,7 +67,12 @@
     <bpmn:dataObject id="DataObject_1rq8hb8" />
     <bpmn:dataStoreReference id="DataStoreReference_1" />
     <bpmn:association id="Association_0ckvfj2" sourceRef="SubProcess_1" targetRef="TextAnnotation_1" />
+    <bpmn:group id="Group_1" categoryValueRef="CategoryValue_1" />
+    <bpmn:group id="Group_2" />
   </bpmn:process>
+  <bpmn:category id="Category_1">
+    <bpmn:categoryValue id="CategoryValue_1" value="FOO" />
+  </bpmn:category>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1o0amh9">
       <bpmndi:BPMNShape id="Participant_15tkgjw_di" bpmnElement="Participant_1">
@@ -184,17 +189,26 @@
         <dc:Bounds x="161" y="646" width="600" height="250" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="DataOutput_di" bpmnElement="DataOutput">
-        <dc:Bounds x="265" y="150" width="34" height="40"/>
+        <dc:Bounds x="265" y="150" width="34" height="40" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds height="12" width="30" x="265" y="195"/>
+          <dc:Bounds x="265" y="195" width="30" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="DataInput_di" bpmnElement="DataInput">
-        <dc:Bounds x="220" y="150" width="34" height="40"/>
+        <dc:Bounds x="220" y="150" width="34" height="40" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds height="12" width="30" x="220" y="200"/>
+          <dc:Bounds x="220" y="200" width="30" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Group_1_di" bpmnElement="Group_1">
+        <dc:Bounds x="195" y="390" width="225" height="190" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="296" y="397" width="24" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Group_2_di" bpmnElement="Group_2">
+        <dc:Bounds x="555" y="390" width="85" height="200" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/features/label-editing/LabelEditingProviderSpec.js

@@ -411,6 +411,11 @@ describe('features - label-editing', function() {
 
       it('data output', directEdit('DataOutput'));
 
+
+      it('group', directEdit('Group_1'));
+
+      it('group via label', directEdit('Group_1_label'));
+
     });
 
   });

test/spec/features/modeling/UpdateLabel.bpmn

@@ -7,7 +7,11 @@
     <bpmn:textAnnotation id="TextAnnotation_1">
       <bpmn:text></bpmn:text>
     </bpmn:textAnnotation>
+    <bpmn:group id="Group_1" categoryValueRef="CategoryValue_1" />
   </bpmn:process>
+  <bpmn:category id="Category_1">
+    <bpmn:categoryValue id="CategoryValue_1" />
+  </bpmn:category>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
       <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
@@ -25,6 +29,9 @@
       <bpmndi:BPMNShape id="TextAnnotation_1_di" bpmnElement="TextAnnotation_1">
         <dc:Bounds x="426" y="220" width="100" height="30" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Group_1_di" bpmnElement="Group_1">
+        <dc:Bounds x="165" y="190" width="150" height="120" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/features/modeling/UpdateLabelSpec.js

@@ -134,6 +134,20 @@ describe('features/modeling - update label', function() {
   ));
 
 
+  it('should change value of group', inject(function(modeling, elementRegistry) {
+
+    // given
+    var group_1 = elementRegistry.get('Group_1');
+
+    // when
+    modeling.updateLabel(group_1, 'foo');
+
+    // then
+    expect(group_1.businessObject.categoryValueRef.value).to.equal('foo');
+    expect(group_1.label).to.exist;
+  }));
+
+
   it('should propertly fire events.changed after event name change', inject(
     function(modeling, elementRegistry, eventBus) {