feat(util/Text): support soft breaks

* soft breaks ("discretionary hyphens") are taken into account during word splitting * a hyphen is rendered, IF a softbreak becomes an actual break Related to bpmn-io/bpmn-js#1383
bpmn-io · Dec 14, 2020 · 3981c21 · 3981c21
1 parent 6e6f5ce
commit 3981c21
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 4 deletions.
diff --git a/lib/util/Text.js b/lib/util/Text.js
@@ -123,6 +123,8 @@ function fit(lines, fitLine, originalLine, textBBox) {
   };
 }
 
+var SOFT_BREAK = '\u00AD';
+
 
 /**
  * Shortens a line based on spacing and hyphens.
@@ -133,21 +135,23 @@ function fit(lines, fitLine, originalLine, textBBox) {
  * @return {string} the shortened string
  */
 function semanticShorten(line, maxLength) {
-  var parts = line.split(/(\s|-)/g),
+
+  var parts = line.split(/(\s|-|\u00AD)/g),
       part,
       shortenedParts = [],
       length = 0;
 
-  // try to shorten via spaces + hyphens
+  // try to shorten via break chars
   if (parts.length > 1) {
+
     while ((part = parts.shift())) {
       if (part.length + length < maxLength) {
         shortenedParts.push(part);
         length += part.length;
       } else {
 
         // remove previous part, too if hyphen does not fit anymore
-        if (part === '-') {
+        if (part === '-' || part === SOFT_BREAK) {
           shortenedParts.pop();
         }
 
@@ -156,6 +160,13 @@ function semanticShorten(line, maxLength) {
     }
   }
 
+  var last = shortenedParts[shortenedParts.length - 1];
+
+  // translate trailing soft break to actual hyphen
+  if (last && last === SOFT_BREAK) {
+    shortenedParts[shortenedParts.length - 1] = '-';
+  }
+
   return shortenedParts.join('');
 }
 

diff --git a/test/spec/util/TextSpec.js b/test/spec/util/TextSpec.js
@@ -124,7 +124,6 @@ describe('util - Text', function() {
 
   describe('#createText', function() {
 
-
     it('should create simple label', function() {
 
       // given
@@ -255,6 +254,63 @@ describe('util - Text', function() {
       });
 
 
+      it('preformated / soft breaks', function() {
+
+        // given
+        // string contains invisible "soft break characters" => |
+        // Fight Hippopoto|monstro|sesquippe|daliophobia
+        var label = 'Fight Hippopotomonstrosesquippedaliophobia';
+
+        // when
+        var text = createText(container, label, {
+          box: { width: 100, height: 100 },
+          align: 'center-middle',
+          padding: 5
+        });
+
+        expect(text).to.exist;
+        expect(toFitBBox(text, { x: 0, y: 0, width: 100, height: 100 })).to.be.true;
+      });
+
+
+      it('preformated / soft breaks / no break', function() {
+
+        // given
+        // string contains invisible "soft break characters" => |
+        // Fight A|B|C
+        var label = 'Fight ABC';
+
+        // when
+        var text = createText(container, label, {
+          box: { width: 100, height: 100 },
+          align: 'center-middle',
+          padding: 5
+        });
+
+        expect(text).to.exist;
+        expect(toFitBBox(text, { x: 0, y: 35, width: 100, height: 30 })).to.be.true;
+      });
+
+
+      it('preformated / soft breaks / some breaks', function() {
+
+        // given
+        // string contains invisible "soft break characters" => |
+        // Fight A|B|C|D|E|F|G|H|I|J|K
+        var label = 'Fight ABCDEFGHIJK';
+
+        // when
+        var text = createText(container, label, {
+          box: { width: 100, height: 100 },
+          align: 'center-middle',
+          padding: 5
+        });
+
+        expect(text).to.exist;
+        expect(toFitBBox(text, { x: 0, y: 25, width: 100, height: 50 })).to.be.true;
+      });
+
+
       it('mass hyphenated', function() {
 
         // given