editor: Make `TextAlign::Center` and `TextAlign::Right` work (#45417)

Closes https://github.com/zed-industries/zed/issues/43208 This PR essentially unblocks the editable number field. The function that shapes editor lines was hard-coding text alignment to the left, meaning that whatever different alignment we'd pass through `EditorStyles`would be ignored. To solve this, I just added a text align and align width fields to the line paint function and updated all call sites keeping the default configuration. Had to also add an `alignment_offset()` helper to make sure the cursor positioning, the selection background element, and the click-to-focus functionality were kept in-sync with the non-left aligned editor. Then... the big star of the show here is being able to add the `mode` method to the number field, which uses `TextAlign::Center`, thus making it work as we designed it to work. https://github.com/user-attachments/assets/3539c976-d7bf-4d94-8188-a14328f94fbf Next up, is turning the number filed to edit mode where applicable. Release Notes: - Fixed a bug where different text alignment configurations (i.e., center and right-aligned) wouldn't take effect in editors.

Danilo Leal committed 10 months ago

Commit 0facdfa1 parent 58461375 files · +164 −50Browse files

Unified · Split

5 files

crates/editor/src/element.rs +86 −20
crates/gpui/examples/input.rs +9 −2
crates/gpui/src/text_system/line.rs +8 −4
crates/terminal_view/src/terminal_element.rs +16 −3
crates/ui_input/src/number_field.rs +45 −21

crates/editor/src/element.rs+86−20

     KeybindingKeystroke, Length, Modifiers, ModifiersChangedEvent, MouseButton, MouseClickEvent,
     MouseDownEvent, MouseMoveEvent, MousePressureEvent, MouseUpEvent, PaintQuad, ParentElement,
     Pixels, PressureStage, ScrollDelta, ScrollHandle, ScrollWheelEvent, ShapedLine, SharedString,
-    Size, StatefulInteractiveElement, Style, Styled, TextRun, TextStyleRefinement, WeakEntity,
+    Size, StatefulInteractiveElement, Style, Styled, TextAlign, TextRun, TextStyleRefinement,
-    Window, anchored, deferred, div, fill, linear_color_stop, linear_gradient, outline, point, px,
+    WeakEntity, Window, anchored, deferred, div, fill, linear_color_stop, linear_gradient, outline,
-    quad, relative, size, solid_background, transparent_black,
+    point, px, quad, relative, size, solid_background, transparent_black,
 };
 use itertools::Itertools;
 use language::{IndentGuideSettings, language_settings::ShowWhitespaceSetting};
                         [cursor_position.row().minus(visible_display_row_range.start) as usize];
                     let cursor_column = cursor_position.column() as usize;
-                    let cursor_character_x = cursor_row_layout.x_for_index(cursor_column);
+                    let cursor_character_x = cursor_row_layout.x_for_index(cursor_column)
-                    let mut block_width =
+                        + cursor_row_layout
-                        cursor_row_layout.x_for_index(cursor_column + 1) - cursor_character_x;
+                            .alignment_offset(self.style.text.text_align, text_hitbox.size.width);
+                    let cursor_next_x = cursor_row_layout.x_for_index(cursor_column + 1)
+                        + cursor_row_layout
+                            .alignment_offset(self.style.text.text_align, text_hitbox.size.width);
+                    let mut block_width = cursor_next_x - cursor_character_x;
                     if block_width == Pixels::ZERO {
                         block_width = em_advance;
                     }
                     let color = cx.theme().colors().editor_hover_line_number;
                     let line = self.shape_line_number(shaped_line.text.clone(), color, window);
