Merge pull request #3236 from EliotRagueneau/fix-text-wrap

Keep original separator instead of using space when text-wrapping
cytoscape · Apr 29, 2024 · 3ea4144 · 3ea4144
2 parents 6da4c8e + 8bf33bb
commit 3ea4144
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/debug/init.js b/debug/init.js
@@ -27,7 +27,10 @@ var cy, defaultSty, options;
           'shape': 'round-rectangle',
           'width': 220,
           'height': 60,
-          'corner-radius': 30
+          'corner-radius': 30,
+          "label": "I am a long label over-\u200bflowing my max    width,\n but spa\u200bces are ke\u200bpt",
+          "text-max-width": 100,
+          "text-wrap": "wrap",
         })
       .selector('node#b')
       .style({
@@ -110,7 +113,7 @@ var cy, defaultSty, options;
       .selector('#eh')
         .style({
           'curve-style': 'round-segments',
-          'segment-distances': [ 0  , 50 , 0  , -50, 0  , 0  , 100 ],
+          'segment-distances': [ 0  , 0 , 0  , -50, 0  , 0  , 100 ],
           'segment-weights': [   0.5, 0.6, 0.7, 0.6, 0.5, 0.8, 0.85],
           'segment-radii': [ 50, 100 ],
         })

diff --git a/src/extensions/renderer/base/coord-ele-math/labels.js b/src/extensions/renderer/base/coord-ele-math/labels.js
@@ -362,8 +362,7 @@ BRp.getLabelText = function( ele, prefix ){
     let overflow = ele.pstyle('text-overflow-wrap').value;
     let overflowAny = overflow === 'anywhere';
     let wrappedLines = [];
-    let wordsRegex = /[\s\u200b]+/;
-    let wordSeparator = overflowAny ? '' : ' ';
+    let separatorRegex = /[\s\u200b]+|$/g; // Include end of string to add last word
 
     for( let l = 0; l < lines.length; l++ ){
       let line = lines[ l ];
@@ -378,12 +377,17 @@ BRp.getLabelText = function( ele, prefix ){
       }
 
       if( lineW > maxW ){ // line is too long
-        let words = line.split(wordsRegex);
+        let separatorMatches = line.matchAll(separatorRegex);
         let subline = '';
 
-        for( let w = 0; w < words.length; w++ ){
-          let word = words[ w ];
-          let testLine = subline.length === 0 ? word : subline + wordSeparator + word;
+        let previousIndex = 0;
+        // Add fake match
+        for( let separatorMatch of separatorMatches ){
+          let wordSeparator = separatorMatch[ 0 ];
+          let word = line.substring( previousIndex, separatorMatch.index );
+          previousIndex = separatorMatch.index + wordSeparator.length;
+
+          let testLine = subline.length === 0 ? word : subline + word + wordSeparator;
           let testDims = this.calculateLabelDimensions( ele, testLine );
           let testW = testDims.width;