Add wrapLines helper

This helper break long lines into an array of lines where no line is longer than the given maximum line length.

It’s a very naive implementation that split lines into words/tokens at whitespace and adds tokens to the current line greedily. It would likely produce suboptimal solutions when used with long paragraphs of text or wider lines. Neither is the case for us, so I think we’d be good to go with this instead of pulling in an additional dependency or implementing something more sophisticated.

Author: tillprochaska

src/components/NetworkDiagram/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './filterVerticesByText'
 export * from './interactionModes'
 export * from './exportSvg'
+export * from './wrapLines';

src/components/NetworkDiagram/utils/wrapLines.test.ts

@@ -0,0 +1,25 @@
+import { wrapLines } from './wrapLines';
+
+describe('wrapLines', () => {
+  it('doesnt break text shorter than maximum line length', () => {
+    const lines = wrapLines('a very short line', 25);
+    expect(lines).toEqual(['a very short line']);
+  });
+
+  it('breaks text longer than maximum line length', () => {
+    const lines = wrapLines('a very very very very long line', 25);
+    expect(lines).toEqual([
+        'a very very very very',
+        'long line',
+    ]);
+  });
+
+  it('breaks lines after punctuation', () => {
+    const lines = wrapLines('This is the 1st sentence. And this is the 2nd sentence.', 25);
+    expect(lines).toEqual([
+        'This is the 1st sentence.',
+        'And this is the 2nd',
+        'sentence.',
+    ]);
+  });
+});

src/components/NetworkDiagram/utils/wrapLines.ts

@@ -0,0 +1,18 @@
+export function wrapLines(text: string, maxLength: number): string[] {
+  const words = text.split(/\s/);
+  const lines = [];
+  let currentLine = [];
+
+  for (const word of words) {
+    if ([...currentLine, word].join(' ').length > maxLength) {
+      lines.push(currentLine);
+      currentLine = [];
+    }
+
+    currentLine.push(word);
+  }
+
+  lines.push(currentLine);
+
+  return lines.map(line => line.join(' '));
+}