-                    line.paint(hitbox.origin, line_height, window, cx).log_err()
+                    line.paint(
+                        hitbox.origin,
+                        line_height,
+                        TextAlign::Left,
+                        None,
+                        window,
+                        cx,
+                    )
+                    .log_err()
                 } else {
                     shaped_line
-                        .paint(hitbox.origin, line_height, window, cx)
+                        .paint(
+                            hitbox.origin,
+                            line_height,
+                            TextAlign::Left,
+                            None,
+                            window,
+                            cx,
+                        )
                         .log_err()
                 }) else {
                     continue;
                     .map(|row| {
                         let line_layout =
                             &layout.position_map.line_layouts[row.minus(start_row) as usize];
+                        let alignment_offset =
+                            line_layout.alignment_offset(layout.text_align, layout.content_width);
                         HighlightedRangeLine {
                             start_x: if row == range.start.row() {
                                 layout.content_origin.x
                                     + Pixels::from(
                                         ScrollPixelOffset::from(
-                                            line_layout.x_for_index(range.start.column() as usize),
+                                            line_layout.x_for_index(range.start.column() as usize)
+                                                + alignment_offset,
                                         ) - layout.position_map.scroll_pixel_position.x,
                                     )
                             } else {
-                                layout.content_origin.x
+                                layout.content_origin.x + alignment_offset
                                     - Pixels::from(layout.position_map.scroll_pixel_position.x)
                             },
                             end_x: if row == range.end.row() {
                                 layout.content_origin.x
                                     + Pixels::from(
                                         ScrollPixelOffset::from(
-                                            line_layout.x_for_index(range.end.column() as usize),
+                                            line_layout.x_for_index(range.end.column() as usize)
+                                                + alignment_offset,
                                         ) - layout.position_map.scroll_pixel_position.x,
                                     )
                             } else {
                                     ScrollPixelOffset::from(
                                         layout.content_origin.x
                                             + line_layout.width
+                                            + alignment_offset
                                             + line_end_overshoot,
                                     ) - layout.position_map.scroll_pixel_position.x,
                                 )
         for fragment in &self.fragments {
             match fragment {
                 LineFragment::Text(line) => {
-                    line.paint(fragment_origin, line_height, window, cx)
+                    line.paint(
-                        .log_err();
+                        fragment_origin,
+                        line_height,
+                        layout.text_align,
+                        Some(layout.content_width),
+                        window,
+                        cx,
+                    )
+                    .log_err();
                     fragment_origin.x += line.width;
                 }
                 LineFragment::Element { size, .. } => {
         for fragment in &self.fragments {
             match fragment {
                 LineFragment::Text(line) => {
-                    line.paint_background(fragment_origin, line_height, window, cx)
+                    line.paint_background(
-                        .log_err();
+                        fragment_origin,
+                        line_height,
+                        layout.text_align,
+                        Some(layout.content_width),
+                        window,
+                        cx,
+                    )
+                    .log_err();
                     fragment_origin.x += line.width;
                 }
                 LineFragment::Element { size, .. } => {
                 [token_offset, token_end_offset],
                 Box::new(move |window: &mut Window, cx: &mut App| {
                     invisible_symbol
-                        .paint(origin, line_height, window, cx)
+                        .paint(origin, line_height, TextAlign::Left, None, window, cx)
                         .log_err();
                 }),
             )
         None
     }
+    pub fn alignment_offset(&self, text_align: TextAlign, content_width: Pixels) -> Pixels {
+        let line_width = self.width;
+        match text_align {
+            TextAlign::Left => px(0.0),
+            TextAlign::Center => (content_width - line_width) / 2.0,
+            TextAlign::Right => content_width - line_width,
+        }
+    }
 }
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
                         em_width,
                         em_advance,
                         snapshot,
+                        text_align: self.style.text.text_align,
+                        content_width: text_hitbox.size.width,
                         gutter_hitbox: gutter_hitbox.clone(),
                         text_hitbox: text_hitbox.clone(),
                         inline_blame_bounds: inline_blame_layout
                         sticky_buffer_header,
                         sticky_headers,
                         expand_toggles,
+                        text_align: self.style.text.text_align,
+                        content_width: text_hitbox.size.width,
                     }
                 })
             })
     sticky_buffer_header: Option<AnyElement>,
     sticky_headers: Option<StickyHeaders>,
     document_colors: Option<(DocumentColorsRenderMode, Vec<(Range<DisplayPoint>, Hsla)>)>,
+    text_align: TextAlign,
+    content_width: Pixels,
 }
 struct StickyHeaders {
                 gutter_origin.x + gutter_width - gutter_right_padding - line_number.width,
                 gutter_origin.y,
             );
-            line_number.paint(origin, line_height, window, cx).log_err();
+            line_number
+                .paint(origin, line_height, TextAlign::Left, None, window, cx)
+                .log_err();
         }
     }
 }
     pub visible_row_range: Range<DisplayRow>,
     pub line_layouts: Vec<LineWithInvisibles>,
     pub snapshot: EditorSnapshot,
