From fffe509dc36b975c9c14fed6f0cab5ca0d525cfe Mon Sep 17 00:00:00 2001
From: sebeder <23170307+sebeder@users.noreply.github.com>
Date: Tue, 6 Nov 2018 13:14:04 +0100
Subject: [PATCH] Making text multiline (#308)

---
 .../common/truncated-text.component.svg       |  2 +-
 .../common/truncated-text.component.ts        | 60 ++++++++++++++-----
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.svg b/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.svg
index ce27c3449..3dee2652b 100644
--- a/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.svg
+++ b/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.svg
@@ -1 +1 @@
-<svg:text [attr.x]="position.x" [attr.y]="position.y" class="text"       [ngClass]="{'selected': selected, 'centered': centered}">{{adjustedText}}</svg:text>
+<svg:text *ngFor="let line of lines; index as i" [attr.x]="position.x" [attr.y]="position.y + (i * lineHeight)" class="text" [ngClass]="{'selected': selected, 'centered': centered}">{{line}}</svg:text>
diff --git a/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.ts b/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.ts
index b04bfcbd0..a96462419 100644
--- a/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.ts
+++ b/web/src/app/modules/views/main/editors/modules/graphical-editor/components/common/truncated-text.component.ts
@@ -26,27 +26,57 @@ export class TruncatedText {
     @Input()
     public width: number;
 
+    @Input()
+    public height = 30;
+
     @Input()
     public centered = true;
 
-    private _adjustedText: string;
-    public get adjustedText(): string {
-        if (this.stringWidth(this.text) <= this.width) {
-            return this.text;
-        }
-        let ellipsisWidth: number = this.stringWidth(this.ellipsis);
-        for (let i = this.text.length - 1; i >= 0; i--) {
-            let truncatedText: string = this.text.substring(0, i);
-            let widthWithEllipsis: number = this.stringWidth(truncatedText) + ellipsisWidth;
-            if (widthWithEllipsis <= this.width) {
-                this._adjustedText = truncatedText + this.ellipsis;
-                break;
+    public lineHeight = 15;
+
+    public get lines(): string[] {
+        const width = this.width / 10;
+        const numLines = this.height / this.lineHeight;
+        const lineBags: string[][] = [];
+        const wordSep = ' ';
+        const words = this.text.split(wordSep).map(word => this.truncate(word, width, this.ellipsis));
+        let wordIndex = 0;
+        let lineIndex = 0;
+        while (wordIndex < words.length && lineIndex < numLines) {
+            if (lineBags[lineIndex] === undefined) {
+                lineBags[lineIndex] = [];
+            }
+
+            const currentWord = words[wordIndex];
+            const contentLength = lineBags[lineIndex].join(wordSep).length;
+            const contentLengthWithWord = contentLength + (contentLength === 0 ? 0 : wordSep.length) + currentWord.length;
+
+            if (contentLengthWithWord <= width) {
+                lineBags[lineIndex].push(currentWord);
+                wordIndex++;
+            } else {
+                lineIndex++;
             }
         }
-        return this._adjustedText;
+
+        const lines = lineBags.map(words => words.join(wordSep));
+        if (wordIndex < words.length) {
+            lines[lines.length - 1] = this.truncate(lines[lines.length - 1], width, this.ellipsis, wordIndex < words.length);
+        }
+        return lines;
     }
 
-    private stringWidth(str: string): number {
-        return str.length * 10;
+    private truncate(word: string, width: number, ellipsis: string, force = false): string {
+        if (force) {
+            if (word.length + ellipsis.length <= width) {
+                return word + ellipsis;
+            } else {
+                return word.substring(0, width - ellipsis.length) + ellipsis;
+            }
+        }
+        if (word.length > width) {
+            return word.substring(0, width - ellipsis.length) + ellipsis;
+        }
+        return word;
     }
 }