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

bpmn-io · May 28, 2018 · 5b49b6e · 5b49b6e
1 parent e0e3983
commit 5b49b6e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/lib/util/Text.js b/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
@@ -246,6 +255,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,7 +276,7 @@ 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) {
@@ -291,7 +302,8 @@ Text.prototype.layoutText = function(text, options) {
   // layout each line taking into account that parent
   // shape might resize to fit text size
   forEach(layouted, function(line) {
-    y += line.height;
+
+    y += (lineHeight || line.height);
 
     switch (align.horizontal) {
     case 'left':
@@ -329,3 +341,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);
+  }
+}
diff --git a/test/spec/util/TextSpec.js b/test/spec/util/TextSpec.js
@@ -51,7 +51,9 @@ describe('Text', function() {
   var options = {
     size: { width: 100 },
     padding: 0,
-    style: { fontSize: '14px' }
+    style: {
+      fontSize: '14px'
+    }
   };
 
   var textUtil = new TextUtil(options);
@@ -491,6 +493,30 @@ describe('Text', function() {
         expect(toFitBBox(text, { x: 0, y: 0, 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: 18, y: 38, width: 68, height: 90 })).to.be.true;
+      });
+
     });
 
   });