+    pub text_align: TextAlign,
+    pub content_width: Pixels,
     pub text_hitbox: Hitbox,
     pub gutter_hitbox: Hitbox,
     pub inline_blame_bounds: Option<(Bounds<Pixels>, BufferId, BlameEntry)>,
             .line_layouts
             .get(row as usize - scroll_position.y as usize)
         {
-            if let Some(ix) = line.index_for_x(x) {
+            let alignment_offset = line.alignment_offset(self.text_align, self.content_width);
+            let x_relative_to_text = x - alignment_offset;
+            if let Some(ix) = line.index_for_x(x_relative_to_text) {
                 (ix as u32, px(0.))
             } else {
-                (line.len as u32, px(0.).max(x - line.width))
+                (line.len as u32, px(0.).max(x_relative_to_text - line.width))
             }
         } else {
             (0, x)
         if let Some(block_text) = &self.block_text {
             block_text
-                .paint(self.origin + origin, self.line_height, window, cx)
+                .paint(
+                    self.origin + origin,
+                    self.line_height,
+                    TextAlign::Left,
+                    None,
+                    window,
+                    cx,
+                )
                 .log_err();
         }
     }

crates/gpui/examples/input.rs+9−2

             window.paint_quad(selection)
         }
         let line = prepaint.line.take().unwrap();
-        line.paint(bounds.origin, window.line_height(), window, cx)
+        line.paint(
-            .unwrap();
+            bounds.origin,
+            window.line_height(),
+            gpui::TextAlign::Left,
+            None,
+            window,
+            cx,
+        )
+        .unwrap();
         if focus_handle.is_focused(window)
             && let Some(cursor) = prepaint.cursor.take()

crates/gpui/src/text_system/line.rs+8−4

         &self,
         origin: Point<Pixels>,
         line_height: Pixels,
+        align: TextAlign,
+        align_width: Option<Pixels>,
         window: &mut Window,
         cx: &mut App,
     ) -> Result<()> {
             origin,
             &self.layout,
             line_height,
-            TextAlign::default(),
+            align,
-            None,
+            align_width,
             &self.decoration_runs,
             &[],
             window,
         &self,
         origin: Point<Pixels>,
         line_height: Pixels,
+        align: TextAlign,
+        align_width: Option<Pixels>,
         window: &mut Window,
         cx: &mut App,
     ) -> Result<()> {
             origin,
             &self.layout,
             line_height,
-            TextAlign::default(),
+            align,
-            None,
+            align_width,
             &self.decoration_runs,
             &[],
             window,

crates/terminal_view/src/terminal_element.rs+16−3

                 std::slice::from_ref(&self.style),
                 Some(dimensions.cell_width),
             )
-            .paint(pos, dimensions.line_height, window, cx);
+            .paint(
+                pos,
+                dimensions.line_height,
+                gpui::TextAlign::Left,
+                None,
+                window,
+                cx,
+            );
     }
 }
                                     }],
                                     None
                                 );
-                                shaped_line
+                                shaped_line.paint(
-                                    .paint(ime_position, layout.dimensions.line_height, window, cx)
+                                    ime_position,
+                                    layout.dimensions.line_height,
+                                    gpui::TextAlign::Left,
+                                    None,
+                                    window,
+                                    cx,
+                                )
                                     .log_err();
                             }

