From 0835d456dc76ee20be80dfe9bf91027d80d00ed6 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Fri, 30 Aug 2024 21:01:46 +0800
Subject: [PATCH] gpui: Fix text ellipsis appearing even the flex element has
 space (#17149)

Release Notes:

- N/A

There was a calculation bug before. When we added `text_ellipsis` to the
flex element, it would always show ellipsis no matter how long it was.

Actually we can't use `flex` and `text_ellipsis` at same time, the CSS
also not support this. But this bug will let user confuse.

### Before

<img width="731" alt="image"
src="https://github.com/user-attachments/assets/b7d60017-6785-45f5-8b40-dd5efa154a1e">

### After

<img width="521" alt="image"
src="https://github.com/user-attachments/assets/a3117793-284e-48d4-8c15-059fe61abe60">
---
 crates/gpui/examples/text_wrapper.rs        | 30 +++++++++++++++++++++
 crates/gpui/src/text_system/line_wrapper.rs | 17 +++++++++---
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/crates/gpui/examples/text_wrapper.rs b/crates/gpui/examples/text_wrapper.rs
index 37902f2dd8be7562e96838ea65b4eec04c6ff094..063d60d1983d795025d4f164fe142fdea5c7c092 100644
--- a/crates/gpui/examples/text_wrapper.rs
+++ b/crates/gpui/examples/text_wrapper.rs
@@ -13,6 +13,36 @@ impl Render for HelloWorld {
             .p_2()
             .gap_2()
             .bg(gpui::white())
+            .child(
+                div()
+                    .flex()
+                    .flex_row()
+                    .gap_2()
+                    .child(
+                        div()
+                            .flex()
+                            .border_1()
+                            .border_color(gpui::red())
+                            .text_ellipsis()
+                            .child("longer text in flex 1"),
+                    )
+                    .child(
+                        div()
+                            .flex()
+                            .border_1()
+                            .border_color(gpui::red())
+                            .text_ellipsis()
+                            .child("short flex"),
+                    )
+                    .child(
+                        div()
+                            .overflow_hidden()
+                            .border_1()
+                            .border_color(gpui::red())
+                            .text_ellipsis()
+                            .child("A short text in normal div"),
+                    ),
+            )
             .child(
                 div()
                     .text_xl()
diff --git a/crates/gpui/src/text_system/line_wrapper.rs b/crates/gpui/src/text_system/line_wrapper.rs
index 229dc3fc02fa9431d2ac9abf3f09f0f452f2585a..31e852afdf5178aeb5e06adfb0c1fcd46980e3a1 100644
--- a/crates/gpui/src/text_system/line_wrapper.rs
+++ b/crates/gpui/src/text_system/line_wrapper.rs
@@ -106,18 +106,29 @@ impl LineWrapper {
         ellipsis: Option<&str>,
     ) -> SharedString {
         let mut width = px(0.);
+        let mut ellipsis_width = px(0.);
         if let Some(ellipsis) = ellipsis {
             for c in ellipsis.chars() {
-                width += self.width_for_char(c);
+                ellipsis_width += self.width_for_char(c);
             }
         }
 
         let mut char_indices = line.char_indices();
+        let mut truncate_ix = 0;
         for (ix, c) in char_indices {
+            if width + ellipsis_width <= truncate_width {
+                truncate_ix = ix;
+            }
+
             let char_width = self.width_for_char(c);
             width += char_width;
-            if width > truncate_width {
-                return SharedString::from(format!("{}{}", &line[..ix], ellipsis.unwrap_or("")));
+
+            if width.floor() > truncate_width {
+                return SharedString::from(format!(
+                    "{}{}",
+                    &line[..truncate_ix],
+                    ellipsis.unwrap_or("")
+                ));
             }
         }