fix(outline): external label resize

Closes #2001
bpmn-io · Nov 2, 2023 · ed3bf2f · ed3bf2f
1 parent 9c71556
commit ed3bf2f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/lib/features/outline/OutlineProvider.js b/lib/features/outline/OutlineProvider.js
@@ -75,7 +75,8 @@ OutlineProvider.prototype.getOutline = function(element) {
       height: element.height - 4,
     }, OUTLINE_STYLE));
 
-  } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group' ])) {
+  } else if (
+    isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group' ])) {
     outline = svgCreate('rect');
 
     svgAttr(outline, assign({
@@ -125,6 +126,10 @@ OutlineProvider.prototype.getOutline = function(element) {
  */
 OutlineProvider.prototype.updateOutline = function(element, outline) {
 
+  if (isLabel(element)) {
+    return;
+  }
+
   if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
 
     svgAttr(outline, {

diff --git a/test/spec/features/outline/OutlineProvider.bpmn b/test/spec/features/outline/OutlineProvider.bpmn
@@ -9,7 +9,7 @@
     <bpmn:dataObject id="DataObject_0usa0me" />
     <bpmn:dataStoreReference id="DataStore" />
     <bpmn:subProcess id="SubProcess">
-      <bpmn:startEvent id="Event" />
+      <bpmn:startEvent id="Event" name="label" />
       <bpmn:task id="Task" />
       <bpmn:exclusiveGateway id="Gateway" />
     </bpmn:subProcess>
@@ -30,13 +30,16 @@
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Event_0dihp8i_di" bpmnElement="Event">
         <dc:Bounds x="460" y="322" width="36" height="36" />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Gateway_0px6pz2_di" bpmnElement="Gateway" isMarkerVisible="true">
-        <dc:Bounds x="665" y="315" width="50" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="466" y="365" width="24" height="14" />
+        </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Activity_0b3cy2o_di" bpmnElement="Task">
         <dc:Bounds x="530" y="300" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Gateway_0px6pz2_di" bpmnElement="Gateway" isMarkerVisible="true">
+        <dc:Bounds x="665" y="315" width="50" height="50" />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Group_1utiosm_di" bpmnElement="Group">
         <dc:Bounds x="200" y="179" width="140" height="300" />
       </bpmndi:BPMNShape>

diff --git a/test/spec/features/outline/OutlineProviderSpec.js b/test/spec/features/outline/OutlineProviderSpec.js
@@ -14,6 +14,9 @@ import {
   DATA_STORE_REFERENCE_OUTLINE_PATH
 } from 'lib/features/outline/OutlineUtil';
 
+import {
+  query as domQuery
+} from 'min-dom';
 
 describe('features/outline - outline provider', function() {
   var testModules = [
@@ -118,17 +121,40 @@ describe('features/outline - outline provider', function() {
 
   describe('update', function() {
 
+    describe('should update label', function() {
+
+      it('should update label according to label dimentions', inject(function(elementRegistry, selection, modeling) {
 
-    describe('should update dimensions on resize', function() {
+        // given
+        var event = elementRegistry.get('Event');
+        var externalLabel = event.label;
 
-      it('sub process', inject(function(elementRegistry, outline, selection, modeling) {
+        selection.select(externalLabel);
+        var outlineShape = domQuery('.selected .djs-outline', outlineShape);
+
+        // then
+        expect(outlineShape.getAttribute('width')).to.eql('34');
+        expect(outlineShape.getAttribute('height')).to.eql('24');
+
+        // when
+        modeling.updateLabel(externalLabel, 'fooooooooooooooo');
+
+        // then
+        expect(outlineShape.getAttribute('width')).to.eql('93');
+        expect(outlineShape.getAttribute('height')).to.eql('37');
+      }));
+
+    });
+
+
+    describe.only('should update dimensions on resize', function() {
+
+      it('sub process', inject(function(elementRegistry, outline, modeling) {
 
         // given
         var subProcess = elementRegistry.get('SubProcess');
         var outlineShape = outline.getOutline(subProcess);
 
-        selection.select(subProcess);
-
         // when
         modeling.resizeShape(subProcess, { x: 339, y: 142, width: 250, height: 250 });
         outline.updateShapeOutline(outlineShape, subProcess);
@@ -139,14 +165,12 @@ describe('features/outline - outline provider', function() {
       }));
 
 
-      it('group', inject(function(elementRegistry, outline, selection, modeling) {
+      it('group', inject(function(elementRegistry, outline, modeling) {
 
         // given
         var group = elementRegistry.get('Group');
         var outlineShape = outline.getOutline(group);
 
-        selection.select(group);
-
         // when
         modeling.resizeShape(group, { x: 339, y: 142, width: 250, height: 250 });
         outline.updateShapeOutline(outlineShape, group);