feat(draw+modeling): support lineHeight

* take numeric line height into account when
  rendering text labels
* take line height into account when directly
  editing labels
* use default line height of 1.2 for text rendering

Closes #803

lib/draw/TextRenderer.js

@@ -2,23 +2,29 @@ import { assign } from 'min-dash';
 
 import TextUtil from 'diagram-js/lib/util/Text';
 
+var DEFAULT_FONT_SIZE = 12;
+var LINE_HEIGHT_RATIO = 1.2;
+
 
 export default function TextRenderer(config) {
 
   var defaultStyle = assign({
-    fontFamily: 'Arial, sans-serif',
-    fontSize: 12
+    fontFamily: 'sans-serif',
+    fontSize: DEFAULT_FONT_SIZE,
+    fontWeight: 'normal',
+    lineHeight: LINE_HEIGHT_RATIO
   }, config && config.defaultStyle || {});
 
+  var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;
+
   var externalStyle = assign({}, defaultStyle, {
-    fontSize: parseInt(defaultStyle.fontSize, 10) - 1
+    fontSize: fontSize
   }, config && config.externalStyle || {});
 
   var textUtil = new TextUtil({
     style: defaultStyle
   });
 
-
   /**
    * Get the new bounds of an externally rendered,
    * layouted label.

lib/features/label-editing/LabelEditingProvider.js

@@ -17,18 +17,14 @@ import {
   isLabel
 } from '../../util/LabelUtil';
 
-var SMALL_FONT_SIZE = 11,
-    SMALL_LINE_HEIGHT = 13,
-    MEDIUM_FONT_SIZE = 12,
-    MEDIUM_LINE_HEIGHT = 14;
-
 
 export default function LabelEditingProvider(
     eventBus, canvas, directEditing,
-    modeling, resizeHandles) {
+    modeling, resizeHandles, textRenderer) {
 
   this._canvas = canvas;
   this._modeling = modeling;
+  this._textRenderer = textRenderer;
 
   directEditing.registerProvider(this);
 
@@ -109,7 +105,8 @@ LabelEditingProvider.$inject = [
   'canvas',
   'directEditing',
   'modeling',
-  'resizeHandles'
+  'resizeHandles',
+  'textRenderer'
 ];
 
 
@@ -203,13 +200,19 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
 
   var zoom = canvas.zoom();
 
-  // take zoom into account
-  var smallFontSize = SMALL_FONT_SIZE * zoom,
-      smallLineHeight = SMALL_LINE_HEIGHT * zoom,
-      mediumFontSize = MEDIUM_FONT_SIZE * zoom,
-      mediumLineHeight = MEDIUM_LINE_HEIGHT * zoom;
+  var defaultStyle = this._textRenderer.getDefaultStyle(),
+      externalStyle = this._textRenderer.getExternalStyle();
 
-  var style = {};
+  // take zoom into account
+  var externalFontSize = externalStyle.fontSize * zoom,
+      externalLineHeight = externalStyle.lineHeight,
+      defaultFontSize = defaultStyle.fontSize * zoom,
+      defaultLineHeight = defaultStyle.lineHeight;
+
+  var style = {
+    fontFamily: this._textRenderer.getDefaultStyle().fontFamily,
+    fontWeight: this._textRenderer.getDefaultStyle().fontWeight
+  };
 
   // adjust for expanded pools AND lanes
   if (is(element, 'bpmn:Lane') || isExpandedPool(element)) {
@@ -222,8 +225,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
 
     assign(style, {
-      fontSize: mediumFontSize + 'px',
-      lineHeight: mediumLineHeight + 'px',
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight,
       paddingTop: (7 * zoom) + 'px',
       paddingBottom: (7 * zoom) + 'px',
       paddingLeft: (5 * zoom) + 'px',
@@ -245,8 +248,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
 
     assign(style, {
-      fontSize: mediumFontSize + 'px',
-      lineHeight: mediumLineHeight + 'px',
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight,
       paddingTop: (7 * zoom) + 'px',
       paddingBottom: (7 * zoom) + 'px',
       paddingLeft: (5 * zoom) + 'px',
@@ -263,8 +266,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
 
     assign(style, {
-      fontSize: mediumFontSize + 'px',
-      lineHeight: mediumLineHeight + 'px',
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight,
       paddingTop: (7 * zoom) + 'px',
       paddingBottom: (7 * zoom) + 'px',
       paddingLeft: (5 * zoom) + 'px',
@@ -286,8 +289,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
 
     assign(style, {
-      fontSize: smallFontSize + 'px',
-      lineHeight: smallLineHeight + 'px',
+      fontSize: externalFontSize + 'px',
+      lineHeight: externalLineHeight,
       paddingTop: paddingTop + 'px',
       paddingBottom: paddingBottom + 'px'
     });
@@ -307,7 +310,7 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
       height: 0
     });
 
-    var height = smallFontSize + paddingTop + paddingBottom;
+    var height = externalFontSize + paddingTop + paddingBottom;
 
     assign(bounds, {
       width: width,
@@ -317,8 +320,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
 
     assign(style, {
-      fontSize: smallFontSize + 'px',
-      lineHeight: smallLineHeight + 'px',
+      fontSize: externalFontSize + 'px',
+      lineHeight: externalLineHeight,
       paddingTop: paddingTop + 'px',
       paddingBottom: paddingBottom + 'px'
     });
@@ -339,8 +342,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
       paddingBottom: (7 * zoom) + 'px',
       paddingLeft: (5 * zoom) + 'px',
       paddingRight: (5 * zoom) + 'px',
-      fontSize: mediumFontSize + 'px',
-      lineHeight: mediumLineHeight + 'px'
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight
     });
   }
 

test/spec/draw/TextRendererSpec.js

@@ -57,7 +57,8 @@ describe('draw - TextRenderer', function() {
       textRenderer: {
         defaultStyle: {
           fontFamily: 'monospace',
-          fontSize: '15px'
+          fontSize: '15px',
+          lineHeight: '24px'
         },
         externalStyle: {
           fontWeight: 'bold'
@@ -75,6 +76,7 @@ describe('draw - TextRenderer', function() {
       // then
       expect(defaultStyle.fontFamily).to.eql('monospace');
       expect(defaultStyle.fontSize).to.eql('15px');
+      expect(defaultStyle.lineHeight).to.eql('24px');
 
       expect(externalStyle.fontFamily).to.eql('monospace');
       expect(externalStyle.fontSize).to.eql(14);

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

@@ -13,7 +13,7 @@ import {
   getLabel
 } from 'lib/features/label-editing/LabelUtil';
 
-var MEDIUM_LINE_HEIGHT = 14;
+var MEDIUM_LINE_HEIGHT = 12 * 1.2;
 
 var DELTA = 3;
 

test/spec/features/modeling/LabelLayoutingSpec.js

@@ -240,7 +240,7 @@ describe('modeling - label layouting', function() {
 
         // then
         expect(Math.round(connection.label.x)).to.be.within(570, 575);
-        expect(Math.round(connection.label.y)).to.be.within(138, 139);
+        expect(Math.round(connection.label.y)).to.be.within(136, 138);
 
       }));
 
@@ -506,7 +506,7 @@ describe('modeling - label layouting', function() {
           dragging.end();
 
           // then
-          expect(connection.label.y - labelPosition.y).to.be.within(-76, -70);
+          expect(connection.label.y - labelPosition.y).to.be.within(-77, -73);
           expect(connection.label.x - labelPosition.x).to.be.within(-54, -51);
 
         }

test/spec/features/modeling/behavior/LabelBehaviorSpec.js

@@ -137,9 +137,9 @@ describe('behavior - LabelBehavior', function() {
           expect(elementRegistry.get(label.id)).to.exist;
 
           expect(label.x).to.within(298, 299);
-          expect(label.y).to.be.within(141, 142);
+          expect(label.y).to.be.within(140, 141);
           expect(label.width).to.be.within(15, 18);
-          expect(label.height).to.be.within(12, 14);
+          expect(label.height).to.be.within(13, 15);
         }
       ));
 

test/spec/import/elements/LabelSpec.js

@@ -47,7 +47,7 @@ describe('import - labels', function() {
 
           // then
           expect(eventLabelCenter.x).to.be.within(270, 272);
-          expect(eventLabelCenter.y).to.be.within(268, 270);
+          expect(eventLabelCenter.y).to.be.within(269, 271);
           expect(eventLabel.width).to.be.above(65);
           expect(eventLabel.height).to.be.above(20);