Updated desktop filename segmentation emthod

web/desktop.system

@@ -995,7 +995,7 @@
         </div>
     </div>
     <div>
-        <canvas id="textWidthCanvas"></canvas>
+        <canvas id="textWidthCanvas" style="display:none;"></canvas>
     </div>
     <script>
 
@@ -3111,20 +3111,63 @@
             }
             
 
-            var estimatedFilenameSize = getTextPixelWidth(filename);
-            console.log(filename, estimatedFilenameSize);
-          
-            shortenedName = filename;
-            if (type != "shortcut" && estimatedFilenameSize > (maxlength * 2 - 10)) {
-                var newFilenameLength = getTextPixelWidth(shortenedName + "...");
-                while (newFilenameLength >= (maxlength * 2 - 10)){
-                    shortenedName = shortenedName.substr(0, shortenedName.length - 1);
-                    newFilenameLength = getTextPixelWidth(shortenedName + "...");
-                    console.log(shortenedName, newFilenameLength);
+            var estimatedFilenameSize = 0;
+            if (type == "shortcut"){
+                estimatedFilenameSize = getTextPixelWidth(shortenedName);
+            }else{
+                estimatedFilenameSize = getTextPixelWidth(filename);
+                shortenedName = filename;
+                if (estimatedFilenameSize > (maxlength * 2 - 10)) {
+                    //This name is too long to fit inside two lines
+                    var newFilenameLength = getTextPixelWidth(shortenedName + "...");
+                    while (newFilenameLength >= (maxlength * 2 - 10)){
+                        shortenedName = shortenedName.substr(0, shortenedName.length - 1);
+                        newFilenameLength = getTextPixelWidth(shortenedName + "...");
+                    }
+
+                    shortenedName = shortenedName + "...";
+                }
+            }
+
+            if (estimatedFilenameSize < (maxlength * 2 - 10)  && estimatedFilenameSize > (maxlength - 5) && shortenedName.indexOf(" ") > 0){
+                //This is short enough to fit inside two lines and it contains space
+                //Try to see if there is a combination of splitting that fit inside two lines
+                var filenameSegments = shortenedName.split(" ");
+                var segEnd = 1;
+                var currentSegmentText = filenameSegments[0];
+                var currentSegmentWidth = getTextPixelWidth(currentSegmentText);
+                var spaceWidth = getTextPixelWidth(" ");
+                while(segEnd < filenameSegments.length && (currentSegmentWidth + spaceWidth)  < (maxlength - 5)){
+                    //When it is not the last segment && can still fit more segment into current line
+                    currentSegmentText = currentSegmentText + " " + filenameSegments[segEnd];
+                    console.log(currentSegmentText, getTextPixelWidth(currentSegmentText));
+                    currentSegmentWidth = getTextPixelWidth(currentSegmentText);
+                    segEnd++;
+                }
+                //Back trace one segment
+                segEnd--;
+
+                //Build the filename segmentation
+                var line1 = "";
+                var line2 = "";
+                for (var i = 0; i < segEnd; i++){
+                    line1 += filenameSegments[i] + " ";
+                }
+                for (var i = segEnd; i < filenameSegments.length; i++){
+                    line2 += filenameSegments[i] + " ";
                 }
 
-                shortenedName = shortenedName + "...";
+                line1 = line1.trim();
+                line2 = line2.trim();
+                if (line1 != "" && line1 != ""){
+                    shortenedName = line1 + `<br>` + line2;
+                }else if (line1 == ""){
+                    shortenedName = line2;
+                }else if (line2 == ""){
+                    shortenedName = line1;
+                }
             }
+
             var compressedFiledata = ao_module_utils.objectToAttr(filedata);
             if (updateMode){
                 //Update the content that already exists for the same filepath object