feat(util/Text): make text-layouting lineHeight aware

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 ___Note:__ Yet to be released changes appear here._
 
+* `FEAT`: support `lineHeight` in text render util ([#256](https://github.com/bpmn-io/diagram-js/pull/256))
+
 ## 2.1.1
 
 * `FIX`: correct code snippet to ES5

lib/util/Text.js

@@ -1,7 +1,6 @@
 import {
   isObject,
   assign,
-  pick,
   forEach,
   reduce
 } from 'min-dash';
@@ -49,14 +48,24 @@ function getTextBBox(text, fakeText) {
 
   fakeText.textContent = text;
 
+  var textBBox;
+
   try {
     var bbox,
         emptyLine = text === '';
 
-    // add dummy text, when line is empty to determine correct height
+    // add dummy text, when line is empty to
+    // determine correct height
     fakeText.textContent = emptyLine ? 'dummy' : text;
 
-    bbox = pick(fakeText.getBBox(), [ 'width', 'height' ]);
+    textBBox = fakeText.getBBox();
+
+    // take text rendering related horizontal
+    // padding into account
+    bbox = {
+      width: textBBox.width + textBBox.x * 2,
+      height: textBBox.height
+    };
 
     if (emptyLine) {
       // correct width
@@ -105,7 +114,12 @@ function fit(lines, fitLine, originalLine, textBBox) {
 
     lines.unshift(remainder);
   }
-  return { width: textBBox.width, height: textBBox.height, text: fitLine };
+
+  return {
+    width: textBBox.width,
+    height: textBBox.height,
+    text: fitLine
+  };
 }
 
 
@@ -246,6 +260,8 @@ Text.prototype.layoutText = function(text, options) {
       padding = parsePadding(options.padding !== undefined ? options.padding : this._config.padding),
       fitBox = options.fitBox || false;
 
+  var lineHeight = getLineHeight(style);
+
   var lines = text.split(/\r?\n/g),
       layouted = [];
 
@@ -265,33 +281,40 @@ Text.prototype.layoutText = function(text, options) {
   }
 
   var totalHeight = reduce(layouted, function(sum, line, idx) {
-    return sum + line.height;
+    return sum + (lineHeight || line.height);
   }, 0);
 
   var maxLineWidth = reduce(layouted, function(sum, line, idx) {
     return line.width > sum ? line.width : sum;
   }, 0);
 
   // the y position of the next line
-  var y, x;
+  var y;
 
   switch (align.vertical) {
   case 'middle':
-    y = (box.height - totalHeight) / 2 - layouted[0].height / 4;
+    y = (box.height - totalHeight) / 2;
     break;
 
   default:
     y = padding.top;
   }
 
+  // magic number initial offset
+  y -= (lineHeight || layouted[0].height) / 4;
+
+
   var textElement = svgCreate('text');
 
   svgAttr(textElement, style);
 
   // layout each line taking into account that parent
   // shape might resize to fit text size
   forEach(layouted, function(line) {
-    y += line.height;
+
+    var x;
+
+    y += (lineHeight || line.height);
 
     switch (align.horizontal) {
     case 'left':
@@ -329,3 +352,10 @@ Text.prototype.layoutText = function(text, options) {
     element: textElement
   };
 };
+
+
+function getLineHeight(style) {
+  if ('fontSize' in style && 'lineHeight' in style) {
+    return style.lineHeight * parseInt(style.fontSize, 10);
+  }
+}

test/spec/features/popup-menu/PopupMenuSpec.js

@@ -317,8 +317,6 @@ describe('features/popup', function() {
         popupMenu.open({}, 'menu', { x: 100, y: 100 });
 
         // then
-        console.log(popupMenu._current);
-
         expect(popupMenu._current).to.exist;
         expect(popupMenu._current.headerEntries[0].id).to.eql('entry1');
         expect(popupMenu._current.entries[0].id).to.eql('entry2');
@@ -337,8 +335,6 @@ describe('features/popup', function() {
         popupMenu.open({}, 'better-menu', { x: 100, y: 100 });
 
         // then
-        console.log(popupMenu._current);
-
         expect(popupMenu._current).to.exist;
         expect(popupMenu._current.headerEntries[0].id).to.eql('entryA');
         expect(popupMenu._current.entries[0].id).to.eql('entryB');

test/spec/util/TextSpec.js

@@ -44,14 +44,16 @@ import TextUtil from 'lib/util/Text';
 import TestContainer from 'mocha-test-container-support';
 
 
-describe('Text', function() {
+describe('util - Text', function() {
 
   var container;
 
   var options = {
     size: { width: 100 },
     padding: 0,
-    style: { fontSize: '14px' }
+    style: {
+      fontSize: '14px'
+    }
   };
 
   var textUtil = new TextUtil(options);
@@ -132,7 +134,7 @@ describe('Text', function() {
       var text = createText(container, label, { box: { width: 150, height: 100 } });
 
       expect(text).to.exist;
-      expect(toFitBBox(text, { x: 33, y: 0, width: 84, height: 30 })).to.be.true;
+      expect(toFitBBox(text, { x: 33, y: -2, width: 84, height: 30 })).to.be.true;
     });
 
 
@@ -145,7 +147,7 @@ describe('Text', function() {
       var text = createText(container, label, { box: { width: 0, height: 0 } });
 
       expect(text).to.exist;
-      expect(toFitBBox(text, { x: -1, y: 3, width: 40, height: 320 })).to.be.true;
+      expect(toFitBBox(text, { x: -1, y: -2, width: 40, height: 320 })).to.be.true;
     });
 
 
@@ -158,7 +160,7 @@ describe('Text', function() {
       var text = createText(container, label, { box: { width: 25, height: 25 } });
 
       expect(text).to.exist;
-      expect(toFitBBox(text, { x: -1, y: 3, width: 40, height: 230 })).to.be.true;
+      expect(toFitBBox(text, { x: -1, y: -2, width: 40, height: 230 })).to.be.true;
     });
 
 
@@ -177,7 +179,7 @@ describe('Text', function() {
       svgAttr(container, 'display', '');
 
       expect(text).to.exist;
-      expect(toFitBBox(text, { x: 33, y: 0, width: 84, height: 30 })).to.be.true;
+      expect(toFitBBox(text, { x: 33, y: -2, width: 84, height: 30 })).to.be.true;
     });
 
 
@@ -206,7 +208,7 @@ describe('Text', function() {
         var text = createText(container, label, { box: { width: 150, height: 100 } });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 160, height: 70 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 160, height: 70 })).to.be.true;
       });
 
 
@@ -219,7 +221,7 @@ describe('Text', function() {
         var text = createText(container, label, { box: { width: 150, height: 100 } });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 160, height: 70 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 160, height: 70 })).to.be.true;
       });
 
 
@@ -232,7 +234,7 @@ describe('Text', function() {
         var text = createText(container, label, { box: { width: 150, height: 100 } });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 150, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 150, height: 100 })).to.be.true;
       });
 
 
@@ -266,7 +268,7 @@ describe('Text', function() {
         });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 100, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 100, height: 100 })).to.be.true;
       });
 
 
@@ -279,7 +281,7 @@ describe('Text', function() {
         var text = createText(container, label, { box: { width: 150, height: 100 } });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 2, y: 0, width: 150, height: 105 })).to.be.true;