crates/ui_input/src/number_field.rs+45−21

@@ -5,8 +5,11 @@ use std::{ · 4 unmodified lines
5	str::FromStr,	5	str::FromStr,
6	};	6	};
7		7
8	use editor::{Editor, EditorStyle};	8	use editor::Editor;
9	use gpui::{ClickEvent, Entity, FocusHandle, Focusable, FontWeight, Modifiers};	9	use gpui::{
		10	ClickEvent, Entity, FocusHandle, Focusable, FontWeight, Modifiers, TextAlign,
		11	TextStyleRefinement,
		12	};
10		13
11	use settings::{CenteredPaddingSettings, CodeFade, DelayMs, InactiveOpacity, MinimumContrast};	14	use settings::{CenteredPaddingSettings, CodeFade, DelayMs, InactiveOpacity, MinimumContrast};
12	use ui::prelude::*;	15	use ui::prelude::*;
@@ -309,6 +312,11 @@ impl<T: NumberFieldType> NumberField<T> { · 296 unmodified lines
309	self	312	self
310	}	313	}
311		314
		315	pub fn mode(self, mode: NumberFieldMode, cx: &mut App) -> Self {
		316	self.mode.write(cx, mode);
		317	self
		318	}
		319
312	pub fn on_reset(	320	pub fn on_reset(
313	mut self,	321	mut self,
314	on_reset: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,	322	on_reset: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
@@ -451,9 +459,11 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> { · 136 unmodified lines
451	\|window, cx\| {	459	\|window, cx\| {
452	let previous_focus_handle = window.focused(cx);	460	let previous_focus_handle = window.focused(cx);
453	let mut editor = Editor::single_line(window, cx);	461	let mut editor = Editor::single_line(window, cx);
454	let mut style = EditorStyle::default();	462
455	style.text.text_align = gpui::TextAlign::Right;	463	editor.set_text_style_refinement(TextStyleRefinement {
456	editor.set_style(style, window, cx);	464	text_align: Some(TextAlign::Center),
		465	..Default::default()
		466	});
457		467
458	editor.set_text(format!("{}", self.value), window, cx);	468	editor.set_text(format!("{}", self.value), window, cx);
459	cx.on_focus_out(&editor.focus_handle(cx), window, {	469	cx.on_focus_out(&editor.focus_handle(cx), window, {
@@ -555,22 +565,36 @@ impl Component for NumberField<usize> { · 95 unmodified lines
555	Some(	565	Some(
556	v_flex()	566	v_flex()
557	.gap_6()	567	.gap_6()
558	.children(vec![single_example(	568	.children(vec![
559	"Default Numeric Stepper",	569	single_example(
560	NumberField::new(	570	"Default Number Field",
561	"numeric-stepper-component-preview",	571	NumberField::new("number-field", *stepper_example.read(cx), window, cx)
562	*stepper_example.read(cx),	572	.on_change({
563	window,	573	let stepper_example = stepper_example.clone();
564	cx,	574	move \|value, _, cx\| stepper_example.write(cx, *value)
565	)	575	})
566	.on_change({	576	.min(1.0)
567	let stepper_example = stepper_example.clone();	577	.max(100.0)
568	move \|value, _, cx\| stepper_example.write(cx, *value)	578	.into_any_element(),
569	})	579	),
570	.min(1.0)	580	single_example(
571	.max(100.0)	581	"Read-Only Number Field",
572	.into_any_element(),	582	NumberField::new(
573	)])	583	"editable-number-field",
		584	*stepper_example.read(cx),
		585	window,
		586	cx,
		587	)
		588	.on_change({
		589	let stepper_example = stepper_example.clone();
		590	move \|value, _, cx\| stepper_example.write(cx, *value)
		591	})
		592	.min(1.0)
		593	.max(100.0)
		594	.mode(NumberFieldMode::Edit, cx)
		595	.into_any_element(),
		596	),
		597	])
574	.into_any_element(),	598	.into_any_element(),
575	)	599	)
576	}	600	}