Texts splitted

BackendServers/WebServer/index.html

@@ -51,9 +51,9 @@
     <div id="contributors" class="credits">
         <p>Superalgos is <span class="red">open-source</span> and <span class="red">free</span> thanks to the generosity of contributors:</p>
         <p>Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller, Eduardo Remis, 
-            Jeff Braun, rico4dev, Barry Low, Nikola Bjelogrlic, Hirajin Koizuko, Francisco J. Santillán, Viktoria B., Guillermo V., Daniel J., 
-            Javier A., Gustavo J., Romina GS, Pedro P., Thais M., Loui M., Natalia M., Bashar A., Carlos V., Diego M., 
-            Sebastian E., Bogdan P., Marko V., Igor S., Niksa K., Rodrigo M. and Nicanor M.</p>
+            Jeff Braun, rico4dev, 9808Bus, Barry Low, Nikola Bjelogrlic, Hirajin Koizuko, Francisco J. Santillán, Viktoria B., Guillermo V., Daniel J., 
+            Javier A., Gustavo J., Romina GS, Pedro P., Thais M., Andrey M., Loui M., Natalia M., Bashar A., Carlos V., Diego M., 
+            Sebastian E., Bogdan P., Marko V., Igor S., Niksa K., Rodrigo M., Nicanor M., Alejandro P., Mateo H., Lan T., Leon A., Uroš R., Filip M., Vladimir J. and Pavle B.</p>
         <p><span class="red">Help us keep Superalgos free for all. Become a contributor!</span></p>
     </div>
     <div id="masterApp"></div>

CanvasApp/Utilities.js

@@ -14,7 +14,7 @@ function dynamicDecimals(value, minDecimals) {
     }
     let decimals = 0
     if (value < 1) { decimals = 2 }
-    
+
     if (Math.abs(Math.trunc(value * 10)) < 1) { decimals = 4 }
     if (Math.abs(Math.trunc(value * 100)) < 1) { decimals = 5 }
     if (Math.abs(Math.trunc(value * 1000)) < 1) { decimals = 6 }
@@ -24,8 +24,8 @@ function dynamicDecimals(value, minDecimals) {
     if (Math.abs(Math.trunc(value * 10000000)) < 1) { decimals = 10 }
     if (Math.abs(Math.trunc(value * 100000000000)) < 1) { value = 0; decimals = 0 }
 
-    if (decimals < minDecimals) {decimals = minDecimals}
-   
+    if (decimals < minDecimals) { decimals = minDecimals }
+
     let returnValue = Number(value).toFixed(decimals)
     return returnValue
 }
@@ -99,3 +99,27 @@ function newUniqueId() {
         return v.toString(16)
     })
 }
+
+function splitTextIntoPhrases(text, wordsPerLine) {
+    let splittedLabel = text.split(' ')
+    let phrases = []
+    let phrase = ''
+    let wordCount = 0
+    for (let i = 0; i < splittedLabel.length; i++) {
+        phrase = phrase + splittedLabel[i]
+        wordCount++
+
+        if (i < splittedLabel.length - 1 && wordCount < wordsPerLine) {
+            phrase = phrase + ' '
+        }
+        if (wordCount >= wordsPerLine) {
+            phrases.push(phrase)
+            phrase = ''
+            wordCount = 0
+        }
+    }
+    if (wordCount > 0) {
+        phrases.push(phrase)
+    }
+    return phrases
+}

Integrations/Projects/Superalgos/Spaces/Floating-Space/UiObject.js

@@ -1289,7 +1289,7 @@ function newUiObject() {
             drawPercentage()
             drawStatus()
             thisObject.uiObjectTitle.draw()
-            drawText()
+            drawNodeType()
         }
     }
 