+        expect(toFitBBox(text, { x: 2, y: -2, width: 150, height: 105 })).to.be.true;
       });
 
 
@@ -311,7 +313,7 @@ describe('Text', function() {
         });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 100, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 100, height: 100 })).to.be.true;
       });
 
 
@@ -380,7 +382,7 @@ describe('Text', function() {
         });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 150, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 150, height: 100 })).to.be.true;
       });
 
 
@@ -465,7 +467,7 @@ describe('Text', function() {
         });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 102, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 102, height: 100 })).to.be.true;
       });
 
 
@@ -477,7 +479,7 @@ describe('Text', function() {
           fill: 'fuchsia',
           fontWeight: 'bold',
           fontFamily: 'Arial',
-          fontSize: '20pt'
+          fontSize: '28px'
         };
 
         // when
@@ -488,7 +490,55 @@ describe('Text', function() {
         });
 
         expect(text).to.exist;
-        expect(toFitBBox(text, { x: 0, y: 0, width: 100, height: 100 })).to.be.true;
+        expect(toFitBBox(text, { x: 0, y: -2, width: 100, height: 100 })).to.be.true;
+      });
+
+
+      it('custom line-height / center-top', function() {
+
+        // given
+        var label = 'I am a style';
+        var style = {
+          fill: 'fuchsia',
+          fontWeight: 'bold',
+          fontFamily: 'Arial',
+          fontSize: '20px',
+          lineHeight: 3
+        };
+
+        // when
+        var text = createText(container, label, {
+          box: { width: 100, height: 100 },
+          style: style,
+          align: 'center-top'
+        });
+
+        expect(text).to.exist;
+        expect(toFitBBox(text, { x: 12, y: 20, width: 85, height: 95 })).to.be.true;
+      });
+
+
+      it('custom line-height / center-middle', function() {
+
+        // given
+        var label = 'I am a style';
+        var style = {
+          fill: 'fuchsia',
+          fontWeight: 'bold',
+          fontFamily: 'Arial',
+          fontSize: '20px',
+          lineHeight: 3
+        };
+
+        // when
+        var text = createText(container, label, {
+          box: { width: 100, height: 100 },
+          style: style,
+          align: 'center-middle'
+        });
+
+        expect(text).to.exist;
+        expect(toFitBBox(text, { x: 13, y: 10, width: 80, height: 90 })).to.be.true;
       });
 
     });