fix(textarea-size-zoom): fixes the size of a label textbox on low zoom levels

Closes #477

lib/features/label-editing/LabelEditingProvider.js

@@ -91,13 +91,28 @@ LabelEditingProvider.prototype.activate = function(element) {
     bbox.y = bbox.mid.y - bbox.height / 2;
   }
 
-  // adjust for expanded sub processes
-  if (is(element, 'bpmn:SubProcess') && isExpanded(element)) {
+  // ajust minumum size for task and activities
+  if ((is(element, 'bpmn:Task') || is(element, 'bpmn:Activity') )) {
 
+    if (bbox.width < 100) {
+      bbox.width = 100;
+      bbox.x = bbox.mid.x - bbox.width / 2;
+    }
+
+    if (bbox.height < 80) {
+      bbox.height = 80;
+      bbox.y = bbox.mid.y - bbox.height / 2;
+    }
+  }
+
+  // adjust for expanded sub processes and collapsed pools
+  if ((is(element, 'bpmn:SubProcess') && isExpanded(element)) ||
+    (is(element, 'bpmn:Participant') && !isExpanded(element))) {
+
+    bbox.width = element.width;
     bbox.height = MIN_BOUNDS.height;
 
-    bbox.x = bbox.mid.x - bbox.width / 2;
-    bbox.y = bbox.y + 10 - bbox.height / 2;
+    bbox.x = bbox.mid.x - element.width / 2;
   }
 
   return { bounds: bbox, text: text };

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

@@ -25,7 +25,6 @@ function triggerKeyEvent(element, event, code) {
   return element.dispatchEvent(e);
 }
 
-
 describe('features - label-editing', function() {
 
   var diagramXML = require('../../../fixtures/bpmn/features/label-editing/labels.bpmn');
@@ -338,4 +337,51 @@ describe('features - label-editing', function() {
     });
   });
 
+
+  describe('sizing', function() {
+
+    var testModules = [ labelEditingModule, coreModule ];
+
+    beforeEach(bootstrapViewer(diagramXML, {
+      modules: testModules,
+      canvas: { deferUpdate: false }
+    }));
+
+
+    describe('textbox should have minimum size', function() {
+
+      function testTextboxSizing(elementId, zoom, width, height) {
+        return inject(function(canvas, elementRegistry, directEditing){
+          // zoom in
+          canvas.zoom(zoom);
+          // grab one element
+          var shape = elementRegistry.get(elementId);
+          // activate label editing
+          directEditing.activate(shape);
+          // grab the textarea
+          var textbox = directEditing._textbox;
+          // then
+          expect(textbox.textarea.offsetWidth).to.be.equal(width);
+          expect(textbox.textarea.offsetHeight).to.be.equal(height);
+        });
+      }
+
+      it('task', testTextboxSizing('task-nested-embedded', 1, 100, 80));
+      it('task, low zoom', testTextboxSizing('task-nested-embedded', 1, 100, 80));
+
+      it('call activity', testTextboxSizing('call-activity', 1, 100, 80));
+      it('call activity, low zoom', testTextboxSizing('call-activity', 0.4, 100, 80));
+
+      it('subprocess collapsed', testTextboxSizing('subprocess-collapsed', 1, 100, 80));
+      it('subprocess collapsed, low zoom', testTextboxSizing('subprocess-collapsed', 0.4, 100, 80));
+
+      it('subprocess expanded', testTextboxSizing('subprocess-expanded', 1, 200, 50));
+      it('subprocess expanded, low zoom', testTextboxSizing('subprocess-expanded', 0.4, 200, 50));
+
+      it('collapsed pool expanded', testTextboxSizing('collapsed-pool', 1, 385, 50));
+      it('collapsed pool, low zoom', testTextboxSizing('collapsed-pool', 0.4, 385, 50));
+    });
+
+  });
+
 });