@@ -1370,7 +1370,7 @@ function newUiObject() {
             drawValue()
             drawPercentage()
             drawStatus()
-            drawText()
+            drawNodeType()
 
             if (drawTitle === true) {
                 thisObject.uiObjectTitle.draw()
@@ -1381,7 +1381,7 @@ function newUiObject() {
     function drawChainLine() {
         if (UI.projects.superalgos.spaces.floatingSpace.drawChainLines === false) { return }
         if (thisObject.payload.chainParent === undefined) { return }
-        if (thisObject.payload.chainParent.payload === undefined) {return}
+        if (thisObject.payload.chainParent.payload === undefined) { return }
 
         let targetPoint = {
             x: thisObject.payload.chainParent.payload.floatingObject.container.frame.position.x,
@@ -1532,7 +1532,7 @@ function newUiObject() {
         }
     }
 
-    function drawText() {
+    function drawNodeType() {
         if (isEditorVisible() === true) { return }
         /* Text Follows */
         let position = {
@@ -1580,19 +1580,34 @@ function newUiObject() {
                         y: position.y + radius * 2 / 3 + lineSeparator * 1 + 30
                     }
                 } else {
-                    labelPoint = {
-                        x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
-                        y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 1
+                    /* Split the line into Phrases */
+                    let phrases = splitTextIntoPhrases(label, 2)
+
+                    for (let i = 0; i < phrases.length; i++) {
+                        let phrase = phrases[i]
+                        labelPoint = {
+                            x: position.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
+                            y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * ( 1 + i)  
+                        }
+                        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === false) {
+                            printMessage(phrase)
+                        }
+                    }
+                    if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === false) {
+                        return
                     }
                 }
 
                 if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
                     labelPoint.y = position.y + 50 / 2 + lineSeparator * 2
                 }
+                printMessage(label)
 
-                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-                browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle
-                browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+                function printMessage(text) {
+                    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                    browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle
+                    browserCanvasContext.fillText(text, labelPoint.x, labelPoint.y)
+                }
             }
         }
     }
@@ -1620,10 +1635,10 @@ function newUiObject() {
         if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
             return
         }
-        if (thisObject.codeEditor !== undefined && thisObject.codeEditor.visible === true) {return}
-        if (thisObject.formulaEditor !== undefined && thisObject.formulaEditor.visible === true) {return}
-        if (thisObject.confitionEditor !== undefined && thisObject.confitionEditor.visible === true) {return}
-        if (thisObject.configEditor !== undefined && thisObject.configEditor.visible === true) {return}
+        if (thisObject.codeEditor !== undefined && thisObject.codeEditor.visible === true) { return }
+        if (thisObject.formulaEditor !== undefined && thisObject.formulaEditor.visible === true) { return }
+        if (thisObject.confitionEditor !== undefined && thisObject.confitionEditor.visible === true) { return }
+        if (thisObject.configEditor !== undefined && thisObject.configEditor.visible === true) { return }
 
         /* Text Follows */
         let position = {
@@ -1659,25 +1674,10 @@ function newUiObject() {
 
                 if (thisObject.isOnFocus === true) {
                     /* Split the line into Phrases */
-                    let splittedLabel = label.split(' ')
-                    let phrases = []
-                    let phrase = ''
-                    let wordCount = 0
-                    for (let i = 0; i < splittedLabel.length; i++) {
-                        phrase = phrase + splittedLabel[i] + ' '
-                        wordCount++
-                        if (wordCount > 5) {
-                            phrases.push(phrase)
-                            phrase = ''
-                            wordCount = 0
-                        }
-                    }
-                    if (wordCount > 0) {
-                        phrases.push(phrase)
-                    }
+                    let phrases = splitTextIntoPhrases(label, 5)
 
                     for (let i = 0; i < phrases.length; i++) {
-                        phrase = phrases[i]
+                        let phrase = phrases[i]
                         labelPoint = {
                             x: position.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
                             y: position.y + lineSeparator * (6 - phrases.length + 1 + i) + 30

Integrations/Projects/Superalgos/Spaces/Floating-Space/UiObjectTitle.js

@@ -327,7 +327,7 @@ function newUiObjectTitle() {
                     label = trimTitle(label)
 
                     labelPoint = {
-                        x: 5,
+                        x: -5,
                         y: thisObject.container.frame.height * 0.8
                     }
 
@@ -344,11 +344,41 @@ function newUiObjectTitle() {
                                 return
                             }
                         }
+
+                        printMessage(label, labelPoint)
+                        return
                     }
 
-                    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-                    browserCanvasContext.fillStyle = thisObject.payload.floatingObject.typeStrokeStyle
-                    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+                    if (thisObject.payload.uiObject.isOnFocus === true) {
+                        printMessage(label, labelPoint)
+                        return
+                    }
+
+                    /* Split the line into Phrases */    
+                    const FRAME_WIDTH = (label.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 
+                    label = thisObject.payload.title               
+                    let phrases = splitTextIntoPhrases(label, 2)
+                    let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
+                    
+                    if (phrases.length > 3) {
+                        let a = 1
+                    }
+                    for (let i = 0; i < phrases.length; i++) {
+                        let phrase = phrases[i]
+                        let point = {
+                            x: labelPoint.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO + FRAME_WIDTH / 2, 
+                            y: labelPoint.y - lineSeparator * (phrases.length - 1 - i)
+                        }
+                         
+                        if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === false) {
+                            printMessage(phrase, point)
+                        }
+                    }
+                    function printMessage(text, position) {
+                        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                        browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle
+                        browserCanvasContext.fillText(text, position.x, position.y)
+                    }
                 }
             }
         }
@@ -356,7 +386,7 @@ function newUiObjectTitle() {
 
     function trimTitle(title) {
         if (title === undefined) { return }
-        const MAX_LABEL_LENGTH = 50
+        const MAX_LABEL_LENGTH = 35
         if (title.length > MAX_LABEL_LENGTH) {
             title = title.substring(0, MAX_LABEL_LENGTH) + '...'